Who Am I – A Facebook Game, Part 1

UPDATE Part 2 in now published!
UPDATE Part 3 in now published!

Who Am I is a simple Facebook game built with Python and Flask.

In this and following posts I will introduce the game and develop it step by step. I will use the following stuff to develop the game:

• Python (you need basic skill in Python)
• Flask – a web framework for Python
• HTML + CSS + Javascript – and the ubiquitous jQuery library
• Facebook APIs – GraphAPI mostly

You probably need some experience in programming and web applications in order to follow along. If you ever programmed using a web framework (in any language) you will have easier time understanding the concepts.

The Idea Behind the Game – Johari Window

The game is a simple one and it is loosely based on the Johari Window technique by Joseph Luft and Harrington Ingham (a more detailed explanation of the theory can be found here).

In the Johari Window technique, a person defines himself by selecting adjectives from a list of 56 items. The same list is given to people who know this person and they also pick adjectives that they think describe him.

Using these sets of adjectives, we can define 3 groups of attributes this person has:

• Open – adjectives that were selected by the person and others. This is the part of ourselves that is known to us and to the world
• Hidden – adjectives selected by the person but not others. These are the behaviors and motives we keep inside, hidden from other people, either intentionally or not
• Blind – adjectives others selected but the person did not. These represent information others can see in us but we are blind to it

A fourth group exists in each person – the Unknown group which is the stuff which no one (including us) know about us.

The 4 groups are usually pictured in a window diagram and hence its name Johari Window (Joseph-Harrington Window):

Johari Window

A lot of stuff can be done with these groups – increase one’s personal awareness, give feedback to a person about his blind spots or to help him open hidden things with his friends.

The Game

The game is implemented as a Facebook game running inside the Facebook site.

In the basic game, the player, Susan, is first asked to select which adjectives describes her – for example Happy, Loving and Childish. Susan then invites her friends to also select the adjectives that describe her. When her friends accept the invitation, they are taken to a page where they can select the adjectives for Susan. Once they submit their selection they can play for themselves by filling out their own form and inviting their friends.

Susan can check out her “Personal Assessment” page to see what’s her open, hidden and blind behaviors are.

Types of Facebook Applications

A Facebook application is an application that uses the Facebook API in order to identify users and enrich the application’s social interactions through the Facebook platform.

To integrate Facebook in our game we have several options:

1. A Facebook application displaying inside the Facebook site
2. A web application running in its own page but interacting with the Facebook API
3. A mobile application interacting with the Facebook API

We’re going to develop a Facebook Application which means the application itself is hosted on your server but its UI is displayed in an iFrame inside the regular Facebook page.

Farmville is an example of such an application:

Farmville on Facebook

Notice the facebook.com URL in the address bar and Facebook’s nav bar on top and feed bar on the right side. The Farmville application is a Flash application running in an iFrame inside the Facebook page.

Python

We’re gonna use Python 2.7 to develop the server side of the game.

I decided to use Python because I wanted to learn Python. You need to have basic knowledge of Python. If you are new to programming I recommend the Learning Python book. It is very comprehensible and does not assume any prior programming knowledge. It explains Python and also basic programming concepts such as variables, loops, control structures, etc. As an experienced programmer I found Dive Into Python to be a great book which jumps right into teaching the language using real world examples. And it’s also free!

So go ahead, install Python 2.7 (if you’re using linux or OSX it is probably already installed. Check this by running python --version at the command prompt.)

If you don’t know how to install python, check out the python Beginners Page.

Flask

Flask is micro framework for writing web applications. If you’re asking yourself what does ‘micro’ mean then you are right to ask because Flask is not micro at all. It is a very comprehensive framework. It allows you to easily write a full blown web application from scratch. But it’s micro when you compare it to frameworks such as Django or CakePHP.

So what Flask does for you (in the context of our game)?

• Flask will let you write methods that accept HTTP requests and return HTTP responses.
• Flask provides easy ways to define which method to run in response to what requests.
• Flask provides easy way to get data from the HTTP request.
• Flask comes with the Jinja2 template engine which basically means you will have an easy way of writing dynamic HTML pages.

What Flask won’t do for you?

Well, it won’t make you coffee. But it also doesn’t provide some features that other ‘non micro’ web frameworks do provide such as:

• ORM – (Object Relational Mapping). It won’t help you work with the database
• Form Validation – Flask does not know the structure of your models so it won’t help validate data
• Access Management
• And more…

Basically Flask does not care about the model of your application, it only provides the tools needed to write it’s web client tier.

So why use it? Because it’s small it is also very easy to learn, especially as I’m trying to grasp Python, Flask, Facebook, CSS and Javascript all together.

Most of the time our application will consist of a single python script. Only later when we want to enhance it we will split it to multiple files.

We don’t need to know a lot about Flask to start programming with it. We can start using the basic functionality right away and learn new features only when we need them.

Go to the Flask website, download Flask and install it. You can also go over the tutorial in the Flask website.

Hello World

Let’s test if Python and Flask are installed correctly. Run the python interpreter by running python in the command line, and type import flask. The command should work without throwing any errors. You can then write print flask and it will print some information about the flask module. The whole session should look similar to this:

Python prints the location of the flask module.

Great, Python and Flask are installed, we can start writing our game!

Who Am I v0.1 – A Basic Game

In this post will write a simple version of the game. We will use only Python, Flask and basic HTML and CSS.

The game will have 3 views:

1. Home View – The player can see her Johari window in this view and invites from her friends. She can also invite other friends to play from this view.
2. Who Am I View – In this view the player can select which attributes she thinks describe her
3. Friend View – In this view the player can fill out the quiz for a friend.

When the player browses the application she is taken to the Who Am I page where she can submit her view of herself. She is then taken to the Home view to see her Johari window.

Once other players help her by filling out the quiz about her, she will start seeing meaningful information in the Personality view.

That’s it, simple and straightforward.

A Basic App

We will start with creating a simple one page web application using Python and Flask.

Create a folder for your application, e.g. ~/whoami. If you’re working on Windows it will be something like C:\whoami.

Create a new file called whoami.py inside the whoami folder.

Write or copy-paste the following code into the file:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def main():
    return show_personality()

@app.route('/personality')
def show_personality():
    return 'You are an amazing person'

if __name__ == '__main__':
    app.run()

This code creates a Flask object. It then defines 2 methods, main() and show_personality(). The methods are decorated with the app.route() decorator. This decorator “binds” the method to the url path specified in the parameter.
For example:

@app.route('/')
def main():

This code binds the main() method to the root url /. Whenever someone browses to http://127.0.0.1:5000/ Flask will call the main() method and send back whatever it returns.

We defined 2 methods. The main() method will be used to redirect users to the page that they need to see based on their status. For example, if the player did not fill in their Who Am I page yet, they will be redirected there. Otherwise they will be taken to their personality page. Right now we always take the player to the personality page. Later this method will handle more cases.

Save the file and run it:

$ python whoami.py
 * Running on http://127.0.0.1:5000/

You’ll see an information message from Flask telling you that your web app is running at port 5000 on your local host.

Let’s check it – fire up your browser and browse to http://127.0.0.1:5000. You should see something like this:

OK! We have a skeleton application and in the next post we’ll see how to extend it with all the functionality we want.

Summary

In this post we introduced the idea to a simple Facebook game called Who Am I.

We briefly reviewed the technologies we’re going to use to develop the game – Python, Flask and a general explanation of the various types of Facebook apps.

We then created a very simple web application using Python and Flask. Due to Flask’s awesomeness we were able to see something in the browser with only a few lines of code.

But our application doesn’t do much yet. In the next part we will add more functionality to the game using HTML templates and db persistence.
[UPDATE] Part 2 in now published!