Nespresso - Drupal desacoplado

Nespresso

Probablemente Nespresso no necesite presentación debido a que la inversión publicitaria que realiza la marca y su presencia en medios la hace muy conocida para el público en general. Filial de la multinacional Nestlé, Nespresso lleva operando desde finales de los años 80 cubriendo actualmente más de 70 países y empleando algo más de 13.000 personas.

El proyecto

Su sistema de café por cápsulas requiere varios elementos que el consumidor querrá encontrar fácilmente cuando lo necesite: máquinas cafeteras que preparan el café, las propias cápsulas de aluminio con las diferentes mezclas para ser usadas por las máquinas, y por último pero no menos importante, puntos de reciclaje donde poder depositar las cápsulas usadas para poder ser procesadas convenientemente.

Nespresso contaba ya con una web con información sobre la marca y sus productos así como un comercio electrónico. Sin embargo, no se quería sustituir la web existente, sino solo añadir la parte del buscador de boutiques sin alterar el sistema actual, por lo que debía poder integrarse sin que el visitante notase los diferentes componentes involucrados. 

Además, los datos debían importarse mediante diferentes integraciones de servicios web a la vez que se permite la edición de contenido por parte de los editores, tanto para añadir información no presente en los servicios accedidos como para matizar o completar la información recibida.

Por último, dada la idiosincrasia del territorio a servir, España, la web habría de ser capaz de ser presentada en diferentes idiomas.

La implementación

La implementación sigue una estrategia de Drupal progresivamente desacoplado (progressively decoupled Drupal). Esto significa que Drupal sirve la estructura general de la página con los elementos comunes como menús, pie y contenedor principal, dejando la responsabilidad de parte del contenido en manos de una aplicación JavaScript. Así, el back end y el front end de administración son gestionados por Drupal, mientras que el front end público es principalmente asumido por una webApp, lo que permite una mayor flexibilidad y agilidad en su interfaz y rendimiento percibido por el usuario, evitando recargas de página o peticiones Ajax al servidor.

Para el front end público se usa Vue.js. Este framework JavaScript es especialmente óptimo para aplicaciones de pequeño a medio tamaño, dada su ligereza y buen rendimiento. La aplicación se comunica con Drupal mediante un servicio web JSON para obtener los datos a mostrar, así como con el servicio externo de mapas para funcionalidades como el propio mapa o búsquedas geográficas. Adicionalmente, el empaquetar el buscador en una aplicación JavaScript independiente permite usarla sin dificultad en aquellas otras páginas que lo requieran, simplemente añadiéndola mediante mecanismos estándar HTML.

El back end, Drupal, se encarga de realizar las importaciones periódicas de datos mediante migraciones de datos; la capacidad para implementar migraciones en Drupal es tan potente que es fácil usarla también para sincronizar datos de fuentes externas y aprovechar todas las funcionalidades que ofrece de base como la gestión de duplicados o el procesado de diferentes formatos.

Como detalle final, la web funciona en un subconjunto de URL del sitio principal, replicando la estética del sitio principal, de forma que el usuario no percibe el cambio de tecnología de back end. Sin llegar a ser algo complejo, también ha exigido cierta creatividad a la hora de realizar la integración de la forma más imperceptible posible.

La foto de la portada es de Efe Kurnaz. La foto de la tienda de Nespresso es de Phillip Pessar.