Hackathon

AccuWeather: Hacking the Weather at Penn State

Editor's note: Today we hear from Mark Iannelli, senior technical account manager at AccuWeather, the leader in providing accurate weather data. Mark is responsible for providing technical guidance to key global partners who leverage AccuWeather’s industry-leading location and weather data APIs. Read on to learn about how Apigee helps AccuWeather expand the reach of its APIs.

AccuWeather has been in the API game now for over ten years. We have always had “enterprise APIs,” as we call them, and we worked with major companies worldwide including leading smartphone OEMs, IoT producers, and others in some of the world’s biggest industries. As a result, our APIs are already in use by many leading companies, but we wanted to do more. We made the decision to work with Google's Apigee, a leader in API management solutions, to expand our reach and engage smaller new audiences, such as small to mid-size businesses, individual developers, entrepreneurs, or students.

Building cool things—the AccuWeather Challenge

One of the ways that we can do this is by participating in hackathons, such as the HackPSU event at Penn State University. As a sponsor of the hackathon, we created the AccuWeather Challenge to use our weather APIs, powered by Apigee, to inspire new products.

We challenged students to develop their ideas and “build cool things.” The weather impacts everything—from what you do, what you wear, what you eat, to even how you feel. So we wanted students to create a product to help improve people’s lives. The idea could help solve real-world problems, be a new IoT device, or something fun and creative!

Apigee gives us the ability to create a simple and easy-to-use API Developer Portal that students could access throughout the hackathon. When given an API key, students easily access our AccuWeather data using API documentation and best practices to begin development on their own—even with limited knowledge of APIs. It is a perfect example of the seamless and frictionless developer experience we wanted to bring to our users.

Winning designs

The winning team combined multiple technologies to create a product called “Image-to-Haiku”. The product took an image uploaded by a user and applied image recognition technology via the Google Cloud Vision API  to identify objects from the image. Next, it checked the user’s current weather using the AccuWeather Locations and Current Conditions API.

Finally, the product captured the emotion and feelings from the image and current weather to create a Haiku that reflects what a person may be seeing and feeling in real time.

To hear more, check out the podcast “On Location at HackPSU,” in which the winning student team talks about their product created with AccuWeather and Google APIs (see image above).

We've been doing hackathons for a while now, and we've seen our APIs applied in all kinds of ways. Often, we see people trying to tweak something that's already on the market like various smart-home hacks, but this was the first time we had ever seen a product like this “Image-to-Haiku.” It was their own unique design, which made it stand out in the 24-hour competition.

Another team, called “Weather or Not,” created a product that takes a bucket list of your top-ten travel destinations in the world, and combines AccuWeather’s 15-day forecast along with airline ticket prices for travel. If you wanted to take a spontaneous trip, the app tells you the best time to go, based on the weather and the ticket price, presenting your options to you in ranked order of desirability.

Hackathons like HackPSU open up new opportunities for collaboration with students. It's something we have always enjoyed doing. But now inspiring this kind of creativity with APIs has gotten much easier with the help of Apigee.

Integrating Philips Hue and Uber APIs: Here's the Code

In a previous post, we discussed our experience at the first Philips Hue Hackathon in Bangalore. We integrated the Philips Hue API with Uber’s API to build a mobile app that seamlessly incorporates both platforms to provide a new user experience. Our app enables you to send your Uber ride status to Hue and track your ride’s progress using different colors from the Hue light bulbs.

In this post, we’ll walk through the code our team wrote.

The Philips Hue lighting kits we worked with are exposed on local networks, so any Philips Hue SDK can be used to talk to Hue lighting systems using a local IP address.

Our "Hueber" app was divided into two parts: a server and a web app. The server was built using Node.js and a simple client that’s a single-page web app that used AngularJS and HTML5. The Philips Hue Node SDK made it easy for us to interact with the lighting system.

We split the work between the four members of our team, with each of us getting a different part of the development: integration with Hue, sign in with the Uber OAuth2 login implementation, integration with the Uber APIs, and construction of the HTML5 app.

Integration with Hue

We used the Node Hue API module to talk to the Philips Hue lights. Connecting to them from Node.js required a few simple lines of code:

var hue = require("node-hue-api"),

HueApi = hue.HueApi,

lightState = hue.lightState;

 

var displayResult = function(result) {

console.log(JSON.stringify(result, null, 2));

};

 

var host = "XXX.XX.X.XXX",

username = "XXXXXXXXXXXXX  ",

api = new HueApi(host, username),

state;

 

// Set light state to 'on' with warm white value of 500 and brightness set to 100%

state = lightState.create().on().white(500, 100);

 

// --------------------------

// Using a callback

api.setLightState(5, state, function(err, lights) {

if (err) throw err;

displayResult(lights);

});

Sign in with the Uber OAuth2 login implementation

We used the Node.js passport and passport-oauth2 modules to implement an OAuth 2.0 authorization flow on the server to obtain an access token for the user and securely access the Uber API on the user’s behalf.

passport.use(new OAuth2Strategy({

  authorizationURL: 'https://login.uber.com/oauth/v2/authorize',

  tokenURL: 'https://login.uber.com/oauth/v2/token',

  clientID: 'XXXX',

  clientSecret: 'XXXXX',

  callbackURL: "http://localhost:3000/auth/uber/callback"

},

function(accessToken, refreshToken, profile, cb) {

  var user = {}

  user.token = accessToken

  user.refreshToken = refreshToken

  return cb(null, user);

}

));

 

app.get('/auth/uber', passport.authenticate('oauth2', {

redirect_uri: 'http://localhost:3000/auth/uber/callback',

scope: 'profile request',

state: '3(#0/!~',

response_type: 'code'

}));

 

