AEM’s Content Services leverages traditional AEM Pages to compose headless REST API endpoints, and AEM Components define, or reference, the content to expose on these endpoints.
AEM Content Services allows for the same content abstractions used for authoring web pages in AEM Sites, to define the content and schemas of these HTTP APIs. The use of AEM Pages and AEM Components empowers marketers to quickly compose and update flexible JSON APIs that can power any application.
An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario.
In the AEM head list tutorial, we’ll explore how a native Android mobile app can consume content from AEM via AM content services. Over here on the right, I have my native Android mobile app running in an emulator. This app’s content is largely defined and driven by content authored in AEM. So for instance, we have a logo, a tagline, and then a series of events.
All this content is authored and managed in AEM, and exposed to this mobile app via AEM content services. So let’s jump over to AEM, and take a quick look at what we’ll be building. The first thing we’ll take a look at is content fragment models, and the content fragment models are what defines the data model for the events that will be displaying on our mobile app.
So we’ll go through creating an event model, has a number of fields that will be used to collect the event content to display on the mobile app.
We’ll create a number of content fragments themselves.
As you can see here, we have the event content fragment for the dance dance event.
So we have the event title, the description, the date and time, the type, the venue, the image, et cetera. All of the content displayed in the mobile app is sourced from this content fragment.
After we have our event content fragments, we’ll be creating AEM content services API endpoint to expose this data as Jason to the mobile app. So for this, we’ll head over to sites, and we’ll be creating a events page that will act as this endpoint.
If we edit this, you can see it actually looks very similar to a normal AEM page. It has the components that we can drag and drop in, along with assets.
So for our mobile app, we’ll be exposing an image component for the logo, a text component for the tagline, and then a content fragment list component to list all of the content fragments in our events folder.
Let’s take a quick look at this in action. So, the first thing we’ll do is head back to our content fragments and unpublish one of the content fragments, and in doing so we should see it fall off our mobile lab experience.
So for this, I’ll select our dance dance event content fragment, and simply unpublish it.
I can now refresh the mobile app, which will pull fresh data from AEM publish. And as you can see, our dance dance event has dropped off the list.
Likewise, we can create a new content fragment.
And when we’re ready to expose this to our mobile app, we simply have to publish it from our AEM author instance to our AEM publish. Now, again, when we refresh the app, you can see that our new content fragment displays.
All right, the last thing we’ll take a look at is how we can update some of the more marketing oriented aspects in a mobile app. In this case, we’ll change the tagline. So for this, we’ll head back to our events API page.
And doing this is as simple as changing the text in our tagline text component.
Remember to always publish your changes.
And again, simply pull to refresh, and the mobile app is now consuming the updated content. All right, I hope that gives you a good idea of what we’ll be doing in this tutorial, have fun. -
This tutorial explores how AEM Content Services can be used to power the experience of an Mobile App that displays Event information (music, performance, art, etc.) that is curated by the WKND team.