Building a mobile RSS app

What are we going to build?

In this tutorial we are going to build a mobile which displays an RSS feed. 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. The app is going to look like this:

Before you start

• Tutorial level: Beginner, your first mobile app
• Prerequisites: Tiggzi account

Creating new app

Let’s start by creating a new app.

1. From Apps page, enter LifehackerRSS and click Create. A new app will be created, and the mobile editor will be loaded. In the center of the editor you should see the phone frame (after opening startScreen page):On the left-hand side you have the Project view and also the mobile components.

Let’s now build the mobile UI

Building the mobile UI

1. Click the header section (where it says Caption), then in Properties change the label to LifehackerRSS:
   
2. Locate the Grid component
   
   and drag and drop it into the page. The result will look like this:
   
   The grid has two rows and two columns by default.
3. For this app, we just need three rows and one column. Select the grid component (use the breadcrumbs to select the grid) and then in properties set Rows to 3 and Columns to 1, to look like this:
   
4. Click Save.
5. Now that we have the grid, we need to add one Link component and two Label components. Drag and drop a link component into the first row and then two label components into second and third row:
   
6. To make it easier to map the components to a service in a later step, let’s rename the components. Select the link component and set its name in properties to: link
   
7. For the two labels, set the names as follows:
   1. pubDate
   2. description
8. At this point you can also click Test to run the app in the browser. You will see just the labels but you can use this feature to test your app at any point.

We are ready to define the RSS service.

Creating an RSS service

1. From Project view, Create New > Service
2. For service name enter: LifehackerRSS
3. Click Create Service. A service editor will open:
4. For URL, enter: http://feeds.gawker.com/lifehacker/full
5. For Data Type, set to xml
6. Check Use Tiggzi Proxy
7. Before using the service on a page we can test it. Open Test tab and click Test button:
   
8. The service doesn’t have any input parameters but we do need to define output parameters based on this response. We can do it automatically, simply click Automatically Create Service Response button. The response will be created automatically.
9. Open Response tab to see the service response (after opening rss node):
   

Now that we defined the service, the next step is to bind (map) the service to the page.

Mapping the service to the page

1. Open startScreen
2. Switch to Data view
3. For Datasource type select: Service
4. Then select LifehackerRSS service and click Add button
   
   
5. We added a service to the page. Now we need to map it. To map, click Edit Mapping button.
   
   On the left side is the service request area. Nothing is listed there as we didn’t define any request parameters (this service doesn’t have any).
6. We do need to create output mappings, so let’s switch to Response tab:
   
7. Expand the service output side until you see item node. Select the item node and drag it over mobilegrid_x element:
   then simply release the mouse to create a connection (mapping):
   
8. To finish, define the following connections (mappings):
9. Save.

Now that we are done with mapping, the last step is to invoke the service.

Invoking the service

1. Switch back to Design view
2. Open Events tab (at the bottom of the screen)
3. We want the service to be invoked on page load. Select startScreen for Component.
4. For event, select: load
5. For action, select Invoke service. Select reservice1:
   
6. Click the green add button to add the event.
7. Save

Running the app

Click the Test button to open the app in the browser, the result should look like this: