expertria.com

Today, Facebook announced that they will be shifting the Application Bar to the bottom left corner of the page, together with the chat bar.

So I was happily coding halfway today, when the Application Bar on the top disappeared and I was thinking it is due to me not drinking enough coffee. Then bang, it appear on the bottom on the second look

For those who do not know what Application Bar it, it consist of all your applications on Facebook, including Events, Photos, Videos and the other application you have installed. Previously, it can be access as a drop down list on the top. The new bar also means that bookmarked applications will now be visible always in the bottom.

Does the new Facebook profile really sucks ?

I started doing Facebook application development before the New Profile and things are pretty simple. 1 cached FBML for the profile page and the rest of the application is pretty much up to your own creativity. With the New Profile, you can have your application in the main Wall, OR it can be under Boxes, AND it COULD be under Application Tabs.

For end users, most of the first reaction from people I met is “It sucks”.  In fact, that is my first reaction too. Plus, designers will curse and swear too since now they have to design 2 more UI for Boxes and Application Tab. However, that also means that every Application gets the chances to have more exposure. Having a user putting your application to his / her application tab will be like winning a lottery, that means they love your application. You can now design a wide FBML  for Boxes Tab, and also a narrow FBML for Wall Tab, in which both can have radically different design, at the discreet of the developer.

Another tread we will see if that developers will now focus more on User’s stories to have their application noticed. Unless a user place their application under Wall Tab, it is unlikely that their friends will go the Boxes Tab to see “what application their friends have”. By focusing on User’s Stories, they will have information of their application to appear under the users’ Feeds, which is right on top on the user profile page. Applications not doing that yet will have to do that, to keep their applications competitive.

On the overall, while during the transition period, many might throw curses at Facebook New Profile design, I believe they will come to like it as they get used to it. Afterall, we get a less cluttered profile page now.

The problem.

You are doing a small/proof of concept project. You want to have a centralized database, but do not want to hassle of creating another mySQL database on your live server. You know just need a simple datastore, but you do not want to write codes to read/write from an XML file. You need a flexible datastore that just works, you know you do not need much scalability for this simple application, or the overhead of Simpledb. You want it to be REST possible but installing phprestsql is too much of an overkill.

Stuck?

Enter Google SpreadSheet.

If the above is the problem you are facing, you might want to take a look at Google SpreadSheet. The first reaction might be “what?!?, I wrote 1000 lines stored procedure and you want to me to code with SpreadSheet??”. But if you are just doing a small application, something that just requires an online datastore, what is better than an API that lets you do queried search, allows you to do CRUD on your records, with a ready API for .NET, PHP, Java and it is hosted by Google?

Not Google Apps Engine.

Google SpreadSheets are essentially..spread sheets. SpreadSheets consist of Worksheets, and each worksheets consist of ROWS and COLUMNS. Effectively, each Worksheet is like a Table in your database. The first ROW of the Worksheet will be the column names. Take a look at the worksheet below.

Essential ,  username, gender, contact_no and gender will be the column name. Since Google SpreadSheet allow us to do queried search on the spreadsheets, we can think of username as the primary key and we can base the query on it. If you need more tables, simply create more worksheet. If you need another database, create another spreadsheet. Thus, we can use a Spreadsheet to simulate a database. In the nutshell:

Spreadsheet -> Database
Worksheet -> Tables in Database
1st Row in Worksheet -> Defines the column names
Subsequent Rows in Worksheet -> Defines the rows in tables.

Queries Search -> Select Statements
Add Rows -> Insert Statment
Delete Rows -> Delete Statement
Update Rows -> Update Statement

The Good

Google SpreadSheet, as what Google mentioned, has the following features:

Essentially, it means that the hosted “database” will be free, secure, and you will not need to install any client application except for your browser to access it. You can even create it on an excel sheet first, and then upload it online and transform it into your database.

You can access the spreadsheets via code by HTTP, as well as .NET, PHP, Java or Python API

The Bad

As this is not a real RDBMS, there is no real constrain. Unique keys has to be handled by code and constrains has to be verified at the code level. For simple applications like a simple Book-Ordering form, or Contact-Management form, this will work great. However, Google SpreadSheet will not be the way to go for larger CMS systems.

