Google Calendar Demo Gadgets

I have implemented some calendar gadgets based on existing legacy gadgets.

(1) Google calendar viewer gadget
This app does not use Google Calendar Javascript API. Google Calendar generates automatically feeds for public events owned by a user. Address of the feed is http://www.google.com/calendar/feeds/username@gmail.com/public/full. This gadget retrieves public events of a specific calendar user and display them accordingly. Not all events are retrieved and displayed.
Assume today is A, then events that fall into period (A-30days) to (A + 60days) are handled.
Note: this gadget can just get public events.
I deployed it in both Orkut sandbox and Ringside.  Following screenshots are taken from Orkut.

Main page:

Description of various parts of the page:

When a user clicks the brief information of an event, detailed information will be displayed in place.
 

(2) Standalone Google calendar client application.
This app does not rely on Gadget API or Open Social API. It just relies on Google Calendar Javascript library. So it can be run independently without gadget container. I deployed it on Ringside using IFrame.
It can be accessed by visiting http://gf1.ucs.indiana.edu:8080/gcalendar/calendar2.htm or you can use it in Ringside.

If a user has not logged in Google account, he/she will see a "Login" button.

After user clicks the "Login" button, he/she will be redirected to Google login page. After he/she logs in Google, he/she will be redirected to a "Access Request Authorization" page. Then the user can choose to grant or deny the access. It is shown below:

After the user grants access, following initial page will be displayed:

Description of every part in the page:
 

When a user clicks the time range selection text box, a data picker will be displayed so that the user can easily select time period. It is shown below:

When a user selects his/her time range and clicks "Go" button, information of events within the specific time perios will be retrieved. And when the user clicks the drop-down box with label "Select...", a list of events will be displayed. See below screenshot:
 

When the user selects an event, detailed information will be displayed in corresponding fields.

The user can modify information of an event and save it back in Google Calendar by clicking button "Save to Google Calendar".

(3) Google calendar gadget which allowes users to log in
This gadget is different from the first gadget mentioned above because this gadget allowes users to log in so that all events(public and private) can be retrieved and displayed. This gadget is based on the app(2) which is described above. The user interface is the same as that of app(2).
I deployed it on Ringside and Orkut sandbox successfully.

Demo Apps

I have written several demo apps.
(1) A regular gadget with gadgets.* API
This is based on official youtube gadget presented here. Official youtube gadget uses traditional gadget API, which means it can not be run in open social containers.
I modified the source of official youtube gadget to make it compatible with open social API. Source is hosted here.
I run it on Ringside, and it works well. Screenshot is shown below:

Besides, I run it on iGoogle sandbox and Orkut sandbox successfully.

(2) An open social gadget
This gadget is written with Open Social API so that it can be run in all standard compatible containers. This gadget lists all friends you have in a container. If you add it to your Orkut account, it will list your friends in your Orkut account. If you add it to your hi5 account, it will list your friends in your hi5 account.
Source is hosted here.
I run it on Ringside, and screenshot is shown below:

Besides, I run it on iGoogle sandbox and Orkut sandbox successfully.

(3) A Facebook application.
This application gets your friend list on Facebook and displays related information including profile picture, last name, first name and birth date. You can see its information here. Meanwhile you can add it to your Facebook account.
Screenshot is shown below:
 

(4) A port of application (3)(The facebook application). 
Because Ringside implements Facebook API and FBML, application (3) should be able to be run on Ringside with minor modifications. New API key and secret should be used. Besides Ringside RESTful server (instead of Facebook server) address should be used.
Finally, I got it to run successfully on Ringside.

(5) Make Facebook to use Ringside application
I used the method described in this post and this post. It should work. But unfortunately it did not work. Currently I don't know why.

To try it in Ringside
First go to http://gf1.ucs.indiana.edu:8080/ to log in.
Then click tab "Applications":

Following page should be displayed:

Main panel displays a list of all applications you have added to your account. You can click any one to use it.
Or you can click button "Find More Apps" at top right corner to browse more available apps.
Application "youtube gadget" is the application (1) described above.
Application "Friend gadget(Open social)" is the application (2) described above.
Application "Your Friends Native" is the application(4) described above.
To run application (3), you need a Facebook account and add it to your account by accessing here.

Interaction between Facebook and Ringside

