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

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 team@contentfulmail.com Before we dive in... 2
3. Speakers 3 John Whiles Software Engineer Artas Bartas Product Marketing Manager
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