Introduction to Mobile App building with Applicaster Quick Brick

Introduction

This article lays out the basic principles of building mobile apps with Applicaster tools and helps make sure you have the right elements and approach in place before beginning the actual process of app building. 

Links are provided to a topic's more detailed support page.

Terms you will hear

Zapp Quick Brick

QuickBrick is a UI framework on top of all native platform SDKs supporting React / React-Native

• iOS, tvOS, Android, Android TV, Amazon Fire TV, Tizen (Samsung) and WebOS (LG)
• NOTE: The Roku platform is not Java Script compatible and so cannot use React Native components however,
  • It is supported by the full Applicaster Development Environment described below.
  • Roku UI creation is managed with a specific set of UI component plugins that work in a similar way from an app designer and builder point of view to other apps.

As a result, QuickBrick apps provide great flexibility and velocity in the development of apps 

• One layout across all mobile devices and another single layout across all TV devices
• Speedy development of any custom UI related features, such as screens or feature plugins.

When creating a QuickBrick app, the UI is made of a single React Native root. QuickBrick has been designed from the start to provide a seamless user experience when comparing the resulting apps with fully native UIs and transitions, so users won't notice any difference. It will however provide a significant performance boost if your app is using many React Native UI components or plugins.

QuickBrick also enables building plugins to leverage features of the native Zapp SDKs, such as players, data sources, analytics, advertising, SSO, etc.

Zapp Dev Ops

This is

• The App build and management environment for all your mobile and TV apps, plugins and layouts
• Where Plugins are managed
• Where Feeds (content and metadata) are managed

Zapp Studio

This is where

• Layouts for all mobile and TV platforms are created and edited

Zapp Pipes / Data Sources

Zapp Pipes is the data loader mechanism for Applicaster Zapp apps which enables data source plugins. Data sources provide the connection to content and metadata to populate your apps.

You can use Zapp-pipes if you need multiple pluggable data sources for your app. Developer documentation for data sources is here. Zapp Pipes Developer Documentation

Who do I need?

Whether in house or contracted out, an app building team will consist of

Design resources

• Applicaster tools are constructed to bring to the very top the importance of design led apps and ultimately the quality of your app in the eyes of users is very much dependant on this. A good designer will be able to consider all the elements of
  • Brand presentation
  • Content discovery
  • Content presentation
  • User Experience (how well does the app meet its objectives in the hands and eyes of users)
  • User Interface (how well does the app present itself)
  • Best practise expected by Apple and Google App stores

Developers (optional)

• Applicaster Quick Brick apps come with a range of plugins for functions such as players, advertising, analytics, subscription management, access control and many others. However, the platform is completely open to developing a plugin for any function or 3rd party solution provider that may be required. For UI a React Native Java Script developer resource will be required to support this.
• Developers can read more about the technical side of Quick Brick here 
  • Developer Documentation

Commercial

Any app needs to have a business model

• Free
• Pay Per View
• Subscription
• Mixtures

And must be constructed in a way to support that business model both technically

• Access methods
• Content protection

And will also inform the design

• Content presentation to help drive discovery and views
• Sign up methods
• Help screens

What do I need?

The Applicaster tool set consists of

• The Zapp Build-Ops environment
  
  • App management
  • App building

• Applicaster Studio
  • The design tool for app construction across all mobile and TV apps
  • Plugin management
  • Feed management

Contact Applicaster support for your account

Your content and metadata may come from your own on-site or cloud-hosted OVP and Content Management Solution or may come from other 3rd party cloud-hosted service providers

• Content
  • Live and on demand audio-video sources
  • Images for each piece of content
• Metadata
  • The supporting information for content such as
    • Title
    • Information
    • Supporting data such whether items are programs, videos, shows, episodes, free, paid, on now, future etc.

Additionally, any access control will be managed by your own or a 3rd party Customer Management Solution.

The structure of an Applicaster Quick Brick App

An Applicaster App is built from a number of core building blocks.

Theme

The Theme is a plugin that contains some principal information about the app layout

• App background color
• Status bar background color
• Status bar theme
• Screen padding top
• Screen padding bottom
• Screen padding left
• Screen padding right
• Component margin top
• Component margin bottom
• Component padding top 
• Component padding bottom
• Component padding left
• Component padding right
• Component gutter vertical
• Component gutter horizontal

Default values that can be adjusted per app ensure an app will appear sensible when it is first built.

Screens

Screens are individual pages of an app that consist of content to be browsed and selected by the app user.

Content can be

• Live channels of video or audio
• On Demand video or audio content
• Banner advertising
• Web derived content

Screens may be individual, holding specific content that is launched when selected for example,

• A Football screen
• A Rugby screen

Screens can also be connected, such that the first screen encountered might be

• Sports
  • Selecting content in this screen launches another screen containing categories
    • Football
    • Rugby
      • Selecting a category item finally launches a content screen
        • Last Saturday's League One Matches

