Weatherbot Walkthrough

Initial Setup

Weather API

We’re going to use the Weather Underground API to provide weather info to users based on their location.

To get started, you’ll need to get an API plan (a free account will serve for this demo).

Facebook Page Setup

If you don’t have a Facebook page you want to use, start by creating one.

Create new Facebook page

Create new Facebook page

New Chatbot

Then, create a new chatbot.

Create new chatbot

Create new chatbot

And connect that to your Facebook page.

Facebook connection

Facebook connection

Welcome Message

New bots have a built-in Welcome, so let’s edit that.

Editing the Welcome message

Editing the Welcome message

We’ll set the Main Result to be the Static Text Hi there, I’m your WeatherBot! I can give you weather conditions and forecasts for cities around the world!

Then, we’ll use Postprocess Code to trigger a message.

Instead of triggering a message that asks for a location (which we’ll need in order to get weather), we’ll actually trigger a message that goes straight to providing the current weather. Then we’ll use a Required Context to ask the user for the location.

Triggering the Current Conditions message from the Postprocess code

Triggering the Current Conditions message from the Postprocess code

The code for this is:

botContext.setTriggerNextMessage('CURRENT CONDITIONS');

The Current Conditions message is going to have a dynamic result, which requires a Responder. The responder, in turn, is going to use a Required Context. So, let’s work on the Required Context first.

Required Context: Location

The BotCentral Platform handles location data automatically, so the setup for a Location Context is pretty easy.

Setup Required Context for location

Setup Required Context for location

Using the Location type and the Location Quick Reply, you can let the user provide their location directly from a phone. Users on devices that are no location-aware can provide a zip code.

Current Conditions Responder

The Responder that fetches and displays current weather is very simple.

Current Conditions Responder

Current Conditions Responder

Fetching the Weather Info

The Weather Underground API works with simple GET requests and no key-value parameters — everything is just baked into the URL. The URL to call the Current Conditions service is:

http://api.wunderground.com/api/API-KEY/conditions/q/{$location.zipCode}.json

Replace API-KEY with your own API key. The {$location.zipCode} part calls the Location Context — the zipCode property is a feature of the Get User Location created by the Required Context.

The first time your user encounters this, the variable hasn’t been set. So the Required Context’s built-in mini-responder will ask the user for their location.

Displaying the Weather

Current Conditions Responder

Current Conditions Responder

Set the Result type to Text and put the following in the text tile:

Current conditions for {$.current_observation.display_location.full}… {$.current_observation.weather} and {$.current_observation.temp_f}F

Now we have to call the Responder from the Current Conditions message.

Current Conditions Message

We need a message that has a Dynamic Result, calling the Current Conditions Responder. We’ll add some appropriate Patterns, so that the user can access this again later.

Create Current Conditions message

Create Current Conditions message

And now we have a Bot that will give us the current weather for the current location.

Saying Hi to WeatherBot

Saying Hi to WeatherBot

Allowing WeatherBot to user location

Allowing WeatherBot to user location

Sending location to Weatherbot

Sending location to Weatherbot

And it's a nice day in Barkeley

And it’s a nice day in Berkeley

Add Quick Replies to Move User Forward

Once the user has seen the current weather, they might want to see the forecast. So let’s give them some Quick Replies.

Quick Replies for 10-Day and Hourly Forecast

Quick Replies for 10-Day and Hourly Forecast

We’ll also add one to let the user change locations.

Change Location Quick Reply

Change Location Quick Reply

Now, the user will see some options after the current weather is displayed.

Current Weather with Quick Replies

Current Weather with Quick Replies

There are two ways we could handle these Quick Replies:

Whenever possible, you should probably take the Pattern Matching approach. It’s generally more robust. Also, it allows the user to trigger the option by typing the choice directly, not just by selecting the menu.

Now let’s set up some Web Responders for the other weather data, and Messages to call them.

Ten Day Forecast

