Tener un sistema que nos permita, de forma automática y desatendida, poner en manos de usuarios nuestras aplicaciones mientras las desarrollamos es un punto básico hoy en día dentro del ciclo de vida del desarrollo.
Estos usuarios pueden ser compañeros de Quality Assurance, usuarios internos del cliente, o stakeholders. En cualquier caso, cuanto antes podamos brindarles la oportunidad de interactuar con la aplicación, antes recibiremos informes de fallos (siempre hay fallos), feedback de la experiencia, mejoras y todo tipo de comentarios que nos permitirán validad y mejorar la app antes de lanzarla al mercado.
En este artículo y en el próximo, vamos a seguir los pasos para desplegar a AppCenter una aplicación para iOS y Android, desarrollada en Flutter y usando Azure DevOps como repositorio y sistema de compilación.
Preparando AppCenter
En primer lugar vamos a comenzar con AppCenter. Este sitio web es donde centralizaremos toda la información final con nuestras aplicaciones, será donde gestionar usuario, versiones de la app, análisis de distribución o informes de errores.
Entraremos en Microsoft AppCenter con una cuenta GitHub, Microsoft, Google o Facebook.
Creando las aplicaciones
Una vez en la pantalla principal de AppCenter, crearemos una nueva aplicación con el botón azul de nueva aplicación y rellenaremos los datos que nos piden, presionando el botón Add new app o Añadir aplicación al terminar:
App name: El nombre que queremos que tenga nuestra aplicación en AppCenter.
Icon: Un icono que podemos subir para AppCenter. Si no indicamos ninguno, se usará el del IPA o APK que publiquemos.
Release Type: Tipo de publicación que estamos realizando: Alpha, Beta, Enterprise, Production, Store, Custom… no afecta en nada, es solo informativo.
OS: Sistema operativo de destino, hay que repetir este paso por cada sistema operativo que soportemos. En nuestro caso será iOS y Android.
Platform: La plataforma usada para desarrollar la aplicación, depende del sistema operativo seleccionado.
En nuestro caso rellenaremos los datos de la siguiente forma:
- iOS:
- App name: Build test iOS.
- Icon: sin cambios, por defecto.
- Release Type: Beta.
- OS: iOS.
- Platform: Objective-C / Swift.
- Android:
- App name: Build test Android.
- Icon: sin cambios, por defecto.
- Release Type: Beta.
- OS: Android.
- Platform: Java / Kotlin.
Como AppCenter no soporta directamente Flutter, usamos como plataforma la nativa de cada sistema.
Configurando el token de acceso
Ahora necesitamos obtener un token de API de cada aplicación que hemos creado. Entramos primero en la aplicación Build test iOS y vamos a los settings en el menú lateral izquierdo. Dentro de settings escogemos la opción App API tokens, presionando sobre el lápiz en la parte derecha y a continuación en el botón azul New API token.
Introduciremos un nombre que describa el token, por ejemplo Azure devops build token, seleccionamos la opción Full Access y presionamos el botón azul Add new API token. Se nos mostrará un token en pantalla, es muy importante que lo copies y lo guardes por ahora, ya que una vez cerrado el popup, no podrás volver a ver el token. Repetiremos la misma acción con la aplicación *Build test Android* para obtener un token también para ella.
Con esto ya hemos configurado todo lo necesario en AppCenter y podemos ir a Azure DevOps para continuar con el proceso.
Preparando Azure DevOps
Con Azure DevOps tenemos varios pasos a realizar:
- Configurar la conexión entre Azure DevOps y AppCenter.
- Configurar la librería para almacenar los keystore, profiles y certificados necesarios.
- Instalar la extensión de compilación de Flutter.
- Crear el archivo YAML de la build y añadir el código necesario.
Configurar la conexión entre Azure DevOps y AppCenter.
Para conectar Azure DevOps y AppCenter, vamos a ir al proyecto de Azure DevOps y dentro de él, a los Project settings que encontraremos en el menú lateral izquierdo (en la parte inferior). Desde el menú de configuración de la izquierda, en la sección de Pipelines, accedemos a la sección de Service connections y presionamos el botón gris New service connection. En el popup que aparece a la derecha buscamos el servicio App Center y presionamos Next:
En la siguiente pantalla tendremos que configurar la conexión con el token que obtuvimos de AppCenter anteriormente:
Ahora copiaremos el token de la app de iOS que obtuvimos anteriormente y pondremos un nombre descriptivo. Podemos marcar el check de Grant access permission to all pipelines de forma que podamos usar esta conexión desde cualquier pipeline. Presionamos el botón azul Save y tendremos la nueva conexión en la lista de service connections.
Repetimos el proceso con el token de android para tener ambas conexiones creadas y podremos continuar al siguiente paso.
Configurar la librería de almacenamiento
Lo siguiente que necesitaremos es configurar la librería de nuestros pipelines para almacenar ciertas variables y archivos de forma segura con el objetivo de usarlos durante la fase de compilación y despliegue.
Podemos acceder a la librería desde el menú de Pipelines en el lateral izquierdo de Azure DevOps, en la opción Library:
Al acceder a la librería tendremos dos pestañas, Variable groups y Secure files, vamos a comenzar por crear un nuevo Variable group haciendo click en el botón + Variable group al lado de las pestañas.
En el nuevo variable group podremos añadir un nombre y una descripción y variables de entorno que podremos usar en nuestra build. En este caso añadiremos dos: configuration y sdk con los valores release y iphoneos:
A continuación configuramos los archivos seguros, seleccionando la pestaña de secure files. Aquí vamos a guardar 3 archivos:
- Provisioning profile de iOS.
- Certificado de firma de iOS.
- Keystore de android.
Si queremos tener diferentes builds por entornos (DEV, PRE, PRO) subiremos estos tres archivos por cada entorno.
Para añadir estos archivos, haremos click en + Secure file y arrastraremos o buscaremos el archivo que queramos subir:
Tras subir los 3 archivos indicados, ya podemos continuar al siguiente y último paso de configuración, instalar la extensión de devops necesaria.
Instalar la extensión de compilación de Flutter
Para compilar una aplicación Flutter en un agente de Azure DevOps tenemos que instalar primero una extensión desde el Marketplace de Visual Studio para poder instalar Flutter y realizar la compilación, ejecutar tests o lanzar comandos de flutter.
La extensión que usaremos es Flutter Tasks de hey24sheep, totalmente gratuita y solo hay que entrar en el link anterior y presionar el botón verde Get it free.
Cuando lo presiones te redigirá a Azure DevOps donde tendrás que hacer login con tu cuenta de DevOps con permisos para administrar extensiones. Una vez instalado, ya está todo listo para crear nuestro Pipeline y empezar a escribir el YAML necesario.
Próximos pasos
En el próximo artículo, veremos como configurar el pipeline de Azure DevOps y todas las tareas necesarias para compilar y desplegar nuestra aplicación a Microsoft AppCenter👉Flutter DevOps: Azure DevOps y Microsoft AppCenter (Parte 2)
¡Suscríbete a nuestras RRSS!