On top of that, you can easily change a column name on Google Spreadsheet. The ease of change also increase the changes of the developer mistakenly changing the columns in the main spreadsheet and thus breaking the application.

Security

Google SpreadSheet is not shared by default, so only you can edit it. You can also share it to other users as Collaborator or Viewers. This also means that your ‘database’ can be shared with our users for collaboration, but you can limit them to View-only so they cannot mess up your application by accident.

API Website

For documentation, code samples and how-to, visit http://code.google.com/apis/spreadsheets/overview.html

Summary

In short, Google SpreadSheet provides us with a simple and easy datastore for simple applications that needs a hosted database. Other formal alternatives includes Amazon’s SimpleDB, Google Apps Engine Datastore API, and Apache’s CouchDB. Which one do you prefer and which one do you think is the more scalable solution? Do chip in!

Related Article: Top 10 Reasons to Avoid the SimpleDB Hype

Introduction
For many Flex/Flash developers developing Facebook applications, development maybe daunting at first without a very detailed documentations, sample codes and blogs posting around to help. Most of time, many cannot grasp the general architecture of creating a Facebook application. While I am no expert in Facebook application development, I have picked up some useful tips and tricks along the way and I hope to share it around. Do take note the date of this posting. Facebook platform changes from time to time so 6 months down the road, this post might be obsolete.

Note that when I speak about Facebook development, it means having your Flash/Flex content inside Facebook profile and its canvas page. I do not mean connecting to Facebook using Actionscript. If you are looking to communicate with Facebook using Actionscript, please refer to this AS3 Facebook Library:
http://code.google.com/p/facebook-actionscript-api/

The Basic
Before you get started, I will suggest reading this blog posting by padraenl, titled 10 Things That Would Have Been Nice to Know When Starting My Facebook Application. Facebook Platform native documentation is good for referencing, but there isn’t instructions to teach new developers the “standard way” of approaching problems. This blog post answers to many common questions a developer will have.

How it works:
To understand how Facebook Applications work is very simple. Facebook does not provide you with any hosting service. You host your own application on your own server, and tell Facebook where to retrieve it. You churn out your own HTML / FBML / Javascript codes and Facebook parse it on its server, as simple as that. Essentially, you can develop in any language you like, as long as your codes render out the proper HTML / FBML / Javascript.

Things to note is that some of the examples you found on Facebook currently might be obsolete as Facebook now has a New Profile Design. To understand the new profile, you can read it’s documentation, or just scroll down to check the few screen shots I placed below:

New Profile

Instead of a one page profile now, there is now “Wall”, “Boxes”, and Application Tab. Therefore, you will need to plan at least 3 screens for your application.

Main Profile - Wall:

This is mostly visited page from the user’s friends. You have the real estate of a small column on the left hand side of the page. If you are using a Flash movie, it will only play after the user has clicked on a preview image due to Facebook restriction. This part is cached by Facebook and will refresh by using setFBML or the more scalable method fb:ref tag and fbml_refreshRefUrl method. I strongly recommend fbml_refreshRelUrl method. You can learn more about fb:ref here and view the code example here: http://wiki.developers.facebook.com/index.php/FBML_Dynamic_Setup.

Boxes

Boxes is the part where your application will be. Note that your application can EITHER be inside WALL or BOXES tab, and this is controlled by the user. (See the next Screenshot, where under the Video application, the user can choose to “Move to Wall Tab” or “Remove Box”). Also note that you can choose the left column (wide) or the right column (narrow) under your application settings.

Under Boxes tab, your Flash file will NOT show until the user clicks on a preview image.

All the Boxes content are cached and is refreshed by setFMBL or the more scalable method fb:ref tag and fbml_refreshRefUrl method.

Application Tab

This is the best privilege your application can have. A user loves your application so much that he/ she adds it to an application tab. In this case, your application has all the real estate of the entire page, and you can have a very customized UI / information like the below screenshot (Animoto application)

