Contentful - CMS for Angular Progressive Web Apps

Key Takeaways

in the 90s we had static websites in the 2000s we had WordPress and today we have programmable content with content full it works by treating all of your static content like an API let's imagine your product consists of an angular progressive web app a native mobile app and an electron desktop app contentful serves as a centralized source for all of your content so anytime something changes you don't have to redeploy every app individually in this episode I'm going to show you how to use the platform with an angular 5 progressive web app and broadcast push notifications out any time new content is published before we get started I wanted to say thank you to lifetime pro member frantic they're building amazing enterprise great apps using similar technologies to what I show you here if you're looking for inspiration for modern web app development be sure to check out their portfolio to get started with this tutorial you'll need to first sign up for a free content full account and the first thing you'll do is create a space for your content spaces allow you to organize your concerns for example you might have one space for blog post and another space for product listings in this example I'm going to create a lesson space that will mirror the content that you'll find on angular firebase com the next step is to create a content type so in this case our content type is going to be a lesson but you might also have content types for the author profile or a category listing or any other chunk of content that you can imagine after you've created your content type the next step is to add some fields to it a field would be any property related to your actual content type so in this case we're going to set a title field the beauty of this platform is that you can standardize and validate each field doing this from scratch would be a ton of extra work for a developer the end result is a consistent blueprint for your content that you can handle differently on any platform after you have your blueprint created you can then use content foulest text editor to easily add new content this is a powerful feature when you have team members who create content for your apps but aren't actually programmers so your content creators get this text editor and your programmers don't have to worry about building one from scratch that sums up the basic process for building content with content full now let's switch over to angular and action use this in our progressive web app I'm starting from a brand new angular app so run ng new and then CD into the app and then the only dependencies are content full and a library called marked which we're going to use to convert markdown to raw HTML then to interact with the API I'm going to create a service called content fold and make sure to add that to the app module from there go back into content full and go to the API tab then copy the space ID and the content delivery token then you'll add these to your environment TS file inside of angular make sure that you're using the content delivery token you don't want to expose any API token that has right access to your content 'full api from here we're going to jump into the service and the first thing we'll do is import the content full sdk and we also need the environment variables that we just configured as well as the rxjs observable class so the first thing we need to do is initialize the sdk client we do that by calling content full create client along with our space ID and our API token the first thing I want to do is console log out the content just so you know what the actual JavaScript object looks like we can retrieve a single piece of content which in this case is our lesson by calling client get entry with the entry ID that's going to return a promise which will resolve with the actual lesson content that we want to use this method I'm going to switch over to the app component then I import the service and I set up a variable here as an observable that will hold our lesson content here in the next step then we can inject the service in the constructor and during ng on an it will call the method that we just defined which will log the content in the browser console each piece of content is assigned a unique ID so I'm just copying and pasting that is the argument to our method if we load the app you see we get the content here logged in the console it has two main properties the fields property is all of our content this is the actual data that we want to show to the user in the front end it corresponds exactly to that field types that you defined in content pool it also has a system which has some additional metadata about the content you may or may not want to use this depending on your particular use case now that we know what the content looks like let's convert it into an observable so it's more angular friendly so I'm creating a get content method here which will first define the promise in a variable it's calling the same client get entry method with the Content ID then we can convert it to an observable by calling observable from promise and then I'm going to map it down just to the fields that's the content that we want to show the end user we don't really need that extra metadata to make use of it I'm switching back to the app component then I define the lesson variable by calling this method with the corresponding Content ID now we can treat it like a regular observable in the HTML if you're already familiar with angular this code should look very familiar to you so first we'll unwrap the observable by calling ng if and then use the async pipe and then we'll set it to a template variable called lesson from there it's extremely easy to just call the lesson properties directly on the object so we'll display the lesson title then created at timestamp is a JavaScript date object so we can use the angular date pipe to display that in a user-friendly way the lesson tags are saved as an array and content full so we can loop over those tags using ng for then the only issue we're going to run into is when we display the lesson body and I'll show you why here in just a second here's what we have so far in angular our title and our tags look great but if you look closely at the body it's written in markdown format it's just a raw string instead of the actual HTML that we want to display to the user in the front end when you write markdown it looks like this but angular has no way of parsing this automatically what we're going to do is create an angular pipe called MD to HTML and it's going to take advantage of the marked library we installed earlier to parse the markdown to HTML first I'm going to go back into the service and we're going to import the marked library there I'm defining this method in the service just to make it a little more flexible to work with so it just takes a markdown string as an argument and then it calls the marked library to convert it to HTML then we can import the content full service inside of our pipe and we'll inject that into the instructor just like we wouldn't a component then all we have to do is take the input value and call the method we just created in the service on that value then we can add the pipe to our lesson body but it's still only going to display a string so at this point we just have a string of HTML code what we can do is bind this to the inner HTML property on a div this will render it as actual HTML elements which is what we want to display to the end-user but just a quick warning you always want to make sure that the source of the HTML comes from a trusted location if users generate this content you want to make sure to sanitize it to avoid being vulnerable to cross-site scripting you can read more about this in the official Docs if we go back into our angular app you can now see that our links and our headings are displaying like normal HTML just like that we now have a powerful content management system to organize content in our progressive web app but I did promise you one more thing and that's sending push notifications anytime new content is created in content full I don't have time to show you push notifications and to end but I do have multiple lessons covering that topic on angular firebase com what I am going to show you is how to set up web hooks in content full and then broadcast notifications using firebase Cloud messaging back in angular I have firebase cloud functions initialized in my project then I'm going to write a function that uses the admin SDK we're going to listen for web hooks from contentful and when we receive one we're going to parse it and then broadcast messages out to a certain topic the web hook is going to send us data whenever a new lesson is published all of the lesson details will be in the request body so we can say request body fields and the topic we want to send messages to is lessons then we can use this data to set the notification details so we'll say a new lesson posted and then we'll say angular firebase composted a new lesson about whatever the lesson title is and then we'll also add an icon to it then we can call the firebase messaging library and just call send a topic with that notification payload if you lost at this point make sure to check out some of my firebase push notification videos this is going to return a promise and if it's successful then we can say a successful response back to the webhook if the message notifications fail we can send an error response back to content full of telling it to retry the web hook if necessary and it's really that simple all we have to do is deploy the function then we'll go back into content full and tell it when and where to send the web hook after the function deploy succeeds make sure to copy and paste the URL that firebase gives back to you then back in content full you'll go into the space settings and then to web hooks and then we'll just give it a name of topic notifications then copy and paste the URL that firebase gave you back for that cloud function then we only want to send this web hook when new content is published so we can do that by going down to only selected events and then click the box that intersects entry and publish you can verify that the web hook works by going back into the content tab and then create a new piece of content after that you can go back to the web hooks screen and you should see a successful response from the cloud function it will show you the web hook body that was sent by content full and then show you the response that was received from firebase that's it for angular 5 with content pool if this video helped you please like and subscribe and if you want to learn more advanced features of progressive Web Apps consider becoming a pro subscriber at angular firebase comm you'll get a free copy of my book as well as one on one project support thanks for watching and I'll see you next time [Music] [Applause] [Music]