La guía que faltaba para las variantes de aplicaciones nativas de React – Parte 1 | Por Tamás Menyhart | Guía de productos digitales de Supercharge | Febrero de 2022

El desarrollo de aplicaciones móviles multiplataforma realmente ha mejorado a lo largo de los años y se ha convertido en una alternativa viable al desarrollo de aplicaciones nativas para pequeñas y medianas empresas. React Native, uno de los primeros marcos móviles, todavía tiene demanda debido a su sólida comunidad y facilidad de uso para principiantes. documento.

Si bien React Native es relativamente fácil de aprender para los desarrolladores de Javascript, la documentación oficial carece de algunos casos de uso comunes.. Uno de ellos es la capacidad de crear diferentes variantes de una aplicación y poder instalar todas esas variantes de aplicaciones en el mismo dispositivo.Este caso de uso requiere una configuración de código nativo de Android/iOS, lo que puede asustar a los desarrolladores de Javascript.Pero no te preocupes: quédate conmigo Le mostraré cómo configurar su aplicación React Native para que sea compatible con las variantes de la aplicación y lo guiaré a través de la configuración de Android/iOS paso a paso.

Ya que tenemos que discutir muchos temas aquí, quisiera dedicar una serie de tres artículos explique Cómo admitir variantes de aplicaciones en detalle en React Native.

Aquí hay una descripción general de la serie:

En la primera parte, crearemos un aplicación de frutas y seguro de calidad y producto alrededores Residencia en variantey establecer su nombre de paquete único/ID de paquete, lo que permitirá instalar variantes de aplicaciones en el mismo dispositivo (En Android/iOS, el nombre del paquete/ID del paquete debe ser único por aplicación, al igual que en la web, varios sitios no pueden tener la misma URL).
Por ejemplo, las compilaciones dependientes del entorno se pueden usar para usar una URL base diferente para las solicitudes de red. (Datos de prueba en la creación de aplicaciones del entorno de control de calidad, datos de producción en el entorno PROD compilación de la aplicación).

En la segunda parte agregaremos manzana y plátano oler Residencia en variantey establecer Nombre único del paquete/ID del paquete, nombre de la aplicación e ícono de la aplicación para ellos.
Por ejemplo, las compilaciones relacionadas con el sabor se pueden usar para implementar alguna lógica comercial de manera diferente o diseñar la aplicación de manera diferente (principales rojos en compilaciones de aplicaciones con sabor a APPLE, primarios amarillos en compilaciones de aplicaciones con sabor a banana).

En la tercera parte vamos a añadir reaccionar configuración nativa como una dependenciaEl propósito principal de esta biblioteca es ayudarnos Mantenga las constantes relacionadas con el entorno/sabor en un archivo .env normal y pueda leer los valores de nuestra base de código Javascript.Se pueden inyectar archivos .env específicos en la aplicación durante el proceso de creación de CIes además.

Al final de esta serie, tendremos la siguiente 4 variantes de aplicaciones para dos plataformas (Android/IOS) con diferente nombre de paquete/ID de paquete, nombre de aplicación e ícono de aplicación:
– FruitApp-APPLE-QA, FruitApp-APPLE-PROD
– FruitApp-BANANA-QA, FruitApp-BANANA-PROD

Como primer paso, inicialicemos la aplicación React Native usando Reaccionar CLI nativo:
npx react-native init FruitApp --template react-native-template-typescript --npm

Comprobar el nombre del paquete predeterminado de Android

Después de inicializar el proyecto, debemos buscar «Identificación de la aplicación» escribe «android/aplicación/construir.gradle» debajo del archivo «asignación predeterminada» impedir la inspección de nuestros Nombre del paquete inicial en Android:

android {
defaultConfig {
applicationId "com.fruitapp"
}
}

Comprobar el ID del paquete predeterminado de iOS

En el caso de iOS, primero debemos abrir el archivo del proyecto de iOS:
cd ios && open FruitApp.xcworkspace necesitamos navegar en base a:

