Configuración Inicial

Clonar el Repositorio

1. Clona el repositorio de GitHub del frontEnd de App-Docente desde el siguiente enlace: https://github.com/RedCollege/App-Docente

git clone https://github.com/RedCollege/App-Docente.git

Instalar Dependencias necesarias

2. Navega hasta el directorio del proyecto clonado.

cd App-Docente

Versión de Node.JS mínima y recomendada

La versión mínima de node es la 18.18.0, pero la recomendada es versión LTS (20.14.0 en este momento). Para encontrar la versión LTS actual dirigirse al siguiente enlace: https://nodejs.org/en/download/package-manager

3. Instala las dependencias.

npm install

Agregar .env

4. En la carpeta raíz del proyecto agregar un archivo .env con lo siguiente:

API_BASE_URL=http://localhost:3333/api

Correr el proyecto

5. Ejecutar:

npm start

Esto le dará un QR que debe de escanear en el dispositivo Android/IOS que va a utilizar, con la aplicación Expo Go, la cual puede descargar en: https://play.google.com/store/apps/details?id=host.exp.exponent&hl=es_419

o en el caso de ios: https://apps.apple.com/us/app/expo-go/id982107779

Módulos e instancia de creación

Tenga en cuenta que esta es una explicación de cómo se creó el proyecto, no debe de seguir estos pasos para levantar el frontend de App-Docente.

npx create-expo-stack@latest

Se deben marcar las opciones de expo-router para las rutas, typescript, Tamagui para los estilos y no hace falta poner autenticación con Supabase o Firebase, ni tampoco el servicio de EAS de manera inicial.

Como en el proyecto se utiliza tailwind, es necesario hacer unos pasos previos para poder utilizarlo. Esta sección comprende dichos pasos.

1. Primero es necesario instalar nativewind y tailwindcss

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

2. Crear el archivo de configuración de tailwind

npx tailwindcss init

3. En ese archivo creado, editar el content para que acceda a todos los archivos de formato ts y tsx dentro de la carpeta app

module.exports = {
- content: [],
+ content: ["./app/**/*.{ts,tsx}",],
 theme: {
   extend: {},
 },
 plugins: [],
}

4. Dentro de babel.config.js editar los plugins añadiendo:

plugins: ["nativewind/babel"],

5. Y por último crear un archivo nativewind-env.d.ts en la raíz del proyecto y agregar:

/// <reference types="nativewind/types" />