Building a mobile weather app

What are we going to build?

We are going to build a weather app that displays current conditions (temperature and icon) for a given zip code. The app will look like this:

Before you start

• Tutorial level: Beginner or your first mobile app
• Prerequisites: Tiggzi account
• The app uses API from World Weather Online. The API is free to use but requires registration in order to get a special API Key. Please register to get your key.

Creating new project

1. To start, we are going to create a new app. Enter WeatherApp for app name and click Create.
2. When the mobile builder loads, you should see something like this:
3. On the left-hand side click Pages > startScreen - editor with an empty startScreen will open:

Creating mobile UI

1. 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. Click on it and change the label to Weather App, to look like this:
   
   
2. Now, from the Components section (on the left-hand side), 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:
   
3. Next, drag and drop Input component, right below the Label component. Delete its label text.
4. 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.
5. Drag and drop Button component and change its label to Get Weather. The result should look like this:
   
6. If you want to change the spacing between each component, select the component and change its Margin property in Properties.
7. 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.
8. 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.
9. The last component we are going to use is Image. Drag and drop Image component, below the label.
10. In Properties, changes its default name mobileimage1 to icon.
11. The final UI should look like this:
    
12. One of the nice features in Tiggzi is that you can test the app and see how it looks in browser. Simply click Test button to open the app in browser).
13. To view the app on mobile device, click the Test button.
    1. To test the app on the device, open Test and check Public, to make the app link public. Scan the QR code or email the link to your phone

Defining REST service

1. We are ready to create a service which will connect to weather REST service. In Tiggzi app builder click Create New > Service.
   
2. Rename the service to getWeather, click Create Service.
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. Click Save button and close service editor.
7. Now that we are done defining service settings, next step is to define service inputs.
8. Open Request panel
9. This is where you define request parameters for the service. The weather service requires three parameters:
   1. q - zip code
   2. format - response format
   3. key - API key (get a free API key here).

10. In the input field, enter q and click Add.
    
11. Now create two more parameters, format and key. The result should look like this:

12. For format, enter json as the Default value.
13. For key, enter the API key as Default value.
14. Let’s now test the service, go to Test tab, enter any zip code value for q.
    
15. Click Test button. The result should look something like this:

16. 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. Click Automatically Create Service Response button. This feature will automatically create the service response based on parameters present in sample test.
    2. You should see “Service response created successfully” message.
    3. Go to Response panel where listing all response parameters (after expending data and weather):

17. We are done defining the service. Click Save and close getWeather service editor. Go to the startScreen > Data tab.
18. From dropdown menu select Service > getWeather and click Add button.

Mapping UI and service

1. Now we need to map UI to the service. Rename restservice1 to weather, click Edit Mapping for weather instance. 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 tab to map service output to UI.
   
4. Define the following mappings:
   1. tempMaxF -> 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. Go back to Design tab, open Events view (on the bottom of the screen).
2. Select the button component (Click event is set by default) > from list select Invoke Service action > weather.
   
3. Click Add event button.
4. We are ready to test the app. Click Test button, enter any zip code and click Get Weather button.

Testing the app

Click the Test button to launch the app in the browser. The resulting app should look like this:

 

To test the app on the device, open Test menu and check Public. Scan the QR code or email the app link to your device. Learn about other ways to test an app.