Barcelona Startup Map
Descubre cómo desarrollamos el Mapa de Startups de Barcelona utilizando Ruby on Rails y AngularJS para el Ayuntamiento de Barcelona, a través de Barcelona Activa, con el objetivo de mostrar el ecosistema de startups de nuestra amada ciudad.
Barcelona Startup Map es una aplicación web que contiene una radiografía del estado actual del ecosistema emprendedor de Barcelona. A través del Barcelona Startup Map, se pueden buscar, añadir y geolocalizar startups, inversores, aceleradoras, incubadoras, grandes corporaciones, centros de talento y proveedores de servicios basados en la Ciudad Condal.
En Marzo de 2014, llegamos a un acuerdo con Barcelona Activa para desarrollar el mapa de startups de nuestra ciudad favorita. En el pasado, habíamos usado los mapas de startups de otras ciudades, y no entendíamos que Barcelona no tuviera uno.
Nuestra propuesta fue recibida inmediatamente, y en menos de un mes estábamos trabajando en ella, conceptualizando y desarrollando una aplicación web atractiva a los ojos, que permitiera a la comunidad emprendedora de Barcelona poderse situar toda en un mapa, en una acción conjunta de comunidad. La aplicación tomaba lo mejor de los otros mapas, además de una interfaz limpia y amigable, adaptada a los tiempos que corrían entonces.
La meta del proyecto era agrupar cuantas más startups y compañías relacionadas mejor en un tiempo limitado, ya que el proyecto iba a ser presentado en el marco del BizBarcelona 2014 - como explicamos en nuestro blog Barcelona Startup Map (Part 1). Lanzamos el mapa antes del congreso y obtuvimos más de 50 registros en poco más de una semana.
Debido al poco tiempo, sabíamos que el uso de nuestro techstack era indispensable para asegurar el éxito del proyecto y poder cumplir con las fechas. Sólo con Ruby on Rails y AngularJS podíamos ser capaces de desarrollar la aplicación a tiempo. De hecho, fuimos el primer proveedor especializado en Ruby para el Ayuntamiento y para Barcelona Activa, y los primeros en tener acceso a los entornos de producción desde afuera de su red, ya que somos una compañía que trabaja en remoto. La confianza generada, aún siendo una empresa nueva, fue suficiente para hacerlos cambiar sus políticas y así asegurar el éxito del proyecto.
El Barcelona Startup Map permite a los usuarios registrar sus compañías a través de un sistema fluido de suscripción que requiere validación de la parte administrativa por parte del equipo del Ayuntamiento. Cuando se aprueba, la compañía recién registrada aparece en el mapa.
La aplicación también permite que el usuario explore el mapa y aprenda más sobre Barcelona y su ecosistema a través de infografías, estadísticas y datos.
Tecnologías del proyecto
Ruby on Rails
Rails es un framework modelo-vista-controlador (MVC) con estructuras predeterminadas para base de datos, servicios web y páginas web.AngularJS 1.x
AngularJS era un framework web gratuito de código abierto basado en JavaScript, utilizado para desarrollar aplicaciones de una sola página.MySQL
MySQL es un sistema de gestión de bases de datos relacionales de código abierto.HTML5
HTML5 es un lenguaje de marcado utilizado para estructurar y presentar contenido en la World Wide Web.Por el lado del frontend, desarrollamos una Single Page Application (SPA). Cuando comenzamos a conceptualizar la aplicación decidimos que queríamos que el mapa fuera la parte central. Queríamos que el usuario tuviera una interacción fluida con el mapa; nos horrorizaba la idea de que el navegador se actualizara cada vez que el usuario navegara entre secciones.
Elegir AngularJS como la infraestructura de frontend fue esencial para lograr el proyecto. Con AngularJS pudimos simplificar el manejo de datos de parte del cliente al usar 2-way databinding. Gracias a la increíble comunidad que hay alrededor del framework, pudimos hacer uso de librerías de terceros que nos ayudaron a implementar algunas de las funciones más importantes de la aplicación. Angular Google Maps nos ayudó a gestionar la integración de Google Maps con soporte incorporado por subgrupos, Angular Translate abrió la puerta para manejar mejor múltiples lenguajes (I18n) y UI-Router nos ayudó a manejar las diferentes rutas de la aplicaciones como estados.
Desarrollamos el backend usando Ruby on Rails. Implementamos Active Admin para el panel de administraciónn y una API REST a cargo de proveer toda la información a la aplicación frontend. Una de las partes más desafiantes de esto fue asegurar que el servidor de la aplicación fuera capaz de manejar cientos de peticiones simultáneas después de presentar el proyecto al público en el BizBarcelona. Por suerte, Ruby on Rails y los sistemas avanzados de cache que implementamos aseguraron que la aplicación fuera capaz de mantener un tiempo de respuesta promedio menor a 100ms, incluso durante una campaña intensiva de marketing en los medios online.