![\"\"](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops-flutter.jpg\")
<\/p>\n<\/p>\n
Tener un sistema que nos permita, de forma autom\u00e1tica y desatendida, poner en manos de usuarios nuestras aplicaciones mientras las desarrollamos es un punto b\u00e1sico hoy en d\u00eda dentro del ciclo de vida del desarrollo<\/strong>.<\/p>\n <\/p>\n Estos usuarios pueden ser compa\u00f1eros de Quality Assurance<\/em>, usuarios internos del cliente, o stakeholders<\/em>. En cualquier caso, cuanto antes podamos brindarles la oportunidad de interactuar con la aplicaci\u00f3n, antes recibiremos informes de fallos (siempre hay fallos)<\/strong>, feedback de la experiencia, mejoras y todo tipo de comentarios que nos permitir\u00e1n validad y mejorar la app antes de lanzarla al mercado.<\/p>\n En este art\u00edculo y en el pr\u00f3ximo<\/a>, vamos a seguir los pasos para desplegar a AppCenter<\/strong>\u00a0una aplicaci\u00f3n para iOS<\/strong>\u00a0y Android<\/strong>, desarrollada en Flutter<\/strong>\u00a0y usando Azure DevOps\u00a0<\/strong>como repositorio y sistema de compilaci\u00f3n.<\/p>\n En primer lugar vamos a comenzar con AppCenter<\/strong>. Este sitio web es donde centralizaremos toda la informaci\u00f3n final con nuestras aplicaciones, ser\u00e1 donde gestionar usuario, versiones de la app, an\u00e1lisis de distribuci\u00f3n o informes de errores.<\/p>\n Entraremos en Microsoft AppCenter<\/a> con una cuenta GitHub<\/strong>, Microsoft<\/strong>, Google<\/strong> o Facebook<\/strong>.<\/p>\n Una vez en la pantalla principal de AppCenter, crearemos una nueva aplicaci\u00f3n con el bot\u00f3n azul de nueva aplicaci\u00f3n y rellenaremos los datos que nos piden, presionando el bot\u00f3n Add new app<\/strong> o A\u00f1adir aplicaci\u00f3n<\/strong> al terminar:<\/p>\n App name:<\/strong> El nombre que queremos que tenga nuestra aplicaci\u00f3n en AppCenter. En nuestro caso rellenaremos los datos de la siguiente forma:<\/p>\n Como AppCenter no soporta directamente Flutter, usamos como plataforma la nativa de cada sistema.<\/strong><\/em><\/p>\n Ahora necesitamos obtener un token de API de cada aplicaci\u00f3n que hemos creado. Entramos primero en la aplicaci\u00f3n Build test iOS<\/em> y vamos a los settings en el men\u00fa lateral izquierdo. Dentro de settings escogemos la opci\u00f3n App API tokens, presionando sobre el l\u00e1piz en la parte derecha y a continuaci\u00f3n en el bot\u00f3n azul New API token<\/strong>.<\/p>\n Introduciremos un nombre que describa el token, por ejemplo Azure devops build token<\/strong>, seleccionamos la opci\u00f3n Full Access<\/strong> y presionamos el bot\u00f3n azul Add new API token<\/strong>. Se nos mostrar\u00e1 un token en pantalla, es muy importante que lo copies y lo guardes por ahora, ya que una vez cerrado el popup, no podr\u00e1s volver a ver el token<\/strong>. Repetiremos la misma acci\u00f3n con la aplicaci\u00f3n *Build test Android* para obtener un token tambi\u00e9n para ella.<\/p>\n Con esto ya hemos configurado todo lo necesario en AppCenter<\/strong> y podemos ir a Azure DevOps<\/strong> para continuar con el proceso.<\/p>\n Con Azure DevOps tenemos varios pasos a realizar:<\/p>\n Para conectar Azure DevOps y AppCenter, vamos a ir al proyecto de Azure DevOps y dentro de \u00e9l, a los Project settings<\/strong> que encontraremos en el men\u00fa lateral izquierdo (en la parte inferior). Desde el men\u00fa de configuraci\u00f3n de la izquierda, en la secci\u00f3n de Pipelines,<\/strong> accedemos a la secci\u00f3n de Service connections<\/strong> y presionamos el bot\u00f3n gris New service connection<\/strong>. En el popup que aparece a la derecha buscamos el servicio App Center<\/em> y presionamos Next<\/strong>:<\/p>\n En la siguiente pantalla tendremos que configurar la conexi\u00f3n con el token que obtuvimos de AppCenter<\/strong> anteriormente:<\/p>\n 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<\/strong> de forma que podamos usar esta conexi\u00f3n desde cualquier pipeline. Presionamos el bot\u00f3n azul Save<\/strong> y tendremos la nueva conexi\u00f3n en la lista de service connections.<\/p>\n Repetimos el proceso con el token de android para tener ambas conexiones creadas y podremos continuar al siguiente paso.<\/p>\n Lo siguiente que necesitaremos es configurar la librer\u00eda de nuestros pipelines para almacenar ciertas variables y archivos de forma segura con el objetivo de usarlos durante la fase de compilaci\u00f3n y despliegue.<\/p>\n Podemos acceder a la librer\u00eda desde el men\u00fa de Pipelines<\/strong> en el lateral izquierdo de Azure DevOps, en la opci\u00f3n Library<\/strong>:<\/p>\n Al acceder a la librer\u00eda tendremos dos pesta\u00f1as, Variable groups<\/strong> y Secure files<\/strong>, vamos a comenzar por crear un nuevo Variable group haciendo click en el bot\u00f3n + Variable group<\/strong> al lado de las pesta\u00f1as.<\/p>\n En el nuevo variable group podremos a\u00f1adir un nombre y una descripci\u00f3n y variables de entorno que podremos usar en nuestra build. En este caso a\u00f1adiremos dos: configuration<\/strong> y sdk<\/strong> con los valores release<\/strong><\/em> y iphoneos<\/strong><\/em>:<\/p>\n A continuaci\u00f3n\u00a0 configuramos los archivos seguros, seleccionando la pesta\u00f1a de secure files<\/strong>. Aqu\u00ed vamos a guardar 3 archivos:<\/p>\n Si queremos tener diferentes builds por entornos (DEV, PRE, PRO) subiremos estos tres archivos por cada entorno.<\/strong><\/em><\/p>\n Para a\u00f1adir estos archivos, haremos click en + Secure file<\/strong> y arrastraremos o buscaremos el archivo que queramos subir:<\/p>\n Tras subir los 3 archivos indicados, ya podemos continuar al siguiente y \u00faltimo paso de configuraci\u00f3n, instalar la extensi\u00f3n de devops necesaria.<\/p>\n Para compilar una aplicaci\u00f3n Flutter en un agente de Azure DevOps<\/strong> tenemos que instalar primero una extensi\u00f3n desde el Marketplace de Visual Studio<\/strong> para poder instalar Flutter y realizar la compilaci\u00f3n, ejecutar tests o lanzar comandos de flutter.<\/p>\n La extensi\u00f3n que usaremos es Flutter Tasks de hey24sheep<\/a>, totalmente gratuita y solo hay que entrar en el link anterior y presionar el bot\u00f3n verde Get it free<\/strong>.<\/p>\n Cuando lo presiones te redigir\u00e1 a Azure DevOps<\/strong> donde tendr\u00e1s que hacer login con tu cuenta de DevOps con permisos para administrar extensiones. Una vez instalado, ya est\u00e1 todo listo para crear nuestro Pipeline<\/strong> y empezar a escribir el YAML<\/em> necesario.<\/p>\n En el pr\u00f3ximo art\u00edculo<\/a>, veremos como configurar el pipeline de Azure DevOps<\/strong> y todas las tareas necesarias para compilar y desplegar nuestra aplicaci\u00f3n a Microsoft AppCenter\ud83d\udc49Flutter DevOps: Azure DevOps y Microsoft AppCenter (Parte 2)\u00a0<\/a><\/strong><\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" Tener un sistema que nos permita, de forma autom\u00e1tica y desatendida, poner en manos de usuarios nuestras aplicaciones mientras las desarrollamos es un punto b\u00e1sico hoy en d\u00eda dentro del ciclo de vida del desarrollo.<\/p>\n","protected":false},"author":216,"featured_media":2154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122,130,4,3],"tags":[139,138,137,136],"class_list":["post-2100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-flutter","category-microsoft-azure","category-movilidad","tag-agile","tag-appcenter","tag-devops","tag-flutter"],"yoast_head":"\nPreparando AppCenter<\/h2>\n
![\"P\u00e1gina](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/appcenter_login.jpg\")
<\/a>Creando las aplicaciones<\/p>\n![\"Contenido](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/appcenter_newapp1.jpg\")
<\/a><\/p>\n
\nIcon:<\/strong> Un icono que podemos subir para AppCenter. Si no indicamos ninguno, se usar\u00e1 el del IPA o APK que publiquemos.
\nRelease Type:<\/strong> Tipo de publicaci\u00f3n que estamos realizando: Alpha, Beta, Enterprise, Production, Store, Custom… no afecta en nada, es solo informativo.
\nOS:<\/strong> Sistema operativo de destino, hay que repetir este paso por cada sistema operativo que soportemos. En nuestro caso ser\u00e1 iOS y Android.
\nPlatform:<\/strong> La plataforma usada para desarrollar la aplicaci\u00f3n, depende del sistema operativo seleccionado.<\/p>\n\n
\n
\n
Configurando el token de acceso<\/h3>\n
![\"Contenido](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/appcenter_newtoken.jpg\")
<\/a><\/p>\nPreparando Azure DevOps<\/h2>\n
\n
Configurar la conexi\u00f3n entre Azure DevOps y AppCenter.<\/h3>\n
![\"Seleccionando](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_newconnection1.jpg\")
<\/a><\/p>\n![\"Configurando](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_newconnection2.jpg\")
<\/a><\/p>\nConfigurar la librer\u00eda de almacenamiento<\/h3>\n
![\"Accediendo](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_library1.jpg\")
<\/a><\/p>\n![\"Creando](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_library2.jpg\")
<\/a><\/p>\n\n
![\"Popup](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_newsecurefile.jpg\")
<\/a><\/p>\nInstalar la extensi\u00f3n de compilaci\u00f3n de Flutter<\/h3>\n
![\"Instalar](\"http:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2023\/07\/devops_installextension.jpg\")
<\/a><\/p>\nPr\u00f3ximos pasos<\/h2>\n