Orange Coverage Map

Este servicio integral de Orange permite a los usuarios contribuir activamente a la mejora y expansión de la cobertura de internet.

Los usuarios pueden compartir sus experiencias de conectividad mediante inputs directos en la aplicación de Orange, proporcionando información valiosa sobre la calidad de la señal de red en ubicaciones específicas.

Características

Este proyecto abarca el uso de diversas tecnologías y técnicas avanzadas, entre las cuales se incluyen APIs de navegador, permisos explícitos de usuario, mapas, layouts en mapas, geocodificación, compatibilidad de navegadores, cookies, generación de identificadores únicos, rutas y APIs protegidas por autorización, así como el uso de bibliotecas gráficas externas, paginación de datos, exportación de archivos y cifrado de datos.

Herramientas tecnológicas

Una herramienta tecnológica o tech stack es un conjunto de herramientas y tecnologías que trabajan de manera unida para construir un producto y solucionar un problema o necesidad. Estas herramientas y tecnologías pueden ser lenguajes de programación, motores de bases de datos, servidores web y frameworks. En este proyecto podemos identificar los siguientes tech stacks:

Frontend:

• React Stack: React es una biblioteca de JavaScript para construir interfaces de usuario. Las dependencias que comienzan con @types/react, @types/react-dom, @types/react-router, @types/react-router-dom, react, react-dom, react-router, react-router-dom y react-hook-form son todas parte de este stack.

• React-CSV Stack: Esta biblioteca permite la generación de archivos CSV en una aplicación React. Las dependencias que comienzan con react-csv, react-csv-downloader son todas parte de este stack.

Backend:

• Express Stack: Express es un marco de aplicación web para Node.js, diseñado para construir aplicaciones web y API. La dependencia express es parte de este stack.

• Sequelize Stack: Sequelize es un ORM (Object-Relational Mapping) para Node.js y soporta los dialectos PostgreSQL, MySQL, SQLite y MSSQL. La dependencia sequelize es parte de este stack.

• Bcrypt Stack: Bcrypt es una biblioteca para hashing passwords. La dependencia bcrypt es parte de este stack.

• Jsonwebtoken Stack: jsonwebtoken es una biblioteca para crear y verificar tokens JWT (JSON Web Tokens). La dependencia jsonwebtoken es parte de este stack.

• UUID Stack: UUID es una biblioteca para generar identificadores únicos. La dependencia uuid es parte de este stack.

• Zod Stack: Zod es una biblioteca para la validación de datos. La dependencia zod es parte de este stack.

Instalación

Para instalar este proyecto localmente, clona este repositorio desde GitHub en tu máquina local:

  https://github.com/angu-m9/orange-coverage-map.git

Dependencias

Para las dependencias del Frontend, ejecuta el siguiente comando desde el directorio que contiene el archivo package.json correspondiente al Frontend.

npm install

Para las dependencias del Backend, ejecuta el siguiente comando desde el directorio que contiene el archivo package.json correspondiente al Backend.

npm install

Dependencias del Frontend

Si es necesario realizar instalaciones de forma individual, puedes hacerlo desde el directorio que contiene el archivo package.json. Utiliza el siguiente comando para instalar las siguientes dependencias en la terminal.

dependencies:

npm install @popperjs/core@2.11.8
npm install @react-google-maps/api@2.19.2
npm install @types/detect-browser@4.0.0
npm install @types/dotenv@8.2.0
npm install @types/react-router@5.1.20
npm install @types/react-router-dom@5.3.3
npm install boosted@5.3.2
npm install detect-browser@5.3.0
npm install dotenv@16.3.1
npm install jsdom@22.1.0
npm install json-server@0.17.4
npm install react@18.2.0
npm install react-csv@2.2.2
npm install react-csv-downloader@3.0.0
npm install react-device-detect@2.2.3
npm install react-dom@18.2.0
npm install react-hook-form@7.47.0
npm install react-leaflet@4.2.1
npm install react-modal@3.16.1
npm install react-router@6.20.0
npm install react-router-dom@6.18.0

devDependencies:

npm install @testing-library/jest-dom@6.1.4
npm install @testing-library/react@14.1.0
npm install @types/jest@29.5.8
npm install @types/react@18.2.15
npm install @types/react-csv@1.1.8
npm install @types/react-dom@18.2.7
npm install @types/react-modal@3.16.3
npm install @typescript-eslint/eslint-plugin@6.0.0
npm install @typescript-eslint/parser@6.0.0
npm install @vitejs/plugin-react-swc@3.3.2
npm install @vitest/coverage-v8@0.34.6
npm install eslint@8.45.0
npm install eslint-plugin-react-hooks@4.6.0
npm install eslint-plugin-react-refresh@0.4.3
npm install jest@29.7.0
npm install sass@1.69.5
npm install ts-jest@29.1.1
npm install typescript@5.0.2
npm install vite@4.4.5
npm install vitest@0.34.6

Dependencias del Backend

Si es necesario realizar instalaciones de forma individual, puedes hacerlo desde el directorio que contiene el archivo package.json. Utiliza el siguiente comando para instalar las siguientes dependencias en la terminal.

dependencies:

npm install @types/jest@29.5.5
npm install bcrypt@5.1.1
npm install cors@2.8.5
npm install dotenv@16.3.1
npm install express@4.18.2
npm install jest@29.7.0
npm install jsonwebtoken@9.0.2
npm install mysql2@3.6.2
npm install sequelize@6.33.0
npm install ts-jest@29.1.1
npm install ts-node@10.9.1
npm install ts-node-dev@2.0.0
npm install uuid@8.3.2

devDependencies:

npm install @types/bcrypt@5.0.1
npm install @types/cors@2.8.15
npm install @types/dotenv@8.2.0
npm install @types/express@4.17.20
npm install @types/jsonwebtoken@9.0.4
npm install @types/node@20.8.7
npm install @types/sequelize@4.28.17
npm install @types/supertest@2.0.14
npm install @types/uuid@9.0.6
npm install nodemon@3.0.1
npm install supertest@6.3.3
npm install typescript@5.2.2

Variables de entorno

Para ejecutar este proyecto, se necesitan añadir las siguientes variables de entorno. Para conseguirlo necesitarías una cuenta de Google, y pedir tu API_KEY propia.

API_KEY

Antes de correr la aplicación es necesario crear el esquema de una base de datos, utilizando el archivo:

schema.sql

Para proteger la información sensible hay que crear variables globales del entorno y guardarlas en el archivo:

.env

Developers

• Virginia Santana - Product Owner - @VirginiaSantana
• Sophia Wong - Scrum Master - @sophiawm
• Bryan Mariano - Developer - @BRYAN-MARIANO
• Fernando Angulo- Developer - @angu-m9
• Jes Hardy - Developer - @JesHardyM
• Adriana Martínez- Developer - @DigitalChampeta
• Ainhoa Aguado - Developer - @AinhoaAguado

Métodos Ágiles

SCRUM + KANBAN 

Roadmap

Crear una librería: Desarrollar una biblioteca que permita integrar esta solución en cualquier interfaz de usuario. Es decir, de manera transparente o visible para el usuario, se podrían recolectar datos sobre la calidad de su red y almacenarlos en la base de datos.

Incentivar la recolección de datos: Implementar estrategias de gamificación para motivar a los usuarios a enviar datos desde diversas ubicaciones. Esto les permitiría participar en la obtención de premios de Orange, como bonos de datos, Servicios de Valor Agregado (SVAs), entre otros.

Referencia de Estilo

Orange Boosted es una biblioteca de componentes accesible y ergonómica basada en Bootstrap y con la marca Orange.

https://boosted.orange.com/

Badges

Agradecemientos

Queremos expresar nuestro sincero agradecimiento a José Luis Montesinos por su invaluable orientación y apoyo. Su experiencia y dedicación han sido fundamentales para el desarrollo de este proyecto, marcando una diferencia significativa en nuestro camino. Estamos agradecidos por su generosidad al compartir su conocimiento y guía, elementos clave que han contribuido al éxito de nuestro trabajo. Gracias, José Luis, por ser una fuente de inspiración y mentor en este viaje.