Building Twitter Search App


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: 


Building the UI

  1. To start, we are going to create a new app. From Apps tab, click Start Now button
  2. Enter TwitterSearchApp for app name and click Create
  3. A new app will be created, and the mobile editor will be loaded. In the center of the editor you should see the phone:



    On the left-hand side you will see Project, Outline and Palette views:


    On the right-hand side you will see Properties, Events and History views.
  4. 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. Double-click on it and change the text to TwitterSearch.
    Tip: You can control whether to show header and footer in Properties.
  5. Switch to Palette view on the left-hand side, and find the Input Text component:

    Drag and drop into the screen. Delete Input text inside:

  6. 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.
  7. Next, find Button component and place it below the Input component, and change its label to Search Twitter:

  8. 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. 
  9. Next we are going to a Grid component with other components inside for displaying the search results. Locate the Grid component:

    and drag and drop it below the Search Twitter button. The Grid has two columns by default:

  10. Change the Grid’s Name property to: outputGrid.
  11. Inside the grid we will display four item:
    1. Twitter picture
    2. Twitter user name
    3. Tweet text
  12. Locate Image component in Mobile palette and drag and drop it inside the first cell in the grid. Make sure the image is inserted inside the grid.
  13. Select the image and in Properties rename the component to: tweetPicture. Then also change its Dimension property to 48 by 48. The result should look like this:


  14. Now let’s make this cell a little bit smaller. Using the mouse, reduce the cell size to the size of the image. It should look like this:


  15. Find the Label component and drag and drop it inside the second column. Delete its default text content and changes its name in Properties to tweetFrom. This component will display Twitter user name
  16. Let's make some additional UI changes to this component:
    1. Change the Style to Bold
    2. Set font size to 12
  17. Now we are going to add a component which will display the actual tweet. Drag and drop another Label component into second row, second column.
    1. Delete it’s current text and make the following changes:
    2. Rename the component to: tweetText
    3. Set the font size to 12
      The final result should look like this:

Adding a REST Service

  1. We are ready to add a REST service which will connect to Twitter.  Open Services palette. Select REST Service and drag and drop it into the screen. 
  2. A window asking you to select a service will be shown. As we don't have a service yet, click Add new, to define a new service.

     
  3. Service editor will open (you change service name as shown below):
  4. First we need to enter service URL: http://search.twitter.com/search.json
  5. Method is: get (should be selected by default)
  6. For Data Type, set jsonp
  7. Open Request Parameters panel. We are now going to define input parameters for the service.  
  8. In the input field, enter q and click Add. It should look like this:


    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
  9. You are not always sure what kind of response you will get from the service. You can quickly test the service by clicking on Test at the bottom of the Request Parameters panel.
  10. Enter something for Value, 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.
  11. You can click Close to close the service Test Connection window.
  12. Open Response Parameters panel. Now we need to define output paramaters for the service. That's the information we are getting back from the service and some of it we would like to display as result.  We are going to define output parameters for the following data:
    • Picture
    • Twitter user name
    • Tweet text
  13. There is an option to define each output parameter by hand, however, Tiggr can help us create output parameters automatically, based on same test response. 
  14. Go back to Request Parameters panel
  15. Click Test. Enter sample data and click Test Connection
  16. Click Populate Response Structure. This will automatically create the response structure based on sample output. 
  17. Click Close. The Response Parameters panel should be open with all parameters defined:


  18. Click Save, and then Close. we are done creating the service. The next step is to map service to UI.

Mapping UI and Service

  1. Now that we have defined input and output service parameters, it’s time to define mappings between UI components and this service. After closing the service editor, you should be back on the screen editor:


  2. We are now going to map UI to the service. Click Data Mapping tab. On the left-hand side is the service and on the right-hand side is the page (Request Mapping). We need to bind the input field to service input by creating the following connection. Simply select the Text (or the component itself) property and connect it to q:



    Note that it's also possible to create the connection the other way, by taking q and connecting it to Text property. 

  3. Now click on Response Mapping to map service output to UI and define the following mappings: 
    1. result[] --> outputGrid
    2. text --> tweetText
    3. from_user --> tweetFrom
    4. profile_image_url --> tweetPicture
      The result should look like this: 



      Note: you don't need to expand all the levels, as you move the mouse over the page tree, the nodes will expand automatically. 

  4. We are done with service mapping. Click Save. 

Defining Action to Invoke the Service

  1. The last step before testing the app we need to do is invoke the service when the button is clicked. Select the button and then switch to Events view (on the right-hand side)
  2. Click Add Event and select Click. Event click will appear in the list below:


  3. Click Add Action button and select Invoke Service action:



  4. From the menu select rest service1:
  5. Click OK
  6. You are done. Save everything and continue reading below on how to test this app.

Testing the app

There are three ways to test the app:
  1. In Web browser
    • Desktop
    • Mobile
  2. Launching the app from Tiggr Mobile Tester app
  3. Installing the app on Android device

1. Testing in Web browser

Click Test  to launch the app in Web browser. You can also select Test > Launch 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
  3. You can also go to http://tiggzi.com on your mobile device. Sign in and you will see your app listed. Click on the app to run it. 
  4. Just enter the URL in mobile browser by hand

2. Launching the app from Tiggr Mobile Tester app

Tiggr Mobile Tester is an app from which you can test apps built in Tiggr. Tiggr 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. Tiggr 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://tiggzi.com Find your app in the list and tap it.

3. 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. 
Comments