[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

[Evento] Visual Studio 2017 Launch!

El evento

En CartujaDotNet vamos a celebrar el lanzamiento de Visual Studio 2017!.

Visual Studio 2017 Launch Event

Nada mejor que contar con varias sesiones cortas y directas donde veremos las principales novedades en el IDE además de novedades en productividad, Xamarin, Visual Studio Mobile Center, DevOps, etc.

Agenda

La agenda:

  • 19:00h – 19:10h: Recepción y bienvenida!
  • 19:10h – 19:20h: Instalación y novedades en rendimiento.
  • 19:20h – 19:40h: En búsqueda de la productividad.
  • 19:40h – 20:10h: Xamarin.
  • 20:10h – 20:40h: Visual Studio Mobile Center.
  • 20:40h – 21:00h: Visual Studio Team Services y DevOps.

La fecha

El evento tendrá lugar el próximo Martes, 28 de Marzo de 19:00h a 21:00h. Tendremos cinco sesiones técnicas de 30 minutos de duración cada una aproximadamente. Además contaremos con algún detalle entre los asistentes.

El lugar

El evento se celebrará en el Aula B1.34 de la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula B1.32
Av. Reina Mercedes s/n
Sevilla Se 41012

ETS de Ingeniería Informática
ETS de Ingeniería Informática

Más información

[Evento] Xamarin Dev Days 2017 en Sevilla

El evento

Xamarin Dev Days son una serie de eventos celebrados a lo largo de todo el mundo que ofrecen la posibilidad de conocer las últimas novedades relacionadas con el desarrollo Xamarin, poder disfrutar de talleres y por supuesto, compartir momentos de networking.

Agenda

La agenda:

  • 9:00AM Registro y bienvenida.
  • 9:30 – 10:10AM Introducción a Xamarin. Introducción a los conceptos básicos tanto de Xamarin Classic como de Xamarin.Forms así como a la integración con Visual Studio, Xamarin Test Cloud, etc.
  • 10:20 – 11:00AM Xamarin Forms. Tras una introducción a conceptos básicos se verá como estructurar el proyecto y una serie de buenas prácticas para compartir la mayor cantidad de código posible. Finalmente se terminará con las últimas novedades como Xamarin.Forms Previewer, etc.
  • 11:10 – 11:50AM Xamarin + Azure. Gracias al Azure podemos crear servicios de backend, notificaciones push y otras características esenciales de forma compartida. En esta sesión aprenderemos como sacarle partido a Azure desde nuestras aplicaciones Xamarin.
  • 12:00 – 2:00PM Hands on Lab. ¿Crear una aplicación Xamarin paso a paso con MVVM, uso de servicios REST y accediendo a características de cada plataforma?. En este taller realizaremos una aplicación con esas características entre todos. Anímate y ven con tu portátil preparado!.
  • 2:00 – 3:00PM Comida.

La fecha

El evento tendrá lugar el próximo Sábado, 08 de Abril de 9:00h a 15:00h. Tendremos tres sesiones técnicas de  40 minutos de duración cada una junto a un taller de 2 horas de duración. Además contaremos con regalos (ya los hemos visto, son geniales!) y sorpresas.

¿Te apuntas?

El lugar

El evento se celebrará en las oficinas de Bitnami.

Av. de la República Argentina, 31b, Sevilla

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

[VideoBlog] Testing de Apps Xamarin

Bug - 02Introducción

La calidad en el software es algo innegociable. Debemos entregar Apps móviles perfectamente adaptadas a cada plataforma, ofreciendo la mejor experiencia de usuario posible pero sobretodo, funcional. Una App funcional debe cubrir y cumplir unos mínimos exigentes de calidad.

Como desarrolladores, somo humanos y el código no estara libre de errores. Sin embargo, el proceso que apliquemos para la detección y corrección a los mismos, es vital.

Podemos crear dos tipos de pruebas diferenciadas:

  • Pruebas unitarias: Pruebas de pequeñas unidades funcionales de nuestra App. Utilizaremos NUnit para realizar estas pruebas unitarias generalmente de ViewModels, Helpers y Servicios.
  • Pruebas de interfaz de usuario: Pruebas sobre la interfaz de usuario, escritura en cajas de texto, pulsaciones de botones, etc. Utilizaremos Xamarin UITest para estas pruebas.

Creando Tests de Apps Xamarin

A continuación, utilizando como base una aplicación de una calculadora realizada en Xamarin.Forms, se muestra en video:

  1. Introducción al concepto de pruebas unitarias.
  2. Como crear pruebas unitarias a un proyecto Xamarin.
  3. Conceptos básicos necesarios de Xamarin.UITest.
  4. Crear proyecto de tipo Xamarin.UITest.
  5. Introducción a Xamarin Test Cloud.
  6. Lanzar pruebas de tipo UITest en Test Cloud.

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

Ver GitHub

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

Más información