This Lab will take you through creating a simple application which will demonstrate using server side functionality to call an external server and caching the response in the [whitelabel providername] cloud.

Step 1: Create a new app

Create a new app from scratch (not from a template). Once the app is created, choose Edit my App and delete the default contents of the client/default/index.html file.

Step 2: Create Static Client Version

Add the following code to the index.html file and choose Save: 

 
<p> Current Time : </p>
<div id="current_time_response"> </div>
<button id="current_time"> Refresh time </button>  

<script>
  $(document).ready(function(){
   $('#current_time').click(readTime);
  });

  function readTime() {
    // Read the current time from a new Date object
    var time = new Date().toString();

    // Display the time in-app using jQuery
    $('#current_time_response').html(time);
  }

   // Do an initial read of the current time
   readTime();
</script>

This creates an App that displays the current time, and has a button for refreshing the time. It's only working on the client, with no server-side code involved.

Step 3: Create Server Side Function

Add the following code to the server-side main.js file (in /cloud/main.js). 

 function getCurrentTime() {

   var response = $fh.web({
     url: 'http://www.timeanddate.com/worldclock/city.html?n=78',
     method: 'GET'
   });

   return {
     'response': response.body
   };
 }

This will make an external web request to http://www.timeanddate.com/worldclock/city.html?n=78 to get the current time for Dublin, Ireland (the n=78 GET parameter indicates Dublin). Go to this URL in your browser now and use your developer tools to inspect the current time text. Notice that the current time is inside a <strong> tag with an id of "ct"

Step 4: Modify client side code to call Server Side Action

modify the readTime() function in index.html so that it calls the new server side function getCurrentTime(). Notice that this server side function returns the entire page from timeanddate.com (which is over 6,000 bytes of data). We can then use jQuery to evaluate this response and extract the required time and date information. 

 function readTime() {
   $fh.act({
     act: 'getCurrentTime'
   }, function(res) {

     // Convert the response into a jQuery Object
     var resObj = $(res.response);

     // Extract the element with the id of 'ct' - this is the element that contains the time
     var time = resObj.find('#ct');

     // Display the time in-app using jQuery
     $('#current_time_response').html(time);
   });
 }

Step 5: Modify server side logic to only return the date and time

Rather than returning the entire page to the client and extracting the date on the client side, we can use a regular expression on the server side to extract the date from the response and send just this information back. This has two obvious advantages:

  1. Less Data - Returning just the required information uses only 70 bytes - approximately 1% of the full page size. This is a significant reduction in data - especially when we consider that data transfer rates are usually slower on a mobile device.
  2. More Flexible - If we use client side logic to extract the date and time information, this logic will be bundled with the app when it is published. This means that if the structure of the html document on the remote site changes (e.g. if the id of the strong tag changed from "ct" to "now"), our app will most likely stop working as the client side parsing is no longer valid. However, if we keep this logic in the cloud hosted server side JavaScript, and return just the information required, we can change the cloud logic at any time.

We will now add a new server side function which return only the date and time: 

 function getCurrentTimeRegEx() {

   var response = $fh.web({
     url: 'http://www.timeanddate.com/worldclock/city.html?n=78',
     method: 'GET'
   });

   // Construct a regular expression to extract the date and time from the response
   var reg = /(<strong id=ct[^>]*>)([^<]*)/;

   //Extract the required info
   var dateMatch = reg.exec(response.body);

   return {
     'date': dateMatch[2]
   };
 }

Step 6: Modify client side logic to use new server side function

We will now modify the readTime() function to use the new server side function getCurrentTimeRegEx() 

 function readTime() {
   $fh.act({
     act: 'getCurrentTimeRegEx'
   }, function(res) {

     // Display the time in-app using jQuery
     $('#current_time_response').html(res.date);
   });
 }

Notice how much simpler the client side function now is. This is the sign of a well designed app - when the majority of the client side JavaScript code is updating the UI rather than performing complex data parsing.

Step 7: Modify server side function to cache current time

As per the documentation for $fh.web(), it is possible to cache the response from a web call for a specified period of time. This can be done by adding a parameter called 'period' to the $fh.web(). The value for period is the number of milliseconds to cache the response for.

Modify the getCurrentTimeRegEx() function as below to add the period parameter 

 function getCurrentTimeRegEx() {

   var response = $fh.web({
     url: 'http://www.timeanddate.com/worldclock/city.html?n=78',
     period: 10000,
     //Cache response for 10 seconds
     method: 'GET'
   });

   // Construct a regular expression to extract the date and time from the response
   var reg = /(<strong id=ct[^>]*>)([^<]*)/;

   //Extract the required info
   var dateMatch = reg.exec(response.body);

   return {
     'date': dateMatch[2]
   };
 }

Notice that with the period parameter in place, the time in-app only updates once every 10 seconds, regardless of how often the "Refresh time" button is clicked.

Comment out the period parameter and verify that the current time updates each time the "Refresh time" button is clicked.

Step 8: Change default App Entry Point

By default, a file called index.html is used as the Entry Point for the app. This can be changed as follows:

  1. Create a new file in the root of the app called test.html
  2. Add some contents to the file (e.g. Hello World) and save it.
  3. Right-Click on the file and select "Set as default" from the context menu.

The file test.html has now become the Entry Point for the app. The preview should refresh to show the text entered in test.html - e.g. "Hello World"

This feature can be very useful during the development & testing of an app as it allows small feature-specific test User Interfaces to be quickly developed.

© FeedHenry 2012