Cómo crear aplicaciones multiplataforma con Xamarin y C#

La necesidad de crear aplicaciones (principalmente para móviles), cada vez es mayor para cualquier tipo de servicio y/o empresa. Por ello en esta guía te enseño cómo crear aplicaciones multiplataforma con Xamarin y el lenguaje de programación C#.

La necesidad de Xamarin

Aunque cada vez se crean más aplicaciones y se necesitan que sean compatibles con varias plataformas, su desarrollo todavía sigue siendo un proceso costoso y largo. Esto es debido a que cada plataforma cuenta con un lenguaje de programación propio, impidiendo la compartición de recursos, por esta razón han surgido varias aproximaciones para crear aplicaciones multiplataformas:

• Utilizar los lenguajes y tecnologías web (HTML, CSS y JavaScript), aprovechando que todos los dispositivos cuentan con un navegador web y un componente para representar este código.
• Utilizar Xamarin junto con C#, para unificar el desarrollo gracias al proyecto Mono.

Ventajas del uso de Xamarin frente a las aplicaciones web

Seguramente habrás notado que los navegadores son un tipo de software cuyo consumo es elevado y, en muchos casos, no dan el rendimiento esperado. Esto, junto con las limitaciones que de HTML5 hace que las aplicaciones basadas en tecnologías web (Ionic, PhoneGap…), suelen tener un menor rendimiento, mayor consumo de batería y limitaciones para el acceso a algunas características de los dispositivos.

Por otro lado, Xamarin permite el desarrollo nativo para cada plataforma, lo que permite obtener un rendimiento similar a las aplicaciones creadas en el lenguaje de cada plataforma y el acceso completo a todas las APIs del sistema.

Cómo empezar con Xamarin

Para empezar a trabajar con Xamarin, lo primero que debes conocer es el lenguaje de programación C#, si no lo conoces puedes seguir esta guía. Después, debes tener presente que actualmente puedes desarrollar:

• Usando Windows y Visual Studio, para UWP, Android e iOS (si te conectas en remoto a un Mac).
• Usando macOS, Visual Studio para Mac y XCode, para Android e iOS.

Además, es necesario que sepas que aunque Xamarin te permite crear los 3 tipos de aplicaciones, vas a seguir obligado a cumplir los requisitos de cada sistema/compañía (cuentas de desarrollador, limitación de emuladores, necesidad de dispositivos físicos para probar algunas características, etc).

Xamarin o Xamarin Forms

En un primer momento, Xamarin permitía crear todo el backend en C# y cada interfaz había que realizarla específicamente para cada plataforma. Sin embargo, con Xamarin Forms es posible crear una única interfaz (con XAML), para Android, iOS y UWP:

Si optas por Xamarin Forms, podrás compartir prácticamente la totalidad del código de la aplicación y aún así, realizar personalizaciones por plataforma. El otro enfoque solo se recomienda, en el caso de que tu aplicación sea muy distinta en cada plataforma o haga un uso mayoritario de los controles nativos de una plataforma.

Cómo funciona Xamarin Forms

Si has llegado hasta aquí, seguramente habrás visto que Xamarin Forms en la opción adecuada para el 90% de los proyectos. Sin embargo, es posible que te preguntes cómo es capaz de tener controles que funcionan en multiples plataformas con un comportamiento similar al nativo.

La respuesta a esta cuestión es que cada control se traduce a una representación nativa específica de cada plataforma. Además, este comportamiento es personalizable y cada uno puede sobreescribir este comportamiento, indicando exactamente cómo quiere que se muestre un control de Xamarin Forms, por ejemplo, en Android.

Tu primera aplicación con Xamarin Forms

Actualmente hay multitud de recursos donde se muestra paso a paso, como crear tu primera aplicación con esta tecnología multiplataforma. Sin embargo, debido a su simplicidad y buena estructuración te recomendamos que sigas esta guía. Con la misma podrás ver los principales aspectos de Xamarin, los cuales te serán muy familiares si ya has trabajo con WPF o UWP.

Por ejemplo, con el siguiente código yo he creado una pequeña lista de destinos con su foto y descripción:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:utils="clr-namespace:Travelers.Utils;assembly=Travelers"
             x:Class="Travelers.Views.Cities" Title="Travelers">
    <ContentPage.Resources>
        <ResourceDictionary>
            <utils:StringToImageSourceConverter x:Key="StringToImageSourceConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ListView ItemsSource="{Binding Cities}" SelectedItem="{Binding SelectedCity,Mode=TwoWay}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ImageCell Text="{Binding Name}" Detail="{Binding Description}"
                           ImageSource="{Binding Image,Converter={StaticResource StringToImageSourceConverter}}">
                </ImageCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

Además he añadido el código destinado a crear la vista en detalle de cada lugar:

<ContentPage
    x:Class="Travelers.Views.DetailCityView" xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:utils="clr-namespace:Travelers.Utils;assembly=Travelers">
    <ContentPage.Resources>
        <ResourceDictionary>
            <utils:StringToImageSourceConverter
                x:Key="StringToImageSourceConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <Image
            Source="{Binding SelectedCity.Image, Converter={StaticResource StringToImageSourceConverter}}" />
        <Label
            FontSize="30"
            Text="{Binding SelectedCity.Name}" />
        <Label
            Text="{Binding SelectedCity.Description}" />
    </StackLayout>
</ContentPage>

En las siguientes imágenes puedes ver como todos los controles tienen una representación similar, a los controles nativos de cada plataforma:

Recursos para aprender Xamarin

Si has llegado hasta este punto, es porque te interesa esta tecnología para crear aplicaciones multiplataforma y quieres seguir profundizando en su aprendizaje, para ello te recomiendo:

• Xamarin University, como plataforma oficial donde poder formarte y conseguir acreditar tu formación.
• El libro oficial (y gratuito) de Charles Petzold sobre Xamarin. Este se complementa muy bien, con el libro de patrones que también es interesante leer.
• El blog de Xamarin para conseguir conocer de primera mano algunos trucos y consejos.
• Este interesante artículo sobre como enfrentarse a la curva de aprendizaje de Xamarin.
• Seguir en twitter a los siguientes usuarios:
  • En Inglés: Steven Thewissen, James Montemagno, Miguel de Icaza y Scott Hanselman
  • En Español: Javier Suárez Ruiz y Josué Yeray Julián.

Algunos mitos sobre Xamarin

Como toda tecnología nueva, hay multitud de mitos que han surgido en torno a Xamarin:

• Las aplicaciones Xamarin son lentas, esto actualmente es falso. Además, hay multitud de guías para hacerlas todavía más rápidas.
• Xamarin solo sirve para aplicaciones simples o es muy complicado crear buenas interfaces de usuarios. Como han demostrado muchos desarrolladores, con esta tecnología se puede crear la interfaz de las aplicaciones más usadas como: Instagram, Twitter, Netflix, etc.

Después de esta recopilación sobre Xamarin espero que te animes a probarlo, y si ya lo has hecho, me ayudes a completar este artículo.

Un saludo.