Contents


Create a baseball-themed app powered by Weather Company Data for IBM Bluemix and DBpedia

Use the Bluemix service to provide weather data for major league ballparks

Comments

This tutorial was written using a previous version of the IBM Bluemix® interface. Given the rapid evolution of technology, some steps and illustrations may have changed.

Here in North America, baseball season is under way and the excitement is palpable. This is the perfect excuse for me to show you how to put your technical chops to good use and explore IBM's new weather service: Weather Company Data for IBM Bluemix. Using React.js, you will build a fun baseball-themed app that provides a variety of information about each Major League Baseball park, including the current weather. We'll take an in-depth look at Weather Company Data for IBM Bluemix, and use it to provide up-to-date weather information for each park. You'll even get a chance to dust off your SPARQL skills and hit up the DBpedia API to collect images and information about each ballpark.

What you'll need

To try out the examples and to create and run the Ballparks app, you'll need:

Get the code (GitHub)Run the app

Weather Company Data for IBM Bluemix puts weather data at your fingertips. It has never been easier to build weather-driven apps.

Prepare the Ballparks project

Step 1. Create a Weather Company Data for IBM Bluemix service instance

The Ballparks sample project requires an instance of the Weather Company Data for IBM Bluemix service. You will eventually integrate this service into the Ballparks sample app and then use it to pull up-to-date weather information for each Major League Baseball park.

  1. Log into Bluemix.
  2. Navigate to the catalog and choose Weather Company Data for IBM Bluemix. (This service was previously named Insights for Weather.)Screen capture of Weather Company Data for IBM Bluemix icon
  3. Create an instance and choose Leave Unbound. Write down the service name (in this case, Weather Company Data for IBM Bluemix-kw). You will need it for "Step 3: Deploy the Ballparks app to Bluemix," below. Screen capture showing Leave Unbound
    Screen capture showing Leave Unbound
  4. Navigate back to the Bluemix dashboard and click the new service instance.
  5. Select Service Credentials to see the Weather Company Data for IBM Bluemix service URL and credentials (redacted here).Screen capture showing Service Credentials
    Screen capture showing Service Credentials

Step 2. Get the Ballparks app source code

  1. Open a terminal.
  2. Enter:
    mkdir $HOME/ballparks
    cd $HOME/ballparks

    I will refer to this directory as the $BALLPARKS_HOME directory.

  3. Enter:
    git clone
    https://github.com/cdimascio/ballparks.git

$BALLPARKS_HOME should now contain the Ballparks source code.

Step 3. Deploy the Ballparks app to Bluemix

Now, let's get the application running using your service instance.

Substeps 1-3 are for initial preparation and need to be performed only once:

  1. Navigate to $BALLPARKS_HOME.
  2. Open manifest.yml.
  3. Edit the file. Set name: and host: to something unique (for example, dimascio-ballparks). Under services:, enter the name of your service. This is the name you wrote down in substep 3. of “Step 1. Create a Weather Company Data for IBM Bluemix instance.
    ---
    
    applications:
    
    - name: <your-user-name>-ballparks
    
      memory: 256M
    
      instances: 1
    
      host: <your-user-name>-ballparks
      domain: mybluemix.net
    
      env:
        
        NODE_ENV: production
    
      services:
    
      - <your-weather-service-name>
    Perform steps 4-6 to deploy the app to Bluemix.
  4. Navigate to $BALLPARKS_HOME.
  5. Run cf push <user>-ballparks.
  6. Open your browser to http://<user>-ballparks.mybluemix.net.

    The Ballparks app should be running using your weather service instance.

Cool! You now have your own copy of the Ballparks app running.

Step 4. Deploy the Ballparks app locally

It's often convenient to run the application locally. That way you can step through the code and make changes in a sandbox. To run the application locally, do the following:

  1. Set the environment variable WEATHER_API_ROOT to the URL specified in the Bluemix credentials object. You viewed this in substep 5 of Step 1. Create a Weather Company Data for IBM Bluemix instance.
  2. Export WEATHER_API_ROOT=https://<your-service-url>.
  3. Run npm start.
  4. Open your browser to http://localhost:3000.

You now have a copy of the app running locally.

Using the Weather Company Data for IBM Bluemix service

The Ballparks app relies on Weather Company Data for IBM Bluemix for weather data. In this section, we'll take a closer look at the service and what it has to offer. I will also provide a number of curl examples that you can try out on your own.

Weather Company Data for IBM Bluemix enables you to incorporate weather data from The Weather Company (TWC) into your IBM Bluemix application. As of today, the service provides four operations:

  • Request a 24-hour forecast.
  • Request a 10-day forecast.
  • Display current weather observations.
  • Display current observations along with 24 hours of past observations.

The service provides this information via a REST API. Each API operation requires three parameters:

  • unit: The units to return in the API response. Supported units of measure are English (e), Metric (m), and UK-Hybrid (h).
  • geocode: The optional latitude and longitude; for example, Fenway Park in Boston would be 42.3463,-71.0975.
  • language: The language in which the response will be returned. The default is en-US.

