How to build your first app with Contentful's new App Framework

Transcript

1. 1 How to build your first app with Contentful’s new App Framework 1
2. Speakers 2 Rouven Wessling Director of Technology Partnerships EMEA, Contentful David Fateh Software Engineer, Extensibility, Contentful
3. Housekeeping • This webinar is being recorded; we will share the recording and slide deck with all registrants • Please leave your questions in the Q&A box, we’ll answer them after the presentation before we begin...
4. 4 1. The App Framework 2. Apps vs UI extensions 3. App Marketplace 4. Let’s build an app (Demo) 5. Resources 6. Q&A Agenda 4
5. 5 The App Framework 5
6. Our visions: stacks beat suites 6 Innovative companies will assemble their DXP, with a content platform at the center DX Suite DX Stack vs. Monolithic Marketing Suite
7. app_definitions ORG app_installations Management views ORG Forma 36 APP FRAMEWORK UI Extensions SDK Dialog & Page Locations 7 The App Framework are the tools to build apps Field & Sidebar Locations
8. 8 External Service CLIENT APP DEVELOPER EDITOR Apps enhance the content creation experience
9. Apps enhance the content creation experience 9
10. 10 Apps can extend different parts of the web app 10
11. 11 1. Entry field – Replace field of an entry Four locations an app can be rendered Entry field
12. 12 1. Entry field – Replace field of an entry 2. Entry sidebar – Replace the sidebar (parts or all) of an entry Four locations an app can be rendered Entry sidebar
13. 13 1. Entry field – Replace field of an entry 2. Entry sidebar – Replace the sidebar (parts or all) of an entry 3. Entry editor – Replace all fields of an entry Four locations an app can be rendered Entry editor
14. 14 1. Entry field – Replace field of an entry 2. Entry sidebar – Replace the sidebar (parts or all) of an entry 3. Entry editor – Replace all fields of an entry 4. Dialog – Float over the web app and can be opened from other locations Four locations an app can be rendered Dialog
15. 15 Apps can render their own configuration and installation screen Bonus location: App configuration screen
16. 16 Apps vs UI extensions 16
17. UI extensions are bespoke to a specific project 17
18. 18 ORGANIZATION Space App definition App installation Apps are defined in an organization...
19. 19 … and can be installed into many spaces ORGANIZATION Space App definition B App installation A App installation B1 Space App installation B2
20. 20 Environment awareness 20
21. 21 ORGANIZATION Space Environment App definition B App installation A App installation B1 Try out apps in different environments Space Environment App installation B2
22. 22 Apps can control their own installation experience 22
23. No more install from GitHub 23
24. Seamlessly install apps into spaces Both Marketplace apps and your organization’s private apps are available 24
25. 25 Apps Marketplace contentful.com/marketplace 25
26. Assemble a DX platform with content at the core Content Platform Commerce Marketing Translation Collaboration Analytics Optimization & Personalization Developer & Editor Productivity Digital Asset Management Deployment & Delivery Artificial Intelligence PUBLIC Public apps 26
27. The Contentful Marketplace Available on contentful.com/marketplace 27
28. Brandfolder AI Image Tagging Jira Google Analytics Smartling commercetools Shopify Netlify Optimizely Gatsby Cloud Cloudinary Bynder Dropbox Frontify Image Focal Point Commerce Layer 17 apps available today 28 Typeform
29. Some of these might look familiar 29
30. Everything is completely revamped 30
31. Available on GitHub Contributions welcome! 31 All current apps are open source
32. 32 What if I use a different tool? 32
33. 33 Let’s build an app! 33
34. Steps for app development 34 1. Use create-contentful-extension 2. Create an App Definition 3. Create a Config screen 4. Create a Field Entry widget 5. Create a dialog/modal for selection
35. 35 Demo 35
36. 36 Let’s recap 36
37. Building an app 37 1. Used create-contentful-extension 2. Created an App Definition 3. Created a Config screen 4. Created a Field Entry widget 5. Created a dialog/modal for selection
38. 38 Wrap-up 38
39. The Marketplace is invitation only 39 If you want an invite let me know or fill out the Publish an app form. You can reach me at rouven@contentful.com
40. Resources • App Framework Overview • Build your first app • Converting an UI extension to an app Development • App Marketplace • Publishing an App • Open source apps on GitHub Marketplace 40
41. 41 Q&A 41
42. 42 If we didn’t get to your question - reach out team@contentfulmail.com 42