Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Aplicaciones Multiplataforma: Tu aplicación en todos lados, con poco trabajo

Wilson VargasWilson Vargas

Hoy, estoy muy contento de que me hayan tomado en consideración en el XXII Congreso Nacional de Estudiantes de Ingeniería de Sistemas y Computación que se realiza en mi ciudad (Trujillo) y que me hayan invitado a dictar un taller, el cual está reflejado en este artículo.

Bueno, el objetivo aquí es obtener una aplicación en funcionamiento que se ejecute en distintas plataformas, todas consumiendo un servicio móvil de Azure, esto a través de una biblioteca de clases portable entre plataformas (PCL), debo decir que en el transcurso del desarrollo de este tutorial me topé con varios tropiezos, la idea es que también explico cómo resolverlos.

Estoy suponiendo que tienes creado (o crearás) el servicio móvil en Azure para obtener tu código de acceso, ya que tendrás que poner eso en este código. Si necesitas orientación sobre esto, visita este enlace:
http://azure.microsoft.com/en-us/develop/mobile/

También estoy asumiendo que tienes instalado Visual Studio, así como Xamarin. Si quieres información sobre cómo instalar y configurar Xamarin échale un vistazo a esto:
www.xamarin.com

A pesar de que estoy asumiendo que estás usando Visual Studio, todo esto que te voy a mostrar también es posible con Xamarin Studio, con la excepción de que no serás capaz de desarrollar la versión para Windows Phone. No dudes en probar y seguir estas instrucciones desde Xamarin Studio.

Por último, vamos a estar utilizando MvvmCross, lo que facilita el desarrollo en las tres plataformas usando del patrón MVVM. Recuerda que estar familiarizado con esto es muy útil, sin embargo, debes ser capaz de seguir normalmente con este tutorial así no tuvieras mucha experiencia con este patrón.

Yo sé que tú quieres aprender todo lo que tiene que ver con este patrón después de acabar este tutorial, para eso te dejo un vídeo explicativo de las técnicas maestras de este patrón, este video está hecho por mi buen amigo Juan Carlos Ruiz y puedes verlo desde este enlace:
https://www.youtube.com/watch?v=Qf2F2JpGKdA

Además, te dejo también una excelente serie de videos sobre MvvmCross hechas por su creador, Stuart Lodge, aquí:
http://slodge.blogspot.co.uk

Si tú tienes algún problema al momento de instalar cualquier herramiente que escribí arriba, no dude en dejar un comentario o escribir a mi cuenta de Twitter

El código fuente de este ejemplo está disponible en mi cuenta de GitHub y puedes descargarlo desde este enlace:

https://github.com/wilsonvargas/CONEISC.AMS

Crear la PCL

Lo primero que vamos a hacer es crear un nuevo proyecto y luego crear una biblioteca de clases portables. Voy a explicar paso por paso, por lo que si estás familiarizado con este proceso espero me comprendas.
En Visual Studio, selecciona Archivo -> Nuevo -> Proyecto y verás lo siguiente:

Selecciona una biblioteca de clases portable, como se muestra y dale un nombre. Mi proyecto se llama CONEISC.AMS.Core. CONEISC porque presenté esto en un taller en el Congreso Nacional de Estudiantes de Ingeniería de Sistemas y Computación (de ahí las siglas CONEIS) y AMS por Azure Mobile Services. Lo de Core es una estándar que sigo para nombrar las bibliotecas de clases portables, desde ahora PCL. Cuando se trata de los otros proyectos que necesitaremos, vas a ver que le pondré una extensión que describe la plataforma en la que está (por ejemplo CONEISC.AMS.Android).

Antes de hacer clic en OK, tienes que cambiar el nombre de la solución. Esto tendrá por defecto el mismo nombre del proyecto Core, entonces sólo basta con eliminar el 'Core' de la parte final. Finalmente te quedará así:

Al hacer clic en OK te pedirá que seleccione las plataformas que deseas orientar tu proyecto con esta PCL. Selecciona las opciones que se muestran a continuación:

Al hacer clic en OK deberías ver esto en el Explorador de soluciones.

No vamos a utilizar Class1.cs, por lo que podemos empezar borrando eso.

Azure Mobile Services

Vamos a hacer uso de NuGet durante este tutorial.
Si no estás familiarizado con NuGet, simplemente dale una oportunidad y luego vamos a ver si puedes vivir sin él!

El siguiente paso es usar NuGet para descargar el paquete de servicios móviles Azure como te muestro a continuación:

Haz clic derecho en el proyecto Core y selecciona Administrar paquetes NuGet y verás la ventana del Administrar de paquetes NuGet, luego seleccionamos la pestaña que dice Online y procedemos a buscar Azure Mobile Services en la caja de texto ubicada en la parte superior derecha.

Luego sólo tienes que esperar un poco, siempre y cuando no tengas una conexión a Internet realmente lenta como la mía, deberías ver una lista como la de abajo.

Selecciona "Windows Azure Mobile Services" y luego clic en Instalar. Asegúrate de que tiene el mismo aspecto que la captura de la pantalla anterior. Asumo que estás instalando la versión 1.2.1.
Antes de esta versión había una serie de problemas al tratar de usar esto desde un PCL en las tres plataformas. Gracias a los chicos de Microsoft y Xamarin estos errores han sido arreglados en gran medida.

Durante la instalación te pedirá que aceptes algunas licencias. Por supuesto, no dudo que vas a leer cada una de ellas por separado, imprimirlas y revisarlas con tu equipo legal... :) o lo más común, darle una leída de humano. Suponiendo que estás de acuerdo con todo podemos continuar.

MvvmCross

Ahora vamos a hacer lo mismo para descargar y hacer referencia a las bibliotecas necesarias para poder usar MvvmCross. Una vez más, haz clic derecho en el proyecto y selecciona Administrar paquetes NuGet, pero esta vez buscamos: MvvmCross

Selecciona "MvvmCross" y haz clic en Instalar. Al finalizar tus referencias deberían quedar así:

Verás que la instalación de MvvmCross ha creado una carpeta llamada "ToDo-MvvmCross" con un archivo de texto en el interior llamado "_Core.txt". Esto contiene algunas cosas que se requieren hacer luego de la instalación, pero NuGet realmente hace estos pasos por ti.
Sin embargo, es una buena idea tener el hábito de darle un vistazo a este archivo, ya que algunos de los otros proyectos contendrán algunos pasos que tenemos que seguir.

Crear el modelos de datos

(La primera "M" en MVVM)

Crear carpeta Models. Haz clic derecho sobre CONEISC.AMS.Core (o lo que tú has llamado a tu proyecto PCL) y selecciona Añadir  Carpeta nueva, y la llamas "Models".

Ahí vamos a crear una clase para representar una entidad Contacto. Haz clic derecho sobre la carpeta Models, seleccione Agregar  Clase, y ponle un nombre como "Contacto.cs". Una vez creada, introduce el siguiente código:

Crear una clase de servicio

Aquí es donde el código que en realidad interactúa con Azure Mobile Services.
Crea una carpeta de 'Services', y agrega ahí una nueva clase llamada “CloudService.cs”. Si le deseas dar un nombre diferente, entonces es fundamental que termine con '...Service.cs' ya que hay código en MvvmCross que lo instancia automáticamente por ti mediante la búsqueda de clases que terminan con "...Service.cs. En particular yo me enteré de esto en este blog: http://slodge.blogspot.co.uk, aquí puedes obtener más información al respecto.

Ahora sólo escribimos lo siguiente en nuestra clase CloudService.cs

Para acceder al servicio vas a necesitar el url y la clave del Servicio Móvil Azure que ha creado, esto puede obtenerla desde el tu portal de Azure, sólo vas al servicio móvil que has creado y verificas las credenciales de la siguiente manera:

Lo siguiente que necesitamos hacer es crear una interfaz de esta clase. Visual Studio puede hacer esto por nosotros de la siguiente manera:
Haz clic derecho sobre el nombre "CloudService" en el editor de código donde se declaró y seleccione Refactor -> Extraer interfaz.

Ahora sólo debes hacer pública la interfaz que creaste:

Ahora tenemos que informarle a la VistaModel (ViewModel) sobre este servicio.
Agrega lo siguiente a FirstViewModel.cs

Añadimos una propiedad Contactos, de la siguiente manera:

Para resolver los errores en 'Contacto' y 'ObservableCollection' añade estas líneas a la parte superior:

Agrega un método LlenarContactos al ViewModel para crear una lista inicial de los contactos y guardarlo en la nube:

(Es posible que esta sea la parte donde quieras copiar y pegar, descarga el código en GitHub y listo ;) )

Agrega el método “CargarContactos” en la clase de la carpeta ViewModel:

Bueno la biblioteca de clases portables está lista, en realidad vale la pena la construcción de este proyecto y resolver los errores que podemos tener antes de continuar.

Windows Phone

Ahora agregamos un proyecto de Windows Phone 8 a nuestra solución. Para esto hacemos clic derecho sobre la solución -> Agregar -> Agregar Proyecto

Elige una aplicación Windows Phone:

Verás que me quedo con el estándar de utilizar el mismo nombre que el proyecto PCL, pero con la extensión “WP” (Windows Phone) en vez de “Core”. Ahora tus referencias deben verse así:

NuGet Azure Mobile Services

Básicamente hacemos lo mismo que en el proyecto con la extensión “Core”, pero esta vez haciendo clic derecho sobre el proyecto de Windows Phone y buscamos: Azure Mobile Services

Nuget MvvmCross

Es lo mismo, no hay mucho que hablar aquí.

Esto te dejará con las siguientes referencias:

Sigue las instrucciones en el archivo que creo MvvmCross, ubicado en la ruta ToDo-MvvmCross\ _Windows Phone UI.txt

Cómo te darás cuenta hay algunos pasos que MvvmCross ya los realiza, sólo debemos hacer sólo algunos pasos:

Agrega una referencia al proyecto PCL, para eso debes hacer clic derecho sobre el proyecto de Windows Phone -> Agregar -> Referencia
En la ventana de dialogo, selecciona la pestaña “Solución” y selecciona el proyecto PCL:

... Dejando sus referencias con este aspecto:

Ahora añadimos un ListView en FirstView.xaml, ubicado en Views/FirstView.xaml y utilizar la ItemsSource para hacer binding con nuestro modelo de la siguiente manera:

También vamos a crear un Template por encima del grid LayoutRoot en el XAML, para definir el formato y estilo de los ítems individuales que aparecerán en la lista:

En el código subyacente (FirstView.xaml.cs) añadir el siguiente código de reemplazo para poblar el modelo de vista con los datos:

Tendrás que eliminar el error que estás teniendo debes resolver el espacio de nombre agregando esto:

El proyecto para Windows Phone ya está listo! Fácil no?.

Windows 8.1

El proceso para crear una aplicación para Windows 8.1 es muy parecido al de Windows Phone, primero vamos a tener que crear un nuevo proyecto en nuestra solución de la siguiente manera:
Clic derecho sobre la solución -> Agregar -> Nuevo Proyecto

En la ventana de dialogo elegimos una aplicación Windows Store en blanco
Habrás notado que el estándar que manejo continua, pero ahora con el término “W8_1 (Windows8.1)”.
Luego de esto tus referencias deben verse así:

Azure Mobile Services

Aquí hacemos lo mismo que en los dos proyectos anteriores, pero esta vez haciendo clic derecho sobre el proyecto de Windows Store y buscamos: Azure Mobile Services

Nuget MvvmCross

Tus referencias quedaran de la siguiente manera:

Sigue las instrucciones en el archivo que creo MvvmCross, ubicado en la ruta ToDo-MvvmCross\ _ Windows Store UI.txt

Felizmente que MvvmCross nos facilita la vida y solo tenemos que hacer un solo paso

