Código de ejemplo de la charla del día 21/03/2018
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Classic
Img
.gitignore
README.md

README.md

mvvmcross-6-beta-net-standard-ios-android-uwp

Código de ejemplo de la charla del día 21/03/2018

Tutorial de como crear una aplicación con Xamarin Classic para IOS , Android y UWP usando las vistas nativas.

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í:

[Código]

4.3: Crear los modelos

Vamos a crear 3 modelos:

  • 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.
  • [Json del servicio]

    [Código BaseResponse]

    [Código MoviResponse]

    [Código ResultMovie]

    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 interfaz]

    [Código de la implementación]]

    Creamos una nueva interfaz para agregar todos los servicios de la API de Themoviedb.

    [Código de la interfaz]

    [Código de la implementación]

    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.

    [Código aquí]

    En BaseViewModel podemos destacar 3 elementos:

    • Se herenda de MvxViewModel<object>
    • Los servicios se inicializa por el constructor
    • Contiene 2 propiedades
      • IsBusy para indicar la carga
      • Title para pintar el titulo de la pantalla.

    En la carpeta ViewModels, vamos agregar nuestra página principal: HomeViewModel

    En este archivo podemos destacar:

    • 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.

    [Código aquí]

     

    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).

    [Código aquí]

    Paso 5: Configurar UWP

    Lo primero que debemos crear es un archivo Setup.cs dentro del proyecto Classic.UWP

    [Código aquí]

    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.

    [Código aquí]

    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

    [Código aquí Xaml]

    [Código aquí Xaml]

    [Código aquí .CS]

    Para usar el cargando, debemos crear un converte que indique cuando mostrar o ocultar el ProgressBar

    [Código aquí .CS]

    El último paso será crear la vista AboutView, los pasos a seguir son los mismos que para la vista HomeView

    [Código aquí Xaml]

    [Código aquí .CS]

    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

    [Código aquí]

    El siguiente paso es agregar los siguientes paquetes nuget:

    • 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

    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.

    [Código de la vista .cs]

    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.

    [Código de la vista AXML]

    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.

    [Código del TEMPLATE AXML]

    Ahora falta crear la vista del detalle, es muy similar a los pasos anteriores, se puede ver el código abajo.

    [Código vista About.cs]

    [Código vista AboutView.axml]

    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.



    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



    [Código aquí CustomCell]

    Abrimos la clase HomeView.cs y escribimos el siguiente codigo



    [Código aquí HomeView]

    Abrimos la clase AboutView.cs y escribimos el siguiente codigo



    [Código aquí AboutView]