M.C.

TIRZO ANTONIO MEDINA CARDENAS

 Introducción
Xamarin es una plataforma que nos permite
crear aplicaciones móviles tanto para Android
como para iOS y Windows Phone; Ademas de
que nos permite reducir tanto los perfiles como la
cantidad de equipos involucrados en el desarrollo.
Xamarin.Forms es un kit de herramientas de interfaz
de usuario multiplataforma que permite a los
desarrolladores crear eficazmente diseños de interfaz
de usuario nativa que se pueden compartir entre
aplicaciones de iOS, Android y Plataforma universal
de Windows. En esta serie se presentan los conceptos
básicos del desarrollo de Xamarin.Forms y se describe
la compilación de aplicaciones multiplataforma y
multipantalla.
Desarrollando Apps
multiplataforma con
Xamarin.Forms.
¿Rentable o locura?
Desde la aparición de los smartphones y las tiendas de
móviles, las empresas han ido evolucionando para estar
presentes en este sector ya sea con sus productos en
forma de Apps o con simples aplicaciones a modo de
presentación de ellas mismas. Debido a la heterogeneidad
en las diferentes tiendas, hay que hacer desarrollos
específicos para cada una de las plataformas o, al menos
las más populares y diferentes entre sí como son Windows
Phone (ahora Windows 10), iOS, Android e incluso
Blackberry, con el sobrecoste que conlleva además de
la dificultad para encontrar desarrolladores que dominen
todas las plataformas (pocos o ninguno).
Es en este sentido donde cobran gran
importancia las plataformas de desarrollo
multiplataforma como PhoneGap,
Cordova (basado en el anterior)… que
usan HTML5 como base fundamental pero que
presentan el problema de la comunicación con el
dispositivo en sí. Esto provocaba que, al final,
hubiera que desarrollar módulos específicos
para cada plataforma/dispositivo y así poder
usar por ejemplo la cámara, con lo que al final
teníamos aplicaciones híbridas.
Es en este sentido donde cobran gran
importancia las plataformas de desarrollo
multiplataforma como PhoneGap,
Cordova (basado en el anterior)… que
usan HTML5 como base fundamental pero que
presentan el problema de la comunicación con el
dispositivo en sí. Esto provocaba que, al final,
hubiera que desarrollar módulos específicos
para cada plataforma/dispositivo y así poder
usar por ejemplo la cámara, con lo que al final
teníamos aplicaciones híbridas.
Finalmente, la aparición de Xamarin classic y, sobre
todo, Xamarin Forms en la que se centra este artículo,
nos facilita la vida ya que compila código nativo y nos
permite realizar aplicaciones multiplataforma con un
único desarrollo eincluso sin tener que escribir
código nativo de cada plataforma.
En el caso de Xamarin.Forms, es posible crear
aplicaciones multiplataforma muy rápidamente con
el estilo por defecto de cada plataforma. En caso de
querer personalizar los estilos la cosa se complica un
poco pero no es imposible, requiriendo que tengamos
que bajar a las “minas” a escribir código y crear
controles o modificar la renderización de los ya
existentes para lograr el aspecto deseado como por
ejemplo si queremos que la aplicación se vea igual en
todas las plataformas.
 Arquitectura Xamarin Clasica

La forma de plantear el diseño de la App tenia que ser parecido a este:

1 – Core Library: Xamarin nos proporciona la posibilidad de crear codilgo
compartido en C# para reutilizar en todas las plataformas. En este código
podríamos tener toda la lógica de negocio, la capa de acceso a datos y la
capa de servicios. De esta manera solo tendremos una librería donde
poner nuestra lógica y reducir el codigo repetid y facilitar el mantenimiento.
2 – Specific Platform Layer: Aunque utilicemos codigo compartido
siempre necesitaremos acceder a las utilidades nativas de la plataforma y
crear una interfaz de usuario especifico para cada plataforma
Con la aparición de Xamarin.Forms ha cambiado mucho la forma de afrontar el
diseño de las Apps y es que podemos tener una capa de interfaz común para diseñar
nuestras propias interfaces multiplataforma, lo que da por resultado los controles
nativos de la plataforma.
1- Core Library: Logica compartida
2- Shares UI Code: Interfaz de usuario compartido
3- Specific Platform Layer: Acceso a recursos específicos de la plataforma
Utilidades a conocer…
Algo de lo que verán mucho o deben de conocer es sobre:
CustomRenderers – Nos permite personalizar la visualización y el comportamiento
de los controles para cada una de las plataformas.
DependencyServices – Nos permite acceder desde Xamarin.Forms a características
nativas de cada plataforma, como podría ser el GPS, cámara, etc.
MessagingCenter – Nos permite publicar y subscribirse a mensajes para comunicar
nuestros ViewModels o diferentes componentes.
Ahora ya que estamos un poco empapados de lo que nos enfrentaremos a futuro, les
platico de que tratara la aplicación, esta sera de consumir datos reales y que brinden
actualizaciones regulares, y bueno, lo mas usual es brindar conocimiento del clima,
se que existen muchas, pero son las que a mi parecer cumplen con todas las
demandas de lo que una App debe de tener.
 Requisitos de Xamarin.Forms
