digital thoughts

Contrary to what I thought about Hi5’s approval process, I had terrible experience with Hi5. Entire review process in Hi5 is screwed up. My app did get approved, but after many days of struggle. I submitted my app in Hi5 on July 18th. I got the email from a reviewer in Mexico within a day. He asked me to add a favicon image to the XML file and re-submit it. When I re-submitted the app, it triggered a chain of events that were not pleasant…to put it mildly.

Every time I submitted my app to Hi5, I got the message “Your app is rejected because you have ads in your profile view”. Funny thing is that no one from Hi5 even looked at the app after re-submission. I can see it from my log. Still, these guys reject the app with these weird messages. Of course, there are no ads in the profile view. I don’t have ads even in the canvas view until now. Anyway, I don’t want to bore you with all the details. But, the point is that just be prepared for the vague messages from Hi5 review team when you submit the app to them.

Getting approval from Orkut is not an easy process either. But, Orkut review team gives the clear message about what needs to be done to get it approved. You will get a lot of help from opensocial group in google. If you submit the app to Orkut, but haven’t heard anything for more than a week, send an email to opensocial-app-feedback at google dot com; It took me two weeks to get the app approved in Orkut. According to the frequent discussions in opensocial groups, two weeks seems to be the normal waiting time in Orkut.

Let us look at some tips and tricks before we wind up this blog series.

When you design the app, make sure that it has some benefits for the users of the container you target. If your app just reproduces your web site content, your app may not get the approval. Your app should use at least some of the opensocial APIs.

Try to use html as the content-type. If you use url as the content-type, your app may get rejected because it doesn’t utilize the opensocial APIs.

Make sure that the profile view of the app doesn’t show any vertical/horizontal scroll bars. You can use gadgets.window.adjustHeight() to prevent the vertical scrollbar in the profile view.

If you want to implement multiple pages in your application’s canvas, you can pass the arguments in the query string using up_path parm. For example, compose a URL with the format “http://sandbox.orkut.com/Application.aspx?appId=&up_path=help” to display your help content. Inside your app, you can check _args()["up_path"] to get the value of up_path and decide which page to show. When you click this hyperlink, there is a possibility that it would create another full window (including the left navigation bar) inside the existing page. If that happens, add target=”_top” to the hyperlink, that would fix it. Thanks to Arne Roomann-Kurrik for this tip.

When you start the development for opensocial application, the concept of owner and viewer may confuse you. If that happens, read Opensocial developer guide.

Orkut provides two ids for each user: Opensocial id and profile id. It’s better to store both ids in your database. If you use the same data table for multiple opensocial containers, prefix the opensocial id with the container network. For example, opensocial id from Orkut can be stored as orkut:999999999, opensocial id from Myspace can be stored as myspace:999999999 and so on. This will prevent any kind of duplicate id issues when you port your app to other containers.

If you want to use sessions in your server side code, you will be surprised (may be shocked) to see that your app session fails in IE. Sessions will work fine in Firefox. But, it will not work in IE because of default privacy setting in IE. Internet Explorer does not allow sharing cookies between domains. Check out the post from Gath Adams to see how to fix this. If you use persistence API, you don’t need to worry about session issues because you won’t use any session to store the information.

If you want to use multiple tabs in your app, use gadget tabs.

