Tiggzi Docs > Tutorials > Building Twitter Search App

Building Twitter Search App

What are we going to build?

In this tutorial we are going to build a mobile which does a search on Twitter for a key word. The app can be tested in a web browser, mobile browser or installed on your phone. The final app looks 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 TwitterSearchApp and click Create
  2. A new app will be created, and the mobile editor will be loaded. Click on startScreen page.
    In the center of the editor you should see the phone frame (after opening startScreen page):

On the left-hand side you will see the mobile components palette:

  1. We are now ready to build the UI with jQuery Mobile components. At the very top of the phone screen you will see Caption text. It’s the app header. Click in the header and change the text to TwitterSearch in properties.
  2. From Components find the Input component:

    Drag and drop into the screen. In Properties, check Placeholder check box:
  1. Before we continue, let’s rename the component so it’s easier to refer to the component later, when we use Twitter search API. Select the Input component and in Properties change the Name to: searchInput.
  2. Next, find Button component and place it below the Input component, and change its label to Search Twitter. Also set the button name to searchButton.
  1. This is all we need for entering a search query.
    You can quickly test the app in a web browser by clicking the Test button from the top menu.You can also test this on your mobile phone. First, make the app URL public in the Test window. Then, enter the URL shown, email the link to your mobile phone or scan the QR code.
  1. Next we are going to add a Grid component with other components inside for displaying the search results. Locate the Grid component, then and drag and drop it below the Search Twitter button:
  1. As we only need 1 row, in Properties, set Rows to 1, to look like this:

    To make it easy to select the grid component, use the breadcrumbs above the phone frame:
  2. Next, change the Grid’s Name property to: outputGrid. Inside the grid we will display three items: Twitter picture, Twitter user name and tweet text.
  3. Locate Image component in the palette and drag and drop it inside the first cell in the grid.
  4. Select the image and in Properties rename the component to: tweetPicture. Then, also change its Dimension property to 48 by 48. Also, resize the first cell to the size of the image, to look like this:
  1. Find the Label component and drag and drop it inside the second column.
  2. Set its name in Properties to: tweetFrom. This component will display Twitter user name.
  3. Now we are going to add a component which will display the actual tweet. Drag and drop another Label component into second cell:
  4. Set the second label name to: tweetText.

You can also now click Test again to see how the app looks in the browser.

Adding a REST Service

We are ready to add a REST service which will connect to Twitter.

  1. From Project view, click Create New > Service
  2. For service name enter: TwitterREST. Click Create Service.
    Service editor will open:
  1. First we need to enter service URL: http://search.twitter.com/search.json
  2. For Data Type, set to: jsonp
  3. Open Request tab. We are now going to define input parameters for the service.
  4. In the input field, enter: q and click Add.
    q - is just request parameter name that Twitter search service accepts as input. You can always test it by clicking this URL: http://search.twitter.com/search.json?q=html5
  5. You are not always sure what kind of response you will get from the service. You can quickly test the service by going to Test Connection tab.
  6. Enter something for q, for example: html5 and click Test. Your output should look something like this:
    By testing the service, we know that the URL is correct and we get search results from Twitter. Of course another way to test is enter the same URL into a browser.
  7. The next step is to define the response of the service. As we just ran a service test, we can automatically create the response from it. Click on Automatically Create Service Response button.
  8. Switch to Response tab to see the generated response:
  9. Click Save.
Great, we are done defining the service. Next we need to bind (or map) the service to the UI.

Mapping UI and Service

  1. Open the startScreen (from Project View), and click on Data tab (on the right side):
  2. For datasource, select Service from the first list, then select TwitterREST, click Add
  3. A service will be added to the page.
  4. Click Edit Mapping button to bind the service to the UI
  5. We will first work on request mapping. With a drag and drop (select ‘text’ and drag it over ‘q’), create the following mapping (connection):
  6. Now click on Response tab and define the following mappings for output:
    1. results[] -> outputGrid
    2. profile_image_url -> tweetPicture/assset
    3. from_user -> tweetFrom/text
    4. text -> tweetText
  7. Click Save.

Invoking the service

  1. The last step before testing the app we need to do is invoke the service when the button is clicked. Open startScreen, Design mode. Open Events tab:
  2. From Component list, select: searchButton component (you can also select the button and then open Events. The button and click event will be set automatically)
  3. From the Event list, select: Click
  4. From Action list, select: Invoke Service
  5. From Service select: service
  6. Click green [+] button. The result will look like this:

Testing the app

There are three ways to test the app:

  1. In Web browser
    • Desktop
    • Mobile
  2. Launching the app from Tiggzi Mobile Tester app
  3. Installing the app on mobile device

Testing in Web browser

Click Test to launch the app in Web browser.

To test on mobile browser, from the Test window make the app URL public and pick one of the options:

  1. Email app link to your phone
  2. Scan QR code
The result will look like this:

Launching the app from Tiggzi Mobile Tester app

Tiggzi Mobile Tester is an app from which you can test apps built in Tiggzi. Tiggzi Mobile Tester is available for iPhone and Android.

To install the app on Android, click Test and select one of options:

  1. Scan the QR code for Android or click Android Market button
  2. You can also search for Tiggr Mobile Tester in Android Market app on your device
  3. You can also find it here:: https://market.android.com/details?id=com.exadel.tiggr.projectlist

To install the app on iOS device, click Test and click the Download button for iOS

  1. Tiggzi Mobile Tester for iPhone source code is available for download as an open source project. Please follow the instructions outlined in readme.txt on “How to Build an iOS Binary”.

Once the app is installed, launch it and log in. Use the same credentials as for http://gotiggr.com Find your app in the list and tap it.

Installing the app on Android device

To download Android binary file, select Export > Android binary. Save the file and install it on your device. One quick way to install the file is to email it to your device. When the email arrives, the phone will recognise .apk attachment extension and you should see Install option.

Making links clickable

Inside the tweets, the links are just plain text and thus not clickable. Add the following JavaScript to the mapping for text -> tweetText

var inputText = value;
var replaceText,replacePattern1, replacePattern2, replacePattern3;
 //URLs starting with http://, https://, or ftp://
 replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
 replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
 //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
 replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
 replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
 //Change email addresses to mailto:: links.
 replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
 replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
 return replacedText;