AHORA NUESTROS CURSOS TAMBI脡N ONLINE
ONLINE
Contactar
Menu
ALUMNOS
Contactar

Proyecto destacado de Full Stack, ACUDE

18 de junio de 2020 13:17:57 CEST

En esta ocasi贸n, presentamos el proyecto de nuestra antigua alumna del Full Stack Bootcamp, Laura Gonz谩lez Barreiro, qui茅n desarroll贸 ACUDE, un ingenioso sistema para acercar la naturaleza amantes de los animales y al mismo tiempo ayudar a posibles seres vivos en apuros. 

Acude-webapp

La idea surgi贸 teniendo a Galicia en mente, la cual cuenta con numerosos recursos naturales y es recorrida por gran cantidad de personas a las que les gusta el medio natural, y  que seguro que est谩n interesadas en conocer m谩s sobre 茅l. El objetivo es conseguir:

  • La identificaci贸n de especies silvestres de la zona
  • Dar asistencia en caso de encontrar animales que necesiten ayuda.

驴C贸mo funciona ACUDE?

Como podemos ver, se trata de una aplicaci贸n web que busca acercar la naturaleza a la poblaci贸n y adem谩s ayudar a aquellos que lo necesiten. Veamos en detalle sus funcionalidades. 

Identificaci贸n del animal 

Se hace a trav茅s de palabras claves. Las palabras claves en primera instancia se generan manualmente desde el back-end, y son lo m谩s concisas y representativas posibles del animal en cuesti贸n. Los resultados se ordenan de mayor a menor coincidencia entre los t茅rminos introducidos por el usuario y las palabras claves almacenadas para cada animal. 

La principal diferencia con otras p谩ginas web similares, es que estas se centran en dar informaci贸n exhaustiva sobre el animal, sin embargo, ACUDE solo pretende encontrar el animal, una vez identificado, si el usuario lo desea, puede completar la informaci贸n por su cuenta. 

acude_app_ciervo_volante

En el ejemplo de la imagen, descartamos una especie similar encontrada en zonas costeras. Adem谩s, nos da informaci贸n 煤til en el caso de querer proteger un ciervo volante en un camino transitado, algo muy frecuente. En base a su h谩bitat, la mejor opci贸n ser铆a recogerlo y colocarlo en un 谩rbol cercano de hoja caduca.

Asistencia al animal

Esta funcionalidad pretende cubrir una carencia en la que muchos nos podemos haber visto envueltos, 驴qu茅 hacer si te encuentras a un animal herido o fuera de su h谩bitat?. La aplicaci贸n provee diversa documentaci贸n b谩sica sobre c贸mo proceder en los casos m谩s habituales en los que un animal salvaje puede necesitar ayuda, tal y como ve铆amos en el ejemplo del ciervo volante.

asistencia_acude_app_neoland_full_stack

Adem谩s, dentro de la aplicaci贸n, ver谩s la posibilidad de contactar con diversas entidades oficiales as铆 como la opci贸n de encontrar el centro de rescate m谩s cercano en base a la geolocalizaci贸n del usuario. 

Desarrollo del proyecto ACUDE 

Durante la concepci贸n del propio proyecto, se vio que era totalmente necesario que fuera responsive, ya que, si te encuentras en la monta帽a, lo l贸gico es que no lleves encima un ordenador, por lo que su uso ser铆a mayoritariamente en dispositivos m贸viles. 

El Bootcamp de Full Stack, se basa en el Stack MEAN, veamos c贸mo se aplicaron las tecnolog铆as utilizadas para cada parte del proyecto.

Base de datos, 驴d贸nde y c贸mo guardamos la informaci贸n?

Se opt贸 por MongoDB, por su flexibilidad a la hora de crear los esquemas, y porque la simplicidad de la web no requer铆a relaciones complejas entre tablas, ni almacenar un gran volumen de informaci贸n.

Se limitaron ciertas categor铆as con un m谩ximo de 150 caracteres para asegurar la uniformidad en las fichas y evitar problemas de dise帽o. 

Toda la informaci贸n de la base de datos se recab贸 de manera manual a trav茅s de diferentes fuentes, mayoritariamente la web de la Xunta de Galicia y Wikipedia

Back-end, las acciones de la aplicaci贸n web 

Como bien sabemos, la parte del Back-end es la parte que procesa la entrada desde el Front-end. Podemos decir que es lo que "no se ve" en una aplicaci贸n web. 

Entorno, framework y librer铆as 

Se utiliz贸 NodeJS para la creaci贸n de la API REST, el framework Express y las siguientes dependencias o librer铆as: body-parses, Cloudinary, CORS, express-validator, Helmet, Mongoose y Multer.

Estas librer铆as trabajan para gestionar las peticiones, es decir, las consultas que hacemos en la web, las im谩genes, el intercambio de recursos y la seguridad de los datos.

Peticiones HTTP, las funciones que le pedimos a la aplicaci贸n

Como dec铆amos antes, las peticiones son las diferentes funciones que le pedimos a la aplicaci贸n que lleve a cabo. Fueron 8 las peticiones HTTP creadas para el proyecto: /getAllAnimals, /getAnAnimal/:id, /deleteAnAnimal/:id, /deleteAnAnimal/:id, /uploadImage/:id, /uploadImage/:id, /addAnimal, /checkName, /filterByKeywords, /updateKeywords/:id.