(1) Can Ringside use applications of Facebook?
Generally not. To use applications of Facebook, one of the two requirements must be satisfied:
<1> You know the callback URL of the application.
If you know the callback URL, you can create a new application on Ringside serve which points to the same callback URL. However, as far as I know, you have no way to figure out the callback URLs of Facebook applications developed by others.
<2> Facebook exposes a "proxy URL".
In this case, Facebook does not need to expose callback URL of an application. Instead, Facebook acts as a Proxy server and sits between Ringside server and your app. Then you points "Callback URL" of your Ringside app at the Facebook "proxy URL". So the communication style is:
    your Ringside app <=> Ringside server <=> Facebook <=> Facebook App.
Facebook is a relay station which connects Ringside server with Facebook applications. However, as far as I know, currently Facebook does not support the "proxy URL".

(2) Can Facebook use applications of Ringside?
Yes. Ringside supports the second method described above.
If you has built an application on a Ringside server and you want to that application to be accessed in Facebook, you should:
[*] add a new application in your Facebook account;
[*] copy configuration information of your Ringside app to the newly created app in Facebook.
[*] set Callback URL(in Facebook setting) to point to your Ringside app. Note: there is a specific format of "proxy URL" of apps in Ringside: http://ringside_server:port/trust.php/facebook/canvas_path. You should replace canvas_path with your real value. It should be the canvas path you set in Ringside server rather than Facebook.
Note that that app is run inside of backend Ringside server instead of Facebook. So the app generates all output based on information stored on backend Ringside server. For example, if the app returns a list of your friends, you will see friend list of the profile you set up on Ringside server. In other words, you will not see your Facebook friend list.
Architecture:
 
