As I mentioned in my previous post, Learning Android didn’t cover a couple topics, and one of them is Cloud to Device Messaging, or push notifications. When applications are getting data from the internet, there are two ways to keep the data fresh. First is called polling. It means that the app initiates a connection to the server at set intervals to see if there are new data. The problem is determining the polling frequency. Poll too often, you waste a lot of batteries without always getting new data. Poll too rarely, then you risk not getting new data in a timely fashion. The alternative is called pushing, or push notifications (iphone users should be familiar with the term). Instead of the client initiating a connection, the server sends a data packet to the client whenever there is new data, then the client reacts to it. Because there is some overhead to maintain a persistent connection to the server, rolling out a push notification service isn’t a trivial task, but google has done that for us! It’s called Cloud to Device Messaging (C2DM). We piggy back off of the connection that android maintains for gmail, google voice, gchat etc, and register our app to be “waken up” only when the server pings us. Note that the server doesn’t actually send the new data, it only sends an alert that new data is available. This keeps the ping packet small so there is less overhead. It’s up to the client app to receive the notification and then go to the server to retrieve the fresh data. In this post I will explain how to setup this service for your app. I will assume that you went through “Learning Android,” or at least have a basic understanding of the building blocks of Android programming. For the sake of keeping this post under a tolerable reading length, I will only go over the mechanisms. I have checked in a sample c2dm app that’s commented in my github repository, so clone the repository to see the whole picture. I also included a small ruby script to mimic a web server sending c2dm packets to the client device, this way you can debug your implementation without needing to setup a server. By the end of this post you should have an app that you can install on your phone or emulator, and then a way to send it push notifications without requiring any server side coding!

I’ve been following this online book Learning Android which I would highly recommend to anyone that wants to begin learning how to write android apps. It does a great job explaining the concepts of Android development through a non-trivial sample application – a twitter application. It also goes through the process of building the app step by step, improving the app when introducing more advanced concepts. This helps show how to use the building blocks that’s learned to improve an application. It goes through all the building blocks of android apps, and even the more advanced concepts like Android Interface Definition Language (AIDL) and using the Native Development Kit (NDK). I have followed along and built the demo apps while publishing the source code in my github repositories. If you want to learn how to write Android apps, follow along the book and I guarantee that you will not be disappointed!

However, I found that there are some concepts that are missing in this textbook, namely:

• context menus
• android testing framework
• c2dm (cloud to device messaging)

If you do follow along, here are some things to note:

• The System Services chapter has some bugs in the code posted.
• The AIDL chapter doesn’t fully explain how to setup the AIDL client app.
• From a design standpoint there are several design choices that are poorly made for the app in the text. But it does demonstrate how to code the functionality.

Just be sure to read the comments left on the side, as I have left several comments noting the above issues in the text. Enjoy!

So after revisiting my blog I realized that descriptive tutorial entries with code segments are helpful, but they are…long. The front page of my blog was being dragged way too long by those entries. Thus, I needed to add an “excerpt” feature that allows me to partially display an entry and add a ‘read more…’ link for the full post. Rien Heinrichs has done exactly that with his blog created with Webby, and his github page contains the source. I took a look and turns out it was a lot easier than i thought. Here is how to do it:

I just found out that Webby is no long under active development =(. What a sad piece of news. However, with the current Webby version, it’s still good enough for me to maintain my blog. Since it’s relatively easy to extend, I decided to add tags to Webby.

I saved a link to Aarom Qian blog post about adding tags to Webby a long time ago, but unfortunately the blog is no longer online. I dug around and was able to find his github repository and the raw textile/erb entry in there. You can see it here: Adding Blog Tags using Webby.

In general his directions were pretty clear and everything worked well. It explained how to setup the tags framework and how to use rake tasks to generate the tag pages. However, I did need to make some minor hacks to get it working. I’ll try to add a tutorial blog entry if i have time. I’d also be more than happy to answer any questions if anyone is having trouble implementing tags.

In the mean time, try to follow along his post, or check out the source of this blog on my github account. Enjoy!

In my last entry I covered how to integrate facebook api with ruby on rails using fb_graph gem. There is one problem with integrating the facebook api with your website however, and that is if facebook goes down, then your site also crashes. Yesterday facebook went down, along with the graph.facebook.com api. As a result, one of the sites I was managing went down since it kept waiting to authenticate with the facebook graph api. Now there are definitely other solutions around this, but I also found that when using facebook integration on websites, the websites load a little slower because it has to connect to facebook first, fetch the data, then render the webpage, so the performance of the webpage will heavily depend on the speed of the facebook fetch. Thus, I decided to implement a caching scheme that synchronizes a local database with information fetched from facebook. This way my page only needs to access a local database every time it’s queried, but the database is synced with facebook information, so it’s pretty much like I’m accessing facebook!!

The basic idea is as follows:

1. Create a table that stores the information you want from facebook
2. Setup a ruby script that uses the fb_graph gem calls to update the database
3. Setup that ruby script as a cron job on the webserver and run it as frequent as you like
4. Change your fb_gem calls to local database calls
5. Sit back and let the webserver do the hard work!

(09/25/10) Edit: A working version of this source code is uploaded here. Download it and follow the README to try it out!

While working on our church website, integrating with our church’s facebook fan page became a desired feature so our site maintenance team can just add an event on facebook and have it synced up to our website.

After learning about the facebook graph api, I was planning to write a library for ruby that sent out the queries and parsed the results to display on our site. However, I found the fb_graph gem written by Nov Matake and decided to try it out. The experience was extremely positive and Nov was very helpful and prompt in responding to my emails. Here’s how I integrated the facebook graph api into a ruby on rails app:

After playing around with the layout and jQuery for a while, Internet Explorer 8 was really pissing me off. Everything that worked in Firefox, Safari Chrome didn’t work properly in Internet Explorer 8. I wonder why that browser is still around… Anyhow, I later found a quick solution that can fix most of the IE problems, and that’s the zoom:1 fix! All you need to do is add the following line to your css:

1 div {
2     zoom: 1; 
3 }

And just that like, every problem that I was having disappeared. I can’t really explain why, and apparently neither can this blogger. But the point is, use it and save yourself some trouble. Microsoft, when are you going to figure it out…?

Since I’ve had such a positive experience with Webby, I’ve decided to blog a little about some stuff I’ve figured out when using webby. I know there are some amount of tutorial I’ve found only for Webby, so I’ll try to not repeat a lot of them. When I constructed this blog using webby, I wanted the dates to be in the format of “2 minutes ago” or “1 month ago,” instead of absolute dates. This cannot be achieved by using webby alone, since these dates can only be changed when the website is build. Thus, a little java script magic is needed. JQuery is a javascript library that allows plugins and has several AJAX functions. In particular, I’m using the Timeago plugin for JQuery. What this javascript does is turn any date you wish on your page into the “timeago” format. It also auto updates itself, so it’s perfect to be used with webby. First you want to follow the links above and download both the plugin and JQuery (go ahead and get the min version). In your main layout page (in the layouts folder), add the following lines between the <head> tags:

My wife and I have the exact same birthday. So every year around this time I start looking for free stuff for our birthdays. Last year was perfect, because Disneyland was giving free admission on your birthday, so my wife and I gladly got to go to Disneyland together, both for free =D. This year although Disneyland isn’t free on birthdays anymore, there are still a lot of places that offer free stuff on birthdays! This day is becoming the day my wife and I go around and get free stuff! Here are some that I’ve used:

• Baskin Robins
• Cold Stones
• Black Angus free steak dinner
• Home Town Buffet
• Red Lobster
• Red Robin

You can definitely find more online, or you can go here. Please post some other good ones if you know of any.

Finally, I’m back at the first hit when you google “isaac liu”. Because of all the webhost changing and redesigning of my page, my page rank started dropping, until eventually my site completely disappeared from google search when querying “isaac liu”! I did some researching and found out that by using the < meta refresh = "" > tag to do redirection, my page rank took a penalty, and maybe even prevented the google crawler to index my site. This is because normal spam sites use this method to redirect people to their spam sites. Thus, I went out to find how to do redirection the correct way, which was using 301 permanent move. What that means is, the http code that’s sent back to the requesting client should be 301, which means “permanently moved site.” The < meta refresh="" > method sends back the code 200, which means “Request OK,” and then later does the redirection. That is extremely not search engine friendly. To change this required tweaking of the .htaccess file on my web host, which is using the UC Berkeley EECS department’s webhost. If your curious, i added the following code to my .htaccess file:

1 RewriteEngine on
2 RewriteRule  ^index\.html$  /~liuisaac/site/ [R=301,L]
3 RewriteRule  ^$  /~liuisaac/site/ [R=301,L]

This uses the Apache mod_rewrite engine to rewrite all incoming requests to index.html (line 2 and 3) to the “site” subdirectory. Now all requests will be forwarded and the header message sent back will be 301 (specified by R=301 ), which is search engine friendly. Low and behold, I am back atop the google search for “isaac liu”! If you are using < meta refresh="" > to do redirection, and don’t know why your page isn’t showing up on google, this might be the reason! A more indepth tutorial on mod_rewrite can be found here.