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:
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.
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:
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