Xamarin se puede instalar como parte de una nueva instalación de Visual Studio
2017, con los pasos siguientes:

1.Descargue Visual Studio 2017 Community, Visual Studio Professional o Visual

Studio Enterprise desde la página de Visual Studio (en la parte inferior se
encuentran los vínculos de descarga).

2.Haga doble clic en el paquete descargado para iniciar la instalación.

3.Seleccione la carga de trabajo Desarrollo para dispositivos móviles con .NET en

la pantalla de instalación:
4. Con la opción Desarrollo para dispositivos móviles con
.NET seleccionada, eche un vistazo al panel Detalles de la
instalación de la derecha. Aquí puede anular la selección de opciones
de desarrollo para dispositivos móviles que no quiera instalar.
5. Cuando esté listo para comenzar la instalación de Visual Studio 2017,
haga clic en el botón Instalar situado en la esquina inferior derecha:

En función de la edición de Visual Studio 2017 que

vaya a instalar, el proceso de instalación puede tardar
bastante tiempo. Puede usar las barras de progreso
para supervisar la instalación:
 Como requisito
Fundamental:
•Experiencia con programación orientada a objetos es
recomendada
•Una computadora Windows será necesaria para crear apps
Windows (no para iOS ni Android)
•Una computadora con macOS será necesaria para crear
apps iOS (no para Android ni Windows)
•Puedes tomar el curso aunque no tengas dos computadoras
(una Windows y una Mac)

Xamarin.Forms te permite resolver todo esto, al crear aplicaciones

Android, iOS y Windows con una base de código C# e interfaz XAML 100%
compartida entre las plataformas. Ahora solo tienes que escribir la lógica
una vez en C#, y definir la interfaz una vez en XAML para que se genere
una aplicación COMPLETAMENTE NATIVA, de cada una de estas
plataformas.
6.Cuando haya finalizado la instalación de Visual Studio
2017, haga clic en el botón Iniciarpara iniciar Visual
Studio:
 Creando la primera aplicación
crear nuevo proyecto y seleccionar del grupo “Mobile
Apps” la plantilla Blank App (Xamarin.Forms
[Portable|Shared]) de las que recomiendo usar la de
tipo portable.
Una vez creado el proyecto, en Visual Studio nos pedirá
las credenciales de la cuenta de Xamarin para evaluar la
licencia de uso y, posteriormente, un Wizard para
conectar con un Mac para poder realizar la compilación
del proyecto para iOS y así poder testearlo. Si no
tenemos uno disponible, simplemente debemos cancelar.
 Probando el proyecto
Una vez hemos creado la solución, tendremos
disponibles, la librería portable (PCL) y los proyectos
relativos a cada plataforma, Android à Droid, iOS y
WinPhone à Windows Phone.
Llegados a este punto podemos ejecutar la
aplicación en nuestros emuladoresy comprobar
que funciona en todos ellos.
En el proyecto de la librería Portable es donde debemos escribir todo
el código común que, con bastante probabilidad y si la aplicación no es
de extrema complejidad o de diseño muy extravagante, será el único
proyecto en el que tengamos que escribir código a excepción de las
instrucciones “Init” de los SDKs que podamos querer usar como por
ejemplo Azure Mobile Services que habrá que inicializarlo en iOS y
Android. Asimismo, las vistas pueden ser comunes y sólo en algunos
casos será necesario hacer uso de “Custom Renderers” para modificar el
comportamiento por defecto de algunos controles.
 CREANDO EL PROYECTO
“HOLA MUNDO”

1.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.
Estructura del proyecto Xamarin.Forms
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.

XAML
GRID
C#
 XAML

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 Entry, 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.
 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>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="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>
 C#

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.

private void Button_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.