Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Doing more with apps: How to build your first Contentful dashboard

Doing more with apps: How to build your first Contentful dashboard


Contentful Webinars

October 15, 2020

More Decks by Contentful Webinars

Other Decks in Technology


  1. 1 1 TECHNICAL WEBINAR SERIES Doing more with apps: How

    to build your first Contentful dashboard Artas Bartas | Product Marketing Manager John Whiles | Software Engineer
  2. Housekeeping • This webinar is being recorded; we will share

    the recording and slide deck with all registrants shortly -- keep an eye on your inbox! • Please add your questions in the Q&A box, we will answer them after the presentation during the Q&A session at the end • To get in touch, write to us at team@contentfulmail.com Before we dive in... 2
  3. Speakers 3 John Whiles Software Engineer Artas Bartas Product Marketing

  4. Contentful app framework A 5-min introduction

  5. App framework supports diverse use cases Create a new stack,

    customize the authoring process, define a workflow and more 5 Marketplace apps Community apps Private apps
  6. Installing apps Marketplace apps are fast-tracked for installation 6 Marketplace

    apps are discoverable under the Apps tab and can be installed directly.
  7. Installing apps Community and private apps require a 2-step installation

    7 For private and community apps, install an app definition under your organization settings and then install the app into your space. 1 2
  8. App definition: describes general app details: its name, location(s), trigger

    events, and hosting URL. App configuration (installation): describes instance-specific details: content types to use, the right folder/ project, display preferences, etc. App definition vs. configuration 8 App definition App configuration (installation)
  9. Anatomy of the app Understanding the app architecture and supported

    use cases 9 App frontend: the app is scoped to a user session and can perform tasks only in the presence of the user. App backend: the app has its own identity and can perform tasks independently of the user.
  10. Empower individuals to do more App frontend

  11. Authoring tools Entry field, Entry editor locations 11 • Offer

    custom inputs • Manage groups of fields • Add conditional logic • Integrate product pickers
  12. Contextual info and custom controls Entry sidebar 12 • Visualize

    relevant contextual information (SEO, errors, analytics) • Create custom controls for publishing and managing entries
  13. Browsing and selecting external assets Dialog location 13 Provide an

    immersive way of browsing and selecting external assets.
  14. Space tools and global information Page location 14 • Provide

    power tools for managing your space and doing migrations • Embed onboarding guides and educational resources • Build dashboards, status reports and dynamic activity feeds
  15. App backend Help teams achieve their goals 15

  16. Storing secrets 16 Keep your keys, tokens, secrets and other

    sensitive information secure.
  17. Automated workflows 17 Define internal workflows, post status updates, initiate

    follow up actions, execute batch updates and more.
  18. Responding to internal events 18 Take action based on internal

    triggers: any action happening across content types, entries and assets.
  19. Responding to external events 19 Take action based on external

    triggers and/or predefined schedule.
  20. Hosting your app 20 and more...

  21. • Open-sourced field editors • Forma36 component library • Create-contentful-app

    • App templates • UI Extension SDK • Node Apps Toolkit Tooling and resources 21
  22. Example app Building the analytics dashboard for your space 22

  23. 23 Example website

  24. App UI 24 Contentful Google Analytics Click-through to the entry

    Click-through to the page
  25. App architecture High-level overview of what we are building 25

    Contentful space Google Analytics App backend component App frontend component
  26. Live demo: Dashboard 26

  27. The frontend 27 • Built in React • Is rendered

    inside of the Contentful website, in the Page and Config locations • The Frontend app uses create-contentful-app, forma-36 and the ui-extension-sdk
  28. The frontend Defining app locations 28 • Locations are where

    in Contentful our app can be rendered • Depending on the location we render the appropriate React component
  29. The frontend Setting up the page location 29 • Our

    page component is a React class • It tracks whether we have established a connection with our backend
  30. The frontend Rendering the page location 30 • What is

    rendered depends on whether we have connected yet • Until a connection is established, we show a loading indicator • UI components come from Forma-36
  31. The frontend The Dashboard 31 • This Dashboard is only

    rendered once a connection is established • It receives data from our backend, and saves it in state
  32. The frontend The Dashboard 32 • This component is rendered

    for each entry in the data • Once again Forma-36 is used to achieve the correct look and feel • The base URL of our website is extracted from the app’s parameters
  33. The backend 33 • The backend supports our Frontend with

    structured data • Data is aggregated from Contentful and Google Analytics • App Events are used to allow for updates when new content is published
  34. The backend Creating a management token 34 • The node-apps-toolkit

    is used to generate a management token • The management token allows us to access Contentful’s APIs
  35. The backend Retrieving data from Contentful 35

  36. The backend Retrieving data from Google 36 • Connecting to

    Google requires information saved as part of our App Installation
  37. The backend Retrieving data from Google 37 • Once we

    have our AppInstallation, we can use it’s parameters to build our request to Google Analytics • Using Google Analytics also requires authenticating the app with Google
  38. The backend Formatting the data 38 • Unpublished entries are

    excluded • Data from Contentful and Google is merged into a usable format
  39. The backend Updating the frontend when entries are published 39

    • When an event is received, we update connected frontend clients using the data generated in the previous slides • We update clients based on space and environment, meaning the app can be used in multiple spaces
  40. App definition 40 Basic information about our App: • Hosting

    • App locations • Key pairs • App events
  41. App installation Environment specific configuration 41 App Installation is used

    to store environment-specific data: • Google view id • Website base URL • Content Types we’re interested in
  42. Live demo: definition & configuration 42 • Managing the AppDefinition

    • Creating an app key • Selecting AppEvents • Configuring an app
  43. 43 Questions? Please type your questions in the Q&A box.

    If we don’t have time to get to your question, please reach out to us at team@contentfulmail.com
  44. Next steps If you built an app and want to

    contribute to the ecosystem or share your story 44