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

Slide 1

Slide 1 text

1 1 TECHNICAL WEBINAR SERIES Doing more with apps: How to build your ﬁrst Contentful dashboard Artas Bartas | Product Marketing Manager John Whiles | Software Engineer

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Speakers 3 John Whiles Software Engineer Artas Bartas Product Marketing Manager

Slide 4

Slide 4 text

Contentful app framework A 5-min introduction

Slide 5

Slide 5 text

App framework supports diverse use cases Create a new stack, customize the authoring process, deﬁne a workﬂow and more 5 Marketplace apps Community apps Private apps

Slide 6

Slide 6 text

Installing apps Marketplace apps are fast-tracked for installation 6 Marketplace apps are discoverable under the Apps tab and can be installed directly.

Slide 7

Slide 7 text

Installing apps Community and private apps require a 2-step installation 7 For private and community apps, install an app deﬁnition under your organization settings and then install the app into your space. 1 2

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Empower individuals to do more App frontend

Slide 11

Slide 11 text

Authoring tools Entry ﬁeld, Entry editor locations 11 ● Offer custom inputs ● Manage groups of ﬁelds ● Add conditional logic ● Integrate product pickers

Slide 12

Slide 12 text

Contextual info and custom controls Entry sidebar 12 ● Visualize relevant contextual information (SEO, errors, analytics) ● Create custom controls for publishing and managing entries

Slide 13

Slide 13 text

Browsing and selecting external assets Dialog location 13 Provide an immersive way of browsing and selecting external assets.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

App backend Help teams achieve their goals 15

Slide 16

Slide 16 text

Storing secrets 16 Keep your keys, tokens, secrets and other sensitive information secure.

Slide 17

Slide 17 text

Automated workflows 17 Define internal workflows, post status updates, initiate follow up actions, execute batch updates and more.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Responding to external events 19 Take action based on external triggers and/or predeﬁned schedule.

Slide 20

Slide 20 text

Hosting your app 20 and more...

Slide 21

Slide 21 text

● Open-sourced ﬁeld editors ● Forma36 component library ● Create-contentful-app ● App templates ● UI Extension SDK ● Node Apps Toolkit Tooling and resources 21

Slide 22

Slide 22 text

Example app Building the analytics dashboard for your space 22

Slide 23

Slide 23 text

23 Example website

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

App architecture High-level overview of what we are building 25 Contentful space Google Analytics App backend component App frontend component

Slide 26

Slide 26 text

Live demo: Dashboard 26

Slide 27

Slide 27 text

The frontend 27 ● Built in React ● Is rendered inside of the Contentful website, in the Page and Conﬁg locations ● The Frontend app uses create-contentful-app, forma-36 and the ui-extension-sdk

Slide 28

Slide 28 text

The frontend Deﬁning app locations 28 ● Locations are where in Contentful our app can be rendered ● Depending on the location we render the appropriate React component

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

The backend Retrieving data from Contentful 35

Slide 36

Slide 36 text

The backend Retrieving data from Google 36 ● Connecting to Google requires information saved as part of our App Installation

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

The backend Formatting the data 38 ● Unpublished entries are excluded ● Data from Contentful and Google is merged into a usable format

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

App deﬁnition 40 Basic information about our App: ● Hosting ● App locations ● Key pairs ● App events

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Live demo: definition & configuration 42 ● Managing the AppDefinition ● Creating an app key ● Selecting AppEvents ● Configuring an app

Slide 43

Slide 43 text

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]

Slide 44

Slide 44 text

Next steps If you built an app and want to contribute to the ecosystem or share your story 44