Use the REST API to create a mobile app

Here's a quick example of using the RevelDigital REST API to create a mobile app for your signage. The app allows mobile users to take a snapshot of any playlist running on your signage which they can then page through at their leisure. A great example usage of this would be in retail situations where customers can essentially take the signage with them while shopping to look over store coupons or specials.

Step 1: Activate your API key

In order to access our REST API you'll need an api key which you can activate from your account information page here. On the right side of the page you'll find a button to activate your API key. Clicking this will provide details on your API usage along with your activated key (blurred in the photo below). Copy this key as you'll need it later!

Account_Information.png

Step 2: Check out the RevelDigital API Wiki page

Browse to http://wiki.reveldigital.com and familiarize yourself with the basics of using the REST API. If you've done any REST style programming or scripting in the past this should look very familiar to you.

Step 3: Test your key using the test console

Now we're going to give your new key a test run using the test console for playlists. On the wiki site click the Playlists link on the left side and scroll down to the bottom. Then on the console app click Playlists and then GetPlaylists.

Playlists_-_RevelDigital_Development_Wiki.png

Now click the configuration icon indicated by the arrow in the picture above. This will open a configuration dialog where you enter your API key as shown below.

Playlists_-_RevelDigital_Development_Wiki_2.png

Now click the red Get button on the test console to retrieve a list of your playlists. Scroll through your playlists to get a feel for what data is available and how it's represented.

Step 4: Identify a playlist to use with your mobile app

We now need to determine the ID of the playlist to use in the mobile app. Scroll through your playlists and once you've identified the right playlist you'll need to copy the playlist id as indicated below.

Playlists_-_RevelDigital_Development_Wiki_3.png

Now we have the two pieces of information we need to drive our mobile app, the API key and the Playlist Id.

Step 5: Mobile app time

Our app is really just a Google Gadget which retrieves your playlist and renders it in a mobile friendly fashion. You can view the source for gadget here.

The following URL points to the app gadget:

https://shindig.reveldigital.com/gadgets/ifr?url=http%3A%2F%2Freveldigital.github.io%2Freveldigital-gadgets%2Fmobile-slideshow.xml&up_Opacity=1&up_ForeColor=FFFFFF&up_BackColor=&up_Name=Google+Gadget+1&up_Source=https%3A%2F%2Freveldigital.github.io%2Freveldigital-gadgets%2Fmobile-slideshow.xml&up_RDW=280&up_RDH=190&up_apikey=APIKEY&up_playlistId=PLAYLISTID&synd=open&w=1181&h=966

Replace PLAYLISTID and APIKEY in the url with your own key and id from the previous steps.

Step 6: Get the app to the customer

A simple way to get this app onto a customers phone is use a QR code which provides a link to the gadget and renders on the phone like any other webpage. Create or edit any of your templates and add a new QR code zone. We like to use URL shortening services to reduce the length of the QR code URL which in turn reduces the complexity of the QR code graphic. There are a number of shortening services including goo.gl which I prefer.

Take the new shortened URL and paste it into your QR code zone. Use a foreground color of black and background of white for best results.

Template_Designer.png

Step 7 Test and deploy

Preview the template in the designer and test the QR code with your own mobile device. It should take you to a nicely formatted slideshow using your own playlist as content. Save the template and your done.

Try the following code to get an idea of what the end result will look like.

GenerateQRCode.png