[Material] Xamarin Dev Days Madrid 2017

El evento

El pasado sábado 10 de Junio, tenía lugar en Madrid el Xamarin Dev Days. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de un café o unas pizzas.

El material

Pude participar en el evento con una de las sesiones. Nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin.Forms:

Comenzamos por una introducción de conceptos básicos, primera demo  y terminamos repasando todas las últimas novedades como Forms Embedding o las futuras novedades de Xamarin.Forms 3.0.

Tras las sesiones, realizamos un muy divertido taller donde paso a paso, desarrollamos una aplicación Xamarin.Forms aplicando MVVM y accediendo a una Azure Mobile App.

En cuanto a las demos técnicas realizadas, las tenéis disponible en GitHub:

Ver GitHub

Un día genial de comunidad con grandes momentos que esperamos repetir sin duda!

Más información

[Evento Online] Introducción a Xamarin.IoT

El evento

¿Tienes pensado instalar o tienes instalado Linux en tu dispositivo IoT, usando la flexibilidad y potencia de C#?.

Xamarin IoT permite a los desarrolladores crear aplicaciones de consola, usando IDE’s de primer nivel como son Visual Studio, Visual Studio for Mac/Linux, además de poder ejecutar y debuguear tu aplicación favorita de un dispositivo remoto.

Una charla intensa, donde si el tiempo nos lo permite, intentaremos abordar todos los puntos:

  • Presentación e introducción Xamarin.IoT.
  • Setup de dispositivo.
  • Arquitectura.
  • Ejemplos de uso.
  • Hermes.Mqtt Client/Server.
  • Azure Sql Database + Entity framework.
  • IoTSharp.Components.

A todos estos puntos y a todas las preguntas posibles intentaremos dar solución en esta sesión online!.

El ponente

Tendré la compañía en esta ocasión de Jose Medrano. Jose es desarrollador de software y actualmente trabaja en Xamarin formando parte del equipo de Xamarin Profiler & Xamarin IoT.

Jose Medrano

La fecha

El evento será el próximo Martes, 27 de Junio.

  • 19:00 en España
  • 13:00 en Colombia
  • 12:00 en México Centro
  • 13:30 en Venezuela
  • 15:00 en Chile continental

¿Te apuntas?

Más información

[Evento Online] Xamarin Hol – Módulo V: Mobile DevOps con Visual Studio Team Services y HockeyApp

Introducción

Hace ya un tiempos os hablé del concurso de desarrollo de aplicaciones Xamarin. Microsoft quiere animarte a lanzarte a crear Apps participando en el Hackathon Online que se organizará los próximos 16, 17 y 18 de Junio. Antes de llegar al Hackathon, se está realizando una toma de contacto con Xamarin además de resolver dudas basándonos en el Hand On Lab de Pierce Boggan, “Spent”. 

Spent

En este taller, exploraremos las características y funcionalidad de Xamarin.Forms desde una aplicación para hacer el seguimiento de los gastos.

El evento

Tras publicar los cinco módulos correspondientes al Hand On Lab y tras varios eventos online donde se han repasado los cuatro primeros módulos con grandes compañeros de la comunidad, llega el turno de quinto módulo centrado en procesos de integración continua y distribución continua utilizando VSTS y HockeyApp.

En el evento veremos como crear Builds para aplicaciones Xamarin desde VSTS y desde Mobile Center, como distribuir betas desde HockeyApp o cómo obtener analíticas de uso, información de errores, etc.

¿Te apuntas?

Más información

[Xamarin.Forms] Forms Embedding

Introducción

Cuando tratamos el desarrollo de aplicaciones Xamarin hay algunas preguntas importantes a resolver. Entre ellas, destaca con fuerza, ¿Xamarin Classic o Xamarin.Forms?. Es una pregunta habitual en diferentes charlas de diferentes temáticas, en formación y a la hora de afrontar un nuevo proyecto. La respuesta suele requerir algo de tiempo para analizar muchos aspectos como la interfaz de la aplicación, conocimiento del equipo, etc. Pero…¿y si nos quedamos con las dos opciones?.

¿Qué es Forms Embedding?

