Integración Continua para Android Xamarin.Forms usando VS Team Services, VS Source Control y VS Mobile Center

Actualmente se utiliza el termino de “Integración Continua” al proceso de integración de código aun repositorio para luego disparar una serie de procesos, automatizando la compilación y despliegue de nuestra App para luego ser probada.

Este tipo de practicas nos permite adoptar la cultura de “DevOps” al agilizar los procesos que intervienen al desarrollar una nueva característica de la app.

En esta guía veremos como automatizar procesos con Team Services y luego desplegaremos hacia Mobile Center para lograr integración continua.

Procesos cotidianos después de integración de código:

1. Compilación

2. Pruebas automatizadas

3. Despliegue a otro ambiente

Tecnologías que veremos en esta guía:

1. Xamarin.Forms (Android)

2. Visual Studio Team Services

3. Visual Studio Mobile Center

4. Source Control

5. Visual Studio

Proceso de compilación y despliegue

image

Pre requisitos

  • Cuenta en Visual Studio Team Services
  • Visual Studio 2015+
  • Xamarin instalado en Visual Studio
  • Iniciar sesión en https://mobile.azure.com con tu cuenta de Microsoft
Crear proyecto de Xamarin.Forms en Visual Studio

Crear nuevo proyecto Xamarin.Forms como Cross Platform App en Visual Studio:
Templates –> Visual C# –> Cross-Platform–> Cross Platform App
1

Seleccionamos Xamarin.Forms con la estrategia de PCL:
2 

Ahora vamos a preparar nuestro nuevo proyecto para luego probarlo en un dispositivo:
 
Por motivos de prueba, eliminamos los proyectos de (iOS y UWP):
4
 
Luego hacemos debug, aseguremos elegir el proyecto de Android para hacer debug:
5
 
Una vez que Visual Studio haga el despliegue de la aplicación de Xamarin al celular, veremos algo así:
6
 
 
Crear proyecto Visual Studio Team Services
 
Ahora vamos a crear un proyecto en Visual Studio Team Services para luego subir nuestra app a VS Source Control:
 
Ingresa a la siguiente liga y crea un nuevo proyecto:
8
9

 
Subir proyecto a Visual Studio Team Services Source Control
 
Una vez creado el proyecto, procedemos a nuestro proyecto de Xamarin a Source Control:
20

Seleccionamos el proyecto que anteriormente creamos:
22
 
Vamos a la pestaña de “Team explorer” y hacemos el mapping a una ruta local en nuestra computadora:24

Hacemos “check-in” de nuestros cambios pendientes para sincronizar:2627


Iniciar sesión y crear proyecto en Visual Studio Mobile Center
 
Para poder desplegar nuestro proyecto a VS Mobile Center, debemos de iniciar sesión en la siguiente ruta:
 
Ingresa con tu cuenta de Microsoft y luego creamos la aplicación:12
13

Ingresamos el nombre de nuestra aplicación y seleccionamos el sistema operativo y la plataforma de nuestro proyecto:
14

Al finalizar, solo da clic en “Add new app” y habremos terminado el proceso de creación:15

 
Crear definición de compilación para Integración Continua en VSTS (Visual Studio Team Services)
 
El pasó mas importante es crear la definición de nuestra compilación para poder automatizar procesos, tales como:
  • Recuperación de paquetes de Nuget.
  • Compilación de PCLs.
  • Compilación de proyecto de Xamarin.
  • Firmar el paquete (APK o .IPA)
  • Despliegue del paquete generado de Xamarin.

Para crear una definición de compilación, vamos a nuestro proyecto en VSTS:

https://app.vsaex.visualstudio.com

Una vez que estemos en el sitio, damos clic en la opción “Set up Build –> New definition” y seguimos los pasos para crear la definición:

10
11
 
Elegimos la tarea de compilación de Xamarin.Android:
18

Ahora eliminamos las tareas que no vamos a necesitar:
19

Al final, vamos a la opción de “Process” y cambiamos el nombre del proceso para luego salvar nuestra nueva tarea de compilación:
28

Una vez que salvemos nuestro “Build definition” vamos a crear un “Service Endpoint” para posteriormente conectarnos a Visual Studio Mobile Center y desplegar el APK generado.

Crear Visual Studio Mobile Center API Token
 
Primero ingresaremos a https://mobile.azure.com para generar nuestra API Token:
32

Ingresamos a “Settings –> API Tokens –> New API Token” y luego seleccionamos “Full Access”
34
35
 
Una vez generado el API Token, aseguremos de guardarlo en un lugar seguro para luego ingresarlo a VSTS, ya que solo será visible una sola vez.
36

 
Crear nuevo Service Endpoint para vinculación con VS Mobile Center
 
Vamos a la opción “Service” y luego agregamos un nuevo Service Endpoint de Visual Studio Mobile Center:

29

30


Ingresemos el API Token que generamos anteriormente en Mobile Center:

37

38

 

Configurar definición de compilación y agregar tarea de despliegue

Volvemos a nuestra definición “Xamarin.Forms.Android.CI” y damos clic en “Edit” y luego adamos clic en “Add Task” para agregar una tarea de despliegue a Mobile Center:

40

42

 

Ahora agregamos los datos de configuración de la tarea de despliegue:

1. Mobile Center Connection: Service Endpoint

2. App Slug: {username}/{app_identifier}

3. Binary File Path: ruta del APK generado

4.  Symbols Type: Tipo de proyecto (en nuestro caso, Java por ser Android)

