Decoupled Drupal Showcase: Using Drupal to Power Digital Signage
•Download as PPTX, PDF•
1 like•1,384 views
Digital signage can be a great way to extend your organization’s reach, moving your content and your brand beyond the typical website experience. Leveraging the strength of its full-featured CMS against the front-end possibilities of a client-side framework like Ember or AngularJS, Drupal's role in the evolving content ecosystem of the web is becoming more and more prominent. For organizations with an existing Drupal platform, the choice to build Drupal into new content-driven digital experiences is even more compelling. In this tech talk, Brian Reese, Senior Developer at Acquia, will present a case study along with a few lightweight technical examples of decoupled Drupal and digital signage. We will cover: -Some of the UI/UX challenges around adapting an existing body of content to a brand new medium -A simple Drupal web service example -How JSON API and other strategies can help standardize data from multiple sources -How decoupled implementations are bringing new possibilities to Drupal applications
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Decoupled Drupal Showcase: Using Drupal to Power Digital Signage
Similar to Decoupled Drupal Showcase: Using Drupal to Power Digital Signage (20)
More from Acquia
More from Acquia (20)
Recently uploaded
Recently uploaded (20)
Decoupled Drupal Showcase: Using Drupal to Power Digital Signage
- 1. 1 ©2016 Acquia Inc. — Confidential and Proprietary Using Drupal to Power Digital Signage Brian Reese - Senior Developer brian.reese@gmail.com github.com/darkcody
- 2. 2 ©2016 Acquia Inc. — Confidential and Proprietary2 ©2016 Acquia Inc. — Confidential and Proprietary Digital Signage – A Growing Market 2 ©2016 Acquia Inc. — Confidential and Proprietary IKEA’s in-store signage network
- 3. 3 ©2016 Acquia Inc. — Confidential and Proprietary3 ©2016 Acquia Inc. — Confidential and Proprietary Inform + Engage
- 4. 4 ©2016 Acquia Inc. — Confidential and Proprietary4 ©2016 Acquia Inc. — Confidential and Proprietary Case Study: USAF Band Checklist – User friendly – Touch screen (interactive) – Various social media integrations – Concert details, with musician bios
- 5. 5 ©2016 Acquia Inc. — Confidential and Proprietary Application + APIs AngularJS Drupal 7 Facebook Youtube Google Maps + Calendar
- 6. 6 ©2016 Acquia Inc. — Confidential and Proprietary6 ©2016 Acquia Inc. — Confidential and Proprietary
- 7. 7 ©2016 Acquia Inc. — Confidential and Proprietary Drupal was a drop-in solution to a content management problem. Success from the Kiosk Project
- 8. 8 ©2016 Acquia Inc. — Confidential and Proprietary A flexible service architecture for the kiosk allowed enough flexibility to pivot. Success from the Kiosk Project
- 9. 9 ©2016 Acquia Inc. — Confidential and Proprietary easier updatesCloud-based architecture = Success from the Kiosk Project easier replication
- 10. 10 ©2016 Acquia Inc. — Confidential and Proprietary Poor network connectivity ≠ poor user experience Lessons Learned
- 11. 11 ©2016 Acquia Inc. — Confidential and Proprietary Demo: A Drupal 8 + Ember Example Drupal 8 + JSON API Ember EmberCLI Ember Data
- 12. 12 ©2016 Acquia Inc. — Confidential and Proprietary JSON API Drupal 8 +
- 13. 13 ©2016 Acquia Inc. — Confidential and Proprietary Ember Data Ember + This Week’s Deals
- 14. 14 ©2016 Acquia Inc. — Confidential and Proprietary Content Model
- 15. 15 ©2016 Acquia Inc. — Confidential and Proprietary Modules
- 16. 16 ©2016 Acquia Inc. — Confidential and Proprietary Rest API // Expose a collection of recipe content GET /jsonapi/node/recipe?_format=api_json // Expose a single recipe GET /jsonapi/node/recipe/{{uuid}}?_format=api_json JSON API REST RESOURCES Note: Unless Drupal and your front-end app share the same domain name, you’ll also want to enable/configure CORS
- 17. 17 ©2016 Acquia Inc. — Confidential and Proprietary Rest Resource (partial) { "data": { "type": "node--recipe", "id": "9fa46fcc-cd90-4cc5-a715-e71f25d34f2a", "attributes": { "nid": "5”, "vid": "6”, "title": "Bananas Foster”, "body": { "value": "<p>Melt the butter in a heavy skillet over ….</p>rn", "format": "basic_html” } }, "relationships": { "type": {..} }, "field_ingredients": { "data": [..], "links": {..} }, "field_recipe_image": { "data": {..}, "links": {..} } }, … }, GET /jsonapi/node/recipe/{{uuid}}?_format=api_json
- 18. 18 ©2016 Acquia Inc. — Confidential and Proprietary Ember – Getting Started // Install Ember-cli npm install –g ember-cli // Generate a new Ember Project named ‘kiosk’ ember new kiosk // cd to your new app cd kiosk // Then generate a few templates and start ember server ember generate template application ember generate route featured-recipe ember generate model recipe ember server EmberCLI
- 19. 19 ©2016 Acquia Inc. — Confidential and Proprietary We Installed EmberCLI and used it to generate: – A new Ember Application – A route to display our featured application – A model to represent our recipe data We started ember server, making our application available at http://localhost:4200/ So what did we just do?
- 20. 20 ©2016 Acquia Inc. — Confidential and Proprietary import DS from 'ember-data'; export default DS.Model.extend({ }); app/models/recipe.js Ember – Define the Recipe Model
- 21. 21 ©2016 Acquia Inc. — Confidential and Proprietary Ember – Define the Recipe Model import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string'), field_recipe_image: DS.belongsTo('file--file’), field_ingredients: DS.belongsTo('node--ingredient') }); app/models/recipe.js
- 22. 22 ©2016 Acquia Inc. — Confidential and Proprietary import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.get(‘store’).findOne(‘recipe’, ####); } }); app/routes/featured-recipe.js Ember – Fetch recipe data Note: The JSON API module uses the entitiy’s UUID (and not the node id in this case). For simplicity of this example, we’ll hardcoded the uuid of our recipe here.
- 23. 23 ©2016 Acquia Inc. — Confidential and Proprietary Ember – Updating the template <article style="background: url('/{{model.fieldRecipeImage.url}}') cover"> <h1>{{model.title}}</h1> <div class="info">Find this recipe and more at bestgrocery.com</div> <ul class="ingredients"> {{#each model.fieldIngredients as |ingredient|}} <li>{{ingredient.title}}</li> {{/each}} </ul> </article> app/templates/featured-recipe.hbs
- 24. 24 ©2016 Acquia Inc. — Confidential and Proprietary ... But there are a couple of housekeeping things to take care of before we’re able to consume our Drupal API Finishing up Ember data works largely out of the box with JSON API (using its default JSON API serialzer / deserializer classes)
- 25. 25 ©2016 Acquia Inc. — Confidential and Proprietary Configure your API endpoint // Generate an adapter and serializer with EmberCLI ember generate adapter application ember generate serializer application EmberCLI app/adapters/application.js export default DS.JSONAPIAdapter.extend({ host: 'http://localhost', //the host for the Drupal site namespace: 'jsonapi', //the default jsonapi api prefix buildURL(record, suffix) { return this._super(record, suffix) + '?_format=api_json'; }, pathForType(type) { return type.replace('--', '/').replace('-', '_'); } }); Generate an application adapter and serializer
- 26. 26 ©2016 Acquia Inc. — Confidential and Proprietary app/adapters/application.js import DS from 'ember-data'; export default DS.JSONAPISerializer.extend({ modelNameFromPayloadKey(key) { return Ember.String.dasherize(key); }, keyForAttribute(attr) { return Ember.String.underscore(attr); } }); Replace dashes/undersc ores in the JSONAPI serializer
- 27. 27 ©2016 Acquia Inc. — Confidential and Proprietary Configure the properties needed // Generate models for ingredients and files (our image) ember generate model node--ingredient ember generate model file--file EmberCLI app/models/node--ingredient.js | app/models/file--file.js // We’ll use the ingredient’s title propert in our template export default DS.Model.extend({ title: DS.attr() }); // And the image’s url property export default DS.Model.extend({ url: DS.attr() }); Generate our final models.
- 28. 28 ©2016 Acquia Inc. — Confidential and Proprietary Taking the concept farther Drupal’s Views and blocks are also available as resources through the JSON API module. The API is now in place to use Drupal’s content in other applications.
- 29. 29 ©2016 Acquia Inc. — Confidential and Proprietary Questions? Resources: JSON API Specification http://jsonapi.org/ JSON API for drupal https://www.drupal.org/project/jsonapi CORS for drupal https://www.drupal.org/project/cors Ember http://emberjs.com/
- 30. 30 ©2016 Acquia Inc. — Confidential and Proprietary Thank You Brian Reese - Senior Developer brian.reese@gmail.com github.com/darkcody
Editor's Notes
- Growing market, and for good reason: -
- Digital Signage is a growing market, and for good reason: Today’s consumers are more demanding, and their access to information is greater than it has ever been before. At it’s most basic, the medium is cable of vibrant, dynamic content in prime locations But the nature of digital signage allows for delivery of the most current and relevant information for a consumer, in ways other marketing experiences simply cannot compete with. Targeted communication - Well placed (and well timed) messaging can influence buying decisions. Brands can meet consumers at the point of influence, which is often in store for retail Great medium for increasing brand awareness Generally represents a powerful communication tool - when used most effectively, it has the ability to not only inform, but engage a target audience. (Next slide: nike & new balance)
- -These kiosks from new balance and nike seek to provide more than just information. They seek to engage their customers, and provide a highly personal and memorable experience. While digital signage, and the technology behind it, comes in many forms, it’s these types of high-engagement, highly personalized experiences, and how Drupal can help you get there Agenda: Brief case study Where does Drupal fit in An example (using json API and ember)
- - Technical background notes – tie in to the larger idea of headless drupal? Pros/cons of a decoupled architecture? Project background My Wife, AF Band I'm an ex-musician, do a lot of freelance work for musicians... Project started as a POC that the Band really ended up liking In some of our initial conversation on the project, we talked a bit about what they'd be looking for from the kiosk (advance) Checklist In this casePretty straight forward requirements, without a lot of constraints allowed me to begin with a design and determine the best technical approach afterward The original POC actually didn’t involve drupal at all, but we quickly discovered the band’s legacy CMS would not be updated to provide the types of services the design required Pivot to Drupal
- The Kiosk’s services, at a high level This graph attempts to show how and where the various content channels fit in to the kiosk’s design. (CLICK FOR RED HIGHLIGHT)
- Drupal was a drop-in solution to a content management problem The content management tools Drupal provided out of the box were already a welcome improvement over the client’s own cms The “content migration” aspect of the project, though initially not planned for, was still manageable and a relatively light lift, thanks in part to feeds For this project, most of the work on the drupal end was configuration. There was a little bit of code to write to handle the content migration, and the rest was building the custom API
- The move from AFPIMS to DRUPAL didn’t involve a lot of rework In order to start working on the POC for the Kiosk UI, much of the API was already designed and stubbed out before the Drupal phase of the project began The Drupal project had full control of its fulfillment of that API. There are contributed modules that make it fairly easy to expose drupal’s content via a RESTful API (one we’ll look at in more detail shortly), but a custom implementation turned out to be a better fit for this project
- Cloud-based architecture = easy replication Originally intended to service a single location within the Concert Band’s performance space, the Band has been able to set up additional units, with very little overhead. Since it runs in a web browser, there’s very little to configure for each physical machine they add (TRIGGER ANIMATION) And content is easy to keep up to date and relevant. For the drupal platform, this is the Band’s ability to make personnel and ensemble updates in the CMS. But by and large, the other services the kiosk pulls from are key to keeping its content relevant – The band’s performance schedule, and it’s photos and videos, and social media
- Most of the lessons learned were on the javascript application side. However, a few definitely stand out and network connectivity was one of the biggest hurdles faced after launch: - The kiosk had a pre-determined home, predetermined hardware, and was tested pre-launch in the conditions it was intended for. - However, given one of the kiosk’s success was it’s portability, it was eventually deployed on tour with members of the band, and one of the tour venues had poor wireless network connectivity, which led to a poor user experience. They were able to switch to a wired connection at the venue, which resolved the issue, but it was not a scenario considered during the kiosks design and development While this can be true of anything leveraging web technology, it can be especially disruptive to the “app-like” feel we were aiming for. As a long term solution, we’re looking into Implementing better offline asset management (html5 offline storage)
- Demo time Scenario: Imagine a local grocery store with a large collection of recipes on its website wants to promote some its recipes in-store. Given the large amount of recipe data already maintained on the store’s drupal website, they’re looking for a solution to leverage their existing platform, while What is JSON API? 1. The specification JSON API is an emerging specification for REST APIs in JSON that dubs itself an “anti-bikeshedding tool,” Using it for this example because of it’s compatibility with Ember and Ember Data (which provides a default jsonapi adapter) 2. The Drupal module Exposes drupal entites as JSON API resources, with basically no configuration needed out of the box The module is still in beta
- Basic REST API provided out of the box, with the JSON API module gives us REST Resources for both config and content entities. Endpoints are
- Basic REST API provided out of the box, with the JSON API module gives us REST Resources for both config and content entities. Endpoints are
- Ember uses the handlebars templating engine. Our route gives us access to our model as the property model, and the curly braces tell handlebars to evaluate our variable rather than print the string directly.
- Configure the API endpoint with HOST and NAMESPACE values We’re also adding the _format=api_json query that the jsonapi serializer requires Also, since jsonapi represents resource names as type--bundle, and resource paths as type/bundle we make the replacement here whenever the pattern occurs. Likewise, the jsonapi specification calls for dashes instead of underscores (and we’re using underscores in our application), so we make that replacement too for api paths
- Here, we’re making similar dash- and underscore_ replacements for model names and attribute keys.
- Even though our route will not call them directly, the models for ingredient and file entites are necessary for the application to populate the relationship. Without them, our ingredient and image properties wouldn’t be accessible in our featured—recipe template
- While the demo code hardcodes the recipe we want to feature, views could be use to determine featured recipes, based off of popularity on the site, availability of ingredients, or any number of other factors
- This is the standard presentation ending slide.
- This is the standard presentation ending slide.