One of the first software projects I built in China was an Appspot.com application to visualize the air pollution in Beijing hour-to-hour. You can see it at outdoorsbeijing.appspot.com. I did this for a combination of reasons:
- Part of being programmer is constantly learning, and I wanted to evaluate python and the Google App Engine as a possible replacement for the PHP work I had already done.
- I wanted to make my test app something real, though, so I needed a simple idea.
- Beijing is a much dustier place than anywhere in the US – it can even be hazardous to breathe the air sometimes, and I was a bit worried about it when I first moved.
- There was already a service on Twitter (@BeijingAir) that updates every hour with particulate matter and ozone statistics.
- However, Twitter is blocked in China, so I can’t check it on my iPhone, plus Twitter is text-only, so there are no graphs.
By having Google’s servers request and cache the pollution data for me in the US, I figured I could create a database of historical pollution data, visualize it how I wanted, and access it on my iPhone because the data would now be served by a non-Twitter server.
So, I downloaded the Google development server, read up on Python, read about the Twitter API and put this together in a day or two. Google’s toolchain made it quite easy to deploy the application.
It’s really pretty simple – in App Engine apps, you can create a process that will execute every X number of minutes/hours/days. That meant I needed two pages for my app. The first one would be a page that kicks off a process to access the latest updates from @BeijingAir, parse them, and store the data in Google’s DB. The second is the home page, which accesses the data for the last 24 hours and displays it in a table, which then gets turned into a graph via javascript. Every half hour, my script gets the latest twitter updates (throwing them away if they’re already in the DB) and that’s it.
If I ever get time to play around with it again, I’d like to make some cosmetic changes. One would be to move the ‘About this page’ into the same fixed-width div as the pollution graphs. That way, when I open it on my iPhone, the screen would automatically resize to fit the graphs perfectly. Currently, I have to double click on them to get that behavior.
Secondly, I’d improve the graph display. We really only need one graph, since the concentration and AQI for each pollutant are directly related. Also, to make it more clear what range the graph is in, we should change its color (and the color of the description text) to match the colors defined on www.airnow.gov. That would make it clear when one graph is going down and the other is going up that the one going down can still be a lot worse because it’s been bad for the entire day.
If you want, you can look at the code on github.com. Feel free to send me any questions or code patches if you want to change anything.
