Skip to main content

Content Integration

tip

Although this introduction is focused for content API developers, It can be helpful to anyone who wants to understand how Zapp content integration works.

info

Understanding How content integration works might require some reading, but once you understand its concepts you'll have in your hands a powerful tool that will allow you to design & structure your app in ways that are not available on other platforms without custom development.

The Zapp platform is a SASS for building and maintaining content based apps. Each customer comes with its own set of requirements and integrations and content structure. Because of that, we built a plugable framework called Pipes2 that translates your custom data APIs and structure to a protocol the apps can understand.

This framework is a cloud middleware that its main purpose is to translate your content. Using Pipes2 framework we achieve the following benefits:

  • Pipes2 framework is served on the cloud, so there is no need to code anything on the app binary.
  • Pipes2 implementation is written once to serve all our supported platforms (Apple Mobile, Android Mobile, Apple TV, Roku, Amazon Fire, Samsung, LG & Android TV )
  • Changes toPipes2 are done remotely without needing to release a new version of the app.
  • Capable for providing a caching layer to your API.
  • Capable for providing a monitoring tool to your API health.

How Zapp apps consume data?​

All Zapp apps on all platforms consume data in the same way; All apps are composed form screens that are composed from components.

What is a Component?​

On most scenarios a component is a UI entity that holds a list of content teasers, e.g. a list of shows, or a list of videos or web links. The UI representation of a component is very flexible (e.g. vertical list, a rail, a grid etc). Each of those teasers are linked to the relevant screen that will be opened when the teaser is tapped/clicked.

For a component to be able to display the list of teasers it needs to call an API request that its response will deliver the data to render the list of items (e.g. its title, its description, its thumbnail and what screen to open). We call those API calls Feeds and the Zapp CMS user needs to attach them to any component s/he creates inside the Zapp Studio.

What is a Feed?​

As mentioned above, a feed is an API call that returns an array of items (teasers) to be populated by a component.

Each feed is represented as an https URL you can open in the browser.

The feed returns a JSON that needs to follow a specific schema. In the Feeds section of the Zapp CMS there is a place to manage those feeds. The Zapp user has the option to create both static and dynamic feeds according to its needs, and then use them to populate the components data field in the Zapp Studio.

Static Feed - A static feed is an https URL that its parameters are hardcoded in the URL itself. There is no option to manipulate it when integrating it inside the UI component. A good example of a static feed can be Featured Items https://example.com/api/featured-items.json or All Shows https://example.com/api/all-shows.json

Dynamic Feed - A dynamic feed is a feed that one or more of its parts is set with a variable that can be configured inside the UI component. A good example of dynamic feed can be Show Episodes https://example.com/api/episodesByShowId/{showId}.json. As you can see in the example the showId is passed as a variable. Using dynamic feeds Zapp offers a way to create templated screens, like show screens, that can be configured once and be populated with the right info by a given showId`. The concept may be hard to grasp at first but if we didn't have this option a Zapp user, for example, would have to create the same show screen over and over again for each show.