Draw With Your Face
Development BLOG - about
Draw With Your Face is a game for Google+ Hangouts created by Aaron Meyers and OKFocus. Some of the mechanics will be familiar to players of other drawing games: players take turns trying to get other players to guess a word with a drawing.
As the name suggests, Draw With Your Face adds a new twist: using face tracking, players create their drawings hands-free using just their face! Its fast-paced and funny. And fun!
Draw With Your Face is a part of Google’s Hangouts Hackathon.
-
5 / 18
-
Geting Up and Running With
Google+ Hangouts APIOptimizing for Developer Happiness
At OKFocus, we think a lot about optimizing for developer happiness. It’s important to us that when we work we have the flexibility to experiment with different ideas without having to worry about the project at hand going up in flames or something terrible happening to the codebase. Since this is at the core of our philosophy around creating digital experiences, all of our code is tracked using Git. For those who aren’t familiar with Git, it is a very popular version control system that allows developers to work together without having to worry about stepping on each other’s toes. Furthermore, it’s important that developers can have the freedom to use their own tools (everyone on this project uses a different text editor) and work locally on their own machines.
Our workflow goes something like this:
- Write some code
- Commit the code to the Git repository
- Push the code to Github
- All team members are notified in HipChat
- Team pulls changes
- Repeat!
If you want a closer look at the tools we use at OKFocus, check out this project on Github.
Working with the Google+ API and the Hangouts API is new for us. Going into this project we knew we wanted to bring our development methodologies with us to help us get the boring stuff out of the way and make something cool. Even better, we didn’t want to have to deploy to a server every time we committed a bit of code. Let’s look at how to make an awesome development environment that will get you hacking on a Google+ Hangout in no time.
Hacking on a Google Hangout Locally
To get started you will have to have the following installed:
Most OKFocus projects happen using Rails or Express.js. Both of these frameworks have a very simliar workflow and let developers work in a test, development, or production environment. Running a local web server with both of these frameworks is quite simple. For Draw With Your Face, we knew we’d be hosting our application with Google’s App Engine which is new to us, so we created a development environment that feels similar to what we’re used to.
Setting Up Your App Engine
Our use of App Engine for this project is simply to serve static files, theres a good chance your Hangout App will only require this functionality from a web server. To set up an App Engine instance, log into App Engine and create a new application. Take a note of your application identifier.
In your Hangouts API console, set your application URL to point to a path like http://[your-application-identifier].appspot.com/static/app.xml. This XML file tells your Hangouts App where to look for your app’s JavaScripts. Let’s worry about configuring it in a later section. Right now lets just configure your app.yaml for your App Engine instance to look like this:
Note that we have set our Python runtime to use Python 2.7.x. When doing so, you must also set “threadsafe” to be either true or false. This also tells our app to serve all files in the “static” directory coupled with a little bit of Python from our main.py file.
Stunnel
Once we had our App Engine instance deployed and running, we were still running into an issue where Hangouts wouldn’t let us serve our JavaScripts from localhost. It looks like almost all Google products have switched over to HTTPS (which is a good thing!); however, the development version of App Engine only allows HTTP locally. Thankfully, the open source community has a tool called stunnel that allows developers to tunnel HTTP connections through a secure layer as if the web server supported HTTPS.
After you’ve installed and built stunnel, you can set “accept” to 8001 and “connect” to 8080 for HTTPS. You’ll find this setting at the bottom of stunnel.conf. We keep a copy of stunnel.conf in our Git repository for this project. To start our servers, we simply type:
sudo stunnel stunnel.conf
We run this command from the root of our project directory, referencing our customized stunnel.conf file as the first argument to the stunnel command from the command line.
Serving the App
Now let’s configure our Hangout App’s main XML so we are referencing our new stunnel configuration. Once everything is configured and looks okay, you can deploy to App Engine using the App Engine Launcher.
Note that we are serving from port 8001 per our stunnel configuration. You’ll also note the link to the commented out path for production. Once we’re ready to start serving from App Engine, it just a matter of uncommenting that, removing our references to localhost, and deploying.
Hacking Locally
Now that your XML is referencing files that are being served from your localhost through stunnel, you are free to work locally and see changes immediately. This means you wont have to deploy to Google App Engine over and over. This also means that you can share code quickly with team members through Github and merge in changes with ease. Simply work with the JavaScript referenced in your main XML file, and visit the test hangout. You’ll see your changes immediately!
One thing to note is that this setup allows for only one participant in a Hangout at a time. This isn’t a problem during early development stages but we will have to alter our environment next week to make multiple participants work. Look for a blog post early next week from Jules that will explore that and more.
Happy hacking :)
Jonathan Vingiano — @jgv
Notes:
-
fuckthedoomed likes this
-
gregorynicholas likes this
-
yourpalmal likes this
-
untilthemartiansarrive likes this
