Contentful is a popular headless CMS (Content Management System) that offers several advantages, especially for businesses and developers looking for flexibility and scalability in content management. A Content Management System (CMS) is a software platform used to create, manage and modify digital content without requiring deep technical knowledge. It simplifies the process of building and maintaining websites or apps by providing a user-friendly interface, workflow automation and content management features. This allows you to separate your app's design from the content, making the design a template that displays your content - perfect for when content is updated frequently.
Any headless CMS can be integrated via the API, but we have created a user-friendly, non-technical integration specifically for Contentful.
Create a content model: Contentful Content Models
Open your project settings within Your App Creator.
Select Contentful from the Third Party Plugins.
Click Enable, then fill in the required fields, which can be found in Contentful.
Open Contentful
Click the settings gear icon.
Click API Keys.
Click Add API Key in the top right.
Name your key.
Copy Space ID -> Space.
Copy Content Delivery API - Access Token -> Access Token.
Copy Environments (usually master, unless you have created a new one) -> Environment.
The next step is to tell Your App Creator what content to load.
Open Your App Creator Editor.
Open the Data Center.
Open Contentful on the sidebar.
Click Add.
Give your request a name.
Enter the Model(this must match the model ID from Contentful).
Select By IDto load a single entry or Queryto load all models.
Next, we need to define the model:
Switch from the Querytab to the Response tab.
Add a value for every field in Contentful.
As your app will be based on data in Contentful, it is helpful to fill in a Preview Value, as this will be used when you are creating your layout in the editor.
The final step is to load the data and display it.
Add a Data Loader component.
Set the Loader to the data source created above.
If you are loading more than one model (which will be the case if loading by Query with a limit greater than one), you will need a Repeating Item component to layout every item. (If you are loading by ID, this can be skipped).
Add Repeating Item into the Data Loader's Container.
Set the Pathto the name of the content model.
Now you can start creating the layout for your content model.
Start adding components to the Repeating Item's Containerand use the Datadrop-down to select values that will be loaded from Contentful. The values that show will be what you set as Preview Values before.
Tip: You can change the number of times the preview item is shown by changing Repeat Preview Data on the Repeating Item component, allowing you to see how your app will look with more of content.
Now, get creative!