¿Te gustaría aprender Xamarin Desarrollo Rápido de Apps Móviles?
Tenemos los cursos que necesitas.¡Haz clic aquí!
Hoy en día, crear aplicaciones móviles para múltiples plataformas supone todo un reto para los desarrolladores. Tratar de abordar un desarrollo usando los toolkits nativos de cada sistema requiere de una cantidad enorme de conocimientos específicos para cada uno de ellos. Nos encontraremos con un panorama enormemente complejo, con múltiples lenguajes, varios entornos de desarrollo y APIs de todos los colores. Xamarin trata de poner solución a esta problemática ofreciéndonos un conjunto de herramientas que nos permitirá desarrollar aplicaciones nativas, compartiendo la mayor cantidad de código, entre las plataformas más importantes: Android, iOS y Windows Phone.
Los desarrolladores que estén interesados en comenzar a crear aplicaciones cross-platform nativas con Xamarin, sería recomendable que estuviesen familiarizados con el lenguaje C# y/o con el SDK de iOS o Android, aunque no es imprescindible. En la primera parte de la entrada trataré algunas generalidades como la problemática del desarrollo multiplataforma, las características claves de Xamarin, la instalación y puesta en marcha y la cuando elegir entre Xamarin Tradicional o Xamarin Forms.
La problemática del desarrollo multiplataforma
Como podemos observar en la siguiente tabla, cada plataforma cuenta con su propio entorno de desarrollo integrado (IDE), con uno o varios lenguajes de programación, con un lenguaje especifico para las vistas, y por si fuera poco lospatrones de diseño a aplicar difieren entre las diferentes plataformas.
| iOS | Android | Windows | |
|---|---|---|---|
| IDE | XCode | Android Studio | Visual Studio |
| Lenguaje | ObjectiveC o Swift | Java | C# |
| Vistas | Storyboard o XIBS | AXML | XAML |
| Patrón de diseño | MVC | MVC | MVVM |
Abordar todos estos aspectos requiere de una cantidad de enorme de conocimientos por parte del desarrollador y, por otro lado, no parece ser eficiente tener que reescribir la lógica de negocio para cada uno de los sistemas.
¿Qué opciones tenemos? Apps híbridas o nativas
Tradicionalmente, cuando hablamos de tecnologías multiplataforma, pensamos en un enfoque minimalista: reducir nuestra implementación/desarrollo a un mínimo denominador en todas las plataformas. Esto es lo que se propone en las aplicaciones híbridas desarrolladas con tecnologías del tipo PhoneGap/Cordova, en las cuales escribimos códigohtml y javascript que tiene que ser interpretado por un navegador web. Este tipo de soluciones no consigue igualar la respuesta y la experiencia de usuario de una app nativa. Por poner un ejemplo, Mark Zuckerberg (CEO de Facebook), reconoció que el mayor error que habían cometido en la trayectoria de Facebook fue crear en un primer momento una app híbrida en lugar de una nativa.
Mark Zuckerberg: nuestro mayor error ha sido crear en un principio una app híbrida en lugar de nativa
Xamarin nos ofrece un enfoque multiplataforma diferente, ya que nos facilita la tarea de desarrollar cualquier tipo de aplicación/juego de forma nativa para las plataformas más usadas: iOS, Android y Windows. Para ello nos brinda acceso al 100% de las APIS nativas + las APIs comunes de .NET, con un mismo lenguaje de programaciónC#.
Existen alternativas interesantes a Xamarin que también proponen un enfoque nativo, como puede ser React Native de Facebook (aún en beta) , que permite escribir apps para android e iOS Nativas en Javascript con el estilo de React. O, Ruby Motion, una tecnología que nos permite realizar apps para Android e iOS con Ruby, si RoR forma parte de tu stack esta plataforma es más que interesante. Aunque sin duda, por aceptación, cuota, comunidad y evolución brilla con luz propia Xamarin.
Características
- Compartir código:Además de compartir un mismo lenguaje y entorno de desarrollo, podemos utilizar un mismo patrón de desarrollo.
- Completa cobertura de las APIs de iOS y Android: Tenemos todas las APIs disponibles con C#, cualquier cosa que se pueda hacer con Objective-C/Swift o Java, se puede hacer con C# y Xamarin.
- Aplicaciones nativas:Las aplicaciones desarrolladas con Xamarin son 100% nativas.
- Siempre actualizado: Xamarin suele añadir soporte el mismo día del lanzamiento oficial de una actualización.
- Open source y gratis: Tras la compra de Xamarin por parte de Microsoft, pasó a ser Open Source y gratuito.
Instalación de Xamarin
En Mac OS
Para instalar Xamarin en Mac OS, tan solo tenemos que descargar el instalador y a continuación un asistente nos guiará en la instalación de Xamarin Studio y los SDKs de las diferentes plataformas.
En windows:
Para comenzar a trabajar con Xamarin en Windows se debe realizar la descarga de Visual Studio Community. Tras ejecutar el instalador tenemos la posibilidad de elegir entre una instalación típica o personalizada. Escogemos personalizada y seleccionamos el checkbox de Xamarin dentro del apartado de desarrollo móvil multiplataforma.
Para compilar y acceder a opciones como el editor visual de iOS necesitamos de forma inevitable tener conexión con un Mac. Todo el proceso de conexión se realiza de forma prácticamente transparente desde Visual Studio a través de la herramienta Xamarin Mac Agent por medio de una conexión ssh.
Xamarin Tradicional vs Xamarin Forms
En Xamarin tradicional, se puede compartir toda la lógica de la aplicación entre las diferentes plataformas, a excepción de la interfaz de usuario, la cual será independiente para cada una de las mismas. En cambio, Xamarin Forms añade una capa de abstracción sobre la UI que permite compartir, además de la lógica de negocio, la interfaz de usuario, aumentando consigo la reutilización de código.
¿Cuando escoger uno u otro?
Xamarin tradicional es idóneo cuando se requiere un nivel muy elevado de personalización de la interfaz de usuario para cada una de las plataformas, siendo más importante el nivel personalización de la UI que la cantidad de código compartido; mientras que Xamarin.Forms es la mejor opción cuando las aplicaciones requieren menos especificidad en la UI y hacen más énfasis en compartir la mayor cantidad posible de código.
Xamarin Forms
La capa de abstracción que añade Xamarin Forms a la UI nos facilita la tarea de crear interfaces de usuarios nativas compartidas, ya que cada uno de los elementos de dicha abstracción son mapeados a elementos propios de cada una de las plataformas.
XAML
Las interfaces en Xamarin Forms se pueden definir tanto con código C# desde Code Behind,como con XAML, mi recomendación es utilizar este último para aprovechar su enfoque de separación de responsabilidades entre diseño y codificación.
XAML (eXtensible Application Markup Language) es un lenguaje declarativo basado en XML y pensado para escribir la interfaz gráfica de una aplicación de forma textual y ordenada, aparece por primera vez en la versión 3.0 del Framework de .NET.
Una de las características más importantes de XAML es que todos los elementos que definamos en este son instanciados por el CLR y quedan accesibles como objetos desde código, sin necesidad de realizar de nuevo la declaración de los mismos en Code Behind, gracias al mecanismo de las clases parciales.
XAML permite construir la jerarquía de objetos de componen la interfaz. Con el uso de etiquetaspodemos definir cada uno de los elementos visuales, y con el uso de atributos definimos la apariencia y el comportamiento de cada uno de los elementos.
Veamos un ejemplo de una misma interfaz definida en XAML y C#:
//XAML
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20" VerticalOptions="Center">
<Entry Placeholder="Username" Text="{Binding Username}"/>
<Entry Placeholder="Password" Text="{Binding Password}" IsPassword="true"/>
<Button Text="Login" TextColor="White" BackgroundColor="#77D065" Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
//Code behind
using Xamarin.Forms;
var profilePage = new ContentPage {
Title = "Profile",
Icon = "Profile.png",
Content = new StackLayout {
Spacing = 20, Padding = 50,
VerticalOptions = LayoutOptions.Center,
Children = {
new Entry { Placeholder = "Username" },
new Entry { Placeholder = "Password", IsPassword = true },
new Button {
Text = "Login",
TextColor = Color.White,
BackgroundColor = Color.FromHex("77D065") }}}
};
var settingsPage = new ContentPage {
Title = "Settings",
Icon = "Settings.png",
(...)
};
var mainPage = new TabbedPage { Children = { profilePage, settingsPage } };
Pages
Las páginas son elementos contenedores que representan una pantalla de la aplicación. Xamarin.Forms.Page representa un ViewController en iOS, una Page en UWP, en Android cada página se comporta como un Activity, pero no lo son.
ContentPage: es la página más simple, cuenta con una única vista donde añadir contenido.
MasterDetailPage: gestiona dos paneles de información.
NavigationPage: gestiona la navegación entre paginas.
TabbedPage: facilita el acceso a las subpáginas mediante tabs.
TemplatedPage: muestra el contenido a pantalla completa, permite utilizar plantillas para definir el contenido.
CarouselPage: permite el acceso a las subpáginas haciendo un gesto de scroll lateral.
Layouts
Los layouts son elementos contenedores de otros layouts o vistas, son especialmente necesarios ya que las páginas sólo contener un elemento hijo. Lo utilizaremos para establecer la posición y alineación de los elementos que contienen.
Los más destacados son:
ContentView: permitir crear elementos más complejos a partir del mismo.
ScrollView: si el contenido lo requiere permite hacer scroll.
StackLayout: organiza y posiciona otros controles, es uno de los layouts más utilizados, por defecto los apila verticalmente.
AbsoluteLayout: hace uso posiciones absolutas para posicionar los elementos.
GridLayout: Permite la organización de elementos por medio de filas y columnas.
RelativeLayout: facilita el posicionamiento de los elementos mediante constraints.
Views (controles)
Las Views, también denominados controles o widgets, hacen referencia a los elementos visuales como pueden ser botones, labels, o textboxs. Xamarin Forms nos provee de multiples views.
El patrón MVVM en Xamarin Forms
Aunque no es obligatorio utilizar el patrón MVVM para desarrollar una aplicación con Xamarin Forms, está considerado una buena práctica hacer uso del mismo. A continuación veremos algunos conceptos claves para entender el por qué.
MVVM (Modelo Vista Vista-Modelo) es un patrón de diseño derivado de MVC, cuyo objetivo es tratar de desacoplar al máximo la interfaz de usuario de la lógica de la aplicación, para ello hace uso de un lenguaje de marcado en las vistas, XAML en el caso de Xamarin Forms. El modelo realiza la misma función que en MVC, representa lacapa de datos y/o la lógica de negocio de nuestro proyecto, en ningún caso tiene dependencia alguna de la vista.
El ViewModel (modelo de vista) es un actor intermediario entre el modelo y la vista, contiene toda la lógica de presentación y se comporta como una abstracción de la interfaz. La comunicación entre la vista y el viewmodel se realiza por medio los enlaces de datos (binders).
Resumen
En este artículo hemos tratado de sentar las bases, en la medida de lo posible, de Xamarin y de Xamarin Forms, hemos dejado muchos temas detallados y resumido; en otros he sido muy superficial, cómo por ejemplo en la introducción del patrón MVVM, pero el post estaba creciendo exponencialmente.
La idea es continuar profundizando en próximas entradas en el desarrollo con Xamarin, tanto tradicional como con forms. Esperamos haber facilitado tu transición a Xamarin, o por lo menos haber sabido trasladarte alguna de sus virtudes.
Te esperamos en los siguientes artículos en donde hablaremos más acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
¿Te gustaría aprender Xamarin Desarrollo Rápido de Apps Móviles?
Tenemos los cursos que necesitas.¡Haz clic aquí!
