Chapter 5 of the AEM Headless tutorial covers creating the Page from the Templates defined in Chapter 4. The page create in this chapter will act as the JSON HTTP end-point for the Mobile App.
The page content architecture of /content/wknd-mobile/en/api
has been pre-built. The base pages of en
and api
serve a architectural and organizational purpose, but are not strictly required. If API content may be localized, it is best practice to follow the usual Language Copy and Multi-site Manager page organization best-practices, since API page can be localized like any of AEM Sites page.
The project provides CSS in order to provide some basic styles for the author experience.
Edit the Events API page by navigating to AEM > Sites > WKND Mobile > English > API, selecting the Events API page, and tapping Edit in the top action bar.
Add a logo image to display in the app by drag-and-dropping it from the Asset Finder onto the Image component placeholder.
/content/dam/wknd-mobile/images/wknd-logo.png
.Add tag line to display above the events.
The WKND is here.
Select the events to display:
The JSON output and its format can be reviewed by requesting the Page with the .model.json
selector.
This JSON structure (or schema) must be well understood by consumers of this API. It is critical API consumers understand which aspects of the structure are fixed (ie. the Event API’s Logo (Image) and Tag live (Text) and which are fluid (ie. the events listed under Content Fragment List component).
Breaking this contract on a published API, may result in incorrect behavior in the consuming Apps.
In new browser tabs, request the Events API pages using the .model.json
selector, which invokes AEM Content Services’ JSON Exporter, and serializes the Page and Components into a normalized, well defined JSON structure.
The JSON structure produced by these pages is the structure consuming apps must align to.
Request the Events API page as JSON.
The result should appear similar to:
This JSON can be output in a tidy (formatted) fashion for human-readability by using the .tidy
selector:
Optionally, install the com.adobe.aem.guides.wknd-mobile.content.chapter-5.zip content package on AEM Author via AEM’s Package Manager. This package contains the configurations and content outlined in this and preceding chapters of the tutorial.