Caso de Estudio Eventfeed - Aplicaciones Web Progresivas (PWA)

opengraph blog de tuatara aplicacion web progresiva eventfeed

Eventfeed es una Startup Alemana, que busca convertirse en el mayor referente de eventos multitemáticos de Europa como: conciertos, arte, exposiciones, fiestas, festivales, teatro, cine, deportes, entre otros. La información que se divulga facilita el acceso a esta “jungla de eventos”. Es una plataforma y aplicación en línea que contiene casi todos los eventos públicos (90%) agregados en una base de datos, orientado a la demanda de los usuarios y está socialmente conectado. Es contenido de alta calidad que asegura confiabilidad, validez, integridad (al menos el 90% de los eventos ofrecidos).

Dentro de las necesidades a resolver y oportunidades de mejora para la construcción de una Aplicación Web Progresiva (PWA), era encontrar la manera de conectar a los usuarios con una plataforma tecnológica de fácil navegación.

También, se trataba de entender cuáles eran los intereses culturales de los usuarios y las dificultades para encontrar los eventos, si desconocían o no la existencia de estos. En ese sentido, algunos de los eventos ofrecidos que se muestran en medios en línea y revistas de la ciudad, generalmente, es confuso el llegar a este tipo de información.

Muchas veces se vuelve una tarea demorada encontrar esta información en la web, llegando al desconocimiento de los eventos, que tal vez podrían interesarle a los usuarios que se encuentran de pasada por Europa y desean conocer la oferta cultural de aquel lugar donde se encuentren. Las áreas de cobertura de Eventfeed son: Berlín, Hamburgo, Colonia, Munich y Frankfurt .

Ventaja competitiva

  • Eventfeed es una herramienta individual y socialmente conectada que se centra en los intereses y utiliza innovaciones técnicas para proporcionarles fácilmente los eventos culturales deseados en cualquier hora.
  • La validez, integridad y actualidad (confiabilidad) es un tema central, razón por la cual la información actualizada es indispensable. 
  • El enfoque en los intereses individuales de los usuarios, permite el no saturar de información de ofertas, sino que se alimentan en función de la demanda.

Desarrollo web Eventfeed – Tuatara

Como primera medida a resolver, el equipo de desarrollo de Tuatara propuso crear una PWA (aplicación web progresiva), la cual contenga todos los eventos públicos agregados para una mejor  búsqueda dando la opción de poder estar siempre conectado.

Con lo mencionado anteriormente, las PWA son un conjunto de tecnologías con finalidad de desarrollar aplicaciones escalables, son muy similares a una aplicación web, sus principales ventajas son:

  • Experiencias móviles nativas, auto diseño gráfico y diseño funcional.
  • Costos más bajos en comparación a la construcción de una web nativa.  
  • Son aplicaciones distribuidas que no se limitan bajo un solo sistema operativo. 
  • Con un solo desarrollo se puede acceder a múltiples dispositivos. Adicionalmente, este tipo de aplicaciones permiten la escalabilidad (crecimiento progresivo de la aplicación) del usuario. 
  • No necesitan conexión a internet, gracias a una  característica denominada Service Worker. 

Seguir leyendo: Proyecto Eventfeed  

¿Por qué escogimos una aplicación web progresiva  (PWA)?

3 smartphone con montaje de gráfico digital

La efectividad y búsqueda instantánea de las PWA con asistencia en tiempo real y con mayor eficiencia, llevó a Eventfeed a tomar la decisión de mejorar la búsqueda de este tipo de aplicaciones web progresivas, para cambiar las dinámicas sociales, según el interés de los usuarios. Se trata de no limitarse a un solo grupo de usuarios sino llegar a un segmento mucho más grande.

Marco de trabajo

MVP (Producto mínimo viable)

smartfone en fondo blanco

Se busca validar la solución que se le ofrece a los usuarios y esta debe ser de utilidad cumpliendo con los intereses y necesidades . Con esto, se evitan grandes tiempos en desarrollo y optimización de los tiempos e inversiones innecesarias. Ejemplo: Facebook y Google.

Metodología Scrum

logo de scrum

Scrum es un marco de trabajo ágil, el cual  permite flexibilidad y transparencia mediante las etapas de desarrollo de un proyecto. Este marco de trabajo permite segmentar las fases de desarrollo en tiempo, lo que permite la entrega de secciones de software funcionales y evita reprocesos junto con costos mayores. Adicionalmente, se puede identificar durante las ventajas de tiempo, funcionalidades no previstas antes de finalizar el producto. 


Todo el proceso de desarrollo de Eventfeed se realizó bajo la metodología Scrum, iniciando por la definición de las funcionalidades esenciales que tendría el MVP ( producto mínimo viable).

Una vez definidas todas las funciones establecidas se comenzaron las ventanas de tiempo y tareas para llevar a cabo el proyecto. Luego de esto, se pudo determinar el costo total, alcance y tiempo real del proyecto. 

SEO

Ilustración de una sala de reuniones con 4 personas

Se comienza con la implementación de la estrategia SEO, la cual es posible llevar a cabo gracias a la implementación de la PWA y dentro de esto tenemos:

  • Google Analytics: herramienta de medición de tráfico web.
  • Hotjar:  herramienta para la medición del comportamiento de los usuarios en la aplicación. 
  • Planificación de estructuras de URL. 
  • Planificación de palabras clave.
  • Planificación de metadescripciones.

Proceso de desarrollo

En el proceso de desarrollo se definieron las tecnologías con las cuales se iba a desarrollar la PWA y la estructura del MVP,  las tecnologías utilizadas fueron:

  • Angular: para el desarrollo de la estructura Front-end.
  • Firebase: para el almacenamiento de bases de datos y el envío de notificaciones push. 
  • Servidores: se utilizó Heroku para la distribución de la aplicación Front-end.

Luego del proceso de desarrollo que se llevó a cabo según la planificación web de los Sprint en el marco de trabajo Scrum, se fueron entregando secciones de software ya funcionales, validado por cliente, el proceso duró aproximadamente alrededor de 5 meses (sprints).

Validación del MVP (producto mínimo viable)


En este proceso la aplicación ya se encontraba operativa y el cliente pudo realizar pruebas internas y externas con su círculo de confianza para validar las funcionalidades de la aplicación, cumpliendo así, con las expectativas y necesidades para las cuales fue desarrollada. Esta validación permitió al cliente conseguir patrocinio para crear una aplicación mucho más robusta, que permitiría agregar funcionalidades adicionales basadas en el feedback (retroalimentación) generado por los usuarios.

Análisis de la validación

En esta fase nos dimos cuenta que ciertas tecnologías no eran viables para el crecimiento del proyecto, específicamente el almacenamiento de bases de datos y funciones de Firebase (es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles desarrolladas). Esto, debido a que firebase limitaba un poco la consulta de información e incrementaba un poco los costos del proyecto. 

Se decidió cambiar el entorno de base de datos y del backend, a una solución que permitiera a Eventfeed, escalar las funcionalidades  en un entorno un poco más ágil. Por lo cual, se implementó el desarrollo de servicios en PHP con base de datos MySql.

Esta implementación permitió disminuir los costos manteniendo el rendimiento de la aplicación. 

Ingresa y conoce más sobre: Eventfeed.Me 

Arquitectura de software

Imagen de referencia del proyecto Eventfeed con los involucrados del proyecto: Fabrizio, Oscar y Jhonatan

El equipo de desarrollo de Tuatara, estableció la siguiente arquitectura de software para la implementación de tecnologías web, metodologías, modelos, bases de datos y protocolos:

Tecnologías utilizadas en el desarrollo

  • Entorno de desarrollo: Angular
  • Lenguajes de programación: HTML, CSS, Javascript
  • PWA
  • Firebase
  • Google Maps

Metodologías y modelos implementados en el desarrollo

  • SCRUM
  • MVVM

Bases de datos

  • Firebase database: Para el MVP
  • MySql: Para el producto actual

Protocolos

  • REST: Desarrollo de servicios web REST

¿Deseas desarrollar alguna aplicación? – Contáctanos aquí

Diseño Experiencia de Usuario (UX) / Interfaz de usuario (UI)

Se partió de la necesidad del cliente por abordar el tema de los eventos en Alemania, bajo esta premisa, se quiso abordar las diferentes maneras de adquirir las entradas a los eventos por cada ciudad. El diseño que se llevó a cabo bajo unos parámetros denominados Material Design “es un lenguaje que combina los principios innovadores de la tecnología con las normas clásicas del diseño”Se trata de entender cómo abordar la experiencia del usuario dentro de la interfaz, usando contenidos muy específicos y de una manera intuitiva, basado en el estudio de Google se trabajó bajo estas reglas de usuario.

Conoce más sobre: Material Design 

Proceso de desarrollo

El UX (experiencia de usuario) está basado en los parámetros de Material Design, para este caso en particular, se fue desarrollando de acuerdo a las reglas y parámetros ya establecidos según el estudio de Google; audiencias, entrevistas, usabilidad, data, etc. Es un proceso de largas iteraciones, sin embargo, es un trabajo constante el cual no se define desde el diseñador sino desde la información que el usuario brinda o aporta desde esas iteraciones.


El UI (interfaz de usuario) se basó en los lineamientos de marca y en la estética visual de la misma, partiendo de los colores,  tipografía, formas y la estética, se trabajó bajo todas estas características y se implementaron en la PWA: iconografía, colores de los botones, acciones,  visual de los mapas, menú, etc. Son todos los componentes de la aplicación, los cuales logran diferenciar la marca frente a sus competidores:

Login PWA Eventfeed
Mapa Eventfeed

SEO y Performance de la Aplicación web progresiva (PWA)

Una de las principales ventajas que tiene construir un software en tecnología PWA, es la capacidad que tiene esta para indexar en navegadores de búsqueda. Esto es una característica que para expertos de marketing, permite integrar toda la estrategia digital en un mismo punto sin importar el dispositivo. La capacidad de las PWA de sumar a las estrategias SEO fortalece notoriamente los resultados a mediano y largo plazo, las estrategias de marketing se reducen y los recursos económicos se optimizan.

En el ejemplo de Eventfeed, la planeación estratégica está diseñada para ser el mayor referente europeo en eventos, empezando por Alemania. Y esto no es una tarea fácil, que se de de la noche a la mañana y mucho menos que va a ser soportada con altos presupuestos de pauta. La estrategia es posicionamiento en Google, aprovechando los oceanos azules de la industria, las nuevas tecnologías disponibles, las últimas prácticas de Google para tener “Rich SEO” Particularmente para eventos, Google sugiere que se hagan ciertas modificaciones en la construcción del código y la forma en la que se referencian los campos con el fin de poder tener mejores resultados en SEO. Esto se le conoce como Schema.org.

google ads

En este ejemplo, podemos ver que los resultados de escribir “concierto” en Google, arroja unos resultados adicionales al Meta Título y Meta descripción normales. Esto hace que tu anuncio resalte y atraiga más clics que la competencia.

Optimización y rendimiento

El performance(en inglés) o mejora de rendimiento de productos de software, es un conjunto de procesos aplicados al software con la finalidad de mejorar aspectos como los tiempos de carga y la cantidad de memoria utilizada por los recursos (imágenes, vídeos, fuentes, etc) que utiliza el software desarrollado. Estos procesos se encuentran aplicados a la aplicación web progresiva (PWA) de Eventfeed con la finalidad de ofrecer al usuario final la mejor experiencia posible en cuanto a navegación y usabilidad dentro de la aplicación.

Para cumplir con el objetivo de rendimiento de las aplicación, se decidió utilizar herramientas, frameworks, entornos de desarrollo y tecnologías, que permitieran desplegar una aplicación lo suficientemente rápida y ligera, que pudiera cumplir con los estándares de las aplicaciones modernas y que permitieran seguir evolucionando en conjunto con la aplicación. A continuación detallamos a profundidad los procesos y herramientas utilizadas:

  • Arquitectura de software: Se pensó en una arquitectura cliente-servidor en la cual la aplicación del cliente mostraria el contenido relacionado a eventos y demás componentes que la conforman desde un navegador web. Del mismo modo la aplicación del servidor estaría encargada de suministrar la información consultada en base de datos al cliente, a través de servicios web. Esto permite separar los procesos en la aplicación disminuyendo los tiempos de carga de la aplicación en el cliente, permitiendo la distribución y escalabilidad de la aplicación si es necesario.
  • Modelo utilizado en el desarrollo del software: Para la aplicación del cliente, se utilizó Angular, este framework trabaja con un modelo MVVM (Modelo Vista Vista Modelo) para la estructuración de componentes y funcionalidades. Con este modelo se elimina un paso en el procesamiento de los datos el cual es el controlador tradicionalmente utilizado en el modelo MVC. Este mismo modelo fue utilizado para el desarrollo de los servicios web REST que distribuyen los datos de la aplicación.
  • Peticiones asíncronas como principal proceso orientado al rendimiento: Todas la peticiones, renderizados y despliegue de contenidos de la aplicación son asíncronos; esto quiere decir que la aplicación puede comenzar su ciclo de vida cuando es consultada sin tener que esperar que todo el procesamiento de datos haya culminado. Esto permite a los usuarios comenzar a interactuar con los componentes de la aplicación casi instantáneamente mientras se van cargando los datos de forma progresiva.
  • Optimización de recursos: Los recursos dentro de la aplicación, sean estos imágenes, vídeos, iconos, fuentes, códigos de seguimiento(como Google Analytics y Hotjar), son cargados de tal forma que tanto su peso y dimensiones permitan su buena visualización sin la pérdida de calidad así como la disminución del ancho de banda requerido en la transferencia de estos desde el origen hacia el cliente.
  • Aplicación web progresiva (PWA): Para el caso de Eventfeed se decidió desarrollar una PWA en vez de una aplicación nativa o una híbrida para móviles, ya que una de las características principales de las PWA es la facilidad que están tienen para ser accedidas a través de navegadores, más orientado al rendimiento las PWA pesan mucho menos que las aplicaciones tradicionales por lo que representan un ahorro sustancial en el espacio de almacenamiento de los usuarios finales. Leer ¿Que es una aplicación web progresiva? (PWA) para saber más.
  • Implementación de Services Workers: Junto a la arquitectura que conforman las PWA, se decidió utilizar una tecnología innovadora llama Service Worker, esta tecnología da capacidades a la aplicación del cliente tales como: instalabilidad, actualizaciones sin necesidad de recurrir a tiendas de descarga(Google Play, Play Store, etc), caché de recursos, notificaciones push, etc. En este punto nos concentramos en la velocidad extra que se gana y en la disminución del ancho de banda requerido en el uso de la aplicación, implementando técnicas de guardado en memoria de peticiones y recursos a través del Service Worker.
  • Javascript como principal lenguaje de programación Angular: Estar basado en Javascript y Eventfeed esta construido con Angular, esto nos lleva a tener una aplicación que nos permite generar todo el procesamiento del contenido del lado del cliente, esto quiere decir que a diferencia de las aplicaciones tradicionales en la web donde los servidores realizan todo el trabajo pesado, esta aplicación está diseñada y desarrollada para dividir los procesos, lo que permite que el servidor solo envie una sola tanda de archivos iniciales sin tener casi necesidad de trabajar. El beneficio se ve reflejado a la hora de acceder a la aplicación y en la visualización de los componentes que la confirman casi instantánea que esta tiene al ser utilizada.

En resumen, el conjunto de tecnologías y herramientas seleccionadas para el desarrollo orientado al rendimiento, a permitido que la aplicación de Eventfeed cumpla con los estándares que grandes exponentes en el área como Google, tienen para asegurar al usuario final una experiencia exitosa, logrando velocidad, funcionalidad, usabilidad y resultados óptimos en el transcurso del ciclo de vida de la aplicación.

Conclusión

Las PWA están pensadas en first mobile, esto quiere decir, que cuando se decide desarrollar una aplicación web progresiva (PWA), es pensando en que los usuarios van a ingresar a ella utilizando su dispositivo móvil, tabletas y por último pantallas grandes o de escritorio.

Las PWA también son una página web que progresivamente va implementando características como push notification y ubicación del home screen. Es totalmente diferente de una aplicación nativa, funciona sin conexión a internet, se actualiza constantemente, es atractiva para los usuarios, confiable, pesa muy poco y es rápida a la hora de cargar.

La PWA de Eventfeed ocupa 2.5 megabytes del espacio de almacenamiento del dispositivo, mientras que las aplicaciones nativas pueden llegar a ocupar entre 100 y 250 megabytes aproximadamente en los dispositivos. 

Las PWA no le preguntan al usuario si se quieren actualizar o no, es el usuario quien tiene el control de esto. Algo interesante a destacar es que las aplicaciones nativas usualmente pesan mucho más que su equivalente de PWA. En ese caso,  las PWA hacen exactamente lo mismo que una aplicación web nativa


¡El futuro está en las PWA! Obtener una aplicación web progresiva con “todas las de la ley” ¡ahora es posible! Se trata de dar visibilidad y capacidad de búsqueda a los usuarios sin necesidad de descargarla ni mucho menos actualizarla.


A medida que esta tendencia avance, el desarrollo de las PWA brindará a los usuarios un medio más conveniente para experimentar todas las cosas que les encantan de las aplicaciones nativas. Se trata de mejorar la experiencia UX y UI del usuario.

En Tuatara no especializamos en desarrollar la PWA ideal para tu negocio. ¡No siempre se trata de crear una página web! Agenda una cita y empieza ya con la transformación digital para tu empresa. Recibe una asesoría ¡GRATIS! de 30 minutos aquí.