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

Por

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!

 

Comments

Post a Comment

Popular posts from this blog

Configurar y desplegar una Web API en Azure App Service Environment

Por
Image
App Service Environment es un servicio premium de Azure App Service que proporciona un entorno completamente aislado y dedicado para ejecutar de forma segura aplicaciones de Azure App Service a gran escala. Cuando creamos un ambiente de App Service Environment, creamos automáticamente una red virtual “VNET” y una Subnet. App Service Environment crea y configura su infraestructura dentro de una Subnet. Los componentes que se crean en App Service Environment son: Front End pool (dos instancias, esto es para cumplir con los requerimientos para la SLA) Tres Worker Pool (Worker Pool 1,2,3) Una VNET Una Subnet Se crea un almacenamiento compartido por las aplicaciones en ASE de 500GB Una base de datos donde se almacena detalle de aplicaciones y configuraciones de entorno. Pre Requisitos: Cuenta de Azure Visual Studio 2013+ Crear App Service Environment en Azure Ingresamos al portal de Azure https://portal.azure.com y luego vamos a Marketplace y buscamos por “App Service
Read more

Patrones de diseño para aplicaciones de alta disponibilidad en Azure - Resilient Applications (Parte I: Retry Policy)

Por
Image
En un sistema distribuido, los fallos sucederán. El hardware puede fallar. La red puede tener fallas ocasionales. Rara vez, un servicio o región entera puede experimentar una interrupción, incluso en interrupciones programadas. La creación de una aplicación confiable en la nube es diferente de la construcción de una aplicación confiable en una configuración empresarial. Mientras que históricamente puede haber comprado hardware de gama alta para hacer escalamiento vertical (scale up) , en un entorno de nube debe escalar de manera horizontal (scale out) en lugar de escalar verticalmente (scale up) . Los costos de los entornos en la nube se mantienen bajos a través del uso de hardware de productos básicos. En lugar de centrarse en prevenir los fallos y optimizar el "tiempo medio entre fallos" , en este nuevo entorno el enfoque cambia a "tiempo medio para restaurar" . El objetivo es minimizar el efecto de un fallo. ¿Que es resiliencia? Resiliencia es la capacidad d
Read more

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

Por
Image
Nota: Este post es la continuación de la guía: Integración Continua para Android Xamarin.Forms usando VS Team Services, VS Source Control y VS Mobile Center , favor de realizar primero los paso del post antes de seguir con esta publicación. Para crear una aplicación altamente disponible, escalable y tolerante a errores, vamos a crear una Web API para luego conectarla con nuestra aplicación y después desplegaremos la API en Azure para obtener todos los beneficios de una infraestructura de nube. Pre-Requisitos Visual Studio 2015+ Cuenta en Visual Studio Team Services Xamarin instalado en Visual Studio Iniciar sesión en https://mobile.azure.com con tu cuenta de Microsoft Completar la guía: Integración Continua para Android Xamarin.Forms usando VS Team Services, VS Source Control y VS Mobile Center   Crear Web API como Azure API App Antes que nada, creamos una carpeta de solución llamada: “Azure.AppService” y posteriormente agregamos un nuevo proyecto Web API como Azure A
Read more

Publicar resultados de una consulta de Azure SQL Database a Azure Service Bus con Logic App

Por
Image
En esta ocasión veremos como publicar resultados de una consulta de Azure SQL Database a Service Bus usando los flujos de Logic Apps. Una de las grandes ventajas de utilizar Logic Apps es que nos permite diseñar flujos complejos de negocio de una manera fácil y escalable. De igual manera podemos integrar fácilmente flujos de una empresa on-promise a Azure, incluso de flujos Legacy sin necesidad de adentrarte en el código. Pre-Requisitos Suscripción a Azure, puedes obtener un free trial aquí Crear recursos de Azure SQL Database y Service Bus En esta guía nos enfocaremos en la funcionalidad de Logic Apps, por lo tanto dejaré un enlace de como crear una base de datos de SQL en Azure y un servicio de Service Bus Azure SQL Database: https://docs.microsoft.com/en-us/azure/sql-database/sql-database-get-started Service Bus: https://docs.microsoft.com/en-us/azure/service-bus-messaging/service-bus-dotnet-get-started-with-queues Crear recursos de Logic Apps Vamos a Azure Marketplace y buscamo
Read more

Despliegue de contenedores Docker a Azure Web Apps

Por
Image
En esta publicación veremos como realizar un despliegue de una contenedor de Docker al nuevo servicio de Azure llamado: Azure Web Apps on Linux Veremos también como crear un contenedor de Docker con Visual Studio y almacenaremos una aplicación de .NET Core en el contenedor. Pre-requisitos Tener una suscripción de Azure si no tienes una, puedes obtener un free trial Visual Studio 2015 Update 3, obtenerlo aquí . Docker for Windows Visual Studio Tools for Docker Microsoft .NET Core 1.0.1 RTM VS 2015 Tooling Preview 2, with the 1.0.1 updates Crear proyecto .NET Core Para crear una aplicación de .NET Core y luego almacenarla en un contenedor de Docker, podemos revisar mi publicación: Como crear una aplicación .NET Core y almacenarla en un contenedor de Docker usando Visual Studio Seguir los pasos de esa publicación para luego hacer un despliegue de nuestro contenedor a Azure Web Apps on Linux. App Services Web Apps en Linux + Docker Hace pocas semanas
Read more