Components

Screen contain components. A component is a structure to hold pieces of content in themed way such as episodes, movies of a certain genre, promoted content such as "recently added" or "latest podcasts" The possibilities are endless.

Components can be

• Horizontal Lists Configure Quick Brick Mobile Horizontal List Component

• Vertical Lists Configure QB Mobile List Component

• Grids Configure Quick Brick Mobile Grid Component

• Heroes. A hero component is actually a Horizontal List with an item limit set to 1

Components can have headers that describe the content of the component.

Components can also be structured into groups of any number of components and the content distributed across them Using the Group Component e.g.

• A header for a title
• A Hero to promote a Show
• A Horizontal List of Seasons
• Selecting a Season opens another screen for episodes of that season

Cells

Components contain cells. In Applicaster language these are called Power Cells because they are so flexible. There are 3 types of power cell depending principally where the text and image sit in relation to each other and a 4th Power Cell for headers.

• Quick Brick Mobile Power Cell 1 Configuration
• Quick Brick Mobile Power Cell 2 Configuration
• Quick Brick Mobile Power Cell 3 Configuration
• Using the Group Component

Any Power Cell can be used in any component. Power cells are hugely flexible in terms of

• Image aspect ratio and size
• Lines of text
• Font types, size, weight, color
• Background color
• Focus states
• Overlays, badges, runtime indications
• Corner rounding
• Spacing between cells
• Scrolling behaviour on mobile (snap, float)

Below are some screen shots of how power cells have been styled.

Navigation

An app has a navigation method. A designer and app builder can choose from

• Side Menu Configure Quick Brick Mobile Side Menu 
• In-screen Tabs Configure Quick Brick Mobile Tabs
• Bottom Tabs [coming soon]

Side Menu

A list of screens is presented in an animated and scrollable side menu launched from the burger icon.

Top tabs

Related content such as a program guide or seasons of a show are distributed across the tabs.

Bottom Tabs [coming soon]

An alternative to the side menu for core app navigation. Screens may animate whilst tabs stay constant at the bottom or a new screen view may completely replace the tabs with new content.

Data Sources and Feeds

To populate screens, components and cells a content source is needed. In Applicaster language this is known as a Data Source Provider and contains a link to the end point for videos, metadata and supportive information for all the content.

A DSP enables the construction of feeds to populate components. A DSP may be constructed around your own hosted content or may be a 3rd party provider such as MPX, JWP, Brightcove and others.

Feeds can be constructed within the DSP to point to specific structures of content such as movies, shows, live etc. Feeds can be a

• JSON feed
• Atom feed
• XML feed

A feed may

• Directly retrieve specific video content to display straight into a component and launch videos when selected
• Might be a more complex structure that distributes the feed across a Show, Seasons and Episodes sequence of screens and components

The example below is a feed that is retrieving content of type All Movies from its data source provider. The feed contains

• The title "All Movies" to display in the screen's header
• A link to the source of the videos
• Movie titles
• Movie description
• Image source for the cell
• Runtime
• Any rating
• etc.

More developer documentation for DSPs can be found here Zapp Pipes Developer Documentation

{
 "type": {
 "value": "feed"
 },
 "title": "All Movies",
 "entry": [
 {
 "title": "A Christmas Blessing",
 "id": "http://data.entertainment.tv.theplatform.com/entertainment/data/ProgramAvailability/324725798530",
 "type": {
 "value": "video"
 },
 "summary": "For Cynthia Cleveland, she never imagined that at age 40, she’d find herself a widowed mother of four. But on Christmas Day, while others exchanged gifts and kissed their loved ones under the mistletoe, Cynthia and her children received news that they’d lost their husband and father, Charles, to the war in Afghanistan.",
 "media_group": [
 {
 "type": "image",
 "media_item": [
 {
 "type": "image",
 "src": "https://edge.tv-one-vod.top.comcast.net/TVOne/static/TV_One_-_TVE_VMS/229/735/Christmas_Blessing_-S_1_1200x1200.jpg",
 "key": "image_base"
 ],
 "content": {
 "type": "video/hls",
 "src": "https://link.theplatform.com/s/L9TCEC/media/1ZvjlOfDatN2"
 },
 "extensions": {
 "mediaRatings": "",
 "guid": "M_a-christmas-blessing",
 "runtime": 5096,
 "longDescription": null,
 "longTitle": null,
 "programType": "movie",
 "ratings": 
}
etc.

Specialist Functions and Screens

A number of specialist functions or screens are available to use in an app

• Search Adding a Search capability in a Quick Brick Mobile app
• Favourites Add Favourites to an App
• Webview components Web View Component in QB Mobile Apps
• Webview screens Full Screen Webviews in QB mobile apps
• Chromecast Chromecast on QB Mobile