Note that this page is NOT cached by Facebook. So any content is taken directly from a URL you specified in the application settings. For example, you can set Facebook to take from http://expertria.com/myapp/profiletab.php. Facebook will load the page and display any HTML it loads from your server inside the Application Tab.

This also means you need to prepare your server for the load as this is no longer cached by Facebook. Also, if your server is slow is responding, Facebook will consider it as a timeout.

The Main Application.

This is the main application, outside the profile page. This is the part where user who have granted the application permission will see. Typically, it is under a url like http://apps.facebook.com/yourappname/yourapppageurl.

For example, if you set the base url of your application as http://expertria.com/myapp/. A page on Facebook “http://apps.facebook.com/appname/viewallmyfriends.php will be retreivng information from http://expertria.com/myapp/viewallmyfriends.php

You can have as many pages in your application as you want, as well as useful features like URL-rewriting for neater URL address, etc. Facebook does not care as long as they get a http 200 response for the page it request and the response contain valid HTML / FMBL, and that the response is not empty.

PHP development
You can develop Facebook application in any language on your server, but PHP has more code samples and examples around. I will chose PHP as the development language just for the reason of support. Note that as of the writing of this article, if you download the PHP library from Facebook developers site, you will get the old library (which does not has the full feature set for the New Profile Design).

To get the latest one, please download from their SVN:
http://svn.facebook.com/svnroot/platform/clients/php/branches/redesign-changes/

Where to keep my data
As mentioned, Facebook does not care what you do on your server, as long as your server response with valid HTML / FBML. Therefore, you can have data persistence in your own mySQL, or any database you want.

However, I will recommend using Facebook Datastore for a few reason. Firstly, you will not need to maintain another database. Secondly, you can do FQL to achieve something like  “Get those users who had installed this application,w ho are also the current user’s friends, who also are tagged in my application” , in a very direct  manner. Thirdly, there is a test console to help you test your FQL (Facebook Query Language).

Essentially, Facebook Datastore consist of Objects (like Tables) and Associations (like Foreign Key). I strongly suggestion anyone who is new to Facebook Datastore to check out this blog here [
Introduction to the Facebook Data Store API ->http://www.dereksantos.ca/?p=23]. It has far better explanation than Facebook documentation, and anyone with RDBMS knowledge will strike a chore instantly by reading the article.

Using FMBL and Javascripts
Learn FBML and Facebook’s Javascript FBJS before building your application! While many HTML tags are supported in Facebook, you cannot use an Object tag to render your swf directly in Facebook. You will need to use <fb:swf> tag. Using FBML will also gives you a consistent look to your application, so that it will looks like Facebook native application. For example, there is no need to build a custom tab as there is fb:tab. There is also no need to create a blue button that imitate facebook buttons as you can always use Facebook’s css class=”inputbutton” to change the style of your button to match Facebook’s.

As for Javascript , there are also restriction to Javascript. For example, there is no innerHTML to get the content of your HTML. Thus, you will need to learn how FBJS works on Facebook. You will also need FBJS to communicate between your SWF and the main Facebook page.

Flash FBML
Refer to this page to see how to embed Flash in Facebook page. The documentation is complete
http://wiki.developers.facebook.com/index.php/Fb:swf

Essential you need to use Fb:swf to render your swf file.

Flash - JS Bridge
The <fb:fbjs-bridge/>  is essential for your SWF to communicate with the Javascript on your HTML page. It works like External Inteface basically. How it works is that it creates another SWF on Facebook page and your SWF communicates to it via LocalConnection. The bridge will then use External Interface to communicate to the Facebook page on your behalf.

Refer to this documenation for code samples: http://wiki.developers.facebook.com/index.php/Fb:fbjs_bridge

Also, check out this library to call / receive functions in AS3

Creating Flash in Javascript
There are two ways to create a SWF dynamically using Javascript. One way is to use a fb:js-string, which is a pre-setted FBML, initially invisible, and then use document.getElementById(’name of div to insert’).setInnerFBML(myjstringname) to show it on the page.

An fb:js-string example:
<fb:js-string var=”myjsstringname”>
<fb:fbjs-bridge/>
<fb:swf swfbgcolor=”333333″ imgstyle=”border-width:3px; border-color:white;” swfsrc=”http://expertria.com/swf/fb.swf”   width=”300″ height=”280″   />
</fb:js-string>
Another way is to use document.createElement(”fb:swf”), which will dynamically create a new SWF object. You can then set its swfsrc , width and height using the below code:

var swf = document.createElement(’fb:swf’);
swf.setId(’my_swf_id’);
swf.setWidth(’100′);
swf.setHeight(’100′);
swf.setSWFSrc(’FULL_URL_TO_MY_SWF’);
document.getElementById(’swfContainer’).appendChild(swf);

Summary
I hope the above article helps developers with Flex/Flash background in having a better understanding on Facebook Application. Feel free to drop any tips you have under the comments. There are a few things like Mock AJAX and AJAX javascript which I did not cover, but the above should be sufficient to get someone started.

Keep coding!

I do not think I am up to the standard to call myself a photographer, but I do love taking pictures with my Canon D400. After posting about using Seesmic for presentation yesterday, I found a new way to use Seesmic , thanks for Freida. Using CamTwist with she recommend, I can post my Flickr photos as a video stream while commenting on them.

This become a great way to talk about my photos as I get instant response, as well as able to embed it on my blog , where people can respond directly. Photographers who does not want to show their face (but their photos ) , can use CamTwist + Seesmic + Flickr, to store their photos, talk about their photos and get video response. Well, response to my photos below!

CloudStatus is a website useful for IT professionals to monitor the status of the AWS their applications are currently using. It is a really simple page that shows you the health of EC2, S3, etc. Very useful especially when startups I met are using AWS very often nowadays and are moving away from traditional hosting

Another must have is of course the Firefox Plugin, Elastic Fox , which I believe everyone is already using

In this episode, we talk about how you can create programmatic skinning in your Flex components

Video:

Related Files:
https://share.acrobat.com/adc/document.do?docid=539adfa2-738a-45d5-ac44-5e1b7201b200

Related Link:
Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3�

In today’s episode we talk about how to use Google Maps AS3 API in Flex
Video:

Sample Files:
The above example are taken from google maps as3 page:
http://code.google.com/apis/maps/documentation/flash/intro.html

Resources
Developing for localhost:http://nwebb.co.uk/blog/?p=194
ClientGeocoder bug: http://nwebb.co.uk/blog/?p=198

Chain Events in Cairngorm allow you to chain up a series of Caingorm Events. This is especially useful when you are using a series of webservices and you need the results from the preceding one to execute the next one

Another example will be you need to execute a command that requires a prerequisite, such as authentication. You can use the Chain Event to execute the next command after authentication. It makes your code structured and easier to manage altogether

5 mins Flex video:
In this video, we use Seesmic API to show how we can search for a username existance in Seesmic, and if it exist, we use the result to get his/her videos.

End Product:

Project Files: http://www.box.net/shared/f8w0yk1gkw

Additional Resources: Chain Event: http://cairngormdocs.org/blog/?p=27
API Used:
Seesmic API - http://groups.google.com/group/seesmic-api

I created a short video to demonstrate how you can create a simple Flex application from scratch. This video is targeted to developers who are new to Flex and hope to see what are the basic syntax of Flex and how easy it is to create a working Flex application

End Product:

Related Files: http://www.box.net/shared/8g4e8dlsk0
Seesmic API: http://groups.google.com/group/seesmic-api

Ever since Flex 2, this problem has been bugging me not end. I add a couple of codes, and suddenly, ‘bang!’ , Flex Builder gives me this Error that I have absolutely no idea how to solve. Clean and Rebuild does not help either. The only way is to slowly back trace my codes, compare then with those in SVN , and waste 1-2 hours trying to figure out where goes wrong. Most of the time I pretty just revert to a working copy and goes from there.

It turns out, however, that the culprit is an empty switch statement. For example you cannot have something like the ones below:

1
2
3
4
5
6
7

function onValueChange(e:PropertyChangeEvent):void{
 
switch(e.newValue)
 
{	}
 
}

The preceding code will gives you the internal error you will not want to see