Ejemplos y tips para crear aplicaciones en Xamarin Forms

Sé que muchos de vosotros están buscando como mejorar en el desarrollo de aplicaciones móviles, por eso he decidido traerles este artículo con Ejemplos y Tips para Xamarin Forms. Este es un contenido muy especial porque es una recopilación que incluye un montón de recursos con ejemplos y buenas prácticas para crear buenas aplicaciones en Xamarin Forms.

Los tres pilares para desarrollar mejores aplicaciones

Siempre he dicho que la clave para desarrollar las mejores aplicaciones se basa en tres pilares sencillos: tu app (diseño y desarrollo), el objetivo de tu app y el desarrollador (o personas involucradas en ).

Tips generales con Xamarin Forms

Curva de aprendizaje

Aprender como usar Xamarin y sus componentes para desarrollar aplicaciones nativas es como aprender a andar en bicicleta: puede parecer difícil o complicado al principio, pero se vuelve simple con la práctica. Afortunadamente, hay toneladas de recursos disponibles para ayudar.

Creo que uno de los recursos claves es la comunidad, las más populares las puedes encontrar en Facebook con una simple búsqueda. Yo les dejare Universo Xamarin en Facebook y Telegram por si les interesa, tenemos bastantes personas activas por allí y un canal de noticias automatizado.

Para las personas que buscan una guía para aprender Xamarin Forms, yo he escrito un articulo donde revelo la “Guía de Xamarin Forms”. Es muy muy completa, y ha tenido muy buena aceptación.

Por otro lado, David Ortinau ha escrito un articulo con “Tips para combatir la curva de aprendizaje”. En este podrás encontrar:

  • Prerrequisitos de instalación
  • Preguntas comunes sobre Navigation, Layouts, Visual Design and Controls
  • Algo mas avanzado como personalizar controles y fuentes, manejar imágenes, etc.

Estructura tu proyecto

Recientemente he creado un e-book en el que resalto las “7 tácticas para estructurar tus proyectos con Xamarin Forms” que te ayudarán a crear aplicaciones más escalables. Si todavía no lo tienes, lo puedes descargar aquí.

Las tácticas que comparto contigo en el e-book son:

  •  Mide antes de comenzar
  •  Entiende la estructura de tu proyecto
  •  Considera algunas capas extras
  •  Cambia la estructura de tus folders convenientemente
  •  Agrega un Framework MVVM
  •  Agrega Código reutilizables
  •  Usa las herramientas que tienes disponible.

Imágenes

Aquí les presento una solución nativa para Xamarin Forms en el manejo de imágenes para mejorar el performance y lo mejor de todo es que lo único que tienen que hacer es agregar una línea de código.

Para esto vamos a usar estas dos librerías:

Quizás muchos de ustedes ya conocen GlideX, pero Nuke es relativamente nuevo y fue desarrollada gracias a que el equipo de Xamarin lanzara “Xamarin Binding Tools For Swift”.

Lo bonito de todo esto es que solo agregando la librería obtienes un +90% de reducción de memoria cuando se manipula Image views en ambas plataformas.

Recursos

Xamarin proporciona una gran cantidad de recursos a través de su repositorio GitHub para Xamarin.Forms. Muchos proyectos de licencia abierta están disponibles en GitHub y se pueden usar inmediatamente en tu próxima aplicación. Si la base para un módulo está disponible en GitHub, no es necesario que lo cree desde cero.

Xamarin GitHub tiene docenas de repositorios para muestras, componentes, libros de trabajo y más.

Informar sobre un bug

Xamarin maneja las notificaciones de errores a través de sus repositorios. Si encuentra un problema con cualquiera de los módulos en los repositorios de Xamarin, proporcione la siguiente información en el informe de error:

  • Los pasos para reproducir el error.
  • El comportamiento o resultado esperado.
  • El comportamiento o resultado real.
  • Cualquier información de respaldo disponible, como archivos de registro, imágenes o vídeos
  • El entorno de desarrollo o prueba en el que se produce el error.
  • Un repositorio de GitHub con el ejemplo

Xamarin.Android

No use un guion en una imagen o nombre de recurso. Si nombra una imagen «nice-icon.png» en lugar de «nice_icon.png» y la suelta en su carpeta drawable, y luego intenta compilar o desplegar, obtendrá todo tipo de errores extraños. Ninguno de estos errores dirá realmente: «No utilice un guion en el nombre de la imagen». Por lo tanto, evítelos a toda costa.

Tips para aumentar el performance de tus aplicaciones

super xamarin by luis matos

Rendimiento

El rendimiento de tu aplicación puede medirse de diferentes maneras, ya sea el rendimiento percibido por el usuario, el tiempo de respuesta de la interfaz o la gestión de la batería. Existen algunas técnicas de Xamarin que puede utilizar para aumentar el rendimiento general de su aplicación móvil, incluidas las siguientes:

De la misma manera te dejo algunos recursos que valen oro para puedas potenciar el rendimiento de tus aplicaciones:

