Facebook app formating

In my attempts to enrich my Web 2.0 course, I have hit some stumbling blocks. My original goal was to using the Facebook network to help convert my polygon software from essentially applications to easy to use Web 2.0 apps. To do this, I need to convert my system of storing the files for my polygon programs into database entries. Rather than tackle this at one go, I figured I would solve the technical issues with a toy application and then graft my solution onto my polygon programs.

I chose to make a task timer application that would keep a record of times spent on tasks. As with most programming into uncharted territory, I ran into some typical misconceptions and some minor oohs and ahas. Let me outline my approach.

1. create a mysql database with entries [user, task, timestamp, code, seconds]


2. create a php script to connect to the database


3. format the output and make it interactive using the form tag


4. when the job is running have the elapse time update


5. connect it up to Facebook

Number 1 and 2 were pretty straight forward. I did have to do a little dusting off of my SQL skills but there were no surprises. I made only a minor mistake in selecting my "code" column to be an int rather than Char[10] or something to make the table more readable. But of course this is just a proof of concept app anyway.

For number 3 and 4, this took perhaps a bit more time (on and off about five+ hours -- not an easy thing to manage teaching five courses). My formating and html skills dated and are pretty much on the need-to-know basis but at least for my web pages I can achieve what I want. So after a bit of stumbling I was able to hack together this page(you will need to have a Facebook account to view it)--here is the php code. Probably the bulk of the time was figuring out how to get the times to update. I did this in Javascript a language I am not very familiar with. It took me a while to unravel the clock applications that I saw kicking around. Part of the problem was that I didn't initially recognize the recursive call.

var startSeconds=Math.round(new Date().getTime()/1000);
function startclock(){
var seconds=Math.round(new Date().getTime()/1000);
document.form0.update.value=convertSec(8232+seconds-
startSeconds - 1202100203+1202137950)+" **";
document.form1.update.value=convertSec(228249+seconds-
startSeconds - 1202132449+1202137950)+" **";
document.form2.update.value=convertSec(6);
document.form3.update.value=convertSec(5);
document.form4.update.value=convertSec(44374);
document.form5.update.value=convertSec(12106);
setTimeout('startclock()',1000);
}

The numbers in above code is generated from the database and for form# are pulled into forms in a table. The first to variables form0 and form1 are current running task so they need to be aware of the current time. The calculation is a bit messy since the client's machine may not have the same time as the server's time.

So numbers 1 through 4 gave me the following:

hello 711501151 (hmmm a name would be nice...)

task	time	adjust

new task

cooking geometry huh huh2 junk lecture

It's number 5 that is giving me the woes. Although I can get the user data from Facebook, it appears that the formatting and javascript get completely messed up when this attempts to be included in the Facebook frame. Using something like the following...

$facebook->require_frame();

I have also been playing with adding stuff to the profile but I run into similar formatting issues

$facebook->api_client->profile_setFBML($out1, $user);

I'm a little unclear on how to proceed with this format issue. With reading about Facebook and Javascript it seems like I may have some issues with the approach.

So round one goes to Facebook. I may just go straight for a Java solution since it's more my native language anyway.