Here is a description of each API operation along with a sample curl request. Try them out yourself.

  • GET /forecast/hourly/24hour

    Returns an hourly 24-hour forecast, for a geolocation, in the provided units of measure.

    curl -X GET "https://<user>:<password>@twcservice.mybluemix.net/api/weather/v2/forecast/hourly/24hour?units=m&geocode=42.34639%2C-71.0975&language=en-US"
  • GET /forecast/daily/10day

    A daily weather forecast for the next 10 days that includes forecasts for the daytime and nighttime segments for a specified geolocation. This forecast includes the forecast narrative text string with appropriate units of measure for the location and in the language requested.

    curl -X GET "https://<user>:<password>@twcservice.mybluemix.net/api/weather/v2/forecast/daily/10day?units=m&geocode=42.34639%2C-71.0975&language=en-US"
  • GET /observations/timeseries/24hour

    The observed weather data for a specified geolocation and a specified time range. This data is sourced from physical observation stations. This API returns weather observations for current conditions and past observations up to and including the previous 24 hours.

    curl -X GET "https://<user>:<password>@twcservice.mybluemix.net/api/weather/v2/observations/timeseries/24hour?units=m&geocode=42.34639%2C-71.0975&language=en-US"
  • GET /observations/current

    The current observed weather data for a specified geolocation. This weather data includes temperature, precipitation, wind direction and speed, humidity, barometric pressure, dew point, visibility, and ultraviolet (UV) radiation.

    curl -X GET "https://<user>:<password>@twcservice.mybluemix.net/api/weather/v2/observations/current?units=m&geocode=42.34639%2C-71.0975&language=en-US"

Using the DBpedia SPARQL endpoint

The Ballparks app uses DBpedia to fetch general information and images for each ballpark. DBpedia provides a huge RDF dataset that currently describes more than 4.5 million things, most of which are classified into a consistent ontology. DBpedia is open source, and its RDF data can be queried via its SPARQL endpoint.

The Ballparks app uses the dpedia-sparql-client to execute SPARQL queries against DBpedia.

Here is an example SPARQL query used by Ballparks to pull information for Fenway Park:

PREFIX dbpedia2: <http://dbpedia.org/property/>
  PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
  PREFIX d: <http://dbpedia.org/ontology/>

  SELECT ?name ?thumb ?comment ?description ?openingDate (group_concat(?link;separator="|") as ?links) WHERE {
      
    ?park rdfs:label "Fenway Park"@en ;
             
    d:abstract ?description ;
         
    rdfs:comment ?comment ;
        
    foaf:isPrimaryTopicOf ?name .
          
    OPTIONAL { ?park dbo:wikiPageExternalLink ?link } .
          
    OPTIONAL { ?park d:thumbnail ?thumb } .
          
    OPTIONAL { ?park dbpedia2:logoImage ?thumb } .
          
    OPTIONAL { ?park d:openingDate ?openingDate } .
          
    OPTIONAL { ?park dbpedia2:opened ?openingDate } .
      
    FILTER ( lang(?description) = "en")
      
    FILTER ( lang(?comment) = "en")
  
    }

GROUP BY ?name ?thumb ?comment ?description ?openingDate

And here is an example using dbpedia-sparql-client for Node.js:

var dps = require('dbpedia-sparql-client').default;
var query = 'SELECT DISTINCT ?Concept WHERE {[] a ?Concept} LIMIT 10'; // replace with query above
dps.client()
  .query(query)
  .asJson()
  .then(function(r) {
    console.log(JSON.stringify(r));
  })
  .catch(function(e) {
    console.error("ERROR: "+e);
  })

SPARQL and DBpedia are beyond the scope of this article, but see "Related Topics" below to get started with them.

Exploring the code

So far we've hit on the key technologies that drive the Ballparks app. By now you should know just enough to go off and kick-start your own weather-driven app. It's likely that some of you are interested in exploring the nitty-gritty details of the app. In this section, we'll take a quick look at the project structure, so that you can dig into the code in as much or as little detail as you like.

Web client
The web client is written in JavaScript, HTML, and CSS. It is built on React.js and Redux. The client code is found in $PROJECT_ROOT/client/src.

Server

The server is also written in JavaScript. Its source can be found at $PROJECT_ROOT/server.

Here are some of the more interesting bits, many of which can be found in $PROJECT_ROOT/server/api/services.

  • weather.service.js—Interacts directly with Weather Company Data for IBM Bluemix.
  • dbpedia.service.js—Provides a simple interface that's used to interact with DBpedia. You'll notice that it utilizes the dbpedia-sparql-client for its heavy lifting.
  • ballparks.service.js—Requests ballpark-related images and information from DBpedia.
  • ballparks.weather.service.js—Periodically requests weather information from Weather Company Data for IBM Bluemix (via weather.service.js) and combines it with ballpark information fetched through ballparks.service.js.

Conclusion

There you have it. You now know how to create your own Weather Company Data for IBM Bluemix service, run the Ballparks app locally, and deploy it to Bluemix. We have explored the weather service in quite a bit of detail, executing each observation and forecast API using curl. We even took a brief look at DBpedia, SPARQL, and the dbpedia-sparql-client.

Weather Company Data for IBM Bluemix puts weather data at your fingertips. It has never been easier to build weather-driven apps. I hope that you'll fork the Ballparks GitHub repo and put your own spin on it. Feel free to re-purpose the app. Apply a new theme—perhaps skiing, football, or soccer—or try something entirely different. Above all, have fun with it! I'm excited to see what you create.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing
ArticleID=1034693
ArticleTitle=Create a baseball-themed app powered by Weather Company Data for IBM Bluemix and DBpedia
publish-date=07112016