RelativeLayout y AbsoluteLayout

El hecho de que Xamarin Forms tenga un RelativeLayout y un AbsoluteLayout no significa que debas usarlo. Hay otras formas mejores de hacer lo que quieres hacer. De Verdad.

Ni siquiera sé porque aún existe RelativeLayout si ellos mismos nos recomiendan no usarlo.

Con AbsoluteLayout no es recomendable usar  AbsoluteLayout.AutoSize pero la verdad es que es difícil estar seguro de que se verá correcto en todos los factores de forma y si jugará bien con todas las otras configuraciones de diseño de todos los demás controles.

ListView

Rendimiento

Cuando una lista contiene una gran cantidad de datos, puede sufrir un rendimiento de desplazamiento lento o un retraso en la configuración o ingreso de datos. Puede mejorar el rendimiento de ListView en todas las plataformas utilizando una estrategia de almacenamiento en caché.

HasUnevenRows y SeparatorVisibility

Si eres nuevo en Xamarin Forms ListView (que es genial, por cierto), es posible que tengas dificultades para lograr que el diseño vertical «crezca» dinámicamente de la manera que esperas, y puedes notar (especialmente en algunas versiones de iOS) tienen líneas horizontales que aparecen mágicamente como divisores entre elementos.

Para esto, tiene dos propiedades que quizás no conozca: HasUnevenRows y SeparatorVisibility.

Tips para sacarle mayor provecho a Visual Studio

Extensiones

He escrito un artículo que titule “Herramientas de diseño” en Xamarin Forms que ha tenido una aceptación brutal. Dentro de este articulo te presento algunas herramientas para trabajar con Visual Studio entre otras cosas muy interesantes, si no lo has visto te lo dejo aquí.

Code Snippets

Un code snippet es una pieza de texto guardada como plantilla, reutilizable y que puede contar con argumentos reemplazables por valores cuando se va a utilizar. Estos ayudan en determinadas situaciones a escribir código repetitivo y aumentar nuestra productividad.

Con el tiempo, teniendo un framework de trabajo y un repositorio de codesnippets puede ser una real bendición.

Bueno, aquí les dejo la guía oficial para crear Code Snippets en Visual Studio que es bastante completa.

Tips para sacar mayor provecho a tu estructura MVVM

Si en este punto todavía te estas preguntando si deberías usar MVVM, yo aclararé tus dudas… Si, debes si tu aplicación supera las 5 pantallas y se va a seguir escalando. NO necesitas saber nada más. Es bueno que tengas claro que el patrón Model-View-ViewModel (MVVM) ayuda a separar limpiamente la lógica de negocio de una aplicación de su interfaz de usuario (UI).

Framework MVVM

Cuando se trata de marcos MVVM, hay muchas opciones disponibles. ¿Cuál debes elegir entonces? La regla general parece ser usar la solución más simple pero es bueno que tengas claro el alcance de tu aplicación.

Aplicaciones ligeras

Para mantener un marco lo más ligero posible, puede usar MVVMLight o si desea algo simple y pequeño para soportar su propia estructura, puede usar MVVMHelpers de James Montemagno.

Si necesita un ViewModel base (como una implementación de INotifyPropertyChanged) sobre el cual construir, sin campanas y silbatos adicionales, le gustará mucho la nueva navegación Shell.

Opciones populares

Estos son algunos de los más comunes y se utilizan para la mayoría de las aplicaciones.

  • MVVMCross es un marco multi-plataforma popular y ampliable que le permite compartir mejor el código y permite que el desarrollador decida cómo quiere usar el marco
  • FreshMvvm es un Framework Mvvm súper ligero diseñado específicamente para Xamarin.Forms. Está diseñado para ser fácil, simple y flexible.
  • ¡ReactiveUI es un marco modelo-vista-vista-modelo reactivo avanzado, composable y funcional para todas las plataformas .NET! Estoy probando esto con Prism y me encanta.

Grandes aplicaciones

Otra opción (que puedo recomendar) sería la biblioteca Prism. Si bien estos pueden usarse para cualquier aplicación, se destacan particularmente en aplicaciones más grandes, donde la estructura forzada y el aislamiento son más importantes.

Hace mucho más que solo proporcionar una plantilla estándar para flujos de trabajo de desarrollo comunes (por ejemplo, admite diferentes bibliotecas DI / IoC e implementa su propia navegación) y puede ser modular, por lo que puede elegir lo que desea usar. También es bastante popular entre la comunidad Xamarin.

Tips para sacar mayor provecho a tus proyectos con XAML

Cuando se usan los formularios de Xamarin, a veces hay un código que hacemos en el código de atrás porque tal vez no sabemos que se puede hacer usando XAML.

Bueno, XamGirl escribió una publicación con 10 cosas que tal vez no sabías que puedes hacer en XAML. En la publicación «Consejos y trucos de XAML» encontrarás:

  1. Pasar argumentos de constructor
  2. Salto de línea
  3. Crear color en XAML
  4. El poder de x: referencia
  5. Emoticones
  6. Convertidores
  7. Disparadores de datos
  8. Formato de cadenas de texto
  9. Estilos generales a tus controles
  10. Propiedades adjuntas

