Descubre cómo desarrollamos el Barcelona Startup Map usando Ruby on Rails y AngularJS para el Ayuntamiento de Barcelona, a través de Barcelona Activa, para mapear el ecosistema de startups de Barcelona.

Barcelona Startup Map 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.

Barcelona Startup Map

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.

Xavier redo
Xavier RedóCo-founder & CTO at MarsBased

Los plazos de entrega fueron un reto, pero usando Ruby on Rails y una metodología ágil de desarrollo basada en entregas semanales e iteraciones cortas, aseguramos el éxito del proyecto.

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.

Infographics

Barcelona Startup Map - Infografías

Fueron tres los retos principales al desarrollar el mapa: cumplir con el calendario apretado, proveer una base sólida para seguir desarrollando la aplicación y diseñar una interfaz intuitiva.

Como se menciona arriba, nuestro techstack nos permitió acatar los tiempos de entrega para presentar en BizBarcelona, pero también fue nuestra comunicación fluida con el cliente, utilizando una combinación de Basecamp y Trello, permitiéndonos hacer los cambios necesarios a tiempo.

Porque sabíamos que este proyecto iba a ser de largo plazo, aplicamos las mejores prácticas para hacerlo sostenible a futuro, ya que Barcelona Activa lleva todos los proyectos internamente una que vez que el desarrollo se completa. También les ofrecimos documentación técnica y funcional, y una formación técnica in situ para el personal.

Itziar
Itziar BlascoHead of m-startup-Barcelona at Barcelona Activa

Trabajar con MarsBased fue simplemente un placer. Son rápidos, ágiles y entendieron nuestras necesidades y limitaciones desde el día uno.

Durante 2015 y 2016 trabajamos con Barcelona activa para adaptar la aplicación a sus nuevas líneas corporativas, haciendo algunos ajustes y agregando funciones al mapa. Estamos en contacto constantemente para coordinar acciones conjuntas de marketing para atraer a más compañías al mapa. ¡Actualmente tenemos más de 800!