• dentro barra lateral del proyecto (a la izquierda), Seleccione el elemento «FruitApp»
• dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo bloque «objetivo»
• Al final, Seleccione la pestaña «Generales» (medio), podemos comprobar ID de paquete predeterminado junto a la clave «Identificador de paquete» en iOS.

Al escribir el proyecto React Native generado, el nombre del paquete predeterminado/ID del paquete no coincide, por lo que debemos actualizar el ID del paquete de iOS a «com.fruitapp» para mantener la ID de la aplicación consistente en todas las plataformas.

Como mencioné en la parte de la serie de artículos, en este paso crearemos variantes de aplicaciones basadas en el entorno. Dado que la parte de Android de esta configuración es más fácil, comencemos con ella.

Crear variantes de aplicaciones basadas en el entorno de Android

Primero, debemos abrir «android/aplicación/construir.gradle» archivo, luego busque «Tipo de construcción» obstruido.deberíamos Defina nuestras dimensiones de sabor disponibles debajo de este bloque Entonces Haga coincidir cada sabor de producto que queremos con la dimensión de sabor en el bloque «productFlavors»:

android {
buildTypes {
debug {
...
}
release {
...
}
}
flavorDimensions ("environment")
productFlavors {
qa {
dimension "environment"
applicationIdSuffix ".qa"
}
prod {
dimension "environment"
}
}
}

Después de hacer las modificaciones anteriores, debemos Actualice nuestros scripts para poder ejecutar y crear variantes de aplicaciones basadas en el entorno. desde la línea de comandos.Para hacer esto, vamos a abrir «paquete.json» archivo y actualice la sección del script:

{
"scripts": {
"run:android:qa": "react-native run-android --variant=QaDebug --appIdSuffix=qa",
"run:android:prod": "react-native run-android --variant=ProdDebug",
"build:android:qa:release": "cd android && ./gradlew assembleQaRelease",
"build:android:prod:release": "cd android && ./gradlew assembleProdRelease"
}
}

Usando el script anterior, Podemos instalar variantes de aplicaciones QA y PROD en el mismo dispositivo. Esta aplicación de control de calidad tendrá «com.appfruta.qa» nombre del paquete y Aplicaciones tendrá «com.appfruta» Nombre del paquete.

Crear una variante de aplicación basada en el entorno de iOS

En el caso de iOS, primero, necesitamos Cree configuraciones para cada par de tipo de compilación (depuración, lanzamiento) y entorno (QA, PROD)Después de eso, necesitamos Cree un escenario para cada entorno (QA, PROD) y empareje el escenario con la configuración correcta.

Crear configuración de iOS

Ver configuración actual en Xcodenecesitamos navegar en base a:

• dentro barra lateral del proyecto (a la izquierda), Seleccione el elemento «FruitApp»
• dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo Bloque «Proyecto»
• Al final, Seleccione la pestaña «Información» (medio), podemos ver la configuración a continuación Bloque «Configuración».

Para crear una nueva configuración, necesitamos Duplique el «Debug» y el «Release» existentes Esos Apto para todos los entornos (QA, PROD).Copiar la configuración es muy fácil Haga clic en el pequeño icono «+» Debajo de la lista de configuración, luego seleccione «Configuración duplicada» opciones

Deberíamos copiar «Debug» para crear las configuraciones «Qa.Debug» y «Prod.Debug», y deberíamos copiar «Release» para crear las configuraciones «Qa.Release» y «Prod.Release».

Crear un escenario de iOS

Para ver los esquemas disponibles, necesitamos usar Menú «Productos/Programas/Programas de Gestión…».

En este paso, necesitamos Duplicar un esquema «FruitApp» existente (Tenga en cuenta que debemos hacerlo dos veces, una para el escenario «Qa.FruitApp» y otra para el escenario «Prod.FruitApp».).
Para crear un nuevo escenario, se deben seguir los siguientes pasos:

• Debajo de la lista de opciones, Haga clic en el pequeño icono de «engranaje» y seleccione la opción «Copiar»
• nombra el plan (En la cima)
• Marque la casilla de verificación «Compartir» (en el fondo)

además, Se deben seguir los siguientes pasos en el cuadro de diálogo Crear escenario para Emparejar un esquema con una configuración:

• existe panel izquierdo, Seleccione el elemento «Ejecutar»y cambia a Menú desplegable Configuración de compilación valor a la configuración de depuración relevante (Esquema Qa.FruitApp – Configuración Qa.Debug, esquema Prod.FruitApp – Configuración Prod.Debug)
• existe panel izquierdo, Seleccione el elemento «Prueba»y cambia a Menú desplegable Configuración de compilación valor a la configuración de depuración relevante (Esquema Qa.FruitApp – Configuración Qa.Debug, esquema Prod.FruitApp – Configuración Prod.Debug)
• existe panel izquierdo, Seleccione el elemento «Analizar»y cambia a Menú desplegable Configuración de compilación valor a la configuración de depuración relevante (Esquema Qa.FruitApp – Configuración Qa.Debug, esquema Prod.FruitApp – Configuración Prod.Debug)
• existe panel izquierdo, Seleccione el elemento «Perfil»y cambia a Menú desplegable Configuración de compilación valor a la configuración de versión correspondiente (Esquema Qa.FruitApp – Configuración Qa.Release, Esquema Prod.FruitApp – Configuración Prod.Release)
• existe panel izquierdo, Seleccione el elemento «Archivo»y cambia a Menú desplegable Configuración de compilación valor a la configuración de versión correspondiente (Esquema Qa.FruitApp – Configuración Qa.Release, Esquema Prod.FruitApp – Configuración Prod.Release)

Establecer el ID del paquete de configuración de iOS

Como paso final, necesitamos actualizar el ID del paquete de la configuración «Qa». Actualizar el ID del paquete de configuración en Xcodenecesitamos navegar en base a:

• dentro barra lateral del proyecto (a la izquierda), Seleccione el elemento «FruitApp»
• dentro Panel Proyecto/Objetivoescoger «Aplicación de frutas» bajo bloque «objetivo»
• Seleccione la pestaña Configuración de compilación (medio), podemos verificar la identificación del paquete de configuración en bloque «envoltura» atravesar Abra el elemento Identificador de paquete de productos
• renovar identificación del paquete por «QA.Debug» y Configuración «Qa.Release» llegar «com.appfruta.qa»

Después de hacer las modificaciones anteriores, debemos Actualice nuestros scripts para poder ejecutar y crear variantes de aplicaciones basadas en el entorno. desde la línea de comandos.Para hacer esto, vamos a abrir «paquete.json» archivo y actualice la sección del script:

{
"scripts": {
"run:ios:qa": "react-native run-ios --scheme Qa.FruitApp --configuration Qa.Debug",
"run:ios:prod": "react-native run-ios --scheme Prod.FruitApp --configuration Prod.Debug",
"build:ios:qa:release": "cd ios && xcodebuild -scheme Qa.FruitApp build",
"build:ios:prod:release": "cd ios && xcodebuild -scheme Prod.FruitApp build"
}
}

Usando el script anterior, Podemos instalar variantes de aplicaciones QA y PROD en el mismo dispositivo. Esta aplicación de control de calidad tendrá «com.appfruta.qa» identificación del paquete y Aplicaciones tendrá «com.appfruta» Logotipo del paquete.

Tenga en cuenta que para crear una aplicación iOS, la aplicación debe estar firmada, pero firmar una aplicación no forma parte de la serie de artículos.

Espero que la primera parte de la serie de artículos haya sido útil y te haya mantenido interesado en los siguientes.Si prefiere inspeccionar el código directamente, puede encontrar una aplicación de muestra en Github Esto lo guiará a través de los pasos de envío para la serie de artículos.

Mucho tiempo sin verte, cuídate.

existe sobrealimentado, somos la agencia de innovación de próxima generación, asociándonos con clientes para crear soluciones digitales transformadoras.Si le gustó este artículo, consulte algunos de nuestros otros artículos de Supercharge en nuestro sitio web Blogo síguenos LinkedIny FacebookSi está interesado en las vacantes, siga este asociación.