OpenSocial is a set of common APIs that will work on many different social websites, including MySpace, Plaxo, Hi5, Ning, orkut, and LinkedIn, among others. In addition, this allows developers to learn one API, then write a social application for any of those sites. Learn once, write anywhere, if you will. And because it's built on web standards like HTML and JavaScript, developers don't have to learn a custom programming language.
What you need to know
* How to form a well-formed XML
* Javascript
* Google API Documentation
In fact, if you are familiar with iGoogle Gadget development, this would be a cakewalk for you.
How to start?
1) Register for Sand box Access here :
http://code.google.com/support/opensocialsignup/
You’ll get back a mail (takes approximately 8-10 hours depending on your luck :P) when your access is granted.
2) Create an account in one of the social networks mentioned above, preferably Orkut, since this tutorial revolves around it, and there are more people involved in Orkut, in case you are stuck up somewhere.
3) Now you can go ahead and access the URL
http://sandbox.orkut.com/Home.aspx
Now , you have a link to each of your applications (which we are soon going to add) and also, to the main applications page in the left navigation bar.
Note : While developing, make sure you are in sandbox mode, else you wont be able to view these menu items.
4) Now, you need some "friends" who also have access to sandbox.. So either befriend any fellow-developer or ask any friend of yours to join hands
There are people willing to add you in the OpenSocial and Orkut SandBox communities.
This is primarily because, in all the People gadgets, only people registered in sandbox are shown (for now)
5) Now, we need a proper development environment. Basically, you can code in any text editor you like. For Viewing it in Orkut, you will need to upload your files to a directory in the web. If you do not have your own webspace, no problems. You can use GooglePages as an alternative. Basically, the files need to be uploaded somewhere over the web where google can access it.
Now, Let me get to a much simpler, faster and more efficient way of doing the above procedure, courtesy none other than google themselves!
Its called the Google Gadget Editor (GGE). You can load source code of gadgets by URL into this color-coded editor, make changes, and preview the gadget on the fly.
Access it Here
You can either use it there or I prefer it adding it to my personalized Google homepage (Sign in to iGoogle)
Click here to add it to your iGoogle homepage.
Now, Play around a bit with this gadget to get familiarized. Apart from getting a live preview of your work so far, your application can be saved on to google’s server and hence it removes the need to upload the file.
Let’s get into some action now.
As all programming languages do, let me start off with the HelloWorld application, then we’ll move on to a HelloViewer application which can send a request to google and get back the name of the "viewer" of that Gadget, after all who doesn’t likes being greeted by his name!
This is pretty much the XML you require for HelloWorld.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
Now, you can save this as "HelloWorld.xml".
People who know XML will be bored reading the below paragraph, but I still recommend slogging through ;)
Line 1 in the above code mentions the XML encoding and version we are using. You needn’t worry too much on this, for now. But just be aware that a "well-formed" XML requires this to be here. Remember XML is case sensitive, ModulePrefs is not the same as Moduleprefs. And, All attributes MUST be quoted.
In XML, we have custom tags. In the above framework, the custom tags tells Google’s parser, some things:
<Module> tag indicates that this XML file is going to contain a gadget.
<ModulePrefs> tag contains information about the gadget such as its title, description, author, and other optional features. A more detailed <ModulePrefs> would look like
<ModulePrefs
title="Hello Viewer"
description="Hello Viewer Application"
author="Bajal"
author_email="myemail@yahoo.com"
author_location="Bangalore,India"
height="200" scrolling="true"
screenshot="xxx.jpg" thumbnail="yyy.jpg"
>
The line
<![CDATA[ ...insert HTML here... ]]> is used to enclose HTML when a gadget's content type is html. It tells the gadget parser that the text within the CDATA section should not be treated as XML. The CDATA section typically contains HTML and JavaScript.
There cannot be any "Open" tags in a well-formed XML. So any tags you opened should necessarily be closed. There are several offline and online tools available for validating your XML for well-formedness. But the simplest way must be to just open the XML in your browser. Internet Explorer can display it in a tree structure and is a good tool for this. (Yes, you read it right, Internet Explorer :D )
Now that we that you understand the code, we can check if it really works. Copy past the above lines of code onto the "editor" view in GGE. Now click on “preview” tab. If you get a message "Hello World", you just made your first opensocial gadget!
Now, save this using File->Save. Give a filename of your choice.
Next step is to get it on to Orkut Sandbox. For this we need the URI of the application. You can get this by right-clicking on the filename on right top side and choosing "Copy link location" in FF (or "Copy shortcut" in IE). Now go to Applications view in Orkut.
In the textbox, paste the URI we just copied, (eg. http://hosting.gmodules.com/ig/gadgets/
file/111057482205912844609/MyOrkutApp.xml) and click on add.
Now it will show up in the Applications list, also a new link to this application is shown on the left navigation bar. See, I told you its easy. :-)
Read further documentation in http://groups.google.com/group/opensocial/
I'll be back soon with the Hello Viewer application tutorial soon, where you can do stuff more than just printing out plain text.
No comments:
Post a Comment