Mobile App for Moderation – The “kModerate” Case Study

by Gonen.Radai

 

This post presents a case-study of a Kaltura mobile application development. The selected Kaltura feature for this application was moderation – see Content Moderation Workflows for more information. We hope that after reading this post you will have a better understanding on how to develop your own mobile application that leverages Kaltura’s capabilities.

 

kModerate Entry Details Screen

 

How cool would it be if you could ‘moderate on the go’?

kModerate lets you do just that – using your mobile device, you can see the list of entries that requires administrator’s approval, see each entry’s details and play its video in order to decide whether to approve or reject each entry.

kModerate Overview

kModerate is an example of mobile based moderation tool. kModerate is essentially a web application, suited for running on mobile devices, that provides simple interface for content moderation in Kaltura accounts. (@Learn @more about web-applications for mobile devices).

Developing web applications is super easy and fun! And if you worked with Kaltura’s API, most chances are that you already know your way around HTML, JavScript and CSS, the building blocks of web development. Developing a Web App for mobile devices  is not more complicated than developing a regular web application. Thankfully, to support the various special features of mobile devices (such as touch-screen gestures, GPS, smaller screen size, common UI practices, etc.) there are frameworks that provide an easy jump-start. We’ll review the various frameworks in an upcoming post.

In iOS, WebApps can also be added to the home-screen. When a WebApp is added to the home-screen it also load without the browser interface which provide the WebApp with even a better feeling of a native app and more screen real estate to use!

iOS HomeScreen with kModerate app

 kModerate inside-out

kModerate was built using the Sencha Touch JS framework for mobile Web Apps development. The Kaltura features in kModerate were implemented using the Kaltura API Javascript client library. To learn more about developing apps using Sencha Touch, we suggest starting with the Sencha Touch Quick Start guide.

kModerate is built of 3 main panels (screens):

  • Login panel – where users input their KMC credentials (email and password) and login to the kModerate application.
  • Entry List panel – where users see all the entries that are pending for moderation. Tapping on an entry leads to the next panel, the Entry Details.
  • Entry Details panel – presenting the basic entry metadata. Here the video can also be played. Here the content administrator can also use the Approve or Reject buttons to moderate the entry.

The Login Panel

The login panel is built using Sencha Touch FormPanel. FormPanel includes a list of form-field items developers can use to create standardized native mobile app look & feel. The login form also includes a button, we set the tap handler (the form button click) to a separate function (loginClickHandler) that collects the input from the form fields and initiates the user.loginByLoginId API call to Kaltura in order to authenticate the user.

Usually, mobile apps default behavior of form submitting is triggered by tapping the “Return” or “Go” buttons in the virtual keyboard.
Setting the submit handler property, of the form panel object, to the same function (loginClickHandler) creates this behavior.

The Kaltura JS client library utilizes JSONP. When calling an API action, in addition to the call parameters and values developers also need to specify what will the callback function to be executed when the response is returned to the client. Upon a successful login, the returned KS (Kaltura Session) is stored in a global variable and the application loads the next panel (the Entry List panel). This is done in the loginCallback function, which was passed to the user.loginByLoginId API call as the callback function.

The Entry List Panel

Once authenticated (through the login form, or if we already have a valid KS from a previous login) the list of entries that are marked as pending moderation is fetched from Kaltura and displayed in the Entry List panel. Fetching the entry list is done by calling the baseEntry.listAction API call, with a pre-set filter to fetch media entries which are in status ready and their moderation status is either “pending moderation” or “flagged for review”. The list of entries is displayed by using Sencha Touch list object which is populated with data list. The data is an array of predefined data-model objects (called entryModel) which is registered at the beginning of the application. The entryModel determines the structure of an entry record in kModerate (i.e. what fields will it hold).

In the callback function when calling the baseEntry.listAction API (getEntrieListHandler) the returned array of KalturaMediaEntry objects is being “converted” into an array of entryModel objects:

The list object then provides an API for updating the data and refreshing the list in the view. In kModerate, whenever the list of entries needs to be fetched from Kaltura, the returned data is updated in the list object and when calling the refresh() action (on the list object) the view is updated.

Kaltura’s JS client library performs API calls asynchronously, which means that the data will be updated in the application only sometime after the panel is loaded and the response from the server was successfully received – These two conflicting behaviors raised an issue: When viewing the Entry List panel while it is being updated “in the background” (for example, after tapping the “refresh” button), the list would stay still until the API call returned and seconds later it would suddenly refresh to show the most up-to-date list of entries as retrieved from Kaltura. So to achieve a more sensible user-experience and avoid this “events chase” issue, an “updating…” panel is loaded whenever the list needs to be refreshed to let the user know of the action being performed. The Entry List panel will be loaded back to view once the response retrieved and the data array is fully populated. In addition, using Javascript’s setTimeout function, the data is checked periodically to see if it has been updated.


The Entry Details Panel

Another List panel event is the “selectionchange” event which is triggered when an item in the list is tapped. Adding a listener to this event allows us to trigger a function that will load the Entry Details panel for the selected entry. The values that are passed to the event-listener function are the model of the list records and the selected records. With the selected record in hand, all that is left to do is update the HTML of the Entry Details panel with the data of the current entry. This is done by using Sencha Touch template object that contains a string with replacement place-holders (in curly brackets) which should match the input model object. The template object can simply apply record data on the template string, and return the replaced HTML.

Adding the Video to the entry details panel

The easiest way to integrate the Kaltura Video into the Entry Details panel was to use Kaltura’s HTML5 iframe-embedding method. This method means placing an iframe on the page, in which the Kaltura player will be dynamically loaded.

The player loaded in that iframe will fall-forward to the player that would fit best for the device where it is loaded in. For example:

  • iPhone – A thumbnail is displayed, tapping it would launch the native iphone player.
  • iPad – Kaltura’s HTML5 player will be loaded in the page.
  • Android, when flash is installed – Kaltura’s flash KDP will be loaded in the page.

Action Buttons in the Entry Details Panel

In order to change the moderation status of an entry (to Accepted or Rejected), we created 2 simple buttons. The handlers of the approve & reject buttons point to functions that call the media.approve or media.reject API actions:

The callback function of the two calls, on success, refreshes and loads the entry list to the display.


kModerate Code and URL

kModerate code is available on GitHub: https://github.com/kaltura/kModerate.
To use kModerate, browse your mobile browser to: http://cdn.kaltura.org/demos/kModerate/.

Got cool ideas on how to make it better? Let us know in the comments!

3 Responses to “Mobile App for Moderation – The “kModerate” Case Study”

  1. I am very interested in learning how to create a mobile application. The problem is, I don’t know where to start. And what programming language do I need to learn? How do I start?

    • This case-study begun with HTML-CSS-JS backed by Sencha-Touch JS library for mobile web-app development.

      Developing mobile web applications is as easy as writing a website, as long as you know the languages mentioned above.
      There are also other JS frameworks that could replace sencha-touch, I suggest (if you go that way) to try a few and find the one that suits you best.

      Native mobile apps are a different thing and require expertise in other languages (depending on the device you develop for).

      However, once you have a mobile web-app, you can wrap it with a native application using phonegap, which virtually requires no special programming expertise – just pull the web app project files into the phonegap project.

  2. Trackbacks

Leave a Reply