Camaramar

Symfony    •    Programación a medida    •    React

Rediseño de la web camaramar.com

Este proyecto consistió en desarrollar una nueva versión para la plataforma web www.camaramar.com. Se nos dio la opción de proponer las tecnologías: escogimos usar Symfony para el grueso de la web y la librería React para el widget meteorológico.

Existen bastantes integraciones. Por una parte con motores que nos sirven la previsión meteorológica. Por otro lado como con varias de las API de Google para la localización de las playas o las visitas en tiempo real.

Visitar la web
  • ClienteNáutica Golfiño
  • IndustriaActividades acuáticas
  • Tecnologías Symfony, React, API
  • Inicio Enero 2018
  • Pase a producción Agosto 2018
Sobre el proyecto
Proceso de desarrollo

En este proyecto tuvimos bastante libertad para elegir la pila de tecnologías. Los requisitos de diseño incluían la preparación específica tanto para dispositivos móviles (que suponen la mayoría de las visitas) como para el sistema de publicidades (que son el medio de financiación de la plataforma).

Por lo tanto una vez aceptado el trabajo decidimos presentar al cliente una maqueta en html de cómo sería la nueva web, incluso nos atrevimos a cambiar el logotipo, ¡y decidieron quedarse con él!

Decidimos realizar el desarrollo del backend utilizando el framework de php Symfony debido a que existen perspectivas de ampliar el proyecto en el futuro de formas que dificilmente encajan en un CMS como puede ser Drupal.

El primer paso fue unificar los datos de la antigua base de datos SQLite en una nueva base de datos MySql. Esto nos hizo darnos cuenta de la necesidad de homogeneizar los datos (por ejemplo: las direcciones de las playas) para lo cual decidimos aprovechar el API de Google.

Para el mapa y la información sobre usuarios conectados también se realizaron integraciones con distintas API de Google. Inicialmente también se integró el sistema de búsqueda, pero debido tanto a que los resultados no eran los esperados como a que su uso generaba demasiados impactos en el API (que es de pago) se decidió implementar una solución ad-hoc.

React
Desarrollo del widget meteorológico

Para mostrar las previsiones meteorológicas hubo que acordar con el cliente (responsable del motor de previsiones) un formato de intercambio de información. Una vez logrado esto, se creó un API que luego sería usado de manera sencilla por el Widget meteorológico.

A la hora de implementar el widget meteorológico utilizamos la librería React. Se creó un componente que se conectaría al API previamente creado. El API devuelve un json con los datos y React se encarga de pintar el componente en función de esos datos de forma transparente.

Usar React nos permite tratar el widget meteorológico de forma independiente al resto de la web, lo que es muy conveniente debido a su complejidad.

El widget está compuesto por:

  • Una roseta de los vientos ubicada sobre un mapa con la ubicación de la playa.
  • Un resumen diario de las previsiones meteorológicas.
  • Una tabla con scroll horizontal mostrando la previsión cada 3 horas a varios días vista.
  • Una gráfica representando el nivel del mar en cada momento y las horas de amanecer y anochecer.
Me encanta!
Manuel del Río