NO crees tu UI en tu Code-Behind

La mayor parte del desarrollo de Xamarin Forms se basa en XAML con el patrón MVVM. Con MVVM, a menudo verá clases de código subyacente (code-behind) que están casi completamente vacías, con solo un constructor presente. La lógica en estos casos se transfiere a una clase «ViewModel» que proporciona un enlace entre la Vista y el Modelo para vincular objetos en el ViewModel y usarlo como contexto de datos para su Vista.

En general, es recomendable usar c# cuando necesite crear controles dinámicos, pero que tenga el diseño general (guiones gráficos, estilos, plantillas de datos, etc.) en el archivo XAML.

Si quieres saber más sobre el código subyacente, he escrito un artículo llamado «Qué significa el code-behind en Xamarin Forms» y puedes echarle un vistazo si quieres más detalles.

Tips para sacar mayor provecho a tus proyectos con C#

Ruta de aprendizaje csharp

Así es, justo como lo acabas de leer “proyectos con C#”. Con el pasar del tiempo se esta viendo como crece el interés por parte de los desarrolladores para trabajar el diseño de interfaces de manera declarativa y los desarrolladores de Xamarin Forms lo saben. Muestra de ello es la reciente incorporación de “CSharpForMarkup” en Xamarin Forms para definir tus UI de manera declarativa.

Con el aparecer de nuevos Frameworks hemos notado como los desarrolladores han aceptado y adaptado el concepto de crear Interfaces de Usuario (UI) de manera declarativa por las ventajas que ofrece.

Siempre se ha podido utilizar código CSharp (C#) para crear vistas en Xamarin Forms, pero la verdad es que con todas las características que tiene XAML a favor puede ser un poco difícil para los nuevos el tomar la decisión para utilizar CSharp y más ahora que tenemos XAML HotReaload.

Utilizar C# en vez de XAML tiene su ventaja y desventajas. Para mi la mayor ventaja a favor de XAML es que hay soporte para HotReload. Una vez haya soporte para C# HotReload, creo que la cantidad de usuarios utilizando C# aumentara drásticamente.

De igual manera, hay algunas herramientas que son de terceros que soportan C# HotReload y si no te importa pagar un poco por una licencia de estas, vas a disfrutar mucho creando tus UI en C#.

Tips para mejorar el diseño de tus aplicaciones

xamarin visual design

Si queremos que nuestras aplicaciones llamen la atención necesitamos utilizar las herramientas adecuadas para ello. Como te mencione anteriormente, he escrito un post hablando sobre “herramientas de diseño en Xamarin Forms”.

En este articulo podrás ver:

  • Paquetes NuGet que vale la pena ver
  • Controles personalizados
  • Herramientas de HotReload
  • Extensiones de VS
  • Etc.

UI Inspiración

¿A dónde van los diseñadores cuando quieren encontrar inspiración, ponerse al día con las últimas tendencias o simplemente relajarse y explorar los diseños de otras personas? No es ningún secreto que casi el 90% de ellos irán a Behance & Dribbble.

Pero hay muchos otros lugares con excelente contenido que vale la pena explorar. Muchos de los cuales, desafortunadamente, no reciben tanta atención de la comunidad del diseñador como merecerían. Enumeraré solo algunos de los mejores ejemplos que puede encontrar en línea hoy.

Tips para encontrar los mejores ejemplos de apps en Xamarin Forms

GitHub

Si quieres los mejores ejemplos de aplicaciones móviles, GitHub es tu opción. En GitHub puedes encontrar muchos ejemplos de aplicaciones con Xamarin Forms, pero te voy a dar algunas cuentas o repositorios para hacer tu búsqueda menos dolorosa.

Documentación oficial

La documentación oficial es tu mejor amiga. ¿Y adivina qué? ¡¡También tienen ejemplos!! Así es, aquí te dejo la pagina con algunas aplicaciones hechas por el equipo de Xamarin y el repositorio con los ejemplos usados en la documentación.

Otros

Si quieres el código de algunas plantillas creo esta pagina te va a encartar, tiene “Xamarin.Forms UI Snippets” totalmente gratis.

Extra tip

Algo que siempre me ha gustado es llevar lo que hago a todas partes, tengo wallpapers para mis teléfonos, t-shits, stickers, etc. Incluso he hecho amigos por esto. Entonces, si quieres un poco de variedad en tus fondos de pantalla, te dejo algunos aquí.

Muchas gracias por leer esta publicación!

¿Qué opinas de este contenido?
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.

Dejame tus comentarios

avatar
  Suscribirte  
Notificar de

¿Cuanto gana un desarrollador móvil?

smartphone.png

Se parte de un estudio completo que responde a las más frecuentes preguntas que desarrolladores móviles se hacen a si mismos.

Buscar en el sitio