Aplicación React para Foodilog
Foodilog es una aplicación móvil para publicar comentarios sobre restaurantes, bares, food trucks para cualquier comida que te guste (o no).
Fase de inicio
El cliente se acercó con la necesidad de desarrollar una plataforma web para integrarse con la aplicación móvil existente. Esperaba implementar el panel de administración (para la administración de restaurantes y platos) y el sitio web del usuario para navegar las reseñas y calificarlas.
Por lo tanto, lo primero que evaluamos fue la estructura de la aplicación móvil existente y el servidor de fondo. Hemos trabajado en colaboración con el técnico TI del cliente para poder desarrollar endpoints (puntos de acceso) necesarios para nuestra aplicación. Para llegar a eso, proporcionamos documentación y requisitos técnicos preparado con las herramientas que provee Postman antes de avanzar en desarrollo.
Fase de desarrollo
Se desarrolló una aplicación web desde cero utilizando un framework ReactJS con Bootstrap. Definimos una estrategia para implementar aplicaciones administrativas y de usuario basadas en el mismo punto de partida.
Comenzamos el desarrollo coordinando con el equipo de API de backend. Hemos implementado un conjunto de pruebas de Postman con todos los puntos finales y valores esperados para facilitar la integración final de la aplicación.
La aplicación de administración se implementó en base a un tema de Bootswatch. Definimos la estructura del menú principal con una interfaz muy simple e intuitiva para navegar rápidamente secciones como usuarios, restaurantes, platos, publicaciones y galería de fotos. La autenticación de administrador se implementó utilizando respuestas nativas para realizar y capturar solicitudes a través de tokens proporcionados por la API RESTfull del back-end.
El panel de administración proporciona un conjunto de herramientas para administrar información básica y cuentas. El administrador puede controlar el inicio de sesión, los contenido generados por usuarios, platos e información de restaurantes.
Platos (Dishes) es una de las áreas más importantes, en esta sección se definió la herramienta para aprobar/rechazar registros y revisiones. También es utilizado para recopilar información útil que se mostrará tanto en el sitio web de los usuarios como en la aplicación móvil. El administrador puede crear un nuevo plato agregando un título, asignando un ID del restaurante, categoría y precio. Entre otras opciones puede agregar fácilmente imágenes dentro de la página del plato utilizando la herramienta de arrastrar y soltar.
La aplicación admin ReactJS se implementó usando node y npm. Hemos integrado paquetes como react-bootstrap, react-router-bootstrap, react-dropzone, react-infinite-scroller, react-slider además de otros para mejorar la aplicación y el mantenimiento del código.
Por otro lado, hemos desarrollado el sitio web del usuario habitual. Esta es otra aplicación ReactJS que también integra herramientas y paquetes similares. También usamos un tema personalizado basado en Flatly Bootswatch para que coincida con el diseño web de la marca.
El objetivo principal del sitio web del usuario es publicar los perfiles de los usuarios y mejorar el SEO para la presencia de la marca. También agrega una forma de llegar a más personas y alentarlos a instalar y usar la aplicación móvil.
La aplicación del usuario se implementó para conectarse a la misma API del servidor. Extrae información de perfiles de usuarios y revisiones de platos. Los comensales pueden consultar los restaurantes, platos y comentarios de otros usuarios. Esto se conecta con la aplicación móvil y se sincroniza para mostrar información actualizada.
Ambas aplicaciones react se han implementado en entornos Docker. Hemos integrado una imagen node para Docker y un volumen para datos persistentes.
Tecnologías
- NodeJS es un entorno de tiempo de ejecución JavaScript multiplataforma de código abierto para código JavaScript del lado del servidor
- ReactJS es una librería JavaScript para construir interfaces de usuario. Actualmente lo mantienen Facebook, Instagram y una comunidad de desarrolladores y empresas.
- Bootstrap es un framework HTML5+Javascript+CSS3 para construir interfaces de usuario con el concepto de mobile-first (primero dispositivos móviles)
- Postman es un entorno completo de desarrollo APIs. Proporciona varias herramientas para mejorar y estandarizar el desarrollo de APIs
