Creando una aplicación desde 0 con Xamarin Classic y MvvmCross para UWP , IOS y Android
En este tutorial vamos a crear un proyecto desde 0 para UWP, IOS y Android usando MvvmCross 6 beta, que hace uso de Net Standard.
Como vamos a crear para UWP, lo haremos desde Windows y Visual Studio 2017, en mi caso estoy usando la última* versión la 15.6.0
Observación:
Xamarin Classic (native) es más complejo que Xamarin Forms, requiere tener conocimiento sobre todas las plataformas, explicaremos de la forma más detallada posible.
¡Empezamos!
Paso 1: Crear una solución vacía:
Abrimos visual studio 2017, en el menú superior seleccionamos => Nuevo => Proyecto.
Elegimos la opción “Otros tipos de proyectos”, y creamos un proyecto solución en blanco.
Paso 2: Agregar los proyectos para las plataformas y uno para el Core
Seleccionamos con el 2º botón la solución vacía y elegimos, agregar => nuevo proyecto.
Debemos agregar 4 proyectos:
- Core
- Android
- IOS
- UWP
*Todos los proyectos de plataforma deben tener el proyecto de Core como referencia.
Agregando el proyecto de Core:
Agregando el proyecto de IOS:
Agregando el proyecto de Android:
Agregando el proyecto de UWP:
No todas las versiones de UWP son compatible con Net Standard, se debe tener como mínimo la versión “Fall Creators”.
Se puede ver más detalles aquí: enlace a microsoft
Una vez creado todos los proyectos debemos agregar la referencia al proyecto de Core, para esto tenemos que seleccionar con el 2º botón sobre referencia, en el menú que se muestra elegir la opción “agregar referencia”, dentro de solución se debe seleccionar el proyecto Classic.Core y hacer clic en el botón aceptar.
Debemos realizar la misma operación para Android y IOS. El resultado final debe ser similar a este:
Paso 3: Agregar MvvmCross 6.0.5 (beta)
Al ser una versión de beta, el paquete que configura casi todo de forma automática no existe en nuget. Vamos a tener que configurar de forma manual.
Pero de cara a futuro, revise si el paquete MvvmCross.StarterPack se encuentra disponible para la versión 6.
Para instalar MvvmCross debemos seleccionar la solución con el 2º botón y elegir la opción “administrar paquetes de nuget para la solución”, el siguiente paso es buscar por MvvmCross con la opción “incluir versión preliminar” habilitada.
Una vez elegido la versión de MvvmCross 6.0.5, debemos indicar que queremos instalar en todos los proyectos de nuestra solución. El último paso es hacer clic en instalar.
Aceptamos y toca esperar que finalice la instalación.
Paso 4: Configurar MvvmCross en Core
Antes de empezar a configurar debemos crear las siguientes carpetas dentro del proyecto Core:
- Constants
- Converters
- Json
- Models
- Base
- Movie
- Services
- Connectores
- WebServices
- ViewModels
- Base
Paso 4.1 Agregar paquetes nuget
Nuestra aplicación usará la Api de Themoviedb para esto es necesario crear una cuenta en esta página: https://www.themoviedb.org y obtener la key para consumir datos de la API.
El siguiente paso es instalar el paquete Newtosoft.Json en el proyecto Core que será el responsable de deserializar el json del servicio.
El último paquete que vamos a instalar en el proyecto de Core, solo tiene sentido si vamos a dar soporte a versiones inferior a 5 de Android, sirve para trabajar con el httpClient nativo de cada plataforma mejorando los tiempos de respuesta. *Se puede hacer lo mismo configurando el httpClient desde el proyecto de plataforma.
ModernhttpClient , se debe instalar en todos los proyectos.
Paso 4.2 : Agregar el archivo de configuración
Dentro de la carpeta Constants, vamos a crear una clase con el siguiente nombre ConfigConstants. Usaremos este archivo para guardar la configuración de la aplicación, se puede ver el código aquí:
4.3: Crear los modelos
Vamos a crear 3 modelos:
Paso 4.4: Crear los Servicios
Vamos a crear una interface para registrar el conector httpclient de la forma más simples posible.
[Código de la implementación]]
Creamos una nueva interfaz para agregar todos los servicios de la API de Themoviedb.
En breve explicaré como usar.
Paso 4.5: Crear los ViewModels
Dentro de la carpeta ViewModels => Base, vamos a crear el archivo BaseViewModel. Todas las propiedades comunes de los viewmodels van en este archivo.
En BaseViewModel podemos destacar 3 elementos:
En la carpeta ViewModels, vamos agregar nuestra página principal: HomeViewModel
En este archivo podemos destacar:
Paso 4.6: Agregar el arranque de la aplicación
Debemos crear el archivo App.cs, este archivo es el responsable por arrancar la aplicación en el viewmodel indicado, aparte de registrar los servicios.
Todos los servicios terminados por service, se registra de forma automática por MvvmCross. Este es el caso de nuestros 2 servicios (IWebClientService y IMovieWebService).
Paso 5: Configurar UWP
Lo primero que debemos crear es un archivo Setup.cs dentro del proyecto Classic.UWP
Este archivo es el responsable por arrancar MvvmCross.
El siguiente paso es eliminar el archivo MainPage.Xaml, debemos crear páginas que herende directamente de MvvmCross.
El próximo para es una carpeta con el nombre de Views, agregaremos nuestras páginas en esta carpeta.
Modificar el archivo App.xaml.cs, debemos agregar la configuración de MvvmCross para controla la navegación.
Haga clic con el 2º botón sobre la carpeta Views, elija agregar nuevo elemento. Tenemos que crear una página vacía.
Una vez creado debemos agregar modificar la herencia del fichero, las páginas que usan MvvmCross debe heredar de views:MvxWindowsPage
Para usar el cargando, debemos crear un converte que indique cuando mostrar o ocultar el ProgressBar
El último paso será crear la vista AboutView, los pasos a seguir son los mismos que para la vista HomeView
Paso 5: Configurar Android
Lo primero que debemos hacer es eliminar el archivo MainActivity.cs que se crea de forma automática al crear un proyecto de Xamarin Android.
El siguiente paso es crear el archivo responsable de arrancar MvvmCross. Dentro del proyecto Android debemos crear el archivo Setup.cs
El siguiente paso es agregar los siguientes paquetes nuget:
Una vez instalado todos los paquetes, debemos agregar como referencia Mono.android.Export
El siguiente paso es crear la vista, vamos a crear un carpeta con el nombre Views y agregaremos muestas vistas ahí dentro. Abajo captura con todas las vistas creadas.
Para crear la vista hacemos clic sobre la carpeta Views y elegimos la opción agregar nuevo elemento.
La vista va asociado a un archivo AXML que debemos crear, dentro de la carpeta Resources => layout debemos hacer clic con el 2 botón sobre la carpeta y debemos elegir la opción agregar nuevo elemento.
En nuestra vista va a contener 2 elementos principales, un elemento de lista y un progressBar para indicar sí el servicio está cargando. La lista hace referencia a un template que debemos crear.
Vamos ahora a crear el template de la lista, el proceso es el mismo que el anterior, dentro de la carpeta Resources => layout debemos hacer clic con el 2 botón sobre la carpeta y debemos elegir la opción agregar nuevo elemento.
En este template, vamos a pintar los valores que queremos pintar por cada ítem de la lista. En este caso he puesto la imagen y el título de la película. Fijate que estoy usando el plugin de la imagen que hemos instalado antes.
Ahora falta crear la vista del detalle, es muy similar a los pasos anteriores, se puede ver el código abajo.
Paso 6: Configurar iOS
Abrimos el AppDelegate, este es el punto de partida de la Aplicación en iOS, aqui controlamos el ciclo de vida de la Aplicación, el proposito es trabajar sin los famosos Storyboards y hacer una aplicacion mas escalable y con un mejor control del flujo
Paso 2: Agregar las vistas que pintarán los datos segun el modelo de datos
En este paso creamos dos vistas como patron de diseño Master - Detail, para poder realizar las vista controladores debemos crear seleccionar un nuevo archivo en la carpeta en donde estarán todas nuestras vistas(Views), en la seleccion de el tipo de interfaz que necesitamos buscamos una Vista controlador, esta clase nos creará tanto el .XIB como su relación, para más adelante poder tener acceso a las distintas instancias de los objetos declarados.
- BaseResponse: Nos ayudará a comunicar si la petición al servicio salió bien o no.
- MoviResponse y ResultMovie: El resultado de las últimas películas de la API. Para agilizar el proceso, copie la respuesta del JSON en esta página: http://json2csharp.com , ella genera todas las propiedades de forma automática.
- Se herenda de MvxViewModel
- Los servicios se inicializa por el constructor
- Contiene 2 propiedades
- IsBusy para indicar la carga
- Title para pintar el titulo de la pantalla.
- Herenda de BaseViewModel
- Al cargar la página (ViewAppeared), se llama el servicio y el resultado se agrega en una propiedad publica que notifica la vista.
- MvvmCross.Droid.Support.V7.RecyclerView, usaremos en los listados.
- Xamarin.FFImageLoading, usaremos para trabajar con las imagenes.
- NewtosoftJson - MvvmCross en android necesita de este paquete
-
Paso 3: Creación de los objetos en la Vista
En este paso tenemos que incorporar en la vista los objetos que posteriormente se encargarán de pintar lo que el Modelo de datos nos indique, en este paso es necesario abrir XCode, este IDE de Apple sólo nos servirá para colocar los objetos dentro de la vista y los "constrains" que permitirá que se ajusten a cualquier dispositivo de Apple.
En las imagenes vais a ver que se abre un proyecto de Classic.IOS, no se debe tocar nada de eso, solo y exclusivamente las vistas.
Paso 4: Creación de las instancias de los objetos con los que el controlador podrá de manera Reactiva informar a las subVistas que deben cambiar o modificarse
En este paso, debemos abrir ahora el .XIB en Visual Studio, y alli, observar el esquema de documento, seleccionamos el objeto al que le crearemos la instancia para poder trabajar con él
Con el objeto seleccionado nos vamos a la paleta de Propiedades y seleccionamos la propiedad "Name", alli creamos la conexión del objeto, en otras palabras es el "IBOutlet" nativo de iOS.
Desplegamos el fichero .designer.cs que se ha creado con nuestra Vista controlador y observamos que de manera automatica se han creado los "IBOutlets"
Paso 5: Implementación de MVVM en la vista
Creamos la tabla de manera dinamica para proveerle de datos
[Código aquí SimpleDynamicTableViewSource]
Creamos la celda que esta dentro de la tabla y que pintará los datos de cada uno de los objetos del array
Abrimos la clase HomeView.cs y escribimos el siguiente codigo
Abrimos la clase AboutView.cs y escribimos el siguiente codigo
Código disponible en github:
