agro123 / projecttemplate

Template para app móviles en react native

projectTemplate

Tabla de Contenido

• Proyecto de SAI | Aplicación movil
• Tabla de Contenido
• Descripción
• Prerequisitos:
• Iniciar aplicación
  • Paso 1 Instalar dependencias
  • Paso 2 Iniciar Metro
  • Paso 3 Correr en un simulador
• Firmar aplicación Android
• Distribuir aplicación
  • Android
• Sistema de directorios

Descripción

Aplicación móvil para turistas. Permite visualizar servicios, experiencias turísticas, Agenda cultural, eventos; el usuario podrá registrarse, visualizar su información, modificar su información, obtener cupones, visualizar sus cupones, añadir servicios a favoritos, visualizar sus notificaciones, habilitar factor de doble autenticación, consultar el glosario de términos y preguntas frecuentes; y cuenta con visualización de contenido sin conexión.

Aplicación para usuarios PIT. Permite a los usuarios PIT, realizar encuestas con o sin conexión a internet y modificar su información de perfil.

Prerequisitos:

Nombre	Descripción	Versión
NodeJs	es un entorno de servidor de código abierto multiplataforma que puede ejecutarse en Windows, Linux, Unix, macOS y más	v16.17.0
React Native development enviroment	Debes configurar tu pc para trabajar con React Native
Android Studio	Entorno de desarrollo (IDE) para el desarrollo de aplicaciones Android.	2021.3.1
Xcode	Todo lo que necesitas para desarrollar, probar y distribuir aplicaciones en todas las plataformas de Apple.	14^
Android SDK	Kit de desarrollo de software para Android	31 (Android 11)
iOS	Versión minima requerida de iOS	12

*Para el desarrollo y distribucion de apps para iOS se requiere macOS.

Iniciar Aplicación

Paso 1 Instalar dependencias

npm i

ó

yarn install

Es recomendable actualizar el archivo Podfile.lock

cd ios && pod install

*En caso de obtener la siguiente advertencia al actualizar el archivo Podfile.lock:

WARNING: CocoaPods requires your terminal to be using UTF-8 encoding.
    Consider adding the following to ~/.profile:

    export LANG=en_US.UTF-8

Ejecute el siguiente comando en la terminal e intente nuevamente.

export LANG=en_US.UTF-8

Paso 2 Iniciar Metro:

npx react-native start --reset-cache

Paso 3 Correr en un simulador:

Si configuraste correctamente el ambiente de desarrollo para React Native tal como lo explica la documentación React Native development enviroment cada simulador se lanzara automaticamente:

• Emulador de Android:

npx react-native run-android

• Simulador de iOS:

npx react-native run-ios

*Mas información: Running On Simulator iOS

Otra forma de correr en un simulador es directamente desde la herramienta de desarrollo de cada plataforma.

Firmar aplicación Android

• Signed apk android

Distribuir aplicación

Android

• Bundle .aab

cd android && ./gradlew bundleRelease

• APK

cd android && ./gradlew assembleRelease

• Debug

cd android && ./gradlew assembleDebug

Sistema de directorios

El sistema de directorios está organizado de la siguiente manera:

• android Contiene todo el codigo nativo de la aplicación para dispositivos android.
• ios Contiene todo el codigo nativo de la aplicacion para dispositivos iOS.
• jest Contiene los mocks de algunas librerias para pruebas unitarias.
• release Contiene imagenes para el despliegue de la aplicación.
• src Contiene el codigo fuente de la apliación.
  • @sai Contiene los componentes y otras ayudas de la apliación.
    • components Contiene los componentes React reutilizables.
    • context Contiene el hook y el provider de la base de datos local en sqlite.
    • hooks Contiene los hooks de la aplicacion.
    • i18n Contiene los idiomas de la aplicación.
    • interface Contiene las interfaces y los types de la aplicación.
    • presenter Contiene el Redux y las llamadas a base de datos de la aplicación.
    • services Contiene la configuracion de la base de datos local sqlite.
    • theme Contiene los colores de la aplicación.
    • utils Contiene funciones y otros elementos auxiliares.
  • app Contiene las pantallas y la navegación.
    • navigation Contiene la navegacion en stack y tabs.
    • screens Contiene todas pantallas de la aplicación.
    • App.tsx .
  • assets Contiene el contenido multimedia de la aplicación.
    • media Contiene imagenes en formato png, jpg y video mp4.
    • svg Contiene todos los componentes SVG de la aplicación.
• firebase.json Contiene la configuracion para los push notification enviados desde firebase.