¿Estás aburrido de compilar tu aplicación React Native y Expo de manera local?
Sigue este tutorial y te ayudaré a realizar las prácticas de Integracion Continua (CI) y Despliegue Continuo (CD) utilizando Azure DevOps y App Center. Podrás realizar cambios en tu app y generar archivos IPA y archivos APK de forma rapida y segura.
Para descargar los certificados, primero debemos ir a la web de Apple Developer, iniciar sesión ahí y dirigirnos a [Membership] para optener el Apple Team ID Membership (Debes buscar una cadena de 10 caracteres como Ej:"Q2DBWS92CA").
En el caso del certificado p.12 primero debemos generarlo, por lo que nos dirigiremos ir al signo (+).
En esa opción seleccionamos In-House and Ad Hoc y continuamos
Para descargar el Certificado.p12 vamos a Certificates, ID, Profile y buscamos el certificado que creamos y lo descargamos.
Después de descargar el certificado debemos seguir unos pasos para generarlo. Para esto necesitaremos de un computador Apple.
A. Crear un archivo CSR (.certSigningRequest)
Cliqueamos Acceso a llavero, se abre desde utilidades.
Desde la barra de herramientas de Acceso a Llavero, seleccionamos Acceso a Llavero -> Preferencia.
En la ventana emergente seleccionamos la pestaña Certificados.
Establecemos el Protocolo de estado del certificado en línea y la Lista de revocación de certificados en Desactivado.
Cerramos esta ventana.
Ahora, desde la barra de herramientas, abrimos Acceso a llaveros -> Asistente de certificados -> Solicitar un certificado de una autoridad de certificación.
Ingresamos la dirección de correo electrónico y el nombre común que utilizamos para registrarnos en el Programa para desarrolladores de iOS.
Mantenemos el correo electrónico de CA en blanco y seleccionamos Guardado en disco y Permítame especificar la información del par de claves.
Hacemos click en Continuar.
Elegimos un nombre de archivo y destino en nuestro disco duro.
Hacemos click en Guardar.
En la siguiente ventana, establecemos el valor de Tamaño de clave en 2048 bits.
Establecemos Algoritmo en RSA.
Hacemos click en Continuar.
Esto creará y guardará su archivo certSigningRequest (CSR) en su disco duro. También se creará una clave pública y privada en Keychain Access con el Nombre común ingresado.
B. Crear el archivo ".cer" en la cuenta de desarrollador de iOS
Iniciamos sesión en la cuenta de desarrollador de Apple y hacemos click en Certificados, identificadores y perfiles.
Hacemos click en Perfiles de aprovisionamiento.
En la sección Certificados hacemos click en Producción.
Hacemos click en el botón Agregar(+) en la esquina superior derecha del panel principal.
Ahora, elegimos App Store y Ad Hoc.
Hacemos click en Continuar.
Hacemos click en Elegir archivo y buscamos el archivo CSR que hemos creado desde nuestro disco duro.
Hacemos click en Generar.
Hacemos click en Descargar para obtener el archivo.
C. Instalar .cer y generar el certificado .p12
Debemos encontrar el archivo .cer que hemos descargado y hacer doble click en él.
Establecemos el menú desplegable Inicio de sesión en Inicio de sesión y hacemos click en Agregar.
Abrimos KeyChain Access y encontramos el perfil creado en el Paso A.
Puedes expandir el perfil de Clave privada (muestra el certificado que agregamos).
Seleccionamos solo los dos certificados que creamos (no la clave pública).
Hacemos click derecho y luego click en Exportar 2 elementos ... en la ventana emergente.
Ahora debemos asegurarnos de que el formato del archivo sea .p12 y elegir el nombre de archivo y el destino en nuestro disco duro.
Hacemos click en Guardar. Ahora, se nos pedirá establecer una contraseña, pero debemos mantener ambas en blanco.
Luego, hacemos click en Aceptar. Así, tendremos un archivo .p12 en nuestro disco duro.
Con el Perfil de aprovisionamiento nos vamos a Certificates, ID, Profile, pero esta vez seleccionamos Profiles y seleccionamos el signo de (+) para generar un nuevo perfil.
Una vez en la opción, nos vamos al área de Distribution y seleccionamos In House y continuamos. Después de la creación solo descargamos los certificados.
CARGA ARCHIVOS SEGUROS
Con todo descargado nos vamos a Azure. En el proyecto creado, seleccionamos la opción Pipelines y a la opción siguiente: Library. Los documentos descargados son muy confidenciales, por lo que los cargaremos en el proyecto de forma segura. Para eso nos iremos a Segure file y después a +Variable group, donde subimos los archivos (Certificado.p12 y archivo.mobileprovision)
CREACIÓN DE VARIABLE DE ENTORNO
Para cargar las variables de entorno, primero, debemos ir a la opción Pipelines y editamos el proyecto, después seleccionamos Variables después hacemos click en (+) y agregamos las variables de entorno.
Variables de entorno necesarias
Para reutilizar con éxito los archivos de configuración de CI, primero debemos configurar algunas variables de entorno:
Común para todos los trabajos (no es necesario establecerlos si pasa el --public-urlparámetro al comando de compilación)
EXPO_USERNAME - El nombre de usuario de tu cuenta Expo.
EXPO_PASSWORD - La contraseña de tu cuenta Expo.
Específico de Android. Puedes obtener estos valores de los servidores de Expo ejecutando expo fetch:android:keystore en el directorio de tu proyecto de Expo.
EXPO_ANDROID_KEYSTORE_BASE64 - Almacén de claves de Android codificado en base64.
EXPO_ANDROID_KEYSTORE_ALIAS - Alias del almacén de claves de Android.
EXPO_ANDROID_KEYSTORE_PASSWORD - Contraseña del almacén de claves de Android.
EXPO_ANDROID_KEY_PASSWORD - Contraseña clave de Android.
iOS específico. Puedes obtener estos valores de los servidores de Expo ejecutando expo fetch:ios:certs en el directorio de tu proyecto de Expo.
EXPO_APPLE_TEAM_ID - ID del equipo de Apple (una cadena de diez caracteres como "Q2DBWS92CA").
EXPO_IOS_DIST_P12_BASE64 - Certificado de distribución iOS codificado en base64.
EXPO_IOS_DIST_P12_PASSWORD - Contraseña del certificado de distribución de iOS.
EXPO_IOS_PROVISIONING_PROFILE_BASE64 - Perfil de aprovisionamiento iOS codificado en base64.
En macOS, puedes codificar en base64 el contenido de un archivo y copiar la cadena al portapapeles ejecutando base64 some-file | pbcopyen un terminal.
CODIGO PIPELINES
Primero partiremos con la carga de los archivos seguros y cómo se ocupan en el codigo que crearemos para hacer todo esto:
PC que ocuparemos
Con este comando ocuparemos la última computadora con el sistema macOS
pool: vmImage: "macOS-latest" # <- el sistema mas actual
Descargaremos e instalaremos el entorno de trabajo (JavaScript)
- task: NodeTool@0 inputs: versionSpec: "10.x" # <- la version de node
displayName: "Install Node.js"
Llamaremos a los archivos seguros cargados
- task: DownloadSecureFile@1 #<- expreción para descargar archivos displayName: "P12File" #<- nombre que le colocar a la variable name: "P12File" #<- nombre que le colocar a la variable inputs: secureFile: "Certificates.p12" #<- nombre del archivo guardado
Si la sentencia fue exitosa, deberemos llamar al archivo por el nombre de la variable y agregar la extencion .secureFilePath. para ocupar el archivo.
$(PathAndroid.secureFilePath)
Ya con el entorno de trabajo, los archivos descargados y listos para ocupar, empezaremos a generar la app ( APK, IPA ) creando un script. Para esto primero deberemos instalar las dependencias ocupadas
yarn install
npm install -g expo-cli npm install -g turtle-cli
Después de instalar las dependencias y herramientas a ocupar, nos loguearemos en Expo para validar que somos desarrolladores.
Ya estamos por terminar, este paso es mucho más corto que el anterior porque como Azure y App-Center es de Microsoft su integracion resulta súper fácil.
Primero debemos ir a Releases del proyecto
Agregamos un nuevo Releases
Empezamos un nuevo trabajo
Seleccionamos el proyecto (Add an artifact )
Después le cambiamos el nombre a uno más descriptivo para el proyecto
Con eso listo, vamos a cargar el trabajo a realizar
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Descarga nuestro Clever UI KIT 👇
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Crea tu propio manual de marca con esta plantilla gratuita. ¡Organiza tus activos de diseño de forma más eficiente!