[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

[Material SVQDC] Creando Apps para Hololens

9_t4cjcoEl evento

El pasado Sábado, 18 de Febrero tenía lugar la tercera edición de la Sevilla Developer Conference. Una iniciativa para fomentar tanto las distintas comunidades tecnológicas de Sevilla como tambien para darnos oportunidad de, durante un día, ver cómo resuelven sus retos en otras plataformas o lenguajes.

Como se puede ver en las fotos del evento, un enorme día de comunidad donde ver grandes sesiones, ver a antiguos amigos pero principalmente, para dar la oportunidad de conocer a muchos otros nuevos.

El material

He tenido la oportunidad de participar este año hablando de desarrollo para HoloLens.

Desarrollo para HoloLens
Desarrollo para HoloLens

Tras una breve introducción donde repasamos conceptos como realidad virtual, realidad aumentada o que es un holograma, entramos de lleno a conocer las HoloLens. Conbinando presentaciones, el dispositivo físico y el portal del dispositivo conocimos las características, sensores y posibilidades.

A continuación, entramos de lleno a hacer una App. Utilizando Wave Engine realizamos una aplicación sobre el sistema solar (en directo).

Terminamos con algunas aplicaciones desarrolladas ya publicadas en la Store, consejos y preguntas. Durante la sesión fue muy divertido ver las expresiones y el feedback de aquellos que pudieron probarlas!.

La presentación:

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

Ver GitHub

Más información

[Material] Containers y Xamarin everywhere!

El evento

El pasado Martes, 07 de Febrero en la E.T.S. Ingeniería Informática tenía lugar un evento de las comunidades, CartujaDotNet, grupo de usuarios .NET de Sevilla y SVQXDG, grupo de desarrolladores Xamarin de Sevilla aprovechando una visita a la Universidad de los chicos de Microsoft DX. El evento que tenía como título “Containers y Xamarin everywhere!” proponía una divertida tarde donde hacer una introducción a Containers y Docker de la mano de Diego Martínez y posteriormente una sesión sobre testing de Apps Xamarin de la mano de un servidor.

Containers
Containers

El material

He tenido la oportunidad de participar en una de las sesiones tratando la creación y mantenimiento de pruebas automáticas de aplicaciones Xamarin. Concretamente vimos:

  • Introducción al concepto de pruebas unitarias.
  • Como crear pruebas unitarias a un proyecto Xamarin.
  • Conceptos básicos necesarios de Xamarin.UITest.
  • Crear proyecto de tipo Xamarin.UITest.
  • Introducción a Xamarin Test Cloud.
  • Lanzar pruebas de tipo UITest en Test Cloud.
  • Introducción a Visual Studio Mobile Center.

La presentación:

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

Ver GitHub

Quisiera terminar agradeciendo a Diego Martínez por su colaboración y sesión en el evento, a la E.T.S. Ingeniería Informática y al club .NET de la universidad por su ayuda y facilidades a la hora de disponer de sala y por supuesto a todos los asistentes.

Nos vemos en la próxima!

Más información

[VideoBlog] Novedades en la Preview 2 de Tizen.NET

tizen_logoIntroducción

El pasado Microsoft Connect 2016, en San Francisco, Samsung en colaboración con Microsoft anunciaba la primera versión en modo Preview de las herramientas Tizen para Visual Studio.

Las herramientas Tizen para Visual Studio facilitan emuladores, extensiones para Visual Studio con la posibilidad de tener IntelliSense y capacidades de depuración, se utiliza Xamarin.Forms para definir la interfaz de usuario, como ya hacíamos con iOS Y Android. De esta forma, Xamarin.Forms añade una nueva plataforma a la que dar soporte ampliando las posibilidades del mercado.

Tizen.NET Preview 2

Recientemente, se ha liberado la Preview 2 de Tizen.NET. Una actualización importante que añade una enorme cantidad de novedades con respecto a la priemera versión lanzado el pasado Noviembre.

Tizen.NET Preview 2
Tizen.NET Preview 2

Entre el conjunto de novedades más detacadas encontramos:

  • Soporte a TV: En la primera release se incluía el soporte a .NET Standard, Xamarin.Forms y APIs Tizen de móviles. Ahora se incluyen todo lo necesario para desarrollar aplicaciones para televisores.
  • Asistente de proyecto: Dado que ahora contamos con diferentes tipos de posibles proyectos (móviles y TV), al crear un nuevo proyecto para Tizen tendremos un sencillo asistente que nos permitirá configurar las opciones básicas.
  • Nuevas herramientas: Gestión de emuladores, administrador de certificados o editor de manifiesto. Se han añadido varias herramientas nuevas para permitir desarrollar aplicaciones de forma más sencilla.
  • Nuevas APIs: Incremento alto del conjunto de APIs Tizen soportadas con respecto a la Preview anterior. Entre las novedades encontramos uso de NFC, gestión y administración de multimedia, geofence, etc.

Ante tal conjunto de novedades, ¿algo mejor que verlas todas en video?

Más información

Sevilla Developer Conference 3

Introducción

Tras dos exitosas ediciones, Sevilla Developer Conference continua como una iniciativa para fomentar tanto las distintas comunidades tecnológicas de Sevilla como tambien para darnos oportunidad de, durante un día, ver cómo resuelven sus retos en otras plataformas o lenguajes.

La agenda

  • 9:30h – 9:55h Apertura de puertas y registro
  • 10:00h – 10:50h El mito del Betatester con Ana Trujillo Ruiz
  • 11:00h – 12:00h Tecnologías para microservicios con Pedro J. Molina
  • 12:00h – 12:50h Abriendo el código con Macarena Madero
  • 13:30h – 14:30h Comida
  • 14:30h – 15:50h Bienvenidos al mundo holográfico con Javier Suárez
  • 15:30h – 16:20h El juego de tronos de los proyectos con Julían Gómez
  • 16:30h – 17:30h Networking y cierre de puertas

Múltiples sesiones técnicas pero un solo track para poder aprovechar al maximo las conversaciones entre desarrolladores y desarrolladoras de distintas áreas.

El lugar

En esta ocasión contaremos con la colaboración de la Escuela de Organización Industrial de Andalucía en cuyas instalaciones se realizará el evento.

Calle Leonardo da Vinci, 12, Isla de la Cartuja

svqdc-map

¿Te animas?

Más información