<1> browser sends request to Facebook
<2> Facebook sends request to "Callback URL" (format is: http://ringside_server:port/trust.php/facebook/canvas_path)
<3> Ringside server sends request to your app server
<4> Your app makes calls to Ringside server and integrates response into output
<5> Your app returns final output to Ringside server
<6> Ringside server passes the output to Facebook
<7> Facebook returns response to client.
One issue is: if response in step <5> contains FBML segment, who will render the FBML? Ringside server or Facebook? I guess Facebook renders FBML into HTML. In other words, Ringside server just acts as a pure proxy and it does not render inbound messages. Maybe I am wrong, I am not 100% sure about my guess.

(3) More possibilities
Actually, your app can makes use of all resources that you have privilege to access. No matter where you deploy your app, your app can makes API calls to Facebook, Ringside server and open social containers(e.g. Orkut, hi5...).
Architecture:
  
In this way, you can integrate different resources and produce better result.

Ringside application development

Table of Content

• What Ringside server can do?
• Client app development
  • How to add and set up a new app
  • Develop client apps in PHP
• Ringside server extension development
  • API extension (add more APIs you like)
  • Tag extension (customize your own tags)

Ringside Social Application Server seems a promising project. However, because it is still in beta development, online documents are not well organized. A better directory layout may help a lot. After reading the documents and trying Ringside server myself, I got some experience which is shared in this post.

What Ringside server can do?

(1) Open Social container.
It means all open social applications can be run on Ringside server. Of course, the open social applications should not use extensions provided a specific container( e.g. iGoogle, Orkut ) if you want these apps to run on Ringside server.
Note: Gadgets in Google content directory(repository of traditional gadgets) can not be used on Ringside server because traditional Gadget API is different from new Gadget spec used by Open Social API.
(2) Facebook platform mock
It supports FBML and Facebook API and adds some extensions, which means you can use the same function names and markups of Facebook to write your Ringside apps.
(3) Extensibility
Because Ringside server is open source, users can customize and extend Ringside server in the way they wish. For example, users can add their new APIs and extend XML tags to provide customized tags.

How to add and set up a new app?

Add a new app:
First click "Developer" tab, and in the main panel click "Create a New Application", following picture should be displayed:

When you create a new application in Ringside, the procedure is well similar to that of Facebook. The configuration options are almost the same as well. Look at below picture:
 
One big difference is highlighted in the picture. In Facebook, you can just choose your app type between "Use FBML" and "Use IFrame". However, in Ringside server, one more option("Use Open Social") is supported. The key thing you should configure is "Callback URL" which points to the location of your application. For option "Canvas URL", you just need to specify a unique name and you must not specify the full-path URL. Prefix is implicit which is http://ringside_server_domain:port/canvas.php/. So if you specify "myapp" as your "Canvas URL", the URL to access your app becomes http://ringside_server_domain:port/canvas.php/myapp.
Note!!! When you set "Callback URL", you had better not use loopback domain or ip(e.g. localhost, 127.0.0.1) as host. If type of your app is "Use FBML", it may work well. In this mode, the output content is fully contained in the response. However, if type of your app is "Use IFrame", your app may not work. In this mode, a frame element is embedded in returned html and src attribute is set to point to the "Callback URL". As a result, the browser will send requests to its local host (the host a user is using to try your app) instead of the server which hosts your app. After you deploy and publish the app, using loopback address will definitely cause problems. To make your app work both in FBML mode and IFrame mode, loopback address should not be used!!!

Develop your own Ringside applications in PHP

See instructions here. After you get PHP library, generally you need to modify your php.ini and append path of the library to variable include_path so that PHP interpreter knows where to look for Ringside PHP library.
You applications do not need to be hosted on the same host as Ringside server. Ringside provides a PHP client library which can be used to ease PHP development. Ringside PHP client library is based on Facebook PHP client library. But Ringside wraps the code in original Facebook PHP client library. In original Facebook PHP client library, the rest server which you send requests to is hard-coded in the source code as "http://www.facebook.com". There is a class in Ringside library called "RingsideApiClients" which is a subclass of class "Facebook" and overwrites most of the inherited functions. Besides, Ringside adds some extra APIs which are mainly contained in class "RingsideApiClientsRest"(It is a subclass of class "FacebookRestClient").
So, you should use class "RingsideApiClients" to send requests to backend Ringside server. One thing your must do is configure the Ringside server URL so that your app knows where requests should be sent. There are two ways that I know:
(1) When you create an instance of RingsideApiClients, you can send weburl, serverurl and socialurl as parameters of contructor.
Prototype of the constructor is :
public function __construct($api_key, $secret, $webUrl = null, $serverUrl = null, $socialUrl = null, $client = null ).
(2) Change static variable in class RingsideApiClientsConfig.
Sample usage:

RingsideApiClientsConfig::$webUrl= ringside_web_url;
RingsideApiClientsConfig::$serverUrl = ringside_server_url;
RingsideApiClientsConfig::$socialUrl = ringside_social_url;

Extend API provided by Ringside Server

Good resource (1), (2).

Add your own tags to Ringside server

Good resources (1), (2).

Ringside Networks Social Application Server on Linux

This post is based on official documents from Ringside, and describes steps to set up Ringside Networks Social Application Server.
(1) Download
First, download the app server from here. In the distributed package, all dependent packages/libraries are included. Main additional components include: Apache2, PHP5 (core package and some extensions), Mysql and some unix/linux tools(e.g. curl, tidy and their libraries). So size of the whole package is sort of big. But it is an all-in-one package so that you can easily make it work without much configuration. Installation directory structure is explained here.
If you don't want the all-in-one package, check instructions here to individually set up your environment.

(2) Install
A GUI installation wizard is provided. You can get instructions here. The process is easy.

(3) Config
You can change various apache setting by modifying following files:
(*)%RNAS_ROOT%/apps/phpmyadmin/conf/phpmyadmin.conf
//This conf file is related to using of phpmyadmin. By default, users can only access phpmyadmin from IP 127.0.0.1. You can modify it
//if you want to use phpmyadmin from remote client.
(*)%RNAS_ROOT%/apps/ringside/conf/ringside.conf
//ringside related conf. It sets where the document root is... Generally, this file should not be modified.
(*)%RNAS_ROOT%/apache2/conf/httpd.conf
//General apache http server configuration is in this file. If you want to change the port, set it here.

(4) Run
Let me assume you installed Ringside Networks Application Server into directory %RNAS_ROOT%. Under directory %RNAS_ROOT%, you should see a script called "ctlscript.sh" which can be used to start/stop/restart server components. Sample commands are shown below:
./ctlscript.sh start                    //start both apache and mysql
./ctlscript.sh stop mysql           //stop mysql
./ctlscript.sh status apache       //get status of apache server.
Official document is here which has more information.

(5) Setup/Initialization
First, you need to access http://your_ip_or_domain:port/setup.php. Default port is 8080. Then the server will carry out some setup work. For example, a database called ringside is created...
You should see following page:

(6) Test/Using
Main page: http://your_ip_or_domain:port
Phpmyadmin access: http://your_ip_or_domain:port/phpmyadmin.
Login: http://your_ip_or_domain:port/login.php. When you run initial setup in step (5), a user is automatically generated for you. See content in the green box in last picture.

(7) upgrades
[*] Upgrade via PEAR:
You can update Ringside source via PEAR. Instructions are described here.
[*] Check out latest code:
You can checkout latest Ringside code and build your own development/deployment environment. You should install the all-in-one package first. By following instructures here, you substitute new version of Ringside for the original one which is included in the all-in-one package.

(8) Remove
Use executable uninstall. Check instructions here.