Building the UI

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 WeatherApp for app name and click Create. 
6. Once the mobile editor loads, you should see an empty phone in the middle of the screen (Blue theme selected):
   
   
   

   
   On the left-hand side, Palette with Mobile components should be open:
   

   
   

   

   
   
   On the right-hand side you will see Properties, and Events views
   
   
7. We are ready to build the UI. If you look at the phone, you will see Caption label at the top. That's part of the header. Double-click on it and change the label to Weather App, to look like this:
   

   
   

   

   
   Note: you can control whether to show header or footer in Properties
8. Now, from the Mobile palette, drag and drop Label component into the screen. When a component that holds a text value dropped into a screen, its label goes into edit mode. Change the label to: Zip code. The result should look like this:
   
   
   
   
   
9. Next, drag and drop Input component, right below the Label component. Delete its label text. 
10. Because we are going to reference this component when defining services, we should rename the component. Select the component and head to Properties. In Properties, change its name to: zipCodeInput.
    
11. Drag and drop Button component and change its label to Get Weather. The result should look like this:
    
    
    

    

    
    If you want to change the spacing between each component, select the component and change its Padding property in Properties.
    
12. We are done with input portion, now we need to create UI for displaying weather result. We are going to display the temperature and an image. Drag and drop a Label component below the button. Delete its label text.
    
13. We will need to reference this component when we use services so it's better to rename it. Select the component and head to Properties. In Properties, changes its Name to: temperature.
14. The last component we are going to use is Image. Drag and drop Image component, below the label.
    
15. In Properties, changes its default name mobileimage0 to icon.
    
16. The final UI should look like this:
    
    
    
    
    
17. One of the nice features in Tiggr is that you can test the app and see how it looks in browser. Simply click Test button to open the app in browser (make sure you allow pop-up for *.gotiggr.com domain).
1. To view the app on mobile device, open Test menu and check Public, to make the app link public. There are three ways to get the app link to open in mobile browser:
1. Type the app link in mobile browser
2. Scan the QR code
3. Email the link to your device

Defining REST service

1. We are ready to create a service which will connect to weather REST service. Open Palette > Services. 
2. Drag and drop REST Service component into the screen. You will be prompted to select a service. As the service doesn't exist yet, click Add new. 
3. A service editor will open:
   
   
   
   
   
4. For service URL enter: http://free.worldweatheronline.com/feed/weather.ashx
5. For Data type, select jsonp
   
   
   
   
   
6. Now that we are done defining service settings, next step is to define service inputs. Open Request Parameters panel
7. This is where you define request parameters for the service. The weather service requires three parameters:
1. q - zip code
2. format - response fomrat
3. key - API key (get a free API key here). 
   
8. In the input field, enter q and click Add.
   
9. Now create two more parameters, format and key. The result should look like this:
   
   
   
   
   
10. For format, enter json as the Default value. 
11. For key, enter the API key as Default value. 
12. Let's now test the service, click Test Connection button. 
13. Enter any zip code value for q
14. Click Test. The result should look something like this:
    
    
    
    
    
15. The next step is to define service response parameters. If you scroll through the test results, you will notice that the Weather REST service returns a large number of parameters. Creating them all by hand could be time consuming and error prone. Of course you can only define the parameters that you need. However, another solutions exits. 
1. Run service test again. 
2. Click Populate Response Structure button. This feature will automatically create the service response based on parameters present in sample test. 
3. Click Close, Response Parameters panel should now be open, listing all response parameters (after expending data and weather):
   
   
   
   
   
16. We are done defining the service. Click Save and then Close. You should be back at the screen editor, and the service just created shown on the right-hand side:
    
    
    

Mapping UI and Service

1. Now we need to map UI to the service. With the rest service1 instance selected, click Data Mapping tab. Request Mapping should be selected by default. 
2. Define the mapping by selecting Text property and connecting it to q property on the service side. Both format and key are predefined. 
   
   
   
   
   
3. Now click on Response Mapping button to map service output to UI. 
4. Define the following mappings:
1. temp_F --> temperature/Text
2. weatherIconURL/value --> icon/Asset
   The result should look like this:
   
   
   
   
   
5. Click Save

Defining Action to Invoke the Service

1. One last thing left to do is invoke the service on button click. Select the button and switch to Events view (on the right-hand side)
2. Click Add Event > Click.
   
3. For Click event, click Add Action button and select Invoke Service action
4. Select rest service1, click OK
5. We are ready to test the app. Click Test button, enter any zip code and click Get Weather button.
   

Testing the app

The resulting app should look like this: