Sunday, December 19, 2010

iPhone face up/face down: Quick and Dirty UIAccelerometer

One thing I love about smartphones is all the little trinkets built into the device... even something as trivial as detecting if the device is "face up" or "face down".

For the iPhone, the natural way to detect the device orientation is to use the "UIDeviceOrientation" class... like so:

This is great, but I found that this method wasn't always giving me exactly what I wanted. I needed a way to detect the exact moment in time when the user flipped the phone, but it didn't seem to work as I had planned.

Instead, I found a just-as-simple way to detect the phone being face up/face down using the UIAccelerometer class. You need to do three things:

First, tell your view controller you will be using the delegate

Next, write your UIAccelerometer delegate.

If you play around with the accelerometer, you'll see that the "z" coordinate is around -1.0 when the device is face up, and around 1.0 when the device is face down (and somewhere in between as the device is being moved). I'm going to assume the device is "face up" when the z value is less than 0, otherwise I will assume it is "face down".

Finally, set up the UIAccelerometer and tell it to use your delegate:

You can get the source here.

Saturday, December 4, 2010

HTML 5 game: catch the ball

(demo game)

Well, I decided to add on to my "project" only to find that my app threw an exception if the user hadn't logged in to Facebook yet. Oops. Guess that's only one of the many reasons nobody's reading my blog.

Anyway, after getting that fixed, I decided it's about time to start playing around with HTML 5. Here in Japan, there's talk of big social networks including Gree and Mobage moving towards platforms that integrate with smartphones. What a better time than to understand canvas and SVG?

In this blog, I'm going to start simple and create some basic interactions using canvas and SVG.

To get started I shamelessly copied a blogger's code - this time it was Disorganized's demo canvas Pong game.

The code worked beautifully on the first try. I just made a few tweaks. First, I changed the game from "Pong" to a kind of rescue game, where you need to catch the ball before it falls to the bottom. This involved adding some event listeners to let the user control the direction of the catcher.

Since I want this game to work on my iPhone, I can't use the traditional "mouseup" or "mousedown" operations for standard browsers. Instead, I used the "a" tag with an "onclick" to call a Javascript function. The onclicks called functions like so:

Pretty straight-forward. To fully jump on the HTML 5 bandwagon, I also wanted to play with some SVG. Inside the "moveLeft" and "moveRight" tags, I added some polygons in the shape of arrows using the HTML 5 "polygon" tag.

To play with the HTML 5 SVG elements, I downloaded the beta version of Firefox 4. Unfortunately, since these tags aren't yet supported in most browsers, I also had to add standard "left" and "right" buttons as pngs as well.

The game moves much slower on iPhone, but works nonetheless.

Here's the game in action, and the source, if you are curious. It's not finished yet, but I hope to improve on it next time I get a chance. Again, thanks to Disorganized for the original pong game source, which you can get here.

Saturday, November 13, 2010

Google App Engine and Facebook Connect

So, I've had a hankering to start playing with HTML 5 for some time. Specifically, I'd like to make a spiffy app (maybe a game???) that works on any decent smart phone.

There are a couple prerequisites to getting there, however. Namely:
1. A good idea for an app
2. A place to host it
3. A way to get people to use it

I don't quite have prerequisite 1 yet, so I'll skip that for now. Today, I'm going to focus on problems 2 and 3.

Being a guy with a budget of 0 YEN (for those in the US, that translates to about $0 USD), Google App Engine is the perfect answer to prereq #2. I haven't given Google my credit card number, but I can make up to 10 free, fully scalable applications. (Of course, if this idea ever takes off, I'll have to pay for the bandwidth, but not a concern right now)

As for prereq 3, I figure Facebook would be a great way to get my app "viral". I have no idea what the app will be, but I know it will at least allow users to interact with a community of other users, and it will provide some incentive for users to invite their friends.

By the way, since I'm using Google App Engine, I could instead use the Google User API, and grow my app with those who have Google IDs. However, I'm going to stick with Facebook for now. I just saw the movie "The Social Network" and I want to be a part of the fun.

So, some Google searches brought me two really great references that I shamelessly took for my app.

First is Chris Riccomini's tutorial on integrating Google App Engine with Facebook connect. After getting the Google App Engine SDK, setting up my App Engine Account, and registering an app on Facebook, I was able to see my Facebook profile picture on my site in a matter of minutes.

Another quick grab was some CSS from Harry Roberts , which is custom made for iPhone displays. This might come in handy later on.

With the wiring in place to connect with Facebook, all I needed to do was focus on making the application. I decided to start off with a simple message board (yawn). The message board works just like any other message board, except that it shows the person's Facebook name and profile picture.

Essentially, I just took Chris Riccomini's tutorial as a base, and added some datastore models to the mix. Here's the source if you're curious to see.

Here is a demo of the app (working as of today, I make no promises it will work tomorrow).

Although this message board isn't all that exciting, I now have the foundations in place for my new game. All I need is a great idea.

More to come.

Saturday, November 6, 2010

I'm liking Konstrukt

Wow, my very own blog. And here I am, making my first entry on my Macbook. If only I were in a Starbucks, I could achieve 100% superficial white guy status.

I used to write a blog in my old company, but now that I'm in a new position, I thought it'd be a good time to take the initiative and write a blog of my own. And what better timing than now, since I just so happen to be experimenting with PHP frameworks.

And man, there are a lot of frameworks out there. I came off the Python wagon, where Django was the only framework anyone used. PHP is like a menu at a Chinese restaurant. There are a whole ton of choices, and a lot of them don't make any sense.

PHP Frameworks are no exception. Maybe I'm missing something, but is Zend REALLY worth all the mess? I am admittedly still adjusting to PHP, but Zend seems like a bit of overkill. It is designed for high-end application development, and surely it scales well, but, well, I didn't find it all that elegant. Cake is intuitive, but there seems to be a lot going on behind the scenes that smells like trouble when your site suddenly scales to hundreds of thousands of users.

Here in Japan, a lot of PHP social game developers seem hip to Symfony and Ethna. At first glance, Symfony seems a bit too heavy for my tastes, although I've heard good things about it's performance and scalability. I'm curious to learn more about Ethna, since it's been developed by Japanese SNS "Gree" and is being used pretty widely here in Japan. Unfortunately, all of the documentation is in Japanese, which in itself is too much of an inconvenience for me to bother.

In short, I was looking for a framework that offered simplicity, elegance, and something that I could grasp within 10 minutes of digging into the documentation. Learning some lessons from the financial crisis, I didn't want to take a bet on something I didn't fully understand, just because it was what everybody else was doing.

Fortunately, doing a Google search for "PHP lightweight framework" gave me such a framework: Konstrukt. It is very elegant in it's simplicity. The entire framework API consists of a mere 7 files. No messy installations, configuration is a breeze, and a very low learning curve.

Konstrukt is a Component Oriented Programming (COP) approach to web development. At its core is the idea of heirarchical "components". A component is simply a class, very similar to "controllers" in a typical MVC architechure. They are hierarchical, so if you have a url like http://localhost/foo/bar, the framework will dispatch the request to the "foo" component, which will in turn pass the request to the "bar" component. In the end, a component can display output (like an HTML page), but it doesn't have to. This allows complete encapsulation of the logic in your app, and encourages the developer to naturally establish a clean separation of concerns.

Konstrukt is one of the most lightweight frameworks I've seen for PHP, but it still packs a lot of power. It allows for easy porting with third party tools, like simpletest for unit testing (as Cake also uses). Actually, the tutorial gives step-by-step instructions for how to create and execute functional tests.

It also gives the developer complete control over many parts of the environment, including the structure of your app. Konstrukt uses a "dependency injection container" to allow components to share data without relying on global variables or includes. They recommend using Bucket for your injection controller, and Bucket introduces no additional dependencies (in total, Bucket is a mere 147 lines of code). You could just as easily use a different container, or even write your own.

Using this "di-container" technique, I was able to create my own customizable PDO-like database interface. This gave me complete control over all aspects of the database, such as when the connection is opened or closed. Coming from Django's ORM model, it was really nice to see a framework that offered zero hindrance over how the database is accessed. Best of all, it was fun to do!

I've still got a lot to learn, but I'm really liking Konstrukt's elegance and simplistic approach.