Skip to content

Home

Jump to bottom
Anthony Li edited this page Feb 18, 2025 · 1 revision

This documentation will provide instructions on how to create a basic app that is capable of integrating with the flyer-kit api and render the Flipp StoreFront Markup Language (SFML). This markup language has been designed to provide a natural scrolling experience on mobile devices and to give retailers a more customizable interface for publishing content.

Setup consists of 2 main steps

  1. Integrate with skit (the SFML-kit library) to provide native rendering of SFML documents
  2. Integrate with flyer-kit to provide api access to publication data

SFML Overview

The SFML spec allows traditional print formatted material to be reformatted to be displayed vertically which is better suited for a mobile display. Every flyer that is fed into the Flipp ecosystem will be processed to produce a .sfml file which acts as a replacement for the original paper flyer.

Contained in the .sfml file is all the information to render a given flyer but this does not include any user persisted state (eg: Clippings) associated with the flyer. That information must either be persisted in the app or through the Flipp Flyer-Kit API.

Skit Overview

For ease of development we have provided an Android library that is capable of reading an sfml file from a provided url and build a natively rendered view.

The library provides the following features:

  1. Given a URI to a SFML file it will parse and return an Android View that can be inserted into a layout for display
  2. Callback hooks are provided to detecting the following user actions:
  • Scroll callback
  • Clicking on an item in the view
  • Long press on an item in the view
  • Pinch to Zoom functionality
  • Image optimization to minimize required memory while zooming and scrolling

App Overview

For our sample app we will provide the following key features.

  1. Listing of all available flyers
  2. Rendering of SFML content and user interactions with SFML
  • Clipping/Unclipping or items
  • Clipping Load to Card coupons
  • Example Analytics
  1. Example Item Details

While the choice of networking is up to you, we will demonstrate how to access all API calls using the Android Volley library. To facilitate development we have also included a simple wrapper class to generate all the network requests needed. This wrapper is not exhaustive.

  • Sample app in this (android-skit-example) repo is developed completely using Java
  • For Kotlin (and additional Java) example on how to fetch and parse storefronts, please refer to skit2demo
Clone this wiki locally