Looking for something that's not here? Let us know: support@tiggzi.com

Building Mobile RSS App

Exporting Your AppIn this tutorial you will learn how to build a mobile RSS app in Tiggr. We are going to use Lifehacker.com RSS feed to build the app: http://feeds.gawker.com/lifehacker/full.  Lifehacker is a popular technology, tips and tricks site. You may use any other RSS feed of your choice. 

Creating a mobile app project

  1. To start, we are going to create a new app. From Apps tab, click Start Now button
  2. Under App Builder, click Go
  3. Under Mobile App, click Start Now 
  4. Select Blank Mobile App app and click Next Step button
  5. Enter LifehackerRSS for app name and click Create. 
  6. Once the builder loads, you should see an empty phone that looks like this: 


Next step is to start building UI with jQuery Mobile components.  

Building the UI

An RSS feed consists of a lot of data but for the purpose of this tutorial, we are going to display just three items: title (also the link), publish date and a short description. To display this information, we are going to use a grid component with three rows, a row for each item. 

  1. Double click on Caption label and change it to Lifehacker RSS
  2. On of the most powerful features in Tiggr is the ability to test the app in browser. We didn't place any components but testing is possible immediately. To test the app, click the Test button. A new browser window will open (make sure to allow popups for *.gotiggr.com domain) showing the app. To test the app on the device, open Test window and check Public. Send the app link to your device or scan the QR code shown. 
  3. Locate the Grid component in the palette and drag and drop it into the phone. It has two columns by default and should look like this when inserted:

     
  4. Select the Grid component (if you find it difficult to select the Grid, use the Outline view to select it) and head to Properties (right-hand side)
  5. In Properties, decrease the number of columns to 1, and increase the number of rows to 3. The result should look like this:


  6. We are now ready to place components inside the grid. Locate the link component and drag and drop inside the first row in the grid. 
  7. It has a default label of Link, delete the label.
    1. Why did we delete the label? We will get the link label from the RSS feed in a later step.  
  8. In Properties, change the component name to link_title.
    1. Why did we rename the component? It's going to be easier to find the component when we bind UI to RSS feed. 
  9. Set all margins for the Link component to 0 (2 are already set to 0)
  10. Find the Label component and drag and drop it into the second row.
    1. Delete its default label
    2. Rename the component to 'pubDate'
    3. Set all margins to 0 (2 are already set to 0)
    4. Set size to 10
    5. In Style, click the button to make the font Italic. 
  11. Drag and drop another Label component into the third row. 
    1. Delete its default label
    2. Rename the component to 'description'
    3. Set size to 12
    4. Set all margins to 0 (2 are already set to 0)
  12. The final UI in design should look like this:


  13. You can click Test button again, to view the app in browser. There is no much yet. In the next step we are going to add data from an RSS feed. 

Defining RSS feed service

Now that we are done with the UI, let's define an RSS feed, add it to the page and then bind it to the components on the page. 

  1. Open Palette > Services. You will see REST Service component. 
  2. Drag and drop the REST Service component into the screen. You will see this window:



  3. It's asking you to select an existing service. As we don't have a service yet, click Add new button to create a new service. 
  4. Service editor will open. Change the name to LifehackerRSS.
  5. For URL enter: http://feeds.gawker.com/lifehacker/full
  6. Change Date type to xml.
  7. Lastly, check Use Tiggr Proxy.

    Why use Tiggr Proxy? A request to this service will be done with Ajax. Ajax has built-in security mechanism which allows to invoke services only from the same domain that the page was loaded. In this example, the page was loaded from gotiggr.com but the service is invoked from a different domain (gawker.com). Tiggr Proxy solves the problem by invoking this service from Tiggr server (Tiggr proxy). When this service is invoked from another server (as opposed to a page), Ajax security doesn't play a role. 

    The final result should look like this:


  8. Now that we have defined the service properties, the next step is to define service inputs and outputs. As we are using an RSS feed, the service doesn't have any inputs. We can call the URL as it is. Let's test the RSS feed. Open Request Parameters panel
  9. Click Test Connection button
  10. Click Test button. The RSS feed will be called and the result shown in the Response window:



  11. Next step would be to define the service output. If you scrolled through the service test results, you will see that the service has numerous response parameters and creating each one by hand could take time, is tedious and error prone. Luckily, Tiggr makes defining the response very easy. Simply click Populate Response Structure button and the service response parameters will be created automatically based on the response from the test. 
  12. Click Close button. Response Parameters panel will open automatically (shown after expanding rss/channel nodes):


  13. We are done with the service. Click Save button to save all changes, then click Close to close the service editor. You will be back at the screen editor with the service shown on the left-hand side. 


Now that we have defined the RSS service, next we need to bind the UI to service. 

Binding UI to service

Binding UI to service has two steps. First, mapping input components to service inputs. Second, mapping service output to components for displaying data. As the RSS service we are using doesn't require any inputs, we are only going to map output. 

  1. Click on Data Mapping tab and then click on Response Mapping. 
  2. Create the following mappings:
    1. item --> mobilegrid1
    2. title --> link_title/Text
    3. link --> link_title/URL
    4. description --> description/Text
    5. pubDate --> pubDate/Text
  3. The result should look like this:


Invoking the service

One last step we need to do is to invoke the service. We want to invoke the service when the screen loads. 

  1. Select the screen (you may click outside the phone area to select it)
  2. Open Events tab (right-hand side)
  3. From Add Event drop down, select Load event. This just a standard HTML event. 
  4. From Add Action drop down, select Invoke Service action
  5. From the list select rest service1 instance. 
  6. Click OK to save and close. 
  7. Now click Test button to run the app in browser. The result should look like this (the content will be different):



    Note: you may see other links or even ads in the feed - that's inserted by the feed itself. 

  8. Don't forge to test the app on the actual device. 

What's next? 

Try other getting started tutorials or learn more about testing the app or exporting the app as native.