If you have Orkut specific question, post your question in Orkut developer forum. This forum has good activity, you may get an answer. You can also try chatting with opensocial team in IRC channel (#opensocial) between 1pm and 3pm PST on Tuesdays and Thursdays. The link is irc://irc.freenode.com/opensocial. If you are new to IRC, go to mibbit, select Freenode.net in the pulldown menu, type your nick name, type #opensocial in the channel column and hit “Go”.

Use Firebug to debug your app and Yslow to improve the performance.

Following videos would also be helpful when you start developing the opensocial application. If you find any other resources that helped you with the development, please post it in the comments.

Opensocial developer resources

Google Gadget Editor demo

Good Luck!

Part 1 | 2 | 3 | 4 | 5

I was waiting for good news from Orkut. The moment arrived on Friday evening. Our application “iConnect” is approved! The app is installed more than 1800 times in the last 3 days. Please check out the app and let me know your feedback.

Now, coming back to Hi5…

If you have Hi5 account, signing up for Hi5 sandbox is pretty easy. Visit this page for more information. After you signup for sandbox, logon to your account and click “Developer”. You will see “Create sample app” under Quick Start.

Once you have sample app added to your account, you can use the “Edit” link to edit the sample code and play with it. When you are done with the sample application, you can create a new application by clicking “New application” link in the top.

Add your application XML file URL in the box that appears in the new window and then Submit. Then, you will see your new app in the application list. At this point, you can view how your canvas would look like by clicking “Canvas” link. Samething is for preview. Hi5 has one neat link called “Refresh”. When you change your XML, you don’t need to add &bpc=1 (as in Orkut sandbox) to bypass the cache. Just click Refresh link, your app will take the new code.

Hi5 also has “Stats” that shows you how many people use your app. Ofcourse, it has no meaning in sandbox anyway. It will be useful when your app is live.

Orkut has only two views: Profile and Canvas. Hi5 has an additional view “Preview”. So, your XML should contain the code for Preview also. Otherwise you app will be rejected right away (happened to me). This page has good overview of the typical Hi5 app.

When you click the Canvas view you will see your app in action. If you are satisfied with your app, you can submit the app to Hi5 using “Submit to Gallery” link. When you do that “Submit to Gallery” will change into “Submitted for Approval” as shown in the picture above.

Hi5 has some documentation to help the developers. Most of their document pages have no padding in the left or right. That makes it little uncomfortable to read. Anyway, something is better than nothing. There is one page that you should read to save hours of research to find out why some open social attributes don’t work in Hi5.

We will be done with the next part.

Part 1 | 2 | 3 | 4

If you want to modify the sample XML given in part 3, but don’t have access to server, there is always GGE. It’s the acronym for Google Gadget Editor. Basically Google gives you space to save your XML. You can get the URL for your XML file and add the application in Orkut sandbox. You can use the same technique for other open social containers too. If you are puzzled with the term “container”, you may want to check this out. Orkut is an opensocial container. Hi5 is an opensocial container. Any platform that enables you to develop opensocial applications is an opensocial container. You can also implement opensocial container in your website, but that is beyond the scope of this blog post.

If you want to use GGE to create/modify your application’s XML file, go here. You need to be logged on to your google account to save your file in GGE. When you save the file, the file will be saved under your google account.

After you saved the file, you can see the link for the file in the right top of GGE. You can get the location for the application’s XML file from the link.

Once you get the URL for the XML file, add the URL in sandbox and test it. You can also add the application to iGoogle page using the “Publish” option in the File menu of GGE. More information about this is available under GGE editor box.

If you frequently modify your XML, you may need to add “&bpc=1” to your application’s URL in the sandbox to instruct sandbox to take the new XML file. “bpc” is added to bypass cache. For more details, read Arne Roomann-Kurrik’s post in opensocial groups. Once in a while, “bpc” parameter doesn’t work in Orkut sandbox. It would just show the old code. If that happens to you, wait for sometime and try again.

If your Orkut application is ready for prime time, submit your application to the application directory and keep your fingers crossed! It takes more than a week to hear from Orkut. Hi5 responds lot faster, usually within a day or two.

In the next part, we will look at developing opensocial application for Hi5. I feel that learning opensocial application using Orkut sandbox is easier than learning it using Hi5 sandbox. Hi5 sandbox doesn’t implement all the APIs of opensocial. It’s better to develop the opensocial application in Orkut and then to port it to Hi5.

Part 1 | 2 | 3 | 5

Code Runner is available only in Orkut and has its own limitations. You can test some functions in Code Runner. But, you can’t test your entire application there. If you want to go beyond the basic testing, you need to create the XML file with your application code and store that in your server.

I created a simple application to get some information from my server and to display the data in Orkut. Then, I added the application in Orkut sandbox. When I added the application I made sure that my friends can’t see the application in my profile. I don’t want them to see all my experimental mistakes! Once I got the handle on basics, I added more code and tested it.

Here are the steps to add your brand new application to the Orkut sandbox.

• Logon to your sandbox account.
• Click “edit” link next to the Apps in the left navigation bar.
• In the next window, enter your application XML file’s URL and add the application.
• In the next page you have to decide whether you want to add the application in your profile and send the updates to your friends.
• Click “Add application”. Voila…your application is active in the sandbox!

If you don’t have access to a server, you can use the sample XML file (http://www.digitalbhoomi.in/opensocial/tutorials/display-name-city.xml) I created just for the demo. You can add this application and see how the whole process works. This sample file will work only in Orkut. It won’t work in Hi5. I will explain that later.

Once the application is added to the sandbox, you can view the application to see how it looks! Please note that at this point, your application is added only to your sandbox. It’s not added to Orkut application directory. We will talk about adding to applications directory later.

When you test your Orkut/Hi5 application, it’s better to test it in Firefox. The reason is that you have another wonderful tool “Firebug” in Firefox. Firebug saved me hours when I was trying to debug why the application didn’t work the way it was supposed to work.

Part 1 | 2 | 4 | 5

You can get viewer’s address information from Orkut thru opensocial APIs. Hi5 doesn’t support this feature yet although it would give you name and ID information. In Orkut Code Runner application, try the following code.

/**
* CODERUNNER CODE TO GET Name, Opensocial ID, City and Profile URL
*/
function response(data) {
output(data.get("req").getData().getDisplayName());
output(data.get("req").getData().getId());
var addresses =
data.get("req").getData().
getField(opensocial.Person.Field.ADDRESSES);
var viewerLocality =
addresses[0].getField(opensocial.Address.Field.LOCALITY);
output(viewerLocality);
output(data.get("req").getData().
getField(opensocial.Person.Field.PROFILE_URL));
gadgets.window.adjustHeight();
};

request();


You can download the above code from here.

Google code article had incorrect code to get the profile URL. Google opensocial group member yoichiro helped me to figure out the correct code. Yoichiro, if you happen to see this blog, many thanks to you again! Google code article is corrected now.

In the above code, you create object for newDataRequest. Set the parameters to get the profile URL and addresses along with basic viewer information. If the newFetchPersonRequest succeeds, the code execute response(data).

If you query the resultant data for name and id, you would get it. This id is the opensocial id of the viewer. Orkut profile ID is different. It’s little tricky to get the city information of the viewer. The field name to get the city information is not intuitive. It’s called “Locality”. You can get the locality from addresses array as shown in the code.

The above code will also give the viewer’s Orkut profile URL. You can determine the viewer’s profile UID from the URL.

Part 1 | 3 | 4 | 5

Good or bad, I got bitten by opensocial bug few weeks ago. I don’t remember how it started. May be some article praising the virtues of opensocial. Few months ago, Orkut announced that it was implementing opensocial few months ago. I didn’t pay much attention then. Three weeks ago, I wanted to try it out. I started my journey to develop an application for Orkut.

I haven’t coded for many months. I wanted some tips to start with. My first stop was OpenSocial Articles. This page from Google is a good starter for anyone that wants to develop opensocial applications.

Caveat: If you are new to web development OR never worked in object oriented programming and XML, none of these articles is going to help you. You need basic understanding of OOP, XML, Javascript and web development.

Google made it somewhat easy with the tutorial to develop an application that gives “gifts” to your friends. There is also a video tutorial in this page that could walk you thru.

Just reading the tutorial or watching the video was not enough. I wanted to try it out. I had to apply for an account in sandbox.orkut.com to build the application for Orkut. Now, you don’t need to apply for an account. If you have an Orkut account, you automatically have permission to play in sandbox. If you are puzzled about what is sandbox, click here to learn more.

My application for Orkut sandbox was approved in a day. I was very excited when I saw the approval email. By that time I read the gifts tutorial few times. Still, I was not very clear about many concepts of opensocial. Hello World application (in http://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.7.html) seemed to be pretty easy and doable. This tutorial page didn’t mention anything about a wonderful application called “Code Runner”.

I came to know about Code Runner from a group discussion. This is a good application to play with the code and see the results instantly. You don’t need to save your code in your server to test the sample applications like Hello World. If you want to install Code Runner in your sandbox, go to Orkut applications directory and search for “coderunner”. My initial instinct was to search for “Code Runner”. Orkut didn’t find that. You need to enter “coderunner” in the search box. If you want to save few seconds, you can use this URL to run the search query. Once you find the app, install it in your sandbox.

Code Runner application has text area where you can enter your code and click “Execute” button in the right top. Code Runner displays the default code to display your name. Don’t change anything in the box, just click “Execute” button, you will see your name in the black box below text area.

Click the image above to see it in full view.

When this code is executed, request() function is called. It makes initial opensocial data request for the “Viewer”. You are the viewer that views this application. So, the application requests information about you. Then it calls response() function with the resultant “data”. Once you get the data, you can do simple request like getData().getDisplayName() to get the application display your name.

When I wanted to know how this opensocial APIs work, my first thought was to check out the opensocial API specification. It was not very helpful to understand the basics. If you want to how the newDataRequest() function works and to see related material, check out OpenSocial Dev Guide. This gives you good intro about basics. Not much, but at least something to start with.

Google Gadget document will give you good intro about tags like Module, ModulePrefs, etc.,

Ok, now I got the Hello World application working. I also got the Code Runner to display my name correctly. Now, I want to test whether Code Runner can display my address/location correctly.

Part 2 | 3 | 4 | 5