Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decoupled Drupal Showcase: Using Drupal to Power Digital Signage

1,282 views

Published on

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

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Decoupled Drupal Showcase: Using Drupal to Power Digital Signage

  1. 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. 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. 3 ©2016 Acquia Inc. — Confidential and Proprietary3 ©2016 Acquia Inc. — Confidential and Proprietary Inform + Engage
  4. 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. 5 ©2016 Acquia Inc. — Confidential and Proprietary Application + APIs AngularJS Drupal 7 Facebook Youtube Google Maps + Calendar
  6. 6. 6 ©2016 Acquia Inc. — Confidential and Proprietary6 ©2016 Acquia Inc. — Confidential and Proprietary
  7. 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. 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. 9 ©2016 Acquia Inc. — Confidential and Proprietary easier updatesCloud-based architecture = Success from the Kiosk Project easier replication
  10. 10. 10 ©2016 Acquia Inc. — Confidential and Proprietary Poor network connectivity ≠ poor user experience Lessons Learned
  11. 11. 11 ©2016 Acquia Inc. — Confidential and Proprietary Demo: A Drupal 8 + Ember Example Drupal 8 + JSON API Ember EmberCLI Ember Data
  12. 12. 12 ©2016 Acquia Inc. — Confidential and Proprietary JSON API Drupal 8 +
  13. 13. 13 ©2016 Acquia Inc. — Confidential and Proprietary Ember Data Ember + This Week’s Deals
  14. 14. 14 ©2016 Acquia Inc. — Confidential and Proprietary Content Model
  15. 15. 15 ©2016 Acquia Inc. — Confidential and Proprietary Modules
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30 ©2016 Acquia Inc. — Confidential and Proprietary Thank You Brian Reese - Senior Developer brian.reese@gmail.com github.com/darkcody

×