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:

• David Ramirez
• Ubaldo Melchor
• Fernando Morales
• Victor Saucedo
• Arturo Mendoza

Tabla de Contenidos

1. Dependencias
2. Introducción
3. Planteamiento del problema
4. Maquetación y propuestas de Wireframe
5. front end
6. Estructura de directorios
7. 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

1. 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/

2. 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/

3. Eslint: Dependencia para corregir y aggreglar nuestro codigo de JS.

   • Al instalar en necesario configurar el archivo .eslintrc con el siguente comando npm init @eslint/config y configurar como se muestra a continuación:

     

   • Documentación de ESlint:https://eslint.org/

   • Rules: https://eslint.org/docs/rules/

   • Airbnb Code Style: https://github.com/airbnb/javascript

4.CorsPara 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 servicestenemos 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