POC-ArchitectureMobile

Se creó un Template Mobile standar para aquellos proyectos que necesiten trabajar sobre aplicaciones moviles.

Features:

Flujo completo de authenticación:

Mediante la implementación de la librería multiproviders react-native-auth el template ya viene con una pantalla inicial establecida que permite realizar el inicio de sesión, utilizando el provider elegido, siendo AzureB2C el provider estandar configurado por default.

Dejamos un apartado con la Configuracion B2C que se debe solicitar.

La configuracion del lado de la aplicacion es muy simple, dentro de android/app/build.gradle agregar appAuthRedirectScheme dentro de defaultConfig con el schema de mi aplicación:

build.gradle

    defaultConfig {
        applicationId "com.cleanarquitecturemobile"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        manifestPlaceholders = [
            appAuthRedirectScheme: 'com.cleanarquitecturemobiletest',
        ]
    }

En el archivo .env declarar el redirectUri con el formato: {appAuthRedirectScheme}://oauth/redirect/ debe coincidir con el redirectUri configurado en Azure B2C.

.env

REACT_NATIVE_AUTH_DOMAIN="com.cleanarquitecturemobiletest://oauth/redirect/"

Traducción de idioma

Brinda la posibilidad al usuario de seleccionar un idioma de preferencia. Mediante la implementacion de la librería react-i18next el template viene con ejemplos de uso para ser multi lenguaje.

Se puede observar en la estructura del proyecto, la carpeta locales en la cual se establecen los idiomas permitidos por la aplicación. Por cada idioma se establece una carpeta y dentro de ella un archivo JSON con las traducciones, Inicialmente esta configurado en ingles y español:

En la carpeta raiz del proyecto se encuentra un archivo i18n.js en el cual se hace referencia a cada uno de los json establecidos en locales:

Por último, se recomienda que los archivos traslate.json conserven un orden para establecer la traduccion de los textos, todos deben contener la misma estructura, se recomienda separarlo por screen o seccion como se muestra a continuación:

Tener en cuenta que la aplicación unicamente maneja lenguaje del lado cliente, las respuestas de servicios traidas de Base de datos no seran configurables.

Implementación de StyleSystem-mobile

Se estableció una librería para todos aquellos componentes presentacionales que podrian ser de uso comun en aplicaciones moviles. El mismo esta basado en el siguiente diseño UI/UX https://xd.adobe.com/view/4820cb6e-b1c9-434a-b864-1fd285280ab9-1d73/ ideado para el proyecto mobile de operaciones.

Navegación

La navegación del template, realizada utilizando React Native Navigation, combina componentes custom y otros que se consumen desde la librería de StyleSystem Mobile.

Dentro de la carpeta DrawerNavigator podremos encontrar dos archivos:

index.tsx: configuración del Drawer Navigator y screens.

Drawer Navigator

Como se menciona previamente, en el archivo index.tsx podrán encontrar la estructuración y configuración del Drawer Navigator, el componente que funcionará de menú lateral en la aplicación.

CustomDrawer

Dentro de DrawerNavigation contemplamos la opcion de CustomSection para satisfacer la necesidad de disponer un componente custom en el menu lateral que no necesariamente sea una Screen, a modo de ejemplo se inserto el selectLanguaje para preferencia de idioma como se muestra en la imagen:

BottomNavigation

Se realizo el componente BottomNavigation de facil implementacion a fin de establecer el menu base de las screenViews principales de la aplicacion. Próximamente incorporado en StyleSystem-mobile

Implementación:

AccountContext.tsx

    const Screen=()=>{
        //rest of de code

        return (
            //rest of de code
            <BottomNavigation />
        )
    }

Manejo de estados

Al igual que las aplicaciones web se utilizará redux y redux-toolkit

Comunicación con Servicios

Se recomienta tener en cuenta las siguientes consideraciones para establecer una estructura.

Build APK for debug

El template ya cuenta con la configuración de keystore para la generacion de apk, se puede generarla misma corriendo el comando ./gradlew app:assembleRelease sobre la carpeta android.

Se recomienda generar un nuevo file debug.keystore eliminar el que contiene la app y configurar las keys propias siguiendo los pasos de la documentación

Se disponibilizó la adaptación del codigo para poder generar el apk de un entorno específico seteando las env correspondientes. El template cuenta con dos ejemplos para el ambiente local y productivo que pueden adaptar segun necesidad:

Warning

Tener en cuenta que los scripts estan apuntando a los archivos específicos, en este ejemplo genera los apk con los archivos Debug: .env.local y Release: .env.production

Tanto el script que termina ejecutando el assembleRelase como el assembleDebug si se ejecutan manualmente van a estar apuntando al archivo en especifico configurado en el build.gradle como se muestra a continuación

Scripts para la ejecución de Environments

El template cuenta con unos scripts para probar en local diferentes configuraciones en sus archivos de environment .env.local .env.qa .env.production

FAQ

Quiero generar el apk con otro archivo de env pero siempre toma o el .env.local o el .env.production

1. Validar en el archivo build.gradle a que .env esta apuntando el Debug o el Release
2. Teniendo en cuenta a que archivos apunta es el .env que utilizará para generar el apk (assembleDebug -> debug assembleRelease -> release)