Agrega una referencia al proyecto PCL, para debes hacer clic derecho sobre el proyecto de Windows 8.1 -> Agregar -> Referencia

En la ventana de dialogo, selecciona la pestaña “Solución” y selecciona el proyecto PCL con nombre “Core”:

Tus referencias tienen este nuevo aspecto

Ahora añadimos un ListView en el archivo FirstView.xaml al igual que en el proyecto de Windows Phone, ubicado en Views/FirstView.xaml y utilizar la ItemsSource para hacer binding con nuestro modelo de la siguiente manera y le aplicamos un fondo correspondiente al tema del dispositivo:

También vamos a crear un Template por encima del grid LayoutRoot en el XAML, para definir el formato y estilo de los ítems individuales que aparecerán en la lista:

En el código subyacente (FirstView.xaml.cs) añadir el siguiente código de reemplazo para poblar el modelo de vista con los datos:

Para eliminar el error que debes estar teniendo sólo debes agregar este espacio de nombre:

El proyecto para Windows 8.1 ya está listo! Y creo que este fue más fácil no?.

Android

Ahora agregamos un nuevo proyecto para Android a nuestra solución de la siguiente manera:
Clic derecho sobre la solución -> Agregar -> Nuevo Proyecto

Creo que ahora la convención del estándar que utilizo se te debe hacer familiar, la estructura de tu proyecto debe estar así hasta ahora:

Azure Mobile Services

Ahora, vamos a agregar el componente “Azure Mobile Services” en la aplicación para Android. En teoría podríamos hacerlo usando NuGet como lo habíamos hecho, pero en la actualidad hay un problema con NuGet que añade ensamblados innecesarios que pueden causar problemas a la hora de implementación, luego tenemos que estar quitándolos manualmente algunas referencias y eso es fastidioso. Mejor vamos a usar el uso de componentes de la Tienda Xamarin.

Para añadir un componente debes hacer clic derecho en los Componentes y seleccionar la opción “Obtener más componentes”

Se abrirá una ventana de dialogo igual a esta:

Selecciona Azure Mobile Services:

Haz clic en Agregar a la aplicación y tus referencias quedaran de la siguiente manera:

MvvmCross

Agrega MvvmCross como lo has venido haciendo durante todo este artículo.

Agrega la referencia del proyecto Core al proyecto Android, haciendo clic derecho en el proyecto Android -> Agregar -> Agregar Referencia

Ahora, tus referecias deben estar así:

Agrega el siguiente código en la clase Setup.cs que se agrega al instalar MvvmCross

Este paso es fundamental para garantizar que la dll de Azure Mobile Services se agregará en tiempo de compilación.

Cambia el archivo FirstView.axml en la carpeta Layouts:

Ahora tenemos que agregar un template que haga referencia a nuestro ListView antes creado. Para esto creamos un layout, clic derecho sobre el la carpeta “layout” -> Agregar -> Nuevo Elemento

Ábrelo con el editor XML

Y edita el contenido…

Seleccione un emulador, si lo estás probando en un emulador.

Ahora está tu proyecto debe ser capaz de compilar y ejecutar sastisfactoriamente.

Nota: Si estás usando un emulador para probar entonces yo te recomiendo leer el este artículo de mi buen amigo Juan Carlos Ruiz para acelerar el emulador de Android

http://juank.io/como-acelerar-emulador-android-no-morir-intento/

Conclusión

Bueno, tal vez ya te has dado cuenta que no hay una versión para iOS, lamentablemente no puedo probar con esta plataforma porque tengo que tener una MAC para poder ejecutar mi aplicación para iOS.
En fin, yo sé que algún día voy a tener una, así que cuando llegue ese día yo actualizaré este artículo, por ahora eso es todo! Espero que todo te funcionó sin problemas, pero si te quedas atascado en alguna parte no dudes en dejar un comentario o enviarme un mensaje a twitter, con gusto te voy a ayudar.

Nos leemos pronto :)

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios