Ambas partes, front y back se encuentran dentro de este repositorio.
No pudimos realizar el despliegue de nuestro proyecto, se presentó un conflicto con un azure ya que no supimos estructurar los archivos y ello impedía que finalizara el proceso de carga, como se creó todo desde cero nos faltó experiencia en la implementacion. Localmente funciona nuestra solución y se pueden hacer las consultas de la API
En el siguiente enlace se puede apreciar la parte del fron-end desplegada aunque sin funcionalidad https://ocean2-c0d3d.web.app/
El presente proyecto fue concebido para la participación en el hackaton HACK THE OCEAN de LaunchX.
Nuestra tripulación consiste en estudiantes de back end NodeJs:
Tabla de Contenidos
- Dependencias
- Introducción
- Planteamiento del problema
- Maquetación y propuestas de Wireframe
- front end
- Estructura de directorios
- Flujo del programa
Este proyecto está desarrollado utilizando Node.js, por lo tanto utilizamos npm como package manager.
A continuación se muestran las dependencia utilizadas en le proyecto, para poder instalarlas utilizar npm install
-
Jest
: Dependencia necesaria para realizar y crear las pruebas de unidad.- Para correr las pruebas, desde la terminal ejecutar:
npm test test/Directorio_de_la_prueba/prueba.test.js
- Documentación de
jest
: https://jestjs.io/
- Para correr las pruebas, desde la terminal ejecutar:
-
express
: Dependencia necesaria para correr el server.- Para correr el server, desde la terminal ejecutar:
npm run server
- Documentación de
express
: https://expressjs.com/es/
- Para correr el server, desde la terminal ejecutar:
-
Eslint
: Dependencia para corregir y aggreglar nuestro codigo de JS.-
Al instalar en necesario configurar el archivo
.eslintrc
con el siguente comandonpm init @eslint/config
y configurar como se muestra a continuación: -
Documentación de
ESlint
:https://eslint.org/ -
Airbnb Code Style: https://github.com/airbnb/javascript
-
4.Cors
Para realizar el control de acceso, utilizando el siguiente comando npm install cors --save
- Documentación de Cors
:https://developer.mozilla.org/es/docs/Web/HTTP/CORS
Se nos presentó el desafío de crear un proyecto fullstack encaminado a resolver problemas ambientales, específicamente enfocados a los oceanos mediante la aplicación de las habilidades adquiridas durante la duración de curso de LaunchX.
Las herramientas que decidimos utilizar para la realización de nuestro proyecto fueron:
- Github
- NodeJs
- jQuery
- HTML
- CSS
Entre los ejes para la búsqueda de una solución se nos presentaron:
- Especies en peligro de extensión.
- Contaminación (acidificación, derrames petroleros, etcétera).
- Cuidado y preservación de especies marinas.
- Sobrepesca
Decidímos buscar una forma de concientizar y facilitar la búsqueda de informacíon sobre las especies marinas que habitan en México.
El tema elegido fue: "Especies en Peligro de Extinción". Si bien el tema es algo muy sonado, es importante seguir informando a la sociedad acerca de las causas y posibles acciones para evitar que las especies sigan extingueindose puesto que todas ellas forman parte de los ecosistemas, las cuales tienen beneficios para el medio ambiente.
Acordamos que la mejor forma de hacerlo sería mediante el desarrollo de un sitio web y una API para poder consultar la información y presentarla de una forma atractiva y fácil de utilizar
Comenzamos utilizando Miro para comenzar a organizarnos de la siguiente manera
Front End: El proyecto fue realizado en archivo html con apoyo de CSS Y Javascript (jQuery). °HTML - Se realiza el esqueleto que sera la estructura de la pagina Web" °CSS - Se aplican el estilo que dara forma al esqueleto dicha pagina Web °Javascript - Se utiliza para dar funcioalidad a la pagina.
stateDiagram-v2
[Root] --> lib
lib --> utils
lib --> services
lib --> controllers
[Root] --> src
src --> assets
[Root] --> test
test --> utils_test
test -->services_test
test --> controllers_test
En nuestra carpeta lib
realizamos la separación de responsbilidades de la siguiente forma:
En la carpeta Utils tenemos Reader.js
para leer y transformar el archivo creatures.json
en un objeto
classDiagram
class Reader
Reader : +readJsonFile(filePath)
En la carpeta services
tenemos el archivo creatureService
para filtrar el objeto por nombres
classDiagram
class creatureServices
creatureServices : +getCreatures(creatures)
creatureServices : +getCreatureByName(creatures, name)
Finalmente la carpeta controllers
contiene el archivo creatureController
con un método que nos permite obtener la información de una especie por nombre y otro que nos regresa todos los objetos
classDiagram
class creatureController
creatureController : +getCreatures()
creatureController : +getCreatureByName(name)
En la carpeta test
tenemos las pruebas de unidad que corresponden a las carpetas que comparten el respectivo nombre del directorio lib
stateDiagram-v2
creatures.json --> Reader
Reader --> creatureService
creatureService --> creatureController
creatureController --> Server
Server --> API
Una vez que tenemos nuestro API utilizamos los servicios de Azure para desplegarlo y poder hacer consultas desde nuestro sitio web
stateDiagram-v2
API --> Página_web
Página_web --> API