Tutorial - Part 1

In this tutorial, we will step through building a basic weather app using the Trigger.io Forge tools.

This section of the tutorial will guide you through setting up the display, creating internal data representation, and doing some basic debugging using logging.

When using this tutorial, you should choose a single platform to follow along with: either iOS, Android or mobile website. The code we'll be writing will work on any platform, but the configuration steps are different.

All the code for this tutorial is on Github: https://github.com/trigger-corp/weather-app-demo/

Goal

This part of the tutorial is intended to:

  • Show how to add project files
  • Set up weather forecast data structures
  • Familiarize you with developing and running a basic app using Forge

Preparation

  • Firstly, if you haven't already done so, go through the getting started on mobile section. This will help you set up the basics and teach you how to build and run your code.
  • Remove any files in the src directory except config.json, identity.json and the js folder (the other files will not be needed for the rest of this tutorial).
  • Sign up for API access at http://www.wunderground.com/weather/api/ - the most basic free developer account is fine.
  • Create a new javascript file called weather.js inside the src/js directory. This file will contain all of the JavaScript code for the rest of the tutorial.
  • Create a file called index.html inside the src directory. This will be the html page that displays the forecast information.

Setting up the UI

Goal: Displaying static content

Open index.html in your favorite editor and add the following:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/weather.js"></script>
    </head>
    <body>
        Weather forecast here.
   </body>
</html>

Notice the script tag in the head element points to weather.js file you created earlier. This file does not need any code at this point.

Build and run the code

Instruction on how to build and run a mobile app can be found here.

Follow then to build and run your app - you should see the static HTML appear.

Create dummy data

Goal: Set up some dummy data for a weather forecast

First, we will create some dummy data in a simplified version of the format that the Wunderground API will return to us - open src/js/weather.js and paste the following code:

var weather = {
    "current_observation": {
        "display_location": {
            "full": "San Francisco, CA"
        },
        "observation_time":"Last Updated on September 20, 3:50 AM PDT",
        "weather": "Mostly Cloudy",
        "temp_f": 54.4,
        "temp_c": 12.4,     
        "relative_humidity":"89%",
        "wind_string":"From the WNW at 4.0 MPH",
        "icon_url":"http://icons-ak.wxug.com/i/c/k/nt_mostlycloudy.gif"
    },
    "forecast": {
        "simpleforecast": {
            "forecastday": [
                { "date": { "weekday_short": "Thu" },
                  "period": 1,
                  "high": { "fahrenheit": "64", "celsius": "18" },
                  "low": { "fahrenheit": "54", "celsius": "12" },
                  "conditions": "Partly Cloudy",
                  "icon_url":"http://icons-ak.wxug.com/i/c/k/partlycloudy.gif" },
                { "date": { "weekday_short": "Fri" },
                  "period": 2,
                  "high": { "fahrenheit": "70", "celsius": "21" },
                  "low": { "fahrenheit": "54", "celsius": "12" },
                  "conditions": "Mostly Cloudy",
                  "icon_url":"http://icons-ak.wxug.com/i/c/k/mostlycloudy.gif" },
                { "date": { "weekday_short": "Sat" },
                  "period": 3,
                  "high": { "fahrenheit": "70", "celsius": "21" },
                  "low": { "fahrenheit": "52", "celsius": "11" },
                  "conditions": "Partly Cloudy",
                  "icon_url":"http://icons-ak.wxug.com/i/c/k/partlycloudy.gif" }
            ]
        }
    }
};

Check the data

Goal: Confirm our data has been correctly populated by using logging

If we need to verify that our app is showing the right forecast in the future, it would be useful to log out what data input is. We can use the logging module for this.

Add this to the end of js/weather.js:

forge.logging.info(JSON.stringify(weather));

Remote Debugging on Mobile

Goal getting started with Catalyst

As you've already seen in getting started on mobile forge.logging.info prints output to console/terminal. You can also use our remote debugging tool, Catalyst, which provides some helpful tools for troubleshooting and examining the app at runtime.

For a screencast on Catalyst, and help on how to get started see Screencast: Trigger.io Catalyst in action.

  1. Open up a browser and go to http://trigger.io/catalyst/.
  2. On this page there will be a generated script tag which you copy and insert into the head element of your index.html file.
  3. Click on the auto-generated link which takes you to a page that looks similar to Chrome's debugging tools.
  4. Open src/js/weather.js and add forge.enableDebug(); at the beginning of the file. This will ensure that Catalyst is connected and ready before the code runs, preventing any logging from being lost.
  5. Rebuild and re-run your app. In a few moments, your Catalyst tab in the browser should show the device.
  6. Check the console of the Catalyst tool: you should see your forecast object being logged.

Note: Catalyst is a great tool, especially for debugging mobile apps: check out the "Elements" view to inspect and modify the DOM, the "API" tab to see your forge calls flowing back and forth, and the "Network" view to diagnose performance problems.

Reference app

See the part-1 tag in the Github repository for a reference app for this stage of the tutorial.

part-1.zip

What next?

Continue on to part 2!