expo essentials

expo-essentials es una plantilla Kickass construida en la parte superior de Expo, que contiene una estructura de carpeta manejable, suites de prueba y características esenciales para ponerlo en funcionamiento en su próxima aplicación.

Tabla de contenido

1. Características clave
2. Uso
   1. Instalación
   2. Comandos
      1. Comandos de la aplicación
      2. Comandos de servidor
   3. Establecer el tema
      1. Elegir una paleta de colores
      2. Elegir una fuente
      3. Configuración de temas claros y oscuros
      4. Use los colores del tema en los componentes
   4. Configuración para diferentes entornos
      1. Configuración de la aplicación
         1. Configuración de desarrollo
         2. Configuración de estadificación
         3. Configuración de producción
      2. Configuración del servidor
   5. Integración de Firebase
      1. Agregar sus credenciales de Firebase a la aplicación
      2. Agregar sus credenciales de Firebase al servidor
3. Pantallas
   1. Bienvenido
   2. Incorporación
   3. Autenticación
   4. Hogar
4. Cómo contribuir

Características clave

• Todas las características de exposición (recarga en caliente, plataforma cruzada, pantalla de salpicaduras, etc.)
• ? Configuración de tema fácil (paleta de colores y fuentes)
• ? Eslint y formato más bonito para promover el código más limpio
• ? Modo de luz y oscuro
• Integración de Firebase
• ? Pantalla de bienvenida en el primer lanzamiento
• ❓ Swiper para las características de incorporación a resaltar
• Autenticación del usuario utilizando Firebase e inicio de sesión del usuario persistente en múltiples lanzamientos
• ↪ Configuración de navegación basada en React Navigation
• ? Notificaciones de tostadas
• ? Banner de desconexión de la red
• ? Soporte fuera de línea a través de solicitudes e imágenes de red de almacenamiento en caché
• ? Configuración del entorno basada en la etapa de la aplicación (desarrollar, preparar y producción)
• ? Formas fáciles con validación de entrada basada en Formik y YUP
• (Opcional) ExpressJS Server y MongoDB Base de datos configurada con un middleware de autenticación Firebase, configuración de entorno, pruebas unitarias y pruebas de integración
• ? Componentes generales escritos de manera flexible (botón, TextInput, tarjetas, modales, spinner, etc.)

(... ¡y muchos más llegarán pronto!)

Uso

Instalación

1. Clon/bifurcado este repositorio (basado en su preferencia)
2. Iniciar la aplicación móvil

    $ cd client
   $ npm start
   

3. (Opcional) Inicie la instancia ExpressJS Server y MongoDB (necesita tener instalado Docker)

    $ docker-compose up --build
   

Comandos

Comandos de la aplicación

Dominio	Descripción
npm start	Iniciar el servidor de metro de Expo
npm run android	Inicia la aplicación en un emulador de Android
npm run ios	Inicia la aplicación en un emulador de iOS
npm run web	Inicia la aplicación en el navegador web
npm run test	Desarrollo activo de pruebas, observar archivos para cambios y volver a ejecutar todas las pruebas
npm run testDebug	Debug, console.logs y solo vuelve a ejecutar el archivo que se cambió
npm run testFinal	Muestra la cobertura de código en CLI y actualiza la cobertura de código HTML
npm run updateSnapshots	Cuando se actualiza una pantalla/componente, las instantáneas de prueba lanzarán un error, esto las actualiza
npm run eject	Expulsar la aplicación Expo a los proyectos nativos de Android e iOS (precaución: esta acción es irreversible)

Comandos de servidor

Dominio	Descripción
npm run start:dev	Inicia el servidor con la configuración de desarrollo, reinicia el servidor en los cambios de archivo
npm run start:staging	Inicia el servidor con la configuración de puesta en escena
npm run start:prod	Inicia el servidor con la configuración de producción
npm run test:watch	Desarrollo activo de pruebas, observar archivos para cambios y volver a ejecutar pruebas
npm run test	Muestra la cobertura de código en CLI y actualiza la cobertura de código HTML

Establecer el tema

Esta plantilla usa UI Kitten para controlar el tema. Para leer más al respecto, asegúrese de visitar sus documentos.

Elegir una paleta de colores

• Use la herramienta EVA Design System para crear una paleta basada en el color de su marca.
• Exportar la paleta como JSON y almacenar los valores en client/app/config/colors.js

Elegir una fuente

• Almacene los archivos de fuentes deseados (se prefieren .ttf o .otf ) en la carpeta client/app/assets/fonts . (Por defecto, esta plantilla usa la fuente Jost).
• Actualice los nombres y rutas de fuentes en client/App.js :

Configuración de temas claros y oscuros

Puede especificar diferentes colores que se utilizarán para el modo de luz y el modo oscuro actualizando los valores en client/app/config/lightTheme.js y client/app/config/darkTheme.js respectivamente.

Use los colores del tema en los componentes

(Este método usa ganchos react, así que asegúrese de trabajar con componentes reactos funcionales)

Configuración para diferentes entornos

Esta plantilla admite configuraciones cambiantes sin problemas para sus diferentes compilaciones de entorno basadas en su aplicación (por ejemplo, desarrollo , puesta en escena y producción )

Configuración de la aplicación

La configuración para la aplicación móvil se establece en client/app/config/settings.js .

Configuración de desarrollo

La configuración de desarrollo debe establecerse en el objeto dev directamente.

Configuración de estadificación

La configuración de estadificación debe establecerse en el objeto staging . Puede configurarlos directamente, o puede agregarlos a través del archivo client/.env DOT (si tiene datos confidenciales).

Configuración de producción

La configuración de producción debe establecerse en el objeto prod , y preferiblemente debe agregarse a través del archivo client/.env .

Configuración del servidor

La configuración para el servidor se establece en server/config/settings.js . El servidor ExpressJS se ejecuta en un contenedor Docker, por lo que puede especificar qué archivo de entorno se enchufa al contenedor.

Por ejemplo, una configuración de entorno de desarrollo se puede configurar como:

• Cree un archivo server/.env.dev :

• Especifique el uso de este archivo de entorno en el archivo docker-compose.yml :

Integración de Firebase

Esta plantilla utiliza Firebase para la autenticación y administración del usuario. Firebase ofrece una rica lista de proveedores externos que desea agregar en su aplicación más adelante. También manejan el envío de correos electrónicos para la verificación por correo electrónico , el reinicio de la contraseña y el cambio de correo electrónico .

Se sugiere que cree 3 proyectos de Firebase separados para su aplicación: app-dev , app-staging y app-prod (para cada entorno que usa su aplicación). Esto es para garantizar que pueda probar sus entornos independientes entre sí y evitar datos superpuestos.

Agregar sus credenciales de Firebase a la aplicación

Cree configuraciones de la aplicación web en sus proyectos de Firebase y agrégalas en los objetos de entorno apropiados.

Agregar sus credenciales de Firebase al servidor

El servidor utiliza el SDK de administrador de Firebase para crear un middleware de autenticación. Este middleware decodifica el token JWT enviado desde la aplicación a través de una solicitud de API para identificar a los usuarios y sus roles.

• Descargue las credenciales de su cuenta de servicio desde Firebase y guárdelas en server/config/firebase-service-account-<environment>.json
  ( server/config/firebase-service-account-dev.json , server/config/firebase-service-account-staging.json , server/config/firebase-service-account-prod.json )

Pantallas

Pantalla de bienvenida

Pantalla de incorporación

Pantalla de autenticación

Pantalla de inicio

Cómo contribuir

1. Bifurca el repositorio
2. Agregue una corrección de errores o una nueva función de función y cree una solicitud de extracción de este repositorio
3. Escriba una lista detallada de cambios propuestos en la descripción de la solicitud de extracción