Hoy en día en el mundo de los dispositivos móviles existen dos jugadores muy importantes: Apple y Google. El primero generando la mayor cantidad de ingresos para los desarrolladores, el segundo con una cuota de mercado inmensa. Por esto, si un desarrollador o una empresa quieren publicar su aplicación móvil, no pueden ignorar ninguna de las dos plataformas.
Sin embargo, la diferencia entre ellas conlleva que las empresas deban contar con dos equipos de desarrolladores, uno que domine Objetive-C o Swift, Xcode y conozca de la plataforma iOS, y otro que domine Java o Kotlin, Android Studio y conozca de la plataforma Android.
Por supuesto, esto deriva en costos más altos para la empresa, en algunos casos tiempos de desarrollo más largos y versiones que no crecen o se desarrollan a la misma velocidad. Para desarrolladores independientes, esto es una tarea aún más grande, teniendo que dominar ambas plataformas.
Xamarin es una plataforma que permite desarrollar aplicaciones iOS y Android utilizando código C#, permitiendo compartir código entre plataformas hasta un 75% (usando Xamarin clásico) o hasta 100% (usando Xamarin.Forms).
En este post crearemos un Hola Mundo con Xamarin.Forms, que nos permitirá introducirnos a un mundo en el que los equipos sólo debe aprender C# y utilizar Visual Studio para crear sus aplicaciones iOS y Android.
Para poder iniciar a desarrollar aplicaciones con Xamarin.Forms necesitas instalar Visual Studio, sea en Windows o en macOS. La forma más fácil es navegar a xamarin.com/download, desde donde se descargará la versión adecuada para tu computadora. El instalador preparará todo tu entorno, instalando todo lo necesario para que crees aplicaciones Android y iOS utilizando Visual Studio.
Una vez que tengas instalado Visual Studio puedes abrirlo para crear un nuevo proyecto. Las versiones de Windows y macOS varían un poco, pero en ambos deberás encontrar una opción de crear un nuevo proyecto desde el menú Archivo, y desde la ventana emergente, seleccionar multiplataforma para encontrar la opción de aplicación multiplataforma.
También encontrarás la opción de renombrar tu aplicación, que por defecto será sólo App1, pero puedes modificar a algo como HolaMundo.
Enseguida podrás seleccionar el tipo de aplicación Xamarin que se creará. Asegúrate de seleccionar Xamarin.Forms como la tecnología de interfaz de usuario y biblioteca de clases portable como la estrategia de uso compartido de código.
Estas selecciones nos permitirán reutilizar hasta 100% de código entre plataformas, utilizando la estrategia de uso compartido de código más utilizada y robusta.
La solución creada se compone de 3 proyectos, o 4 proyectos si creas la aplicación desde Visual Studio en Windows. El primer proyecto es el PCL, es el proyecto más importante en una aplicación desarrollada con Xamarin Forms, ya que contiene el código que se compilará para funcionar en Android y iOS.
También encontrarás proyectos iOS y Android (tal vez Windows), para que puedas agregar funcionalidades nativas, aunque en el caso de Xamarin.Forms, raramente utilizarás.
Toda la interfaz y lógica de la aplicación la podemos crear desde el proyecto PCL y es justo lo que haremos ahora.
Una de las cosas geniales de utilizar Xamarin.Forms, no sólo es poder compartir código C#, sino que puedes compartir código XAML para definir la interfaz de Android y iOS sólamente una vez. Comecemos justamente definiendo la interfaz para nuestra aplicación abriendo el archivo MainPage.xaml.
XAML es un lenguaje de marcado, similar a HTML o XML, así que si tienes experiencia en alguno de esos lenguajes, XAML te será muy familiar. La MainPage por defecto está conformada por un ContentPage que contiene un Label. Para definir nuestra aplicación Hola Mundo cambiaremos el contenido del ContentPage para que sea un Grid en lugar del label. Este contenedor nos permitirá tener varios elementos en la interfaz, cosa que el ContentPage no permite por sí sólo.
Dentro del Grid podrás definir un nuevo Label y establecer su contenido a algo como “Escribe tu nombre”, en un momento agregaremos una caja de texto para que el usuario escriba su nombre en ella. Nota que la definición requiere una etiqueta de apertura y una de término de la definición.
<Label>Escribe tu nombre</Label>Define debajo del Label un Ent`ry, en este caso la definición es más corta. Nota que la etiqueta de cierre puede contener simplemente “/>” si no definimos contenido. Este Entry deberá tener un nombre para que a través de él accedamos a el elemento desde el código C#.
<Entry x:Name="nombreTextCell"/>
Finalmente define un Button debajo del Entry, en este caso necesitaremos manejar el evento de click, es decir, responder cuando el usuario presiona sobre el botón, para eso podemos definir un nombre para el evento Clicked. Cuando lo hagamos, automáticamente se creará un método en el archivo MainPage.xaml.cs que se ejecutará cada que el usuario presione en el botón. Además, el botón deberá tener un texto como llamada de acción.
<Button Clicked="Button_Clicked"Text="Saludar"/>
Ahora, con la definición como la tenemos, todos los elementos estarían encimados uno sobre otro. Para resolver esto,podemos definir filas dentro del Grid.
El Grid es un componente sumamente importante en XAML, ya que puede contener incluso otros Grids que contengan Grids, además que se puede dividir en columnas y filas. Para nuestros tres elementos podemos definir 3 filas, cada una con una altura automática que sea la ideal para almacenar el elemento correspondiente.
<Grid.RowDefinitions><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/><RowDefinitionHeight="Auto"/></Grid.RowDefinitions>Teniendo las 3 filas listas, bastará con definir la fila del grid en la que cada elemento deberá dibujarse, y nuestros elementos ya no se encimarán.
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label>Escribe tu nombre</Label>
<Entry x:Name="nombreTextCell"Grid.Row="1"/>
<Button Clicked="Button_Clicked"Text="Saludar"Grid.Row="2"/>
</Grid>
Finalmente, podemos abrir el archivo C# de la misma clase donde el método se creó automáticamente y agregar una línea de código que nos permita mostrar un mensaje personalizado al usuario.
privatevoidButton_Clicked(object sender, EventArgs e)
{
DisplayAlert("¡Hola!", $"¿Cómo estás {nombreTextCell.Text}?", "¡Hola!");
}
Teniendo esto, puedes probar la aplicación en iOS y Android, nota que los elementos se adaptan a el Sistema Operativo para mostrarlos en su forma nativa, aún cuando sólo los definimos una vez, y que el código C# funciona perfectamente en ambas plataformas.
¡Cómo magia!
Pronto lanzaremos el Curso de Xamarin Forms en el que podrás aprender mucho más. Queremos conocer tus proyectos en Xamarin y Xamarin.Forms. Cuéntanos qué haz hecho y los consejos que podrías darles a otros desarrolladores en los comentarios.
