¡Empecemos nuestro viaje juntos para construir hermosas aplicaciones nativas multiplataforma con .NET, Xamarin y Visual Studio! En este blog voy a guiarte por todo el proceso y a describir todo lo que hay en Archivo -> Nuevo para Xamarin. Si eres un estudiante más visual, tengo un vídeo completo que puedes ver:
Primero vamos a sentar algunas bases respondiendo a algunas preguntas frecuentes.
¿Qué es .NET?
.NET es un tiempo de ejecución multiplataforma, de alto rendimiento y de código abierto que se utiliza con varios lenguajes, editores y bibliotecas que permite crear aplicaciones para la web, el móvil, el escritorio, los juegos y mucho más. Es la base que permite que el código se ejecute en diferentes plataformas como iOS, Android y Windows. Si usted es un desarrollador web, esto es como el tiempo de ejecución V8 que ejecuta JavaScript o si usted es un desarrollador de Java, la JVM que ejecuta Java.
¿Qué es Xamarin?
.NET tiene una serie de marcos que se construyen para él que permiten escenarios únicos para el desarrollador para plataformas específicas. Por ejemplo, ASP.NET Core y Blazor son marcos construidos para .NET para el desarrollo web. WPF y UWP son marcos construidos para .NET para el desarrollo de escritorio. Xamarin es un marco y una herramienta que permite crear aplicaciones para iOS, Android y macOS. También contiene varias bibliotecas que permiten el desarrollo multiplataforma en iOS, Android, macOS y Windows, como Xamarin.Forms para la interfaz de usuario multiplataforma y Xamarin.Essentials para acceder a las características de la plataforma nativa multiplataforma.
¿Qué lenguajes de programación puedo utilizar?
.NET admite varios lenguajes, como C#, F# y Visual Basic. Puedes utilizar cualquiera de estos lenguajes de programación para crear aplicaciones con Xamarin, aunque yo soy un desarrollador de C# y es el lenguaje principal para el desarrollo de aplicaciones. Sin embargo, hay algunos marcos fantásticos para F# como Fabulous para el desarrollo funcional.
XAML es otro «lenguaje» que se utilizará para construir la interfaz de usuario con Xamarin. XAML se ha utilizado durante mucho tiempo para construir aplicaciones de Windows con WPF y UWP y tiene algunas características excelentes, como el marcado fácil de leer, la tecnología Hot Reload y la vinculación de datos avanzada para hacer que el desarrollo de la interfaz de usuario sea muy fácil.
¿Qué herramientas puedo utilizar?
.NET permite a los desarrolladores utilizar una amplia gama de herramientas, incluida la línea de comandos, los editores de código como Visual Studio Code y los IDE completos (entorno de desarrollo integrado) con Visual Studio 2019 y Visual Studio 2019 para Mac. Para desarrollar aplicaciones móviles con Xamarin necesitaremos utilizar Visual Studio 2019 o Visual Studio 2019 para Mac, ya que cuentan con las funciones completas para crear aplicaciones.
Así que, ¡empecemos a crear nuestras primeras aplicaciones móviles con Xamarin!
Instalación de Visual Studio para el desarrollo móvil
El primer paso en tu viaje multiplataforma es instalar Visual Studio 2019 para Windows o Visual Studio 2019 para Mac.
Al instalar Visual Studio 2019 en Windows todo lo que tienes que hacer es seleccionar la carga de trabajo de desarrollo móvil con .NET:
En Visual Studio 2019 para Mac puedes seleccionar instalar Android e iOS.
Si estás haciendo desarrollo iOS también necesitarás instalar Xcode en tu máquina macOS.
¡Después de esto estás todo listo y preparado para el desarrollo móvil!
Cuando crees y ejecutes un proyecto de Android es posible que se te pida que instales SDKs de Android adicionales y que crees emuladores de Android.
Creando tu proyecto
Ahora que tenemos Visual Studio 2019 y Xamarin instalados ¡vamos a trabajar! Al iniciar Visual Studio 2019 tendrás una opción para crear un nuevo proyecto. En Windows puedes buscar Xamarin.Forms o utilizar el filtro de tipos de proyecto y seleccionar Mobile. Querremos seleccionar Mobile App (Xamarin.Forms).
Cuando seleccionemos este nuevo proyecto, veremos un nuevo cuadro de diálogo que nos preguntará qué tipo de plantilla para la app queremos utilizar:
Tenemos unas cuantas opciones para seleccionar en función del tipo de aplicación que queremos construir.
Flyout, Tabbed, & Blank
Flyout &Las plantillas de aplicaciones Tabbed se basan en la última tecnología de Xamarin.Forms llamada Shell. Permite un andamiaje más rápido de las aplicaciones y ofrece características únicas como la navegación basada en URL. Estas plantillas son similares con una diferencia principal si quieres un menú flyout o pestañas inferiores para la base de tu app.
La app en blanco es justo eso y ofrece una plantilla bastante simple con una sola página y nada más.
¡Vamos con Flyout! Quiero que empecemos por aquí ya que la mayoría de los tutoriales no pasan por Shell y para mí es el futuro del desarrollo de apps en Xamarin. Esta plantilla tiene mucho en es por lo que en futuros posts iremos repasando cada sección, pero por hoy solo crearemos el proyecto y repasaremos lo que es un Shell.
Si estás en Visual Studio 2019 para Mac querrás seleccionar Multiplataforma > App > Flyout Forms App
¿Qué hay en el proyecto?
Ahora que el proyecto de la app ha sido creado, verás varios proyectos dentro de una única solución.
Veamos lo que hay en nuestra nueva solución:
El primer proyecto contiene varias carpetas, archivos de código y archivos de interfaz de usuario. Este proyecto es un proyecto .NET Standard que nos permite tener un único proyecto que puede ser compartido a través de diferentes sistemas operativos. Este proyecto es donde vamos a escribir la mayor parte de nuestro código.
iOS &Los proyectos de Android son la «cabeza» o el proyecto «padre» que se utiliza para albergar el código específico de la plataforma, la configuración, los activos, y más. Aquí es donde usted querrá configurar diferentes ajustes como el nombre de la pantalla, el icono de la aplicación, los números de versión, y cualquier código que se necesita para iOS o Android cosas específicas que no están disponibles multiplataforma. En algún momento tendrás que ir a estos proyectos y ajustar las cosas, pero por ahora nos quedaremos en el proyecto multiplataforma.
Xamarin.Forms Cross-Platform UI
Dentro de nuestro proyecto .NET Standard multiplataforma encontraremos un poco de código para nuestra aplicación. Esta plantilla muestra una app de ejemplo que tiene una lista de artículos y una página sobre. Los elementos están organizados en carpetas:
- Modelos: Son clases que representan datos en tus aplicaciones como Persona, Coche, Perro, Gato, etc. En esta app tenemos un único modelo llamado Ítem.
- Servicios: Dentro de esta carpeta es donde pondrías el código que accede a cosas no relacionadas con la UI como llamadas a servicios web, bases de datos, etc. En el proyecto en un simple MockDataStore que se utiliza para almacenar elementos en la memoria.
- Vistas: Aquí es donde vivirán los archivos de nuestra interfaz de usuario XAML.
- ViewModels: En esta carpeta se encuentran los archivos que se asignan casi 1:1 a la carpeta Views. Esto se debe a que cada View tiene un ViewModel que está vinculado para que Xamarin.Forms pueda unir los dos para que la View pueda mostrar información o llamar a métodos en cada ViewModel.
Veamos el AboutPage.xaml que es la primera página que veremos cuando lancemos la app. Aquí vemos algunas cosas, primero es el elemento de nivel superior ContentPage:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">Aquí hay unas cuantas etiquetas xmlns que representan dónde vive el código específico. Las etiquetas default y x se incluyen en todos los archivos y son para la funcionalidad base. La etiqueta xmlns:vm nos permite acceder a nuestro propio código desde XAML, que veremos en un momento. El x:Class es una referencia al espacio de nombres y al nombre de la página, esto coincide con el código que hay detrás. Por último, hay una propiedad Title que está ligada por datos a una propiedad llamada Title en nuestro ViewModel.
Podemos establecer propiedades adicionales como el BindingContext y Resources con contenido XAML. Aquí vamos a utilizar esa etiqueta xmlns:vm para establecer el BindingContext a una nueva instancia del AboutViewModel:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Lo siguiente es un recurso Color que se puede utilizar en la página. Los recursos nos permiten eliminar el código duplicado y crear pares clave/valor reutilizables. Esto es similar en cierto modo a CSS en el desarrollo web.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Podemos añadir más cosas a los Recursos, incluyendo cadenas, estilos y más.
Por último, cada Página puede tener un control de elemento raíz. Este es normalmente un Layout como StackLayout, ScrollView, o una Grid como la que tenemos aquí. La rejilla es un control impresionante que tiene filas y columnas. No vamos a entrar en detalles de los layouts, pero este muestra una imagen, algo de texto, y un botón que puede ser pulsado para abrir un navegador web.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Nota el
{StaticResource Primary}, que es una referencia a un recurso que definimosAccentantes, peroPrimaryse encuentra en nuestro App.xaml, que son recursos disponibles en toda la aplicación.
Para encontrar más layouts y controles puedes abrir la Caja de Herramientas para ver lo que hay disponible:
Por último, si seleccionas un control o layout el panel de Propiedades te mostrará todas las diferentes propiedades que están disponibles en ese control.
Una cosa que es muy importante es que cada una de estas páginas XAML tiene código detrás que es importante para la vista XAML y tiene métodos específicos para el constructor y el evento como cuando las páginas se muestran o desaparecen. Puedes usar la pequeña flecha desplegable para ver el código .xaml.cs detrás del archivo.
Si lo abres, verás que es muy simple ya que para esta vista no hay ningún evento especial que se necesite en este momento.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Interacción con el usuario y ViewModels
Ahora, vamos a hablar del ViewModel para esta página que fue creada en el XAML. Abre el archivo ViewModels -> AboutViewModel.cs haciendo doble clic sobre él.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}Este es un ViewModel sorprendentemente simple, pero es un ejemplo notable de cómo funciona la vinculación de datos. Aquí el ViewModel establece el Título a Acerca de y luego crea un nuevo Comando que está llamando a Browser.OpenAsync para abrir un navegador web en la página.
Ese Command es algo especial. A diferencia de Title que es un simple string que se mostrará, el Command es una clase especial que podemos usar para decirle a nuestra interfaz de usuario que haga algo cuando el usuario interactúe con ella. Por ejemplo en nuestro Button vimos el siguiente código:
Command="{Binding OpenWebCommand}"Este código le está diciendo a Xamarin.Forms que hay un public Comando en nuestro ViewModel que tiene código para ejecutar cuando el usuario haga clic en el botón. En este caso queremos abrir el brower, que es una de las muchas características nativas disponibles de Xamarin.Essentials. Llamando a Browser.OpenAsync lanzaremos el navegador específico para iOS y Android con una sola línea de código.
Cambios rápidos con XAML Hot Reload
Ahora, es el momento de lanzar nuestra aplicación. A mí me gusta empezar en Android porque los emuladores están disponibles localmente tanto en Windows como en macOS. En el menú de Visual Studio verás que Android es el proyecto por defecto y el botón de depuración estará disponible y mostrará tus emuladores de Android disponibles. Al pulsar el botón de depuración si no tienes ningún emulador se te pedirá que crees uno.
Cuando la app se lance entrará en modo Depuración que nos permite establecer puntos de ruptura en nuestro código para ver los valores, pero también habilita la Recarga en caliente de XAML donde podemos hacer cambios en la UI sin tener que parar la depuración.
Abramos el AboutPage.xaml y cambiamos el color Accent a un color diferente. Aquí lo actualizaré a naranja y le daré a guardar para ver los cambios.
En este punto podemos añadir nuevos controles, actualizar la interfaz de usuario y seguir trabajando en nuestra aplicación en Android.
Desplegar en iOS con Hot Restart
¡Vamos a desplegar iOS! Haz clic con el botón derecho del ratón en el proyecto de iOS y selecciona Set as Startup Project:
En iOS las cosas son un poco diferentes para los desarrolladores. Si estás en macOS e instalas Xcode tendrás disponibles los Simuladores de iOS. Si es tu caso, puedes seleccionar un simulador y luego depurar tu app. En Windows, no hay simuladores de iOS 🙁 así que hay dos formas de conseguir tu
- Simulador Remoto de iOS: Si tienes una máquina macOS puedes instalar Visual Studio 2019 para Mac y Xcode y conectarte a ella desde tu máquina Windows para usarla como máquina de compilación remota. El simulador de iOS puede entonces lanzarse desde la pantalla de tu máquina Windows, ¡lo cual es muy genial!
- Reinicio en caliente de iOS: Esta es una nueva tecnología de vista previa que le permite implementar una construcción de depuración de su aplicación directamente a su dispositivo iOS que está conectado a su máquina de Windows. Esto es genial si no tienes un mac y quieres depurar tu aplicación y utilizar características impresionantes como XAML Hot Reload.
En base a tu configuración y equipo disponible hay una gran opción para que empieces a depurar tu aplicación iOS desde Windows. Lee la documentación que he enlazado para obtener una guía de configuración completa.
Entendiendo la App y el Shell
Lo último de lo que quiero hablar es de lo que hay en nuestra *App y lo que hay en nuestro Shell:
Dentro de nuestra App.xaml encontrarás recursos globales como elPrimaryque usamos antes en el botón, pero también estilos como un estilo globalButtonque estamos usando con los estados cuando está activado y desactivado. Si abres el código de App.xaml.cs detrás verás la creación delAppque está estableciendo elMainPagea nuestroAppShelly también tiene eventos adicionales similares a los de nuestra página, pero para la aplicación como cuando se inició, se fue a dormir (aka fondo), y se reanudó.
El AppShell.xaml alberga el Shell de la estructura de nuestra aplicación. Incluye estilos y colores para el shell de nuestra aplicación, y luego tiene elementos adicionales para las pestañas, flyouts y páginas que se muestran. Aquí encontraremos dos elementos FlyoutItem que representan el AboutPage y el BrowsePage. Además, tiene un MenuItem para mostrar un botón de login/logout. El ShellContent tiene un enlace a nuestra página que hemos creado y automáticamente las páginas aparecerán y navegarán a cada una de ellas cuando se seleccionen.
Hay mucho más en Xamarin.Forms Shell y en la creación de aplicaciones con Xamarin, pero esperamos que esto te ponga en el camino de salida para ponerte en marcha con tu aplicación. Asegúrate de seguir la cuenta de .NET dev.to para ver más entradas de esta serie.