45

Nota: para obtener el App Slug simplemente vamos la sitio de Mobile Center y navegamos a nuestra app: https://mobile.azure.com/apps y obtenemos nuestro App Slug de la URL:

43

44

 

Configuración de obtención de recursos y Nugets

Vamos a seleccionar como fuente de código “This project” y luego seguimos a la sección de “NuGet Restore” para restaurar las dependencias de la aplicación:

48

 

Seleccionamos la versión 4.0.0 de NuGet y seleccionamos la solución de nuestra app.

49

Configurar compilación de proyecto de Xamarin Android

Seleccionamos la casilla “Create App Package (APK)” para generar el APK al compilar

Project: Ruta de proyecto de Xamarin Android

Output Directory: Ruta donde se va a almacenar el APK

Configuration: Release, Debug, Ad Hoc, etc

 50

Ahora vamos a configurar el compilador (MS Build) seleccionando “MS Build x64” y siempre compilaremos con la ultima versión.

También vamos a configurar el JDK de Java seleccionando el JDK 8 y JDK Architecture x6455

 

Crear Keystore para la aplicación de Android

La manera mas fácil de crear la Keystore es dando “Archive” en Visual Studio para luego generar una Keystore para una aplicación “Ad Hoc”:

58

59

 

Damos clic en “Distribute”  y luego el canal de distribución “Ad Hoc”:

60

61

 

Damos clic en “Agregar” y luego vamos a llenar los datos necesarios para generar nuestra Keystore:

62

Untitled


Una vez generado nuestro Keystore, damos doble clic en “myapp” para ver el detalle y luego ir a la ruta del archivo en file system:

image

75

66

Subir Keystore a Source Control

Para poder obtener el Keystore de nuestra aplicación desde VSTS, es necesario tener el Keystore almacenado en algún repositorio, en nuestro caso vamos a subirlo a Source Control para luego hacer referencia desde nuestra tarea de compilación:

Vamos a Team Explorer –> Source Control Explorer y luego creamos una carpeta que se llamé “Keystore” y agregamos los archivos al repositorio:

67

68

69

 

Por ultimo hacemos check-in de nuestros cambios:

70

Configurar Signing and aligning y agregar Keystore de nuestro proyecto

Para firmar nuestra aplicación con el Keystore que generamos anteriormente, es necesario agregar variables para la contraseña del Keystore y Key password de la App.

Damos clic en la pestaña “Variables” y luego ingresamos lo siguiente:

1. KeyStorePass

2. KeyPass

71

Keystore File: Ruta de Keystore en repositorio:

Keystore Password: Agregamos la variable que creamos anteriormente. - $(KeyStorePass)

Key Password: Agregamos la variable que creamos anteriormente. - $(KeyPass)

Alias: Ingresamos el mismo “Alias” que ingresamos al generar la Keystore. - (MyApp)

76

Ya que tenemos todo configurado, es tiempo de encolar nuestra nueva tarea de compilación

Ejecutar tarea de compilación

Para ejecutar la tarea de compilación, solo damos clic en “Queue” y luego seleccionamos el Host donde va a ejecutarse la compilación, por ahora dejaremos el Host por default.

53

Después de unos minutos de ejecución, veremos como cada paso va ejecutándose y dejando un log de acciones que se están procesando.

Una vez que la compilación finalice correctamente, vamos a recibir dos notificación por correo:

1. VSTS envía correo de notificación de compilación exitosa

2. Mobile Center envía correo de notificación de nuevo despliegue de aplicación en la plataforma.

54

Podemos navegar al sitio: https://mobile.azure.com/apps para ver nuestra nueva distribución de la app de Xamarin.Forms:

73

74

 

Instalar aplicación desde Mobile Center

Para instalar la aplicación en nuestros dispositivos Android, solo necesitamos ingresar a la ruta: https://install.mobile.azure.com y luego iniciar sesión en Mobile Center.

Una vez en el sitio, navegamos a la aplicación: “Xamarin.Forms.Andorid.CI” y luego instalamos:

Screenshot_2017-05-13-16-27-19 Screenshot_2017-05-16-00-57-49 Screenshot_2017-05-13-16-31-37

Screenshot_2017-05-13-17-07-59 Screenshot_2017-05-13-17-08-13 Screenshot_2017-05-13-17-24-56


 

Listo!! Hemos logrado implementar una tarea de compilación de Integración Continua con VSTS desplegando en Mobile Center.

Una de las grandes ventajas que tenemos al utilizar VSTS, es que tenemos una gran variedad de servicios que podemos configurar para agilizar y automatizar procesos, todo esto de una manera muy sencilla.

El motivo por el cual no compilamos directo en Mobile Center, es por que actualmente las tareas de compilación integradas en Mobile Center no soportar vinculación con repositorios de VS Source Control, únicamente admite repositorios Git, sin embargo, sí podríamos utilizar VSTS con repositorios Git.

Felicidades! ahora ya aprendimos como crear uno de los proceso mas importantes en la cultura DevOps.

Siguientes pasos:

 

Saludos!

 

Popular posts from this blog

How to implement OAuth 2.0 server with Redis

Integrar Web API de .NET en proyecto de Xamarin.Forms utilizando Visual Studio y Azure API App

Como crear una aplicación .NET Core y almacenarla en un contenedor de Docker usando Visual Studio

Geospatial queries in Azure Redis Cache using Node.js Azure API App

Configurar y desplegar una Web API en Azure App Service Environment