Verificando autenticación…

Saltar al contenido principal

Template React Native

Propósito y Alcance​

Propósito: LatamPassMobile es una aplicación móvil desarrollada en React Native con el objetivo de proporcionar a los usuarios del programa de fidelización LATAM Pass una plataforma integral para gestionar su cuenta, acceder a información relevante del programa, realizar transacciones y aprovechar beneficios exclusivos.

Alcance: La aplicación incluye funcionalidades como:

  • Gestión de la cuenta de usuario LATAM Pass.
  • Consulta de saldo de puntos y millas.
  • Búsqueda y canje de vuelos.
  • Acceso a ofertas y promociones del programa.
  • Información sobre acumulación de puntos con aerolíneas y comercios asociados.
  • Visualización de contenido educativo sobre el programa LATAM Pass.
  • Integración con servicios de Co-branding (Ej. Itaú).
  • Notificaciones personalizadas y alertas.
  • Interacción con servicios de analítica y monitoreo (Firebase, Dynatrace).
  • Autenticación segura mediante Auth0.
  • Soporte multi-idioma (español, portugués, inglés).

Arquitectura​

La aplicación sigue una arquitectura basada en React Native, aprovechando componentes nativos para iOS y Android. Se estructura en módulos funcionales principales (Core, Design System, Flight Search, Member Information, etc.) que interactúan entre sí.

  • Core: Funcionalidades transversales como autenticación, navegación, internacionalización, configuración de entorno y servicios base.
  • Design System: Componentes de UI reutilizables y temas visuales.
  • Módulos de Negocio: Lógica específica para búsqueda de vuelos, información del miembro, contenido educacional, marketing, etc.
  • Integraciones Externas: Conexión con servicios como Auth0 (autenticación), Firebase (analytics, remote config, crashlytics), Dynatrace (monitoreo de rendimiento), Salesforce Marketing Cloud (notificaciones), Medallia (feedback).

Se utiliza una navegación basada en stacks y tabs proveída por @react-navigation.

LatamPassMobile App
|-- React Native Core
|   |-- JavaScript/TypeScript Logic
|   |-- Native Modules (iOS/Android)
|
|-- Módulos Principales (@latam-pass-mobile/*)
|   |-- Core (auth, navigation, i18n, storage, etc.)
|   |-- Design System (UI components)
|   |-- Member Information
|   |-- Flight Search
|   |-- Marketing
|   |-- Cobranded
|   |-- Educational Content
|
|-- Integraciones de Terceros
|   |-- Auth0 (Autenticación)
|   |-- Firebase (Analytics, Crashlytics, Remote Config)
|   |-- Dynatrace (APM)
|   |-- Salesforce Marketing Cloud (Notificaciones Push)
|   |-- Medallia (Feedback)
|
|-- Plataformas Nativas
    |-- iOS (Objective-C/Swift, CocoaPods)
    |-- Android (Java/Kotlin, Gradle)

Se recomienda generar un diagrama de arquitectura más detallado y almacenarlo en un repositorio o herramienta de diagramación.

Tecnologías y Dependencias​

Principales:

  • Lenguaje: TypeScript, JavaScript
  • Framework: React Native 0.71.11
  • Gestor de Paquetes: Yarn
  • Navegación: @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/material-top-tabs, @react-navigation/native-stack
  • Estado (implícito, puede usar Context API o Redux no especificado directamente): React Context API (evidente en src/contexts)
  • Estilos: styled-components, @latam-pass-mobile/design-system
  • Componentes UI: @latam-pass-mobile/design-system, react-native-svg, react -native-linear-gradient, react-native-fast-image, react-native-gesture-handler, react-native-reanimated
  • Formularios: react-hook-form, @hookform/resolvers, yup (para validación)
  • Comunicación API: axios
  • Internacionalización (i18n): i18next, react-i18next
  • Build Tools (iOS): CocoaPods
  • Build Tools (Android): Gradle
  • CI/CD: Jenkins, Fastlane

Dependencias Clave (de package.json y archivos de configuración):

  • Autenticación: react-native-auth0
  • Almacenamiento Seguro: react-native-sensitive-info, react-native-keychain
  • Almacenamiento Local: @react-native-async-storage/async-storage
  • Configuración Remota/Variables de Entorno: react-native-config, @react-native-firebase/remote-config
  • Analytics y Monitoreo:
    • @dynatrace/react-native-plugin
    • @react-native-firebase/app
    • @react-native-firebase/analytics
    • @react-native-firebase/crashlytics
    • reactotron-react-native (para debugging)
  • Notificaciones:
    • react-native-notifications
    • react-native-marketingcloudsdk (Salesforce Marketing Cloud)
  • Permisos Nativos: react-native-permissions
  • Información del Dispositivo: react-native-device-info
  • WebView/InAppBrowser: react-native-webview, react-native-inappbrowser-reborn
  • Testing: jest, @testing-library/react-native, @testing-library/jest-native
  • Linting/Formatting: ESLint (@react-native-community/eslint-config), Prettier
  • Hooks (Git): Husky, commitlint
  • Manejo de Patches: patch-package
  • Feedback: medallia-digital-rn
  • Fuentes: Assets personalizados en @latam-pass-mobile/design-system/assets/fonts

Configuración Local​

Prerrequisitos​

  • Node.js (versión especificada en .node-version, actualmente 18)
  • Yarn (gestor de paquetes)
  • Watchman (recomendado para React Native)
  • Xcode y CocoaPods (para desarrollo iOS)
  • Android Studio, Android SDK y NDK (versión 23.1.7779620 especificada en android/build.gradle) (para desarrollo Android)
  • JDK (generalmente incluido con Android Studio o gestionado independientemente)
  • CLI de React Native (npx react-native)

Pasos de Configuración​

  1. Clonar el repositorio: Sigue los siguientes pasos

  2. Configurar Artifactory: Asegúrate de tener un archivo .yarnrc y/o .npmrc en la raíz del proyecto configurado para apuntar a los repositorios de Artifactory de LATAM. Contenido de .yarnrc (o .npmrc similar):

    registry=https://artifactoryrepo1.appslatam.com/artifactory/api/npm/npmjs-org/
    @latam-pass-mobile:registry=https://artifactoryrepo1.appslatam.com/artifactory/api/npm/corp-libs-npm-release-local/

    always-auth=true

    //artifactoryrepo1.appslatam.com/artifactory/api/npm/corp-libs-npm-release-local/:_authToken=${AUTH_NPM_TOKEN}
    //artifactoryrepo1.appslatam.com/artifactory/api/npm/npmjs-org/:_authToken=${AUTH_NPM_TOKEN}

    Obtén tu AUTH_NPM_TOKEN de JFrog Artifactory (Identity Token) y configúralo como variable de entorno:

    export AUTH_NPM_TOKEN=TU_IDENTITY_TOKEN_AQUI

    (Añade esto a tu .bashrc, .zshrc o similar).

  3. Instalar Dependencias:

    yarn install

  4. Configurar Archivos de Firebase: Obtén los archivos de configuración de Firebase desde la consola del proyecto Firebase:

    • Para iOS: GoogleService-Info.plist. Colócalo en ios/GoogleService-Info.plist.
    • Para Android: google-services.json. Colócalo en android/app/google-services.json. (Estos archivos están en .gitignore y deben obtenerse por separado).

  5. Configuración Específica de Plataforma:

    • iOS: 
      cd ios
      pod install
      cd ..
      Puede ser necesario ejecutar npx react-native setup-ios-permissions.
    • Android: Asegúrate de tener local.properties configurado en android/ con la ruta a tu SDK de Android si no está en la ruta por defecto (Android Studio usualmente maneja esto).

  6. Crear Archivos de Entorno: Copia los archivos .env.example (si existen) a .env.dev, .env.intg, .env.prod según sea necesario y configura las variables de entorno específicas. Ejemplo: .env.dev para desarrollo.

  7. Ejecutar la Aplicación:

    • Iniciar Metro Bundler: 
      yarn start
    • Ejecutar en Android (entorno de desarrollo): 
      yarn run:android:dev
    • Ejecutar en iOS (entorno de desarrollo): 
      yarn run:ios:dev
      (Consulta otros scripts en package.json para diferentes entornos: intg, prod).

  8. Limpiar Cachés y Reinstalar (si hay problemas):

    yarn dep-install

    Este script personalizado limpia node_modules, reinstala dependencias y limpia cachés de Gradle y Pods.

  9. Debugging:

    • Reactotron: Asegúrate de tener Reactotron Desktop instalado.
    • Para Android, ejecuta: 
      adb reverse tcp:9090 tcp:9090
    • Para iOS, usualmente funciona sin pasos adicionales si Reactotron está configurado.

Despliegue​

La aplicación utiliza Jenkins y Fastlane para los despliegues.

Jenkins: El archivo Jenkinsfile define el pipeline:

pipelineLatam("gke-krane-react")

Esto sugiere un pipeline corporativo estandarizado para aplicaciones React (posiblemente React Native).

Fastlane (iOS): Ubicado en ios/fastlane/.

  • Configuración: Appfile, Matchfile, Fastfile, models/Config.rb.
  • Maneja la firma de código (match), compilación (gym) y subida a TestFlight.
  • Comandos comunes (ejecutar desde ios/):
    • bundle exec fastlane ios release_dev
    • bundle exec fastlane ios release_int
    • bundle exec fastlane ios release_prd
    • bundle exec fastlane ios fetch_certificates
    • bundle exec fastlane ios renew_certificates

Fastlane (Android): Ubicado en android/fastlane/.

  • Configuración: Appfile, Fastfile.
  • Maneja la compilación de APK/AAB (gradle) y la distribución a Firebase App Distribution.
  • Comandos comunes (ejecutar desde android/):
    • bundle exec fastlane android build_dev (genera APK para Dev)
    • bundle exec fastlane android release_dev (distribuye a Firebase App Distribution para Dev)
    • (Comandos similares para intg y prod).

Variables de Entorno para Despliegue: Fastlane y los scripts de build dependen de variables de entorno para keystores, IDs de Firebase, credenciales de App Store Connect, etc. (ej. ANDROID_DEV_KEY_STORE, APP_STORE_CONNECT_KEY_ID). Estas deben estar configuradas en el entorno de CI/CD.

Endpoints de la API​

La aplicación móvil consume APIs backend para sus diversas funcionalidades (gestión de cuenta LATAM Pass, búsqueda de vuelos, etc.). No expone APIs directamente. Los endpoints específicos son definidos en los servicios backend correspondientes. La configuración de las URLs base para estos servicios backend se gestiona a través de variables de entorno (ver react-native-config y archivos .env).

Ejemplo de configuración para servicios backend (.env):

MEMBERINFORMATION_MOBILE_BFF=https://api.example.com/member
CHANNELS_MOBILE_BFF=https://api.example.com/channels
AUTH0_DOMAIN=your-auth0-domain.auth0.com
AUTH0_CLIENTID=yourAuth0ClientId
# ...otras variables...

Componentes Específicos​

Autenticación (Auth0)​

  • Librería: react-native-auth0
  • Configuración: Las credenciales (Domain, ClientID) se gestionan a través de react-native-config (variables AUTH0_DOMAIN, AUTH0_CLIENTID).
  • Implementación: Ver src/hooks/useAuthLogin.tsx para la lógica de login y src/App.tsx para el AuthProvider.
  • Callbacks: Configurados en el dashboard de Auth0 y en la configuración nativa de la app (iOS Info.plist, Android AndroidManifest.xml/build.gradle).

Firebase​

  • SDKs: @react-native-firebase/app, analytics, crashlytics, remote-config.
  • Archivos de Configuración Nativa:
    • iOS: ios/GoogleService-Info.plist
    • Android: android/app/google-services.json
  • Configuración Adicional firebase.json: 
    {
      "react-native": {
        "google_analytics_automatic_screen_reporting_enabled": false
      }
    }
  • Implementación: Inicialización en AppDelegate.mm (iOS) y MainApplication.java (Android). Uso a través de los módulos de @latam-pass-mobile/core.

Dynatrace​

  • Plugin: @dynatrace/react-native-plugin
  • Configuración Principal (dynatrace.config.js): Define applicationId, beaconUrl y comportamiento para Android e iOS. 
    // dynatrace.config.js
    module.exports = {
      // ...
      android: {
        config: `
            dynatrace {
                configurations {
                    defaultConfig {
                        autoStart {
                            applicationId 'a8b9d0f0-bd5a-4dcc-8378-bcd97b23b25a'
                            beaconUrl 'https://bf94499thn.bf.dynatrace.com/mbeacon'
                        }
                        // ...
                    }
                }
            }`,
      },
      ios: {
        config: `
            <key>DTXApplicationID</key>
            <string>a8b9d0f0-bd5a-4dcc-8378-bcd97b23b25a</string>
            <key>DTXBeaconURL</key>
            <string>https://bf94499thn.bf.dynatrace.com/mbeacon</string>
            // ...
            `,
      },
    };
  • Integración:
    • metro.config.js: reporter: require('@dynatrace/react-native-plugin/lib/dynatrace-reporter')
    • babel.config.js: Añade el plugin JSX de Dynatrace.
    • index.js: Inicializa Dynatrace.applyUserPrivacyOptions.
    • customTransformer.js: Usa dynatrace-transformer.
  • Identificación de Usuario: Dynatrace.identifyUser(userInfo.FFNumber); en src/utils/analytics.ts.

Notificaciones Push (Salesforce Marketing Cloud)​

  • Librería: react-native-marketingcloudsdk, react-native-notifications.
  • Configuración Nativa:
    • iOS (AppDelegate.mm): Inicialización de SFMCSdk con credenciales de Salesforce (MID, Server, Token, AppID) obtenidas de RNCConfig.
    • Android (MainApplication.java): Configuración similar de SFMCSdk.
  • Módulo Nativo Personalizado (NotificationModule):
    • iOS: ios/NotificationModule.h, ios/NotificationModule.m
    • Android: android/app/src/main/java/com/latam/pass/NotificationModule.java
    • Expone métodos para interactuar con el SDK de Marketing Cloud (leer mensajes, contar no leídos, etc.).
  • Servicio JS Wrapper (src/services/NotificationService.ts): Provee una interfaz JS para el módulo nativo.

Permisos Nativos​

  • Librería: react-native-permissions.
  • Configuración iOS (package.json y Info.plist): 
    // package.json -> reactNativePermissionsIOS
    "reactNativePermissionsIOS": [
      "FaceID",
      "Notifications"
    ]
    Asegurar que las descripciones de uso (ej. NSFaceIDUsageDescription) estén en Info.plist.
  • Configuración Android (AndroidManifest.xml): Declarar permisos como android.permission.POST_NOTIFICATIONS.
  • Implementación: Usado en src/contexts/Notification/index.tsx y src/screens/HomeScreen/HomeScreen.tsx para solicitar y verificar permisos.

Reactotron (Debugging)​

  • Librerías: reactotron-react-native, reactotron-core-client.
  • Configuración: src/config/reactotron.ts. Se importa condicionalmente en index.js para builds de desarrollo.
  • Uso: Conectar con la aplicación de escritorio Reactotron.

Medallia (Feedback)​

  • Librería: medallia-digital-rn.
  • Inicialización: En src/App.tsx usando tokens de entorno. 
    let token = Platform.OS === "ios" ? environment.MEDALLIA_IOS_TOKEN : environment.MEDALLIA_ANDROID_TOKEN;
    MedalliaDigital.initialize(token);
  • Uso: Mostrar formularios de feedback (ej. src/screens/MenuScreen/index.tsx).

Pruebas​

  • Framework: Jest (configurado en jest.config.js).
  • Utilidades: @testing-library/react-native, @testing-library/jest-native.
  • Comando para ejecutar pruebas: 
    yarn test
    Esto incluye la generación de reportes de cobertura.
  • Configuración de Cobertura (jest.config.js): 
    coverageThreshold: {
      global: {
        lines: 80,
      },
    },
    collectCoverageFrom: [
      './src/**',
      '!./src/**/*.styles.ts',
      // ... exclusiones ...
    ],
  • Mocks: Se encuentran en la carpeta __mocks__/ para librerías nativas o externas.

