Desde CartujaDotNet, grupo de usuarios .NET de Sevilla ySVQXDG, grupo de desarrolladores Xamarin de Sevilla,vamos a realizar una quedada informal (la primera del año!) para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, se analizarán las próximas charlas ya planteadas y los eventos confirmados entre otros temas de interés. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.
No hace falta confirmar asistencia, y por supuesto será gratuito.
A la hora de aprender un lenguaje o framework es ideal contar con una buena documentación, pero, contar con ejemplos complementarios es aún mejor si cabe. Poder ver el código, modificarlo y probar los resultados. Gran parte de la documentación Xamarin cuenta con ejemplos oficiales asociados disponibles en GitHub. ¿Y si pudiésemos acceder a los ejemplos de forma aún más sencilla?.
Samples Importer
Llega Samples Importer, un nuevo addin para Visual Studio para macOS, que permite acceder a ejemplos oficiales de:
Xamarin.Android
Xamarin.iOS
Xamarin.Forms
Xamarin.Mac
Pudiendo ver la información básica de cada ejemplo (título, descripción, plataformas, tags, etc.), filtrar y directamente descargar además de abrir el ejemplo directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por “Samples Importer”:
Y pulsamos Install…
Tras instalar, lo primero que debemos hacer es configurar el addin. Samples Importer obtiene toda la información de cada ejemplo (así como el código del mismo) desde GitHub con el firme objetivo de ofrecer siempre el ejemplo actualizado a la última. Para ello, es necesario añadir un Personal Access Token en la configuración de Visual Studio:
NOTA: Los ejemplos se descargarán automáticamente a una ruta temporal. Sin embargo, es posible elegir una ruta específica en la configuración del addin.
¿Qué aporta?
Desde el menu Tools tenemos acceso a una nueva opción Samples Importer. Tenemos acceso a un nuevo dialogo donde podemos acceder a los ejemplos oficiales de Xamarin (Android, iOS, Xamarin.Forms, macOS). Acceder a un ejemplo, para ver el código y probar es tan sencillo como seleccionar y pulsar el botón Continue:
Tras pulsar el botón, se descargará el ejemplo seleccionado a la carpeta establecida en la configuración del addin (se utiliza una carpeta temporal en caso de no establecer ninguna carpeta específica).
A continuación, una serie de capturas del addin con diferentes ejemplos:
Lo próximo
Para la próxima versión del addin se incluirán las siguientes mejoras:
En la actual versión se buscan ejemplos directamente de las carpetas de repositorios oficiales de ejemplos Xamarin. Sin embargo, la búsqueda se realiza en las carpetas de primer nivel. Existen carpetas con subcarpetas con más ejemplos. Se añadirá una búsqueda en profundidad.
Cache. Se incluirá una cache de ejemplos de modo que si, no hay cambios en el repositorio, se utilizará la cache y se evitará la carga haciendo peticiones a GitHub.
Se añadirá una opción para cargar ejemplos de la comunidad.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
A la hora de trabajar con nuestros proyectos, contamos con imágenes. A veces serán recursos para la gestión del icono de la aplicación, otras serán recursos a utilizar en la aplicación. En cualquier caso, necesitamos gestionar una serie de acciones:
Cuidar el tamaño de las imágenes. Tener un set de imágenes optimizadas es fundamental para garantizar el correcto funcionamiento de la aplicación cuidando el consumo de memoria.
Generar la misma imagen en diferentes tamaños. Redimensionar una imagen o crear diferentes imágenes con diferentes tamaños para crear el icono de una aplicación móvil.
Ver listado de imágenes usadas (y cuales no), copiar y mover imágenes entre proyectos, etc.
Asset Studio
Asset Studio llega como un addin para Visual Studio para macOS para ofrecer diferentes opciones relacionadas con el tratamiento y gestión de imágenes.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por «Asset Studio»:
Y pulsamos Install…
¿Qué aporta?
Actualmente, esta primera versión del addin se centra en optimizar las imágenes. Podemos seleccionar una imagen específica, y al hacer clic derecho tendremos la opción
Tras pulsar la opción, aparecerá un dialogo donde veremos la información básica de la imagen (previsualización, tamaño, peso y nombre) y podremos optimizarla.
Si hacemos clic derecho sobre una carpeta en lugar de una imagen, se buscarán todas las imágenes que contiene la carpeta (y sus subcarpetas).
Veremos un listado con todas las imágenes con su información básica (nombre y tamaño):
Veámoslo en funcionamiento:
Para optimizar las imágenes se utiliza la API de TinyPNG que requiere un API Key para funcionar. Para añadir el API Key se debe acceder a las preferencias de Visual Studio, opción Other > Asset Studio:
NOTA: Desde las opción de configuración del addin se encontrará un enlace para crear un API Key.
Lo próximo
Para las próximas versiones, se incluirá un gestor de imágenes junto con una opción para generar los iconos necesarios para Android e iOS en diferentes tamaños partiendo desde una imagen.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
En ocasiones, necesitamos borrar las carpetas de salida (bin y obj) y puede llegar a ser un proceso tedioso y manual sobretodo en caso de contar con muchos proyectos en la solución.
Sweeper
Sweeper llega en forma de addin para Visual Studio para macOS para facilitar el borrado de carpetas bin y obj además de otras carpetas importantes.
¿Cómo instalar?
Accedemos al menu principal de Visual Studio y seleccionamos Extensions…
Buscamos por «Sweeper»:
Pulsamos Install…
¿Qué aporta?
Con una solución abierta, podemos hacer clic derecho sobre la solución o un proyecto específico y veremos:
El addin incluye dos opciones extras:
Clean /bin and /obj Directories: Limpia las carpetas bin y obj. Al seleccionar una solución limpiará los directorios de salida de cada proyecto.
Clean /packages Directory: Limpia la carpeta de paquetes NuGet.
NOTA: Al recompilar la solución se volverán a descargar los paquetes NuGet.
Lo próximo
Para próximas versiones hay ya planeadas nuevas opciones como:
Comprimir un proyecto.
limpiar y comprimir un proyecto.
Comprimir la salida de un proyecto.
¿Qué te parece el addin?, ¿qué te gustaría añadir?. Recuerda, cualquier comentario es bienvenido en la entrada!.
Creando datos de pruebas para la UI, servicios Fake, etc. solemos tirar de herramientas que generen Dummy Text (Loren ipsum y la gran variedad de variantes).
Text Generator
Text Generatores un addin para Visual Studio para macOS que nos permitirá generar texto directamente desde el IDE.
¿Cómo instalar?
Accedemos al menu principal de Visual Studio y seleccionamos la opción Extensions…
A continuación, buscamos «Text Generator».
Y pulsamos Install…
¿Qué aporta?
Al tener un proyecto abierto y un archivo de código, tendremos una nueva opción en el menu Edit.
Al elegir la opción Generate words… aparecerá un dialogo donde introducir el número de palabras a generar.
Lo próximo
Actualmente (v0.1) sólo se permite generar un número determinado de palabras usando «Loren ipsum». Para la próxima versión:
Menu contextual desde el editor de código.
Permitir elegir si generar caracteres, palabras o párrafos.
Permitir elegir entre diferentes proveedores para generar el texto. Jeffsum.NETde James Montemagno será una de las opciones añadidas.
SkiaSharpes un sistema de gráficos 2D para .NET y C# que utiliza el motor de gráficos de código abierto Skia usado en los productos de Google. Recientemente, Matthew Leibowitz creo una herramienta llamada SkiaSharpFiddle. Se trata de una herramienta para Windows que permite ver cambios en código SkiaSharp al vuelo ademas de tener resultados de compilación. Fantástica!.
Tras probarla y hablar con Matthew, seria genial tener la herramienta también en macOS, ¿cierto?.
SkiaSharp Fiddle
Llega a Visual Studio para macOS un nuevo addin que añade SkiaSharp Fiddle integrado en Visual Studio.
¿Cómo instalar?
Para instalar el addin, accedemos al menu principal de Visual Studio y elegimos la opción Extensions…
Buscamos por «SkiaSharp»y encontramos SkiaSharp Fiddle:
Tras pulsar Install…, tendremos el addin instalado.
¿Qué aporta?
la principal ventaja del addin es poder previsualizar al vuelo, de forma inmediata código de SkiaSharp. La herramienta es ideal para crear y prototipar al trabajar con SkiaSharp. Además:
Podemos personalizar la superfie de dibujado (ancho y alto).
Realmente compilamos el código, en caso de error tenemos visualización directa de la línea donde hay error (o errores) junto con el mensaje de error.
Para acceder a la herramienta basta con acceder al menu Tools y seleccionar SkiaSharp Fiddle.
Lo próximo
Estamos ante la primera versión (v0.1) con la funcionalidad básica.
¿Qué hay pensado para la próxima versión?.
La principal novedad que se incluirá en la próxima versión es IntelliSenseen el editor de código. Recibir ayuda a la hora de escribir el código autocompletado y facilitando la escritura. Además se añadirá elección de modo de color y se realizarán correcciones a errores o feedback recibido.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?, ¿qué añadiríais (o quitarías)?. Recuerda, puedes dejar comentarios directamente en la entrada!
En España tenemos una comunidad .NET activa y diversa. Gracias a ello tenemos eventos anuales de gran calidad relacionadas con Azure, SQL Server e incluso AI. Sin embargo, a pesar de contar con una enorme variedad de desarrolladores Xamarin realizando grandes cosas, nos faltaba un evento donde reunirnos todos. Para solventar este problema, nace Monkey Conf 2018.
Con una enorme facilidad, hablando con compañeros y amigos el evento empezó a tomar forma muy rápidamente. Muchos quisieron patrocinar el evento (gracias a ellos pudimos tener desayuno, almuerzo, camisetas o regalar licencias), otros querían participar con sesiones, e incluso algunos se ofrecieron para ayudar con la organización, etc.
Gracias a todos ellos, el pasado 01 de Diciembre, celebramos la Monkey Conf 2018. A continuación, una pequeña galería del evento:
Fue un día lleno de sesiones técnicas de calidad. Es increíble ver sesiones donde se dan consejos de distribución y venta de apps basadas en la experiencia real con consejos de arquitectura de código. Esto demuestra el nivel y madurez de la comunidad Xamarin. Desde la recepción hasta el final, donde no podía faltar «el preguntón» (gracias a MFractor, LiveXaml y Steema por facilitarnos licencias) el día fluyo de forma natural, sin ningun problema de ningún tipo. Muchas gracias a sponsors, asistentes y ponentes por ello!.
Quiero destacar un momento, inesperado y emotivo. Entre los ponentes decidieron darme una sorpresa y me regalaron un teclado Corsair mecánico que ya estoy utilizando. Como se suele decir, chicos, no teníais porque, pero muy agradecido!.
El material
Vamos al material. Participé en el evento con una sesión acerca de Xamarin.Forms Shell.
Realizamos una divertida aplicación con Xamarin.Forms y Custom Vision para determinar si una foto tomada desde la aplicación, es un HotDot o no (si, la idea viene de la serie Silicon Valley de HBO).
En cuanto al material (ejemplos, demos), se esta recopilando todo en un repositorio disponible en GitHub:
No suelo compartir nada que no sea directa o indirectamente técnico mediante el Blog. Pero esta ocasión creo que merece que la comparta con todos vosotros. En ocasiones, cuando menos te lo esperas, se te cruza una oportunidad en tu camino que no puedes dejar pasar. Estamos ante esa situación. Un reto grande, con un gran equipo detrás, etc. Por ello, he tomado la decisión de cambiar de empresa. Tras un tiempo en Plain Concepts donde sin duda he aprendido y crecido en muchos sentidos, donde dejo a grandes profesionales y amigos, comenzaré con tremenda ilusión y muchas ganas un nuevo camino en Microsoft.
Quiero dar las gracias a Plain Concepts en general, trabajar en un lugar así es un privilegio por el equipo técnico y por el nivel humano. Sentirme entre amigos y arropado en todo momento es sin duda, especial. Muchas gracias!.
El conocer al equipo humano que me rodeará, el reto y las posibilidades de seguir aprendiendo han provocado mi actual decisión. Espero estar a la altura de las circustancias. Sin duda, daré el 101%.
¿Qué ocurrirá con el blog?
Nada. Al menos nada diferente. Todo seguirá como hasta ahora. Publicaré artículos de samples, addins y herramientas que vaya realizando además de novedades en Xamarin en general.
Como desarrolladores, a la hora de programar en determinadas ocasiones escribimos código repetitivo. Si nos centramos en el desarrollo de aplicaciones Xamarin.Forms desde Visual Studio para macOS, por ejemplo; a la hora de definir ViewModels tenemos código repetitivo como la definición de propiedades o comandos.
public string Name
{
get => _name;
set => SetProperty(ref _name, value);
}
public string SurName
{
get => _surname;
set => SetProperty(ref _surname, value);
}
¿Y si tenemos una forma de mejorar nuestra productividad a la hora de escribir código repetitivo / similar?
Creando Code Snippets
En Visual Studio para macOS cuenta con una solución para este problema, code snippets.
¿Qué es un code snippet?
Un snippet de código es una pieza de texto guardada como plantilla, reutilizable y que puede contar con argumentos reemplazables por valores al ser utilizados.
Veamos un ejemplo:
private $type$ $field$;
public $type$ $property$
{
get => $field$;
set => SetProperty(ref $field$, value);
}
Cada parte del código rodeada por $, representa un argumento que se puede reemplazar por un valor. En el ejemplo anterior usamos tres argumentos para controlar el tipo de la propiedad, el nombre de la variable y el nombre de la propiedad.
Bien, pero…¿y cómo creamos code snnipets?.
Accedemos a la ventana de Preferencias de Visual Studio para macOS. Y desde aquí al editor de Code Snippets.
Debemos pulsar sobre el botón Add para añadir un nuevo snippet.
Tenemos que rellenar:
Shortcut: Una de las partes más importantes. Es el atajo que utilizaremos con IntelliSense para utilizar el snippet.
Group: Representa la carpeta donde se guardará el snippet dentro del panel de preferencias de Code Snippet.
Description: La descripción del snippet. Esta descripción aparecerá en el tooltip al utilizarlo.
Mime: El mime-type del lenguaje de código que el code snippet soporta.
Template Text: El contenido del snippet de código.
Utilizando Code Snippets
Llega el momento que esperábamos!. Escribimos el valor del Shortcut de nuestro snippet.
Pulsamos el tabulador y…
Voila!. Basta con definir el tipo y nombre de variable y propiedad para tener una propiedad pública completa en la ViewModel.
Los Code Snippets son fáciles de crear y usar pero ayudan a acelerar la creación de código aumentando nuestra productivad.
¿Usabas los snippets?. Recuerda, puedes dejar cualquier duda en los comentarios del artículo.
Las aplicaciones de consola son geniales!. Probablemente, has realizado alguna aplicación de consola con alguna pequeña (o gran) herramienta.Tener una aplicación de consola tiene ventajas: liviana, multiplataforma, rápida, etc.
¿Y si pudiesemos realizar aplicaciones de consola con Xamarin.Forms?.
gui.cs
Estamos ante un Toolkit de UI para .NET, .NET Core y Mono que permite crear apliaciones de consola (si, con interfaz!) para Linux, macOS y Windows. Creado por Miguel de Icaza.
Añade soporte a colores, reescalado de pantalla, eventos, async, etc. A nivel de gestión de vistas es bastante similar a otros frameworks de UI como GTK# .
Conceptos básicos
gui.cs cuenta on Application.Run, que facilita un bucle principal donde:
Procesar eventos de teclado.
Gestiona el foco.
Redibuja áreas de la pantalla.
Timers.
Etc.
Cada elemento visual, hereda de la clase View. Toda View cuenta con propiedades X, Y, Height y Width para la gestión de tamaño y posición. Todo se pone más interesante al poder realizar composición de Views.
¿Y por qué Xamarin.Forms?
Buena pregunta. El framework ya permite grandes posibilidades, es sencillo de usar, así que, ¿por qué?.
Why not?
Xamarin.Forms cada vez llega a más plataformas tras los backends de WPF y GTK, además de seguir aumentando en posibilidades. Ya había utilizada gui.cs para herramientas y pruebas, vi un tweet, nació un reto personal y voila. ¿Por qué no añadir la posibilidad de crear aplicaciones de consola con Xamarin.Forms?.
Backend gui.cs
Disponible en GitHub y en NuGet, nace el backend de Xamarin.Forms de gui.cs.
NOTA: Todos los ejemplos anteriores estan realizados con Xamarin.Forms.
Actualmente con soporte a:
ContentPage
Layouts
Label
Button
Editor
Entry
ListView
ProgressBar
Switch
Paulatinamente se añadirá soporte a otras características y controles.
¿Cómo lo uso?
Partimos de una aplicación de consola. Tras crear la aplicación, añadimos el paquete NuGet Terminal.Gui.Forms:
Se encarga de añadir las referencias necesarias tanto a Terminal.Gui como a Xamarin.Forms.
Creamos un Application de Xamarin.Forms:
public class App : Xamarin.Forms.Application
{
public App()
{
MainPage = new MainView();
}
}
Se encargará de iniciar y establecer la página inicial. La página inicial, creada con XAML:
La página cuenta con una ViewModel enlazada que se encarga de usar un servicio que accederá a información de OpenWeatherMap para informar de datos climatológicos dado un código postal.
Sólo nos falta, en la clase Program, inicializar Terminal.Gui, XamarinForms; cargar nuestra aplicación; y ejecutar la misma:
public class Program
{
public static void Main()
{
Terminal.Gui.Application.Init();
Forms.Init();
var app = new App();
var window = new FormsWindow("WeatherApp");
window.LoadApplication(app);
Terminal.Gui.Application.Run();
}
}
Sencillo, ¿verdad?. Veamos el resultado:
Puedes encontrar el ejemplo en GitHub:
Recuerda, es una Preview…
Estamos ante la primera Preview con un soporte limitado de guis.cs y de Xamarin.Forms. Sin embargo, hay algunas características aun no disponibles: