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

Doing more with apps: How to build your first C...

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

Contentful Webinars

October 15, 2020
Tweet

More Decks by Contentful Webinars

Other Decks in Technology

Transcript

  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 [email protected] Before we dive in... 2
  3. 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
  4. Installing apps Marketplace apps are fast-tracked for installation 6 Marketplace

    apps are discoverable under the Apps tab and can be installed directly.
  5. 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
  6. 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)
  7. 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.
  8. Authoring tools Entry field, Entry editor locations 11 • Offer

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

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

    immersive way of browsing and selecting external assets.
  11. 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
  12. Responding to internal events 18 Take action based on internal

    triggers: any action happening across content types, entries and assets.
  13. • Open-sourced field editors • Forma36 component library • Create-contentful-app

    • App templates • UI Extension SDK • Node Apps Toolkit Tooling and resources 21
  14. App architecture High-level overview of what we are building 25

    Contentful space Google Analytics App backend component App frontend component
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. The backend Retrieving data from Google 36 • Connecting to

    Google requires information saved as part of our App Installation
  24. 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
  25. The backend Formatting the data 38 • Unpublished entries are

    excluded • Data from Contentful and Google is merged into a usable format
  26. 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
  27. App definition 40 Basic information about our App: • Hosting

    • App locations • Key pairs • App events
  28. 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
  29. Live demo: definition & configuration 42 • Managing the AppDefinition

    • Creating an app key • Selecting AppEvents • Configuring an app
  30. 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 [email protected]
  31. Next steps If you built an app and want to

    contribute to the ecosystem or share your story 44