This will be a little more complicated than the Current Weather Responder. We’ll display each day of the days as a Structured Tile. The user will be able to scroll through the days from left to right.

Create the Responder

Create the Responder

Create the Responder

The URL for the extended forecast service is:

http://api.wunderground.com/api/API-KEY/forecast10day/q/{$location.zipCode}.json

Displaying the Result in Structured Tiles

Ten Day Forecast Structured Tiles

Ten Day Forecast Structured Tiles

The Structured Tile settings are:

Title
{$.forecast.simpleforecast.forecastday[i].date.weekday}: {$.forecast.simpleforecast.forecastday[i].date.monthname} {$.forecast.simpleforecast.forecastday[i].date.day}
Subtitle
{$.forecast.simpleforecast.forecastday[i].conditions} with a high {$.forecast.simpleforecast.forecastday[i].high.fahrenheit}F / low {$.forecast.simpleforecast.forecastday[i].low.fahrenheit}F
Image URL
{$.forecast.simpleforecast.forecastday[i].icon_url}

The Ten Day Forecast Message

The Responder is called from a Bot Message, which is triggered by the pattern ten day forecast.

Create Ten Day Forecast Message

Create Ten Day Forecast Message

We also need to add the Quick Replies to call the other forecasts and change location messages.

Quick Replies for Current Condition and Hourly Forecast

Quick Replies for Current Condition and Hourly Forecast

Quick Reply for Change Location

Quick Reply for Change Location

Hourly Forecast

Again, we’ll start by creating the Responder.

Create the Hourly Forecast Responder

Create the Hourly Forecast Responder

The URL for the hourly forecast service is:

http://api.wunderground.com/api/API-KEY/hourly/q/{$location.zipCode}.json

Then we’ll display the forecast response in Structured Tiles, so the user can scroll horizontally through the hours.

Hourly Forecast Structured Tiles

Hourly Forecast Structured Tiles

The Structured Tiles settings are:

Title
{$.hourly_forecast[i].FCTTIME.weekday_name}: {$.hourly_forecast[i].FCTTIME.civil}
Subtitle
{$.hourly_forecast[i].condition} and {$.hourly_forecast[i].temp.english}F
Image URL
{$.hourly_forecast[i].icon_url}

Hourly Forecast Message

The Responder is called from a Bot Message, which is triggered by the pattern hourly forecast.

Create Hourly Forecast Message

Create Hourly Forecast Message

And again, we need to add the Quick Replies to the other two forecast messages, and Change Location.

Quick Replies for Ten Day Forecast and Current Conditions

Quick Replies for Ten Day Forecast and Current Conditions

Quick Reply for Change Location

Quick Reply for Change Location

Change Location

Now we’ll create a message that handles changing the user’s location. This will be triggered by the pattern change location, and the Main Result will be a Static text response.

Create Change Location Message

Create Change Location Message

The real magic will happen in Postprocess.

Postprocess code

Postprocess code

The code here deletes the Get User Location created by the Location Context, and then calls the Current Conditions message. Since Current Conditions requires the {$location} value, the Required Context’s built-in mini-responder will take over and ask the user for a location.

botContext.removeChatBotRequiredContext('location');
botContext.setTriggerNextMessage('CURRENT CONDITIONS');

Now we have a fully functioning WeatherBot.

Ten Day Forecast in Messenger

Ten Day Forecast in Messenger

Hourly Forecast in Messenger

Hourly Forecast in Messenger

Error Handling

Just to round things out, let’s edit the Default message to be a little friendlier. (Also, let’s change the name to Error Handler, so we remember later what it’s doing.)

Misc Fail message

Misc Fail message

And We’re Done!

You now have a WeatherBot that will take a location and provide:

  • Current Conditions
  • Ten Day Forecast
  • Hourly Forecast

It also handles changing location and errors.

Along the way we’ve learned about:

  • Location handling
  • Required Context
  • Quick Replies
  • Building Web Responders
  • Using Structured Tiles to display results
  • Calling Responders from Messages