Consideraciones de Seguridad​

  • Gestión de Credenciales:
    • AUTH_NPM_TOKEN para Artifactory debe ser una variable de entorno y no estar hardcodeada.
    • Las claves de API y secretos para servicios como Auth0, Firebase, Dynatrace, Salesforce Marketing Cloud, Medallia se gestionan a través de react-native-config y archivos .env que no deben ser versionados (excepto ejemplos).
    • Los archivos de configuración de Firebase (GoogleService-Info.plist, google-services.json) están en .gitignore y deben gestionarse de forma segura.
  • Almacenamiento Seguro:
    • Se utilizan react-native-sensitive-info y react-native-keychain para almacenar datos sensibles en el dispositivo de forma segura.
    • Tokens de sesión (Auth0) se almacenan de forma segura.
  • Autenticación Local:
    • Se implementa autenticación biométrica (FaceID/Huella) para proteger el acceso a la aplicación después del login inicial.
  • Comunicación:
    • Asegurar que todas las comunicaciones con APIs backend se realicen sobre HTTPS.
  • Permisos:
    • Se solicitan los permisos mínimos necesarios para el funcionamiento de la app.
  • Manejo de Errores y Logs:
    • Crashlytics se utiliza para el reporte de errores.
    • Evitar loguear información sensible en producción. Dynatrace y Firebase Analytics deben configurarse para respetar la privacidad del usuario.
  • Actualizaciones de Seguridad: Mantener las dependencias actualizadas para mitigar vulnerabilidades conocidas.