app.get('/auth/uber/callback',

passport.authenticate('oauth2', {

  successRedirect : '/profile',

  failureRedirect : '/'

}));

 

Uber APIs: request ride

Requesting an Uber is simple: it just required a POST to /v1/requests.

 

//Request Uber Ride

 

app.post('/hueber/v1/request', function(req,res){

console.log("Token " + req.user.token)

placeRequest(req.user.token, function(err, response){

  updateHueLights(getState("on", 255, 98, 0));

  hueAPI.lights().then(displayResult).done();

  res.json(JSON.parse(response))

})

})

 

var placeRequest = function(token, callback){

var options = {

  url : 'https://sandbox-api.uber.com/v1/requests',

  method: 'POST',

  headers:{

    'Authorization':'Bearer ' + token,

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({

    "product_id": "XXXXX",

    "start_latitude": 37.761492,

    "start_longitude": -122.423941,

    "end_latitude": 37.775393,

    "end_longitude": -122.417546

  })

}

 

request(options, function(err, res, body){

  callback(null, body)

})

}

 

Simple single-page web app using AngularJS

AngularJS helped us to quickly connect our front-end logic with back-end data. The implementation of formController fetches data from back-end server APIs.

 

hueberApp.controller('formController', ['$scope', '$timeout', '$stateParams', 'uberApi',

                                     function($scope, $timeout, $stateParams, uberApi) {

$scope.username = ''

$scope.philipsIpAddress = 'XXXX'

$scope.philipsUserName = 'XXXX'

uberApi.getUserDetails()

  .then(function (response) {

    $scope.username = response.data.first_name + ' ' + response.data.last_name;

    $scope.userphoto = response.data.picture

    console.log(response)

  }, function (error) {

    console.log(error)

  })

 

$scope.bookRide = function() {

  uberApi.bookRide($scope.philipsUserName, $scope.philipsIpAddress)

    .then(function (response) {

      alert('Your ride is on its way..')

      console.log(response)

    }, function (error) {

      console.log(error)

    })

}

 

$scope.sendSos = function() {

  uberApi.sendSos($scope.philipsUserName, $scope.philipsIpAddress)

    .then(function (response) {

      alert('Your Family Alerted....')

      console.log(response)

    }, function (error) {

      console.log(error)

    })

}

 

$scope.finishRide = function() {

  uberApi.finishRide($scope.philipsUserName, $scope.philipsIpAddress)

    .then(function (response) {

      alert('Thank you for choosing Hueber....')

      console.log(response)

    }, function (error) {

      console.log(error)

    })

}

 

$scope.stopLights = function() {

  uberApi.stopLights($scope.philipsUserName, $scope.philipsIpAddress)

    .then(function (response) {

      alert('Your Family has been updated....')

      console.log(response)

    }, function (error) {

      console.log(error)

    })

}

 

$scope.enRoute = function() {

  uberApi.enRoute($scope.philipsUserName, $scope.philipsIpAddress)

    .then(function (response) {

      alert('Your Family has been updated....')

      console.log(response)

    }, function (error) {

      console.log(error)

    })

}

}])

 

At the end of the hackathon, we were able to successfully showcase our Hueber app proof of concept with just over 600 lines of custom code. Coming up, we’ll discuss how to build the same app using an API-first Backend-as-a-Service (BaaS) and the advantages of using Apigee BaaS.

 

Hue APIs + Uber APIs = The Hueber App

Building a new user experience at the Philips Hue hackathon

For most of its history, the light bulb has been a simple device that provides light. It’s either on or it’s off.

Philips Hue changed this. By employing APIs and smart technology, Philips digitally transformed its lighting division from a hardware provider to an ecosystem that interacts with the world intuitively and seamlessly. It also created a growth engine: Philips Hue and LED sales increased by 26% last year—while conventional lighting sales decreased by 16%.  

Because the Philips Hue API and its developer ecosystem is powered by Apigee, we were excited to enter Philips Hue’s first-ever hackathon at the Philips Innovation Campus in Bangalore. The goal of our project was to figure out how to employ Philips Hue technology and APIs to create a powerful and useful experience for end users.

We also thought about some other successful digital platforms and how we could incorporate them into our hackathon idea. Being one of the most disruptive and successful digital platforms around—one that connects a billion people across borders, languages, cultures—Uber naturally came to mind.

We integrated Philips Hue and Uber to build a mobile app that seamlessly incorporates both platforms to provide a new user experience. It’s a pretty simple idea: you send your Uber ride status to Hue and track your ride’s progress using different colors from the light bulbs.

We took the app a step further by adding a security feature that, if the Uber rider is in trouble, sends alerts to the Hue lighting system to notify the rider’s family or colleagues.

By using Uber’s open and secure API, our so-called “Hueber” app enables users to book an Uber ride with their Uber credentials. They can log in and enable features like ride requests and profile information (including credit card payment information). The Philips Hue API enables the configuration of the Hue lighting system settings in the same app.

Once the Uber ride is confirmed, a Hue light turns orange. As your Uber ride approaches, the light gradually turns from orange to green (so you don’t have to stare at your phone to track the approach of your ride).

Once your ride starts, the Hue light returns to a green color. If something unexpected happens during your trip, you can send an alert via a button on your mobile app, which prompts the Hue bulb to blink in red. Once you reach the destination, lights will turn violet to notify your family that you’ve reached your destination.

The icing on the cake? Team Apigee won the hackathon, which attracted over 35 teams! After 12 hours and over 600 lines of custom code, our effort to combine two powerful APIs to create a new user experience put us on top!

In an upcoming post, we’ll discuss how we organized our team to build this app, and walk you through the code.

And coming up in June, we're planning to host a joint webcast with Uber that will include a live demo of our Hueber app. 
 
Hue image: Flickr Creative Commons/Sho Hashimoto