Makahiki Widget Development

My exploration of the Makahiki platform continued this week. I tried my hand at adding a few new widgets that could be inserted into a different pages. (Apologies to any general readers: this will be a very Makahiki-specific post.)

I started by following the Hello World tutorial. This was fairly painless and gave a nice overview of the files and functions that comprise a widget.

Next, I built a Group Scoreboard widget. At this point I wished for a bit more of a high-level overview of how widgets should work. I wasn't sure where the best place would be to add new data-gathering code: within the template HTML page, within the related views.py, or in the corresponding manager library. I quickly learned that code within a Django template doesn't seem to handle any parentheses or parameters, so that left views.py or the manager classes. I ended up working with both of these.

Groups are closely related to teams, so there was a fair amount of existing code to review and cannibalize. But, as with any complex system, it is hard to quickly build a mental map from the bottom-up like this. I felt a bit like I was redecorating while stumbling around in a dark room.

I got my Group Scoreboard together, though. I also built two Group Resource Use widgets. This proved a little trickier since it involved "subclassing" a widget. I also initially missed the INSTALLED_COMMON_WIDGET_APPS setting in settings.py, so I couldn't figure out why my common template file couldn't be found while resource_goal's could be. Also, I made a few errors that prevented the server from starting, and so I spent a while trying to debug single-line error messages such as "Error: cannot import name Team". I learned about this command:

  ./manage.py shell --traceback

which provides a full stack trace on an error. This was invaluable for debugging.

By this point, I was running short on time. I skipped making a Group Prize widget and started on a couple group-related Status page widgets. I spent an hour or so trying to decide how best to gather the group data from the team scoring/ranking system that is spread between score_mgr and team_mgr. I started toying with a plan to filter the team data to include only those in one group. As I neared the point to start testing it, I realized I didn't know exactly how the existing score widgets were placed on the Status page.

Specifically, I found the two templates (team_point.html and team_participation.html) that I wanted to copy in the widgets/status/score folder. However, simply adding a new group_point.html template in the same place didn't auto-magically show up. There is also no status.score widget registered through the Makahiki interface. Instead, these templates appear to be controlled indirectly through a separate scoreboard app. Looking through scoreboard's template was a bit of a mystery, however, since it makes no explicit reference back to the status.score templates.

The listed Makahiki widgets (front right) and corresponding file structure (back left).

At this point, it was time to move on from this project to bigger and better things. Here is a shot of my successful widgets currently on the Profile page:

And these are available within Makahiki to be added to any page:

Makahiki Configuration

Building on last week's Makahiki installation, this week I played around with some common configuration tasks. Below are the steps I completed. The section numbers given in parentheses correspond to the Makahiki docs found here.

0. Update your Heroku Makahiki instance (2.1.1.2.11)

I added the AWS credentials environment variables to the project's activate file in ~/.virtualenvs folder first. You should also add the MAKAHIKI_ADMIN_INFO here too. Uploading took 5 minutes or so.

I noticed this line in the output:

Environment variable MAKAHIKI_DATABASE_URL not defined. Exiting.

It didn't seem to cause any later problems though.

1. Getting to the challenge design page (2.3.2 / 2.2.1.1)

I couldn't get to the /account/login page at first. This took me 20 minutes to debug, and I reinitialized the Heroku instance during the process. It turned out I had just mistyped "account". <sigh>

2. Design the global settings (2.3.3.1)

I changed the Name and Logo settings as a test.

3. Design the teams (2.3.4.2)

I added a new Lehua-C team as part of the existing Lehua Group.

4. Set up users (2.3.4.3)

I could create new users, but I could not login normally using their accounts. It was possible to login as them from the admin's account, though. It turns out this was due to having mixed-case usernames, so make your usernames all lowercase.

5. Specify the games to appear in your challenge (2.3.6.1)

I disabled the "Drop Down" water game.

6. Learn about how to design the resource goal games (2.3.6.2.1)

This step just involves learning about the system and the design goals behind it.

6.1. Configure the Energy Goal Game for your new team

I switched the Lehua-C team to using manually-gathered energy data.

7. Learn about how to design Smart Grid Games (2.3.6.3)

