--- url: 'https://metadrop.net/es/proyectos/nespresso-drupal-desacoplado' title: 'Nespresso - Drupal desacoplado' author: name: Root url: 'https://metadrop.net/es/sobre/metadrop' date: '2020-04-16T13:15:20+00:00' updated: '2024-11-11T12:04:11+00:00' type: project summary: 'Back end de gestión de contenidos en Drupal y front end público como aplicación web JavaScript' tags: - Nespresso - Vue.js - 'Drupal 8' - 'Decoupled Drupal' - 'Migrate API (Drupal module)' - Maps - Geolocation image: 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/project/armario-capsulas-nespresso.jpg.webp?itok=kJpSJIhz' published: true og: determiner: Automatic site_name: Metadrop 'image:url': 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/project/armario-capsulas-nespresso.jpg.webp?itok=kJpSJIhz' 'image:type': image/jpeg 'image:width': '1110' 'image:height': '740' 'image:alt': 'Nespresso - Drupal desacoplado' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article name: 'Nespresso - Drupal desacoplado' headline: 'Back end de gestión de contenidos en Drupal y front end público como aplicación web JavaScript' description: 'Back end de gestión de contenidos en Drupal y front end público como aplicación web JavaScript' about: - Vue.js - 'Drupal 8' - 'Drupal desacoplado' - 'Migrate API (módulo de Drupal)' - Mapas - Geolocalización image: '@type': ImageObject url: 'https://metadrop.net/sites/default/files/styles/full/public/imce/image/project/armario-capsulas-nespresso.jpg.webp?itok=kJpSJIhz' width: '1110' height: '740' datePublished: '2020-04-16T15:15:20+0200' dateModified: '2024-11-11T13:04:11+0100' author: '@type': Organization '@id': 'https://metadrop.net/#organization' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/proyectos/nespresso-drupal-desacoplado' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/es/proyectos/nespresso-drupal-desacoplado' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://metadrop.net/es' - '@type': ListItem position: 2 name: 'Casos de Estudio' item: 'https://metadrop.net/es/proyectos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- # Nespresso - Drupal desacoplado ## Back end de gestión de contenidos en Drupal y front end público como aplicación web JavaScript Localizador de boutiques y puntos de reciclado de Nespresso. [Explorar](#scroll-to-content) ## 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](https://unsplash.com/photos/vRc0B8lDsX4 "Foto original en unsplash.com"). La [foto de la tienda de Nespresso](https://www.flickr.com/photos/southbeachcars/44819979295 "Foto original en Flickr.") es de Phillip Pessar.*