Home
Integrantes y Roles| Integrante | Rol |
|---|---|
| Calle, Sonia | Analista Funcional (realiza la documentación Funcional del proyecto) / Scrum Master / Tester QA (documentar casos de prueba durante el desarrollo) / FrontEnd - BackEnd Developer / Base de Datos |
| Costa, María Eugenia | Team Lead / Diseñadora UX/UI (realiza la documentación de Diseño y presentación) / Documenta el desarrollo en el README del proyecto en GitHub y en la Wiki / FrontEnd - BackEnd Developer / Base de Datos |
| Alsina, Maximiliano | Product Owner / Realizara el video final de presentación / FrontEnd - BackEnd Developer / Base de Datos |
| Matias Alancay | FrontEnd - BackEnd Developer / Base de Datos |
Links| Links |
|---|
 Brief |
 Documentación funcional |
 Mapa del sitio |
 Presentación |
 Video (en construcción) |
Tecnologías| Front End y Back End |
|---|
 HTML5
|
 CSS3
|
 JavaScript
|
 TypeScript |
 React y react-dom
|
 Material UI: @emotion/react - @emotion/styled - @mui/material - @mui/icons-material - @mui/x-data-grid |
 NEXTjs |
| Manejo de formularios |
|---|
| react-hook-form, para crear formularios eficaces, flexibles y ampliables con una validación fácil de usar. |
| Sliders |
|---|
| react-slideshow-image, un simple componente de presentación de diapositivas construido con React que soporta efectos de deslizamiento, fundido y zoom. |
| Dependencias |
|---|
| SWR (stale-while-revalidate), bibilioteca React Hooks para la obtención de datos, el componente obtendrá sonstante y automáticamente el último flujo de datos. Y la interfaz de usuario será siempre rápida y reactiva |
| js-cookie, para procesar las cookies en el Front End |
| NextAuth.js, autentificación para Next.js |
| axios, es un cliente HTTP basado en promesas para Node.js y el navegador. Es isomórfico (puede ejecutarse en el navegador y en Node.js con el mismo código base). En el lado del servidor utiliza el módulo http nativo de node.js, mientras que en el cliente (navegador) utiliza XMLHttpRequests. |
| react-paypal-js, ofrece a los desarrolladores una solución que elimina la complejidad de cargar el SDK de JavaScript. Aplica las mejores prácticas por defecto para que los compradores obtengan la mejor experiencia de usuario posible. |
| jsonwebtoken, un estándar de Internet propuesto para crear datos con firma opcional y/o cifrado opcional , los tokens se firman utilizando un secreto privado o una clave pública/privada. |
| bcryptjs, una librería de Nodejs para hashear passwords |
 Docker |
| Formidable, un módulo de Nodejs para parsear data, especialmente al subir archivos |
| Cloudinary, ofrece servicios de gestión de imágenes y vídeos en la nube. Permite a los usuarios cargar, almacenar, gestionar, manipular y distribuir imágenes y vídeos para sitios web y aplicaciones. |
| Base de datos |
|---|
 MongoDB |
 Mongoose |
| Peticiones REST API |
|---|
 Postman |
| Manejador de paquetes |
|---|
 Yarn |
| Control de versiones |
|---|
 Git
|
 GitHub
|
¿Cómo ver el proyecto en local?Este proyecto está creado con Next.js con el comando: create-next-app.
Antes que nada debes tener insatalado:-
Node de versión 16 en adelante
-
Yarn
Bajarte el código del repositorio, creando una carpeta en tu local, y luego:git clone https://github.com/CodeSystem2022/E-Commerce-ERROR4004-BIS.git .Una vez creado entra dentro de la carpeta del proyecto.
Instalar las dependencias (node_modules) con:yarn install
Correr el servidor en local, con:yarn dev
Abrir http://localhost:3000 en tu navegador localmente, para ver la aplicación.
Abrir Primero de necesita la base de datos, en la terminal con el comando:
docker-compose up -d-> El -d, significa detached
->A tener en cuenta para las configuraciones de Docker y Base de datos:
-El service es ohlalalshoesdb, en el archivo .env: MONGO_URL=mongodb://localhost:27017/ohlalalshoesdb.
-El nombre del contenedor es holalashoes-database, este nombre irá en el archivo docker-compose.yaml y es el nombre que veréen Docker
-El nombre del volumen es mongo.
Configurar las variables de entornoCopiar el archivo .env.template y renombrarlo a .env. Van a ver que tenemos las variables de GITHUB, para obtener GITHUB_ID y GITHUB_SECRET:
-
registrarse y loguearse en GitHub
-
Ir a
settings>developer settings>OAuthApps>NewOAuth Appy completar:
-GitHub App name: Ohlala Shoes
-Description: Ohlala Shoes, an e-commerce to buy shoes. Created with Nextjs
-HomePage URL: http://localhost:3000
-Callback URL: http://localhost:3000
-Copiamos el Client ID y hacemos click en Generate a new clienten secret, ambos datos los dejamos en el archivo .env
MongoDB URL Local:MONGO_URL=mongodb://localhost:27017/ohlalalshoesdb
Reconstruir los módulos de node y levantar Nextyarn install
yarn dev
Llenar la base de datos con información de pruebasLlamar a: http://localhost:3000/api/seed
-
Con
Postman podemos hacer las peticiones REST FUL API, creandonos:
-
GET:
localhost:3000/api/seedpara confirmar que tenemos bien la base de datos
Postman podemos hacer las peticiones REST FUL API, creandonos:-
Todos los productos: GET:
localhost:3000/api/products -
Productos por genero: GET:
localhost:3000/api/products?gender=menpara ver los productos por genero masculino, los demás géneros posibles son:women,kidyunisex -
Un producto por su slug: GET:
localhost:3000/api/products/{slug}slug es la parte que llega dinamica acorde al producto a mostrar un producto por el slug -
Un producto por tag o por el titulo: GET:
localhost:3000/api/search/{string}
-
Para ver todos los usuarios: POST:
localhost:3000/api/user/login. Y se debe emviar en el body:
email: string,
password: string
Para recibir de response el token con el user (email, role y name)
-
Para registrar un usuario: POST:
localhost:3000/api/user/register. Debemos enviarle en el body (por defecto lo creamos con rol de usuario, no de administrador):
{
"email": string,
"password" : string,
"name": string
}
Para recibir de response el token con el user (email, role y name)
-
Para validar tokens: GET:
localhost:3000/api/validate-token
POST localhost:3000/api/orders
GET localhost:3000/api/orders/pay
-
Para ver el detalle: GET
localhost:3000/api/admin/dashboard, para recibir la response con la siguiente información: "numberOfOrders", "paidOrders", "numberOfClients", "numberOfProducts", "productsWithNoInventory", "lowInventory" y "notPaidOrders" -
Para ver usuarios: GET
localhost:3000/api/admin/usersy asi poder ver todos los usuarios. Y en el caso de necesitar modificar un role de un usuario: POSTlocalhost:3000/api/admin/users/{id}, se debe psar como parametro el id del usuario que se desea modificar y el nuevo rol. -
Para ver las ordenes: GET
localhost:3000/api/admin/orders -
Para ver productos: GET
localhost:3000/api/admin/productspara tener la lista de los productos -
Para ver archivos subidos: GET
localhost:3000/api/admin/uploadpara tener las imagenes de productos que se suben al actualizar o crear un producto
¿Cómo nos organizamos?-
Utilizamos las metodologías ágile y el marco de trabajo Scrum
-
Dividimos todo el proyecto en 3 Sprints de una semana cada uno.
/cart), donde muestra la imagen del producto, el título, la talla, el precio, se pueden agregar o quitar productos. Y también se ve el resumen del pedido, con la suma total a abonar. Y también la Página de carro de compras vacío (`` /cart/empty), la cual tiene un ícono del carro de compras, el mensaje y un boton para volver.
/checkout/address), con el título, varios campos apra completar la dirección de envío y el botón de confirmación.
/checkout/summary), donde se ve en tarjetas el detalle con imagen, titulo, precio, talla y total de ítems de cada producto. Y se ve el resumend e la compra con la dirección de envío (que permite editar) y el total a pagar(también editable para modificar la cantidad de items desde el carro de compra) con el botón para confirmar la compra.
/orders/{id}) con un badge con informe si el pago esta ok o no. Debe tener tarjetas con los articulos a comprar y el resumen de la dirección de envío y el total a pagar.
/orders/history), donde se ve en una tabla el historial de las ordenes, con los id, el nombre completo, si está pago o no y un link para ir al detalle de la orden.
/api/products, GET:api/products?gender=men para buscar por genero (men, women, kid, unisex), GET:/api/products/{slug} para buscar el producto por el slug y /api/search/{string} donde string es una palabra ya sea del titulo o de las tags
localhost:3000/api/user/login, loguearse (POST): localhost:3000/api/user/login y validar token: (GET):localhost:3000/api/validate-token
http://localhost:3000/api/products y tambien en las paginas api/orders para ver las ordenes
/orders/{id} para tomar los datos del la orden y mostrarlos en pantalla.
/orders/history tenga las ordenes del usuario registrado, ya que antes estaba maquetada con los datos harcodeados.
Workflow de Git y GitHub-
La rama principal es: main
-
En base a la rama main se crean las nuevas ramas para ir trabajando en las tareas. Una vez completada la tarea, dicha rama es unida a main y eliminada.
¿Cómo nombramos las ramas?feat/#<nro-issue>-<tarea>, donde el nro de issue corresponde al issue creado y a la historia d eusuario en la que se trabaja y tarea es un nombre descriptivo de la tarea a realizar.
Si es una tarea solo de estilos en vez de feat utilizamos style, si es solo de documentación utilizamos doc y si es para arreglar un gub bugfix
Estructura del proyecto>.next
> api
> components
> admin
> cart
> layouts
> products
> ui
> context
> auth
> cart
> ui
> database
> hooks
> interfaces
> models
> mongo
> node_modules
> pages
> admin
> api
> admin
> auth
> orders
> products
> search
> user
> auth
> cart
> category
> checkout
> orders
> product
> search
> public
> logo
> products
> styles
globals.css
> theme
> utils
.env.template
.eslintrc.json
.gitignore
docker-compose.yaml
next-env.d.ts
next.config.js
package.json
README.md
tsconfig.json
yarn.lock
Aprender másPara aprender más de Next.js, te compartimos los siguientes recursos:
-
Next.js Documentation - aprende sobre Next.js y API.
-
Learn Next.js - un tutotial interactivo de Next.js.
Poder ver el repositorio: the Next.js GitHub repository - el feedback y la contribución son bienvenidos.