If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to build a mobile application that displays an RSS feed. We are going to use the Lifehacker.com RSS feed to build the app: http://feeds.gawker.com/lifehacker/full. Lifehacker is a popular technology “tips and tricks” site.

The app will look like:

Before you begin

  • Tutorial level: beginner; your first mobile app.
  • Prerequisites: an Appery.io account.

Creating a new app

1. Let’s start by creating a new app. In your workspace on the Apps tab, click “Create new app”. Name it LifehackerRSS and click “Create”.

2. When the mobile builder loads, you should see something like:StartScreen

3. On the left-hand side, click Pages > startScreen. An editor with an empty startScreen will open:StartScreenPage

On the left-side panel, you could see Project view, as well as the mobile components.

Building the mobile UI

1. Click the Header section (where it says “Caption”), and in PROPERTIES, change the label to LifehackerRSS:Header

2. Locate the Grid component:

3. Drag and drop it into the page. The result:

4. The grid has two rows and two columns by default. For this app, we need three rows and one column. Select the Grid component (use the breadcrumbs to select the grid) and in PROPERTIES, set “Rows” to 3 and “Columns” to 1, to look like this:

5. Click “SAVE”.
6. We need to add one Link component, one Label component, and one HTML component. Drag and drop a Link component into the first row, a Label component into the second row, and an HTML component into the third row:

7. To make it easier to map the components to a service, rename the components. Select the Link component, and set its name in PROPERTIES to link:link

8. For the Label component, set the Name as follows: pubDate.

9. For the HTML component, set the Class Name to appery-html and the Margin properties to 0:HTML

At this point you can also click “TEST” to run the app in the browser. You’ll just see the labels, but you can use this feature to test your app at any point.

Now we need to define the RSS service.

Creating an RSS service

1. From Project view, select CREATE NEW > Service.

2. For service name enter: LifehackerRSS.

3. Click “Create Service”. A service editor will open:

4. For the URL, enter http://feeds.gawker.com/lifehacker/full

5. For Response Data Type, set to XML.

6. To use the Appery.io Proxy, follow these steps:

  1. Close the app and go to the Secure Proxy tab.
  2. In the open tab, click “Create new proxy”:CreateProxy
  3. For the proxy name, enter LifehackerProxy.
  4. Switch back to the project and select LifehackerProxy from the drop-down menu. This will automatically check the “Use Appery.io Proxy” box:SelectProxy
  5. You can uncheck the “Use Appery.io Proxy” box any time.

7. Before using the service on the page, we can test it. Open the Test tab, and click “Test”:Test8. The service doesn’t have any input parameters, but we need to define output parameters based on this response. Simply click “Import as Response”. The response will be created automatically.

9. Open the Response tab to see the service response (after opening RSS node):ResponseTab

The next step is to bind (map) the service to the page.

Mapping the service to the page

1. Open startScreen, switch to DATA view, and for Datasource type, select: Service.

2. Select the LifehackerRSS service and click “Add”:LifehackerrRSSService

3. Now we need to map the service. Click “Mapping” for Before Send event:BSEvent

The service request area is on the left side.  There’s nothing listed there, since we didn’t define any request parameters (this service doesn’t have any).

4. We need to create output mappings, so click “Save and return”, then click  “Mapping” for Success event:StartMapping

5. Expand the service output side by clicking “Expand all”. Select the item[i] node and drag it over the mobilegrid_x element: Mapping1new

6. Release the mouse to create a connection (mapping):Mapping2new

7. To finish, define the following connections (mapping):MappingFinalNew

8. Save.

Great! We’re done with the mapping. The last step is to invoke the service.

Invoking the service:

1. Switch back to DESIGN view.

2. Open the 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 your_service_name (restserviceX):InvokeService

6. Click “Save”.

Now, we need to create a custom CSS Style.

Adding CSS Style

1. From Project view, select CREATE NEW > CSS.

2. Click “Create CSS”.

3. Next, paste the following code:

 Running the app

Click “TEST” to open the app in the browser. The result:

See other ways to test your app here.