Episerver Headless CMS Nicola Ayan – Aria Zanganeh Simple Idea Service Winter 2018 zanganeh@gmail.com @zanganeh

me Love technology Love to work with teams Love GOOD frameworks (read Episerver) Solution architect Freelancer

What is headless means? A Headless CMS is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device. The term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository).

Why we need it!? 1 HTML and Web is not comprehensive enough and very expensive 2 New Channels (mobile, watch, bots!) 3 Many routrips for user to find the data he/she needs 4 Security issues C# web application heaps of energy to generate HTML, JS, CSS deliver heavy HTML, JS and CSS to client Heaps of energy on the client to interpret and render HTML, JS and CSS Building HTML is complex HTML is built many years ago and will be not relevant any more Needs to do many rountrip to fetch some data that user need! Security on top of all of these issue New channels - mobile - watch - Bots

“By 2020, 30% of web browsing sessions will be done without a screen” Source: Gartner’s top strategic predictions for 2017 A Headless CMS is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device. The term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository).

Episerver Content Delivery API free fast and scalable as it relies on Episerver Find support odata prooven query language (filter, sort) support most of episerver common functionality out of the box: - multi-lingual - access control - personalization

Microsoft Bot Framework Web App 1 SydMeetup.PlacesDirectory Web App2 SydMeetup.PlacesDirectory.Bot Cortana Web Teams Skype

DEMO TIME - how to install - still in beta - install nuget package - Install-Package EPiServer.ContentDeliveryApi - https://nuget.episerver.com/package/?id=EPiServer.ContentDeliveryApi - initialie api: (show in code) context.InitializeContentApi(); context.InitializeContentSearchApi(); - enable CORS: GlobalConfiguration.Configure(config => { //Other config settings may already be here, but ensure these are added: config.MapHttpAttributeRoutes(); config.EnableCors(); }); - give access right - re-index epi find (to make sure the content for content delivery is injected to documents) - Introduce bot emulator Run both projects (web app 1,2) Use bot emulator Run bellow commands: = what places you have? = trading hours of William Blue Dining please = address of William Blue Dining

Questions! Thanks for Watching https://github.com/zanganeh/SydMeetup.PlacesDirectory.Bot https://github.com/zanganeh/SydMeetup.PlacesDirectory