Con Xamarin.Forms podemos acceder a cualquier API nativa, podemos crear nuevos controles y acceder a la plataforma con Custom Renders o efectos e incluso podemos incrustar controles nativos con Native Views. Forms Embedding es el nombre asignado a la posibilidad de incrustar cualquier ContentPage de Xamarin.Forms en una aplicación nativa de Android, iOS o Windows.

Forms Embedding

Estará disponible entre el conjunto de novedades de la próxima versión 3.0 de Xamarin.Forms:

  • Mejoras en rendimiento (Fast Renderers y Layout Compression).
  • Nuevas plataformas (GTK#, WPF o MacOS).
  • Native Embedding.
  • XAML Standard.
  • Etc.

Suena interesante, ¿verdad?. Aquellos desarrollos utilizando Xamarin Classic (también llamado Native) se pueden beneficiar de Xamarin.Forms para compartir vistas comunes. Podemos combinar lo mejor de las dos opciones!

Haciendo Forms Embedding ahora

A pesar de llegar como opción en Xamarin.Forms 3.0, podemos hacer Forms Embedding ahora mismo. Sólo necesitamos un poco más de código. Veamos como hacerlo!

Creamos una aplicación Xamarin Classic utilizando una PCL y la plantilla Maestro y detalle:

Nueva App

Gracias a la plantilla tenemos rápidamente una aplicación Xamarin Classic completa:

Plantilla Maestro y detalle

Añadimos un nuevo proyecto, una librería portable (PCL) donde vamos a añadir las vistas Xamarin.Forms totalmente compartidas entre todas las plataformas.

PCL

Un ejemplo muy común de vista que suele tener mucho sentido tener totalmente compartida, es una vista de configuración. Añadimos una nueva ContentPage llamada SettingsView:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsEmbedding.Forms.Views.SettingsView">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin Forms Settings!" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Column="0" Grid.Row="0" Text="Settings 1" />
                <Switch Grid.Column="1" Grid.Row="0" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="1" Text="Settings 2" />
                <Switch Grid.Column="1" Grid.Row="1" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="2" Text="Settings 3" />
                <Switch Grid.Column="1" Grid.Row="2" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="3" Text="Settings 4" />
                <Switch Grid.Column="1" Grid.Row="3" HorizontalOptions="End" />
                <Label Grid.Column="0" Grid.Row="4" Text="Settings 5" />
                <Switch Grid.Column="1" Grid.Row="4" HorizontalOptions="End" />
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

El resultado:

SettingsView

¿Cómo utilizamos esta página desde Android, iOS y Windows?. Lo primero es crear una aplicación Application de tipo Xamarin.Forms.

public class FormsApp : Application
{
     public FormsApp(Type page = null)
     {
         SetMainPage(page);
     }

     public void SetPage(Type page)
     {
         if (page == null) 
         {
             MainPage = new ContentPage();
             return;
         }

         MainPage = (Page)Activator.CreateInstance(page);
     }

     public static Page GetPage<T>() where T : Page 
     {
         return Activator.CreateInstance<T>();
     }
}

Establecemos como MainPage la página pasada como parámetro.

Android

Xamarin.Forms utiliza una actividad de tipo FormsAppCompatActivity donde se realiza la inicialización de Xamarin.Forms y se realiza la carga de la App. Vamos a crear una actividad nueva donde realizar la inicialización requerida de Forms así como,  recibir la vista Xamarin.Forms a mostrar y cargarla en la App.

public class FormsActivity : FormsAppCompatActivity
{
     public static bool IsFormsInitialized;

     protected override void OnCreate(Bundle bundle)
     {
         base.OnCreate(bundle);

         var view = Intent.Extras.GetString("View");
         var viewPath = typeof(FormsApp).Namespace + ".Views." + view;
         var viewType = typeof(FormsApp).Assembly.GetType(viewPath);

         if (!IsFormsInitialized)
         {
             global::Xamarin.Forms.Forms.Init(this, bundle);
             IsFormsInitialized = true;
         }

         LoadApplication(new FormsApp(viewType));
     }
}

Fíjate que esperamos un parámetro View donde tenemos el nombre de la página Xamarin.Forms a mostrar. Partiendo del nombre, obtenemos el tipo de la página y realizamos la inicialización.

Con todo esto, posiblemente tengas ya en mente como vamos a realizar la navegación a la página de Xamarin.Forms:

var intent = new Intent(this, typeof(FormsActivity));
intent.PutExtra("View", "SettingsView");
StartActivity(intent);

Navegamos a una nueva actividad, nuestra actividad FormsActivity, pasandole como parámetro la página Xamarin.Forms a mostrar.

El resultado:

Android

iOS

En el caso de iOS nuestro objetivo será tener un UIViewController al que poder navegar partiendo de la ContentPage de Xamarin.Forms:

var settingsViewControler = FormsApp.GetPage<SettingsView>().CreateViewController();
await PresentViewControllerAsync(settingsViewControler, true);

En Xamarin.Forms contamos con una extensión de páginas que cuenta con el método CreateViewController que nos hace la mayor parte del trabajo. Obtenemos la página de Forms, convertimos a UIViewController y navegamos!

iOS

Windows

Llegamos a UWP. En este caso, Xamarin.Forms, utiliza una vista nativa de tipo FormsWindowsPage donde se realiza la carga de la App. Creamos en el proyecto UWP una nueva página nativa:

<forms:WindowsPage
    x:Class="FormsEmbedding.UWP.Pages.FormsWindowsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormsEmbedding.UWP.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:forms="using:Xamarin.Forms.Platform.UWP"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</forms:WindowsPage>

Reemplazamos el tipo de Page a FormsWindowsPage utilizando el namespaces correspondiente. En el código asociado de la página realizaremos dos acciones necesarias (como ya hicimos en otras plataformas). Por un lado, inicializaremos la aplicación Xamarin.Forms:

var formsApp = new FormsApp()
LoadApplication(formsApp);

Y por otro lado, estableceremos la página principal:

_formsApp.SetPage(e.Parameter as Type);

Con todo preparado, para navegar a una página de Xamarin.Forms bastaría con:

Frame.Navigate(typeof(FormsWindowsPage), typeof(SettingsView));

Navegar a la nueva página creada pasando como parámetro el tipo de la página de Forms. También podríamos pasar el nombre de la página como cadena y tras recuperarlo obtener el tipo como hicimos en Android.

El resultado:

UWP

NOTA: En todos los proyectos nativos hemos añadido la última versión del paquete estable de Xamarin.Forms.

El ejemplo de esta versión se encuentra disponible en GitHub:

Ver GitHub

Xamarin.Forms 3.0

Hoy día ya podemos probar una versión Preview de Xamarin.Forms 3.0. Para ello, debemos añadir https://www.myget.org/F/xamarinforms-dev/api/v3/index.json como nuevo origen de paquetes.

Nuevo origen de paquetes

De esta forma tendrás acceso a los paquetes previos de Xamarin.Forms 3.0:

Paquetes NuGet Xamarin.Forms 3.0

Con el paquete previo de la versión 3.0 nos llega el soporte oficial a Forms Embedding o lo que es lo mismo, todo  lo necesario para incrustar páginas Xamarin.Forms en aplicaciones nativas de forma rápida y muy sencilla.

Volvemos a crear un nuevo proyecto en una PCL donde vamos a añadir las páginas Xamarin.Forms a compartir, de igual forma a como hicimos previamente.

Veamos como utilizar la página en cada plataforma.

Android

En Android se ha añadido una extensión de página de modo que podemos hacer:

var settings = new SettingsView().CreateFragment(this);

Creamos una instancia de la página Xamarin.Forms y utilizamos el método CreateFragment para crear un Fragment Android que podemos añadir como contenido de nuestra aplicación Xamarin.Android.

iOS

En el caso de iOS nuestro objetivo será tener un UIViewController al que poder navegar partiendo de la ContentPage de Xamarin.Forms:

var settingsViewControler = FormsApp.GetPage<SettingsView>().CreateViewController();
await PresentViewControllerAsync(settingsViewControler, true);

En Xamarin.Forms contamos con una extensión de páginas que cuenta con el método CreateViewController que nos hace la mayor parte del trabajo. Si, es sumamente parecido a lo que ya vimos previamente.

Windows

Y llegamos a UWP donde al igual que en el resto de plataformas, se utiliza una extensión de página para obtener un FrameworkElement a partir de la página Xamarin.Forms.

var settingsView = new SettingsView().CreateFrameworkElement();

Muy muy sencillo, ¿cierto?.

El ejemplo de esta versión se encuentra disponible en GitHub:

Ver GitHub

Más información

Probando Xamarin Live Player

Introducción

Cuando hablamos de desarrollos web e incluso desarrollos para escritorio los tiempos de despliegue y ejecucición junto con los requisitos a cumplir son extremadamente ajustados.

Cuando hablamos de movilidad, la cosa es algo diferente…

En el caso de Xamarin.iOS necesitamos contar con una conexión con Xamarin Mac Host para compilar y desplegar en el dispositivo o en el simulador.

En el caso de Xamarin.Android necesitamos contar con SDK de Android, instalar emuladores x86 para reducir tiempos de despliegue, etc.

¿Y si contámos con una opción más rápida y directa que reduzca a mínimos los requisitos para desplegar y probar la App?

Xamarin Live Player

Xamarin Live Player llega como opción para permitir editar al vuelo la aplicación y ver esos cambios reflejados directamente en el dispositivo. Se trata de una aplicación móvil (realizada con Xamarin y disponible en las diferentes Stores) que permite correr nuestro código sin necesidad de emuladores o un cable USB para desplegar la App.

Xamarin Live Player

La idea es:

  1. Tener una App Xamarin en el IDE (Visual Studio para Windows o MacOS).
  2. Emparejar un dispositivo con la App Xamarin Live Player.
  3. Lanzar la App en el dispositivo.
  4. Poder hacer cambios al vuelo!

De esta forma, se reducen tiempos y requisitos necesarios para desplegar y probar las Apps. No se necesita conexión con Mac, tener instalados emuladores, etc.

Preparando el entorno

Suena bien, ¿verdad?. Vamos a preparar el entorno y todo lo necesario.

1. Obtener la App

Comenzamos descargando la App móvil. Xamarin Live Player se encuentra disponible tanto para iOS como para Android.

Xamarin Live Player App

2. Obtener Visual Studio 2017 Preview en Windows

Para poder utilizar Xamarin Live se necesita tener instalado:

  • Visual Studio 2017 15.3 Preview
  • Xamarin Updater

La elección de canales alpha, beta o estable que teníamos en versiones anteriores de Visual Studio no está disponible en Visual Studio 2017. En su lugar, tenemos dos canales de distribución de Visual Studio:

  • Release
  • Preview

Para tener acceso a las Previews, podemos descargar una versión de Visual Studio Preview.

Descargar Visual Studio 2017 Preview

NOTA: La Preview disponible al escribir estas líneas es la 15.3.

Durante el proceso de instalación, se puede introducir un Installation Nickname que nos permite distinguir la versión Preview de la versión de VisualStudio estable. De esta forma podemos tener instalados varias instancias diferentes.

Varios Visual Studios!

Tras tener Visual Studio 2017 Preview instalado, debemos contar con Xamarin Updater disponible en Visual Studio Marketplace.

Xamarin Updater

2. O para Mac

En el caso de utilizar MacOS se necesita tener macOS 10.12 o superior y tener instalado Visual Studio para Mac.

Actualizar Visual Studio para Mac

Emparejando dispositivos

Todo listo para probar. Para asegurar que lo tenemos todo listo, en Visual Studio debes encontrar la opción Xamarin Live Player en la opción Herramientas:

Xamarin Live Player en el menu de Herramientas

Con Xamarin Live Player preparado, al desplegar econtraremos la opción Live Player:

Live Player

La primera vez que realizamos el despliegue, aparecerá la siguiente pantalla:

Emparejar dispositivo

Para emparejar el dispositivo, debemos abrir la aplicación Xamarin Live Player previamente instalada y utilizar la cámara para capturar el código QR o bien, introducir en el IDE el código que aparecerá en la App.

Tras emparejar, todo preparado para comenzar a utilizar la herramienta!

Probándolo todo!

Ejecutamos la aplicación y en breves instantes:

App Xamarin.iOS desde Windows sin Build Host!

Estamos utilizando una de las demos disponibles en Xamarin Live Player, una aplicación Xamarin.iOS ejecutada en un iPhone sin utilizar Mac Build Host.

NOTA: En esta demo tenenemos el iPhone conectado por USB al equipo de desarrollo con Windows para hacer Screen Mirroring. No es necesario conectar el dispositivo por cable para utilizar Xamarin Live.

Con la aplicación lanzada podemos interaccionar con ella:

La App en funcionamiento

Y podemos depurarla exactamente igual a cuando la desplegamos de forma habitual:

Depurando

Por otro lado, encontramos la opción  Live Run Current View.

Live Run Current View

Esta opción permite realizar cambios directamente al vuelo. Todo se irá compilando y ejecutando de forma continua en el dispositivo por lo que podremos ir aplicando cambios al vuelo y ver sus resultados de forma inmediata, sin recompilar todo ni esperas.

Limitaciones

No, la aplicación no es perfecta en estos momentos, ni funcionará todo. Recuerda que estamos aún ante una Preview. Entre las limitaciones encontramos:

  • Algunas características de Storyboards en iOS no están soportadas.
  • Algunas características del sistema no se soportan por la App. Sin embargo, opciones muy comunes como el uso de la cámara si están soportadas.

Entre las limitaciones más importantes tenemos:

  • No se soportan archivos AXML (diseño de interfaces en Android).
  • No se soportan archivos iOS XIB.
  • Soporte limitado a reflexión. Ojo, porque hay muchos paquetes NuGets que se pueden ver afectados como el uso de SQLite.

¿Ya no necesito un MAC?

Xamarin Live Player nos permite probar nuestras aplicaciones Xamarin Native o Xamarin.Forms en dispositivos Android e iOS. Si, podemos desplegar aplicaciones Xamarin.iOS a un dispositivo iOS sin necesidad de Mac Build Host (conexión con un Mac).

Entonces, ¿ya no necesitamos un Mac?.

¿Ya no necesitamos un Mac?

A pesar de no dudar de la evolución y soporte a más y más opciones en Xamarin Live Player, de momento cuenta con limitaciones a tener en cuenta.

Por otro lado, es necesario el Mac para el acceso a otras herramientas como diseñadores visuales de Storyboards, o bien, para crear paquetes, etc. Recuerda, necesitamos un Mac para compilar y crear el paquete.

En definitiva, tenemos una nueva opción que nos ayuda y acelera en el desarrollo e incluso, si, nos puede reducir la necesidad de conexiones con el Build Host pero no evita la necesidad del Mac en el desarrollo iOS.

Más información

Puedes descargar una presentación con un resumen de todo el artículo:

[slideshare id=75941939&doc=xamarinliveplayer-170513095046]

Enlaces:

[Material] Workshop Xamarin en PUE DAY 2017

Introducción

PUE DAY es el evento anual de referencia en nuestro país en el marco de la enseñanza de las TIC en lo que a formación y certificación oficial se refiere. Este año se celebró el pasado 26 de Abril con diferentes sesiones y workshops.

PUE Day 2017

El material

He tenido la oportunidad de participar este año hablando de Xamarin, ventajas, desarrollo, etc.

La presentación:

En cuanto a las demos realizadas, las tenéis disponible en GitHub:

Ver GitHubNos vemos en la próxima!

Más información

[Material] Xamarin Dev Days Sevilla 2017

El evento

El pasado sábado 08 de Abril, tenía lugar en Sevilla el Xamarin Dev Days 2o17. Una jornada con varias sesiones técnicas, taller, regalos y mucho networking.

El resultado fue un fantástico día de desarrollo Xamarin con caras nuevas en el grupo, muchas preguntas, ayuda y tiempo para charlar entre todos rodeados de unas pizzas.

El material

Pude participar en el evento con varias de las sesiones. Comenzamos el evento con una sesión introductoria a Xamarin:

A continuación, nos centramos en el desarrollo de aplicaciones móviles multiplataforma utilizando Xamarin.Forms además de ver las últimas novedades:

En cuanto a las demos técnicas realizadas, las tenéis disponible en GitHub:

Ver GitHubQuisiera terminar añadiendo algunos agradecimientos. Comienzo por los chicos de Bitnami por las instalaciones, la comida y toda la ayuda ofrecida (muchas gracias!); a Plain Concepts por su patrocinio; a SyncFusion y Xamarin también por patrocinar el evento, los asistentes quedaron encantados con los goodies y licencias; a mi compañero Juan María Lao por sus demos y ayudar con todo y por supuesto a los asistentes. Gracias a todos. Si además están todo el día y con preguntas constantes, hace que todo sea tan apasionante y divertido que…¿cuándo la próxima?.

Más información

[Xamarin.Forms] Probando UI Sleutch

uisleuthIntroducción

Xamarin.Forms es un toolkit que crea una abstracción sobre la interfaz de usuario de Android, iOS y Windows Phone permitiendo desarrollarla una única vez con código C# o Extensible Application Markup Language (XAML). Actualmente tenemos disponibl Xamarin.Forms Previewer o lo que es lo mismo, una herramienta que nos permite visualizar en tiempo real cualquier cambio relacionado con el código XAML que define la UI. Sin embargo, existen grandes opciones que vienen de parte de la comunidad y que vienen a extender y ayudar a la experiencia disponible directamente en Visual Studio. De esta forma tenemos propuestas como Gorilla Player o como la herramienta que va a cubrir toda la atención de este artículo, UI Seuth.

UI Sleuth

UI Sleuth es una herramienta creada por Michael Davis actualmente disponible en fase Beta para Windows (próximamente disponible también para MacOS) que nos permite depurar nuestras aplicaciones Xamarin.Forms. Entre las principales características permite:

  • Conectar y manejar un dispositivo.
  • Ver el árbol de elementos que componen la UI.
  • Hacer prototipos de UI de forma rápida y sencilla.
  • Detectar errores de UI.

Podemos resumir las características en un inspector visual (UI) en tiempo real de aplicaciones Xamarin.Forms.

¿Y en comparación con otras herramientas?

Xamarin Previewer permite ver directamente la renderización de una página XAML en Visual Studio. La aplicación no corre en un emulador o dispositivo, es una aproximación visible directamente en el IDE.

Por otro lado, tenemos a Gorilla Player. Esta gran herramienta permite ver los cambios en el codigo XAML de una página en tiempo real en N emuladores o dispositivos. La aplicación no se encuentra en ejecución.

La instalación

Empezamos por el principio, realizar la instalación de la herramienta. Debemos accerder a la página de UI Sleuth, rellenar el formulario básico con nombre y correo (recuerda, se encuentra en fase beta, la clave actualmente es probar y reportar feedback!).

Página de la herramienta
Página de la herramienta

Tras rellenar el formulario, accedemos a la página de descarga.

Descargar la herramienta
Descargar la herramienta

Para instalar basta con hacer doble clic sobre el archivo descargado. La instalación es un proceso rápido y sencillo.

Instalando
Instalando

Los requisitos de la herramienta son:

  • Microsoft Windows 7+ 64bit
    Visual Studio 2012+
    Xamarin.Forms 2.0+
    Emulador Android 4.03+ o dispositivo
    Android SDK (opcional)

Preparar la solución para utilizar UI Sleuth

Tras instalar la herramienta debemos de preparar nuestra aplicación para poder ver cambios al vuelo. En el proyecto Android, debemos hacer clic secundario en Administrar paquetes NuGet…

Buscamos por “UISleuth.Android”:

Añadir paquete NuGet

Instalamos el paquete. A continuación, en la actividad principal, MainActivity.cs añadimos el siguiente código tras la llamada a LoadApplication:

#if DEBUG
UISleuth.Inspector.Init();
#endif

Todo listo!. Lanzamos la aplicación en un emulador o dispositivo real.

Conectando

Continuamos arrancando la herramienta UISleuth. Nos aparecerá un listado de emuladores o dispositivos conectados. Podemos conectar directamente pulsando el botón Connect.

Conectando

También podemos realizar un proceso de conexión manual utilizando la dirección IP del dispositivo.

Tras conectar, veremos la pantalla principal de la herramienta:

UISleuth

Tenemos:

  • Visual Outline: Este panel situado a la izquierda nos permite explorar el árbol visual que compone la interfaz de usuario.
  • History: Sencillo panel que guarda cada paso de cada movimiento realizado en la herramienta. También situado a la izquierda.
  • Properties (Attached Properties y Events): Panel muy importante y completo. Tenemos la posibilidad de gestionar de forma visual las propiedades y eventos de cada control que compone la UI.

Utilizando UI Sleuth

Vamos a utilizar la herramienta para crear una sencilla vista de Login. Desde la propia herramienta podemos añadir los elementos visuales que necesitamos. Vamos a utilizar:

  • StackLayout
  • Label
  • Entry
  • Button
Añadir nuevos elementos

Tras añadir los elementos, tenemos la posibilidad de editar todas sus propiedades:

Gestión de propiedades

A la hora de añadir diferentes elementos de la UI, tenemos la posibilidad de modificar, arrastrar y soltar dentro del árbol visual para modificar el Layout de la aplicación:

Reordenar elementos de la UI

E incluso, podemos probar la aplicación y ver una previsualización en la misma herramienta:

Probando la App!

En resumen

Seguimos esperando un editor visual que permite la construcción de interfaces de usuario de forma sencilla, arrastrando y soltando, etc. Sin embargo, cada vez tenemos más opciones disponibles para la edición y gestión de la UI de nuestras aplicaciones Xamarin.Forms. UI Sleuth permite ver cambios de una aplicación en ejecución, además de poder acceder a listado de controles para añadir, poder ver el árbol visual pudiendo hacer drag & drop en el mismo, etc. En breve llegarán más características (versión MacOS, soporte a listados, etc.). Sin duda, una opción más que interesante la de Michael Davis que seguro a muchos os gustará y que seguirá mejorando en próximos meses.

¿Y a ti que te parece la herramienta?

Más información

[VideoBlog] Una introducción a Visual Studio Mobile Center

Introducción

El pasado Microsoft Connect 2016, en San Francisco, se presentaba Visual Studio Mobile Center con el firme objetivo de convertirse en el centro de control de nuestras aplicaciones móviles. Mobile Center soporta tanto aplicaciones Xamarin como aplicaciones nativas con Java, Objective-C o Swift además de aplicaciones React Native.

Visual Studio Mobile Center
Visual Studio Mobile Center

Incluye los siguientes servicios:

  • Build: Integración y entrega continua.
  • Test: Pruebas automáticas en dispositivos reales.
  • Reporte de errores: Analíticas de errores en tiempo real.
  • Distribución: Despliegue a usuarios o grupos.
  • Analíticas: Métricas de uso.
  • Autenticación: Integración sencilla con métodos comunes.
  • EasyTables: Crear almacenamiento de forma muy rápida.

Un vistazo a Visual Studio Mobile Center

Ante una nueva herramienta con tantas posibilidades, ¿algo mejor que probarla y verla en video?

Tenéis el código fuente del ejemplo utilizado disponible en GitHub:

Ver GitHubRecordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.

Más información

Concurso de Apps Xamarin

Introducción

Si hace escasamente un par de meses, tenía la gran oportunidad de participar en un curso gratuito de Xamarin con CampusMVP y Microsoft con la creación del contenido, ¿algo mejor aún para fomentar el uso y crecimiento de la comunidad?.

Concurso de Apps Xamarin

Todo puede ser, prepárate para el concurso de Apps Xamarin!. La mecánica es muy sencilla. Desarrolla tu App Xamarin utilizando Azure, tienes hasta el próximo 30 de Junio para enviar la App. Tras evaluar las aplicaciones, la ganadora recibirá un premio de 5000€ más acceso al curso de pago de Xamarin en CampusMVP. Del segundo clasificado al quinto, obtendrán 1000€ cada uno.

NOTA: En este concurso solo podrán participar personas físicas residentes en España.

Si ya has realizado el curso de Xamarin o si tu aplicación hace uso de ciertas tecnologías o viene a resolver problemas sociales como Bulling / cyberbulling, desempleo, corrupción, violencia de género, racismo, etc. obtendrás puntos extras que se tendrán en cuenta a la hora de evaluar.

Suena interesante, ¿verdad?.

Anímate a participar!

Más información