Una aplicación móvil diseñada para crear un mejor puente entre maestros y estudiantes al proveer una plataforma en la que puedan interactuar sin dejar de lado el aspecto escolar y profesional.
Ahora mismo el proyecto es privado y diseñado solo para que nosotros lo usemos.
apps
├── expo
│ ├── assets
│ │ └── Imagenes y contenido estático que vamos a usar
│ └── src
│ ├── components
│ │ └── Componentes reutilizables
│ ├── screens
│ │ └── Las pantallas que van a aparecer en la aplicación
│ ├── types
│ │ └── react-navigation.ts
│ │ └── Guarda los tipos que usa TypeScript para
│ │ identificar la pantalla en la que está
│ └── utils
│ └── Utilidades y funciones generales
└── nextjs
├── public
│ └── Imagenes y contenido estático que vamos a usar
└── src
├── pages
│ ├── api: Todas las funciones del servidor van aquí:
│ │ consultar base de datos, autorizar, etc.
│ └── Aquí van todas las páginas que se mostrarán
└── styles
└── Archivos de CSS globales -serán reemplazados por TailWind
packages
└── Paquetes de configuración que nosotros crearemos
Primeramente, usen Javascript un poco para que aprendan como funciona, deben de aprender:
async await
? :
.map() .filter() .reduce()
Después, consulten tutoriales de React en sí, pueden ser de Youtube, les recomiendo este video: . Después de eso, ya por fin consulten como funciona React Native y hagan un proyecto personal, haganlo con la opcion que dice EXPO, y abranlo con la app Expo Go de la PlayStore.
Añadidura a Javascript que checa que pasemos los tipos de datos correctos: por ejemplo, si queremos pasar un String pero la variable es un entero, nos marca error.
Generalmente, no será mucho problema y no necesitan consultar guías, nada más chequen su código y traduzcan el error que les salga.
Importante:
Al crear una nueva pantalla añadiendo un nuevo archivo a apps/expo/src/screens/
deben de añadir el nombre de esa pantalla a react-navigation.ts
donde están las otras pantallas, pueden consultar las pantallas que ya hice para que se den una idea.
Esta es una alternativa al CSS puro que nos deja usar palabras clave dentro de el atributo className de cualquier elemento HTML y de REACT. Tampoco necesitan investigar mucho, nada más recuerden como funciona CSS y usen este acordion para que no se tengan que memorizar nada
Importante: En React Native tambien estamos usando TailWind mediante NativeWind, que funciona exactamente igual pero tiene problemas con algunos atributos, por lo que si algo no les funciona cambienlo por otro atributo.
Este es un framework de React que nos deja hacer páginas web y comunicarlas con el servidor fácilmente. Sin embargo, la única página web que tendremos será para pedirles que descarguen nuestra aplicación.
Vamos a usar NextJS por sus habilidades de servidor dentro de la carpeta nextjs/src/pages/api/
, pero de eso ya me encargare yo.
Clona el proyecto usando el cliente de git en tu terminal de comandos:
git clone https://github.com/ashley-lizbeth/Soma.git
Entra al directorio del proyecto:
cd Soma
ANTES DE INSTALAR los paquetes, copia el archivo .env.example de la carpeta principal y el que esta dentro de apps/expo
a .env
cp .env.example .env
cp apps/expo/.env.example apps/expo/.env
Instala todos los paquetes el proyecto necesita:
npm install
Comienza ambos servidores. Si aun no has configurado Expo Go, saltate este paso
npm run dev
En tu celular, instala la aplicación de Expo Go, disponible en Google Play.
Primero, empieza el servidor de la aplicacion móvil entrando a la carpeta apps/expo
y corriendo npm run dev
cd apps/expo
npm run dev
Una vez que este corriendo, abre la aplicación de Expo Go en tu celular y dale click a la opcion que dice "Scan QR Code" y apunta tu camara al codigo QR que aparece. Esto abrira tu navegador web, presiona la opcion en blanco, que dice Expo Go, y espera a que la aplicación compile.
Una vez dentro, cierra el servidor, regresate al directorio principal, y comienza ambos servidores
cd ../..
npm run dev
Regresa a la aplicacion y reiniciala si es necesario. Ahora la aplicacion tendra en tu historial la aplicacion, asi que solo necesitas iniciar ambos servidores y presionar el link.
Esta app usa fue inspirada por el T3Stack by Theo - t3.gg, y usa:
Cliente: React Native, TailwindCSS mediante NativeWind, NextJS para página web
Server: Vercel Serverless Functions via NextJS, tRPC, PlanetScale (SQL), Clerk para autenticación
Este proyecto es desarrollado en colaboración con:
//Sección pendiente