Estas peticiones, son las que relacionan las acciones que queremos hacer con la aplicaci贸n web, con lo que tenemos almacenado, por ejemplo, la petici贸n 鈥/addAnimal鈥, nos ayuda a a帽adir un nuevo animal a la base de datos tras comprobar que este no existe en la misma.

Para testear todas las llamadas se trabaj贸 con Postman, una aplicaci贸n que permite crear y guardar peticiones, elaborar tests para validar el comportamiento de APIs y crear entornos de trabajo diferentes (con variables globales y locales). 

Controladores, el puente entre aplicaci贸n y dispositivo

Los controladores act煤an en el Middleware. El Middleware es software que se sit煤a entre un sistema operativo y las aplicaciones que se ejecutan en 茅l. B谩sicamente, funciona como una capa de traducci贸n oculta para permitir la comunicaci贸n y la administraci贸n de datos en aplicaciones distribuidas.

Los controladores act煤an como 鈥減uentes鈥 entre las aplicaciones y los dispositivos, encarg谩ndose de dar el formato a los datos necesario, o revisando que cumplan con los requisitos. En ACUDE, se dividieron las funcionalidades en 4 controladores: MainController, BodyController, UploadController y AnimalController.

Teniendo en cuenta que la b煤squeda de los animales es una de las 2 funcionalidades clave, explicaremos en detalle c贸mo se elabor贸 el filtro para las b煤squedas a trav茅s de AnimalController.

AnimalController, 驴c贸mo filtrar las b煤squedas?

Dentro del controlador AnimalControler, nos encontramos la funci贸n /filterByKeywords que nos ayuda a encontrar los animales del buscador siguiendo la l贸gica que explicamos brevemente a continuaci贸n.

Por una parte, busca todos los animales cuyas palabras clave contengan todas y cada una de las palabras introducidas por el usuario en la b煤squeda. 

Distancia-de-Levenshtein-neoland

Si hay alg煤n resultado coincidente, se aplica la distancia de Levenshtein, que ayuda a que aparezcan palabras similares a las que buscamos. Por ejemplo, si ponemos 鈥渃ervo鈥 buscar谩 鈥渃iervo鈥. Aplicando una serie de procesos, se determinar谩 el orden de presentaci贸n de los resultados.

驴Se puede ampliar el n煤mero de palabras para las que buscar un animal?

La respuesta es s铆, con la funci贸n /updateKeywords/:id. Tras hacer una b煤squeda, si el usuario confirma la opci贸n 鈥溌縀ra lo que buscabas?鈥 en el resultado de un animal concreto, se comprueba si las palabras de b煤squeda existen ya, de no ser as铆, se a帽aden. De esta manera, el n煤mero de palabras clave se va ampliando de manera colaborativa con t茅rminos cercanos al usuario. 

Front-end, la parte visual

Para elaborar la parte visual de la web, se utiliz贸 Angular y Typescript combinado con HTML, CSS  y las librer铆as Bootstrap y Font Awesome para la maquetaci贸n. 

Como coment谩bamos anteriormente, que la aplicaci贸n web estuviese bien adaptado al formato responsive era fundamental, ya que est谩 pensada para que sea consultada principalmente desde el tel茅fono m贸vil.

busqueda_neoland_proyecto_acude

La vista principal de la aplicaci贸n web, incluye el formulario de b煤squeda sobre el que gira una de las principales funcionalidades, encontrar los animales. M谩s abajo, podremos ver diferentes animales y  un filtro por categor铆as

filtro_animales_proyecto_acude

La barra de navegaci贸n permite que cualquier persona que quiera, pueda a帽adir m谩s animales a nuestra base de datos compartida. Adem谩s, incluye el enlace para obtener asistencia

barra_navegacion_proyecto_acude

Tambi茅n se crearon las fichas con la vista de cada animal. Incluye una imagen modal y una clasificaci贸n de color diferente seg煤n el estado de conservaci贸n de los animales, como en el ejemplo de nuestro amigo el desm谩n ib茅rico.

ficha_animal_proyecto_acude

Una parte importante de la aplicaci贸n, era poder hacerla colaborativa, por lo menos en parte, y para ello, est谩 habilitada la opci贸n de a帽adir animales por parte de otros usuarios, para ello, se cre贸 una vista con un formulario. Primero, el usuario debe completar los datos sobre el animal. Despu茅s, pueden subir una imagen. 

animal_nuevo_proyecto_acude

Con esto, queremos destacar el enorme trabajo de elaborar una aplicaci贸n como esta, en la que debes pensar en todos los detalles para dar respuesta a las diferentes situaciones que puedan darse.

Muchas gracias Laura por este gran trabajo 馃槉


Si t煤 tambi茅n quieres poder llevar a cabo proyectos tan interesantes como este, no lo dudes, consulta nuestro Full Stack Bootcamp.

隆Te esperamos!

Tambi茅n te puede interesar

Estos post sobre Full Stack

Suscr铆bete a nuestro email

Todav铆a no hay comentarios

Dinos que est谩s pensando