This is another learning-about-the-system step, but it's important for the next few sub-steps.

7.0. Design on paper

Or at least mentally sketch out the next level your want to create in the Smart Grid Game.

7.1. Create a Level

I create a new Level 4 that unlocks once the user has completed a couple Level 2 tasks.

7.2. Create a new Activity action

I created an activity involving airship research.

7.3 Create a new Event action

I created an excursion to the helium fields.

7.4 Create a new Commitment action

I created a commitment to hold one's breath while passing a graveyard.

7.5 Finalize the grid

I edited the existing car-pool activity and added it to my level. (I was careful to select an activity that wasn't assigned to a category or level yet.)

Although I tested each of these sub-steps as admin along the way, I ran through the tests again with a different user.

8. Design the Top Score Game (2.3.6.4)

I created a new prize.

9. Design the Raffle Game (2.3.6.5)

I created a teddy bear raffle prize and tested it.

10. Design the Badge Game Mechanics (2.3.6.8)

I created a badge and earned it.

11. Manage Action submissions (2.4.2.2.1)

I approved and rejected a few activity responses that I generated during the earlier tests.

Overall, I found Makahiki to be a fairly polished and complete system. The most challenging parts of this proved to be my own mistakes (mistyping the URL) or undocumented requirements (such that the usernames need to be all lowercase). My general impression, though, is that Makahiki design and management is a rather long and tedious affair. I tried to create some slightly amusing activities to stay engaged with the process, but I'm still glad I'm done with this exercise.

Remote Makahiki Installation: A Reader's Guide

After installing Makahiki locally, it's time to try deploying it to Heroku. Once again, I'm following the user manual's instructions for this with a report of how each step went.

2.1.1.2.1. Install Heroku

Already installed.

2.1.1.2.2. Add your SSH keys to Heroku

Already done from an earlier project.

2.1.1.2.3. Verifying your Heroku account

Grudgingly done. I didn't really want to hand out my credit card for this.

2.1.1.2.4. Setup Amazon S3

Grudgingly done. (Later, in Step 9, I learned I should have selected US Standard as the region for my bucket.)

2.1.1.2.5. Setup environment variables

As instructed, though I changed the admin password.

2.1.1.2.6. Download the Makahiki source

Skipped this step, since I still have it from the local installation.

2.1.1.2.7. Initialize Makahiki

This was probably unnecessary, but: I wasn't sure if this initialization would mess up my existing local installation. I created a new virtualenv with mkvirtualenv makahiki-heroku.

In the next step, I realized I also needed to run pip install -r requirements.txt at this point.

The upload process took about 20 minutes or so.

2.1.1.2.8. Start the server

Everything loaded fine, but the pages lacked style and images. I checked my S3 bucket and it was empty. Trying again, I found this in the output:

Do you wish to continue (Y/n)? Y
resetting the db...
Resetting HEROKU_POSTGRESQL_RED_URL (DATABASE_URL)... done
syncing and migrating db...
Running `python makahiki/manage.py syncdb --noinput --migrate --verbosity 0` 
attached to terminal... up, run.4074
collecting static and media files...
Traceback (most recent call last):
  File "/home/ztomasze/makahiki/makahiki/manage.py", line 9, in <module>
    from django.core.management import execute_from_command_line
ImportError: No module named django.core.management
s3put -q -a AKIAJC76TME6N23PKRMA -s [...omitted...] -b ztomasze-makahiki 
 -g public-read -p `pwd` media
sh: 1: s3put: not found
s3put -q -a AKIAJC76TME6N23PKRMA -s [...omitted...] -b ztomasze-makahiki 
 -g public-read -p `pwd`/site_media site_media/static
sh: 1: s3put: not found
loading base data...

Both django.core and the s3put commands seem to be missing. I remembered that I had created a new virtualenv, so I ran pip install -r requirements.txt and tried again. Problem solved.

2.1.1.2.9. Verify that Makahiki is running

The links to images and stylesheets were still failing, even though the files were now in place on S3.

As an example, in the source code of the main page, the logo gif had this URL: https://s3.amazonaws.com/ztomasze-makahiki/static/images/old-logo.png

Accessing this URL directly got me this error message:

<Error>
<Code>PermanentRedirect</Code>
<Message>
The bucket you are attempting to access must be addressed using 
the specified endpoint.  Please send all future requests to this 
endpoint.
</Message>
[...snip...]
<Endpoint>ztomasze-makahiki.s3.amazonaws.com</Endpoint>
</Error>

And indeed, accessing https://ztomasze-makahiki.s3.amazonaws.com/static/images/old-logo.png instead worked fine.

Feedback from Yongwen, the current Makahiki admin, suggested that this URL difference is due to which region you select when creating the S3 bucket. I originally went with S3's suggestion of Oregon, but apparently US Standard gives you the URLs assumed by Makahiki. To try this, I deleted and tried to recreate my bucket. There was a temporary name conflict, so I had to choose a different bucket name. I updated the MAKAHIKI_AWS_STORAGE_BUCKET_NAME environment variable and reinitialized Makahiki (step 7).

It looks like everything now works.

Conclusion: Total Time: 3 hours. This was longer than the local install, although there were fewer steps. This time difference was mainly due to waiting for downloads and uploads. Overall, this process was about as painful as any Heroku deployment, though each one gets easier with more practice.

Local Makahiki Installation: A Reader's Guide

Today I worked through the installation of the Makahiki energy competition platform, as documented here. This is a record of how each step went for me. YMMV.

2.1.1.1.1.1. Hardware requirements

Running on Debian 7 in a VirtualBox with 2GB of RAM (on Windows 7), as described earlier. Apparently I could have just grabbed a large VirtualBox image and worked from there. Instead, I followed the step-by-step Unix instructions within my existing system.

2.1.1.1.1.2. Install Python

I checked the version: already installed.

2.1.1.1.1.3. Install C Compiler

I checked the version: already installed.

2.1.1.1.1.4. Install Git

I checked the version: already installed.

2.1.1.1.1.5. Install Pip

I checked the version: already installed.

2.1.1.1.1.6. Install Virtual Environment Wrapper

Followed instructions. As root: pip install virtualenvwrapper

I initially moved on at this point, but I later found that workon did not work. Don't forget to setup up your shell startup file as instructed. I chose to go with lazy initialization, and I changed PROJECT_HOME to just $HOME, since that's where I've been putting my projects so far.

2.1.1.1.1.7. Install Python Imaging Library

As instructed, I used apt-get to install python-imaging and libjpeg-dev. (I already had python-dev.) I also had to set up the symlinks as instructed.

2.1.1.1.1.8. Install PostgreSQL

PostgreSQL was already installed, but I did need to edit pg_hba.conf as instructed. The full path to this file was: /etc/postgresql/9.1/main/pg_hba.conf

2.1.1.1.1.9. Install Memcache

As instructed, I used apt-get to install memcached and libmemcached-dev.

2.1.1.1.1.10. Download the Makahiki source

As instructed.

2.1.1.1.1.11. Workon makahiki

Once I fixed the part I accidentally skipped in step 6, this worked fine.

2.1.1.1.1.12. Install required packages

As instructed. The download and install took a while (5 minutes) with a lot of output and warnings, but no errors.

2.1.1.1.1.13. Setup environment variables

As instructed. I added the configuration to the end of ~/.virtualenvs/makahiki/bin/postactivate. If you copy-and-paste, don't forget to remove the % signs. I also reused my existing PostgreSQL user, django. (This may or may not be a good idea, so I don't necessarily recommend it. It worked fine for me, though.) Once I wrote these to the config file, I typed deactive and then workon makahiki to refresh the settings.

2.1.1.1.1.14. Initialize Makahiki

As instructed.

2.1.1.1.1.15. Start the server

As instructed. Both servers worked for me.

2.1.1.1.1.16. Verify that Makahiki is running

Yay, it runs!

Conclusion: This process is fairly easy as long as you go carefully and don't miss a step. It is less difficult than installing the Django toolchain for Heroku, though you would need to make it through much of that process first if you want to deploy Makahiki to Heroku.

Total Time: 2.5 hours, including the time taken to document the process here. Probably only 1.5 hours or so if you were just following the directions.