Pushing an Application Update with OpenSocial 0.8


Within the OpenSocial 0.8 specification is a definition available for pushing out a notification to the user stream automatically from an application.

 

What are updates and why should you care?

 

The update (or status) stream of a user is a listing of what they are currently doing or what they have posted for their friends and connections to see. What’s important to note here is that using this stream can drive quite a bit of traffic to your application if you use it. Personally, I never look through the application gallery of a platform like the Yahoo! Application Platform or MySpace. Most of the time I will only ever add applications when I see an app notification through one of the updates produced by one of my friends.

 

I mean – sometimes I just need to find out what Disney princess I am right?

 

In any event, using this update stream is going to push users to your application. This is one of the many tools that we can use to drive more traffic to your application.

 

How does this work?

 

Using standard JavaScript, let’s take a look at the steps that we will need to implement to insert an update. I would suggest that this JavaScript be inserted in a function that is driven by a user event, such as a click action.

var params = {}, activity;
params[opensocial.Activity.Field.TITLE] = "title";
params[opensocial.Activity.Field.URL] = "http://www.myserver.com/index.php";
params[opensocial.Activity.Field.BODY] = "body text";
activity = opensocial.newActivity(params);

First we need to set up the parameters that will define what will be pushed out in this update. In the above example, we assign a title string, the URL that the title string will be linked to and the body (content) of the update. There are a whole series of options available within an activity request that can be added to the above. These are listed on the OpenSocial documentation here: http://wiki.opensocial.org/index.php?title=Opensocial.Activity_%28v0.8%29#Fields. We then call the newActivity() method to define the activity that we want to build. The parameter that needs to be present in the method is the parameter list that we defined right before that request.

opensocial.requestCreateActivity(
	activity,
	opensocial.CreateActivityPriority.LOW,
	callback);

We then call requestCreateActivity to actually send the request and push the update out. There are three parameters present in this method:

  1. activity – The activity we defined in the first code sample
  2. priority – This is the priority that the update should use to send out. This can either be opensocial.CreateActivityPriority.HIGH (or the string ‘HIGH’) or opensocial.CreateActivityPriority.LOW (or the string ‘LOW’). The difference is in whether the user has granted your application permission to push updates out to their stream. If you define a HIGH priority and the user has not granted your application permission to push out updates, the application will attempt to load an authentication flow to allow the user to allow the update out. If you set a LOW priority, if the user has not granted your app permission, the update will be ignored and no authentication flow will be presented.
  3. callback – The function that will be executed when the update is inserted

With a few lines of code, you now have an application that can draw in more users using the update stream.

 

- Jonathan LeBlanc

  • Share/Bookmark


Fetching Viewer Social Data with OpenSocial 0.8


Profile information within a social network (e.g. MySpace, Orkut, YAP, Hi5) is something that users take painstaking amounts of time to input so that they can tell their friends and the world who they are. If a developer is building an application on one of these same platforms, that same profile detail is a gold mine of information that can be obtained to customize and personalize an application. Why would you ever ask a user to input their name, interests or gender if they already have this information freely available on their profile? Having the user re-enter this information is just asking for the user to drop off of your application. Using the knowledge wealth will both decrease user drop rates and make your applicatio more appealing to the masses.

 

Within a container that supports the OpenSocial 0.8 JavaScript specification, fetching the profile information of a person can be accomplished and customized with several steps.


The first thing we do is call newDataRequest to set up a new information request object within OpenSocial. Once this has been done we create our parameter list which will define what type of information we want to access within the information request. In our case here, we specify that we would like to capture “PeopleRequestFields”, namely a user’s “PROFILE_DETAILS”, and of those profile details we want to return the name and the thumbnail_url to their profile image. We can add in a whole series of profile information here, depending on what the container supports within the profile information specification. We then add to our request a newFetchPersonRequest and specify that we want the “VIEWER” profile (this could also be OWNER) and then input the params we set up to define what data we want from the viewer. Then we just name that request as “viewer_profile” so that we can access it later and send the request. The request function takes the name of the callback function as a parameter.


When the request completes and gets to our callback function, our data is returned to us with the profile information of the viewer presuming that everything completed correctly. In the callback we can call get on the returned data, inputting the name of the request, and then call getData on that. If we want a finer granularity of control over the data that is returned, we can then call the getField function with the information that we want (in this case the viewer name).

 

That’s all there is to it – with a few calls you now have all the information you need to personalize your application to every users that uses it.

 

Jonathan LeBlanc

  • Share/Bookmark


My Social Sharing Accounts


As I start to add more and more social data sharing accounts to my sharing arsenal, I find that I am getting to the point where I am having issues managing everything on a regular basis. As my individual accounts become neglected, I start to look for multi-account updating social accounts so that my regular updates are not as laborious. With that, and for my sake as much as for those who may want to communicate with me over a particular social medium, I wanted to provide a list of all of the major services that I contribute to. If there are others anyone would like me to communicate over please let me know.

 

Social Accounts
Facebook: http://www.facebook.com/jcleblanc
MySpace: http://www.myspace.com/jon_leblanc (why do I even have this account :/)
Yahoo! Profiles: http://profiles.yahoo.com/u/NJFIDHVPVVISDXZKT7UKED2WHU
Google Profiles: http://www.google.com/profiles/nakedtechnologist
LastFM: http://www.last.fm/user/jcleblanc
Grooveshark: http://listen.grooveshark.com/#/user/jcleblanc/347827

 

Professional Engagement Accounts
Twitter: http://www.twitter.com/jcleblanc
Tumblr: http://jcleblanc.tumblr.com/
Github: http://www.github.com/jcleblanc
Slideshare: http://www.slideshare.net/jcleblanc
Speakerrate: http://www.speakerrate.com/jcleblanc
LinkedIn: http://www.linkedin.com/profile?viewProfile=&key=32983204&locale=en_US&trk=tab_pro
StumbleUpon: http://jcleblanc.stumbleupon.com/
FriendFeed: http://friendfeed.com/jcleblanc
OpenSocial: http://www.opensocial.org/profile/JonathanLeBlanc

 

I know I have more – if I remember I’ll update here.

 

- Jonathan LeBlanc

  • Share/Bookmark


Twitter and Facebook Hit by DDoS Attack


Social media giants Twitter and Facebook have been hit this morning with a denial of service attack (DDoS).  The Facebook site remained up during this time (but went down to limited service) while Twitter took a downfall and went completely offline for hours as they reeled from the attack.

 

I’ve seen a number of great posts about these attacks that I wanted to share.  Take a look at this blog post by Barrett Lyon on the security aspects of this attack on Twitter: http://www.blyon.com/blog/index.php/2009/08/06/twitter-down-due-to-ddos/

 

Here’s another by Steven J. Vaughan-Nichols that provides another look into this issue – and outlines one possible motive for the reasons behind this attack: http://blogs.computerworld.com/14504/how_twitter_was_killed

 

CNN had a good overview post on what is happening with this attack: http://www.cnn.com/2009/TECH/08/06/twitter.attack/index.html

 

As the recovery effort on Twitter’s side continues, they will be posting out updates to their status blog: http://status.twitter.com/

 

I, for one, am feeling a little lost this morning as one of my major communication hubs goes down.

 

- Jonathan LeBlanc

  • Share/Bookmark


Using flash to increase social networking application portability


It’s no secret that in the group of major social networking containers they all implement their own set of rules on how developers may interact with their applications, even those “OpenSocial” compliant containers usually don’t implement the full standards body. This problem usually gives developers a great deal of stress when it comes time to move their application to another container.

 

For much of the high animation, interactive components flash is an excellent medium to decrease the time that you, the developer, will have to spend adjusting your app to get it working perfectly for a new container. In our case, we used the Yahoo! ASTRA library to replace some of our graphing components. We passed a JSON string to the flash object, used a JSON serialization library to parse the data and then used those data structures to build out our components.

 

We wanted to display a graph detailing positive versus negative voting with an overall vote line running through the middle. Below is a stripped version of the code base we used to initialize our graphing utility. The pieces that have been removed are those that handled the parsing of the inputted voting structures in order to provide the graphing point data providers with dynamic results:

 

import com.yahoo.astra.fl.charts.*;  			//astra library
import com.yahoo.astra.fl.charts.series.*;		//astra library

//create a new chart area
var chart:StackedBarChart = new StackedBarChart();
chart.setStyle("textFormat", new TextFormat("Arial", 12, 0x2c6076, true));
this.addChild(chart);

//create astra bar series for positive votes
var upBars:BarSeries = new BarSeries();
upBars.displayName = "Positive";
upBars.dataProvider = [5,6,3,2];
upBars.alpha = 0.7;

//create astra bar series for negative votes
var downBars:BarSeries = new BarSeries();
downBars.displayName = "Negative";
downBars.dataProvider = [-3,-2,-4,-4];
downBars.alpha = 0.7;

//create astra line series for total (positive - negative votes)
var totalLine:LineSeries = new LineSeries();
totalLine.displayName = "Total";
totalLine.dataProvider = [2,4,-1,-2];

//set chart data and styles
this.chart.dataProvider = [upBars, downBars, totalLine];
this.chart.categoryNames = choiceList;   //where choiceList is an array of choices
this.chart.setStyle("verticalAxisLabelDistance", 10);
this.chart.setStyle("horizontalAxisLabelDistance", 10);
this.chart.setStyle("seriesMarkerSkins", [,,bullet]);
this.chart.setStyle("seriesColors", [0x66e366,0xff6675,0x2c6076]);

 

All of the tools we used for this application may be downloaded for free:

 

Get: ASTRA Library
Description: A library of flash objects that may be used to build out dynamic components and applications. This was the backbone of our graph.

 

Get: JSON Serialization Library (corelib download)
Description: A parsing utility that will accept a JSON string and convert it to an ASON structure to allow parsing. Be careful with the data you input into this, all key value pairs must be wrapped in double quotes in order to parse correctly, single quotes or bare values will result in a parsing error.

 

– Jonathan LeBlanc

  • Share/Bookmark


Social Networking Application Portability
What We Learned the Hard Way


Our most recent endeavor into social networking applications was to create a full JavaScript driven application on top of a REST web service layer on MySpace, with the intent on having the application portable between multiple OpenSocial compliant containers (e.g. MySpace to YAP, MySpace to Orkut). The web service layer was used to facilitate communication with our MySQL database but all of the application structure and user interactivity was built using JavaScript. We wanted to use the OpenSocial JavaScript API to see what we could do with it, learn more about it and really see what viable options are available over the use of a server side API with regards to portability.

 

Our application was built, published, and ready to move to its next container. We had been switching between Orkut and MySpace on a regular basis during development when either of the containers experienced downtime or decided to push out some new caching initiative that caused us no end of pain. Our next task was to take this new application and push it to YAP (Yahoo! Application Platform). YAP is an OpenSocial 0.8 compliant container that uses Caja to secure user generated JavaScript and libraries. Caja was an initiative that MySpace was going to implement back in April of 2008 but pulled out of. I’ll talk more about Caja in future posts. In any event, we began moving the application over and immediately ran into some issues with the front end JavaScript. Our JavaScript libraries and large portions of our program control JavaScript would not cajole (to make secure JavaScript using Caja).

 

What now?

 

The full client side application was a great experience and we nearly reached the limits on browser capabilities to handle this sort of front end, but now it was time to build the application in a way that would make it portable no matter what container, OpenSocial compliant or not, that we were moving to.

 

So, we replaced a lot of the JavaScript libraries that were generating our dynamic tables, charts, and handling our event streams with strict HTML / CSS, implemented dynamic flash charts which accepted user data as JSON, and moved a lot of our client side code to a server side PHP controller layer. What little JavaScript we had left we module tested against Caja to make sure that all pieces Cajoled properly. We used Smarty to template all of our application states and expanded our web service layer to bundle user and application data into a single callback.

 

Or final application model became a highly portable, modularized, scalable application.

 

Lessons Learned
JavaScript and libraries have their place in programming on their web, and can be used to extend an application in many wonderful ways. When you have complete control over the platform that you are building on, and are building applications without much need for portability, that type of approach usually works in your favor. In the case of social network programming, or any programming done on top of a black box environment, and truly to build portable applications that can be easily deployed over dozens of different containers, this approach has its drawbacks. Flash, server side templates and REST web service layers are just some of the ways we were able to meet the requirements of a portable application. Once we stopped relying on the container & client side compliance and more on our own scalable services, we met all of our goals and were able to port our application.

 

– Jonathan LeBlanc

  • Share/Bookmark


Building a Social Networking Application – Publishing


At this point everyone should have their applications built out and ready to publish on their respective container. I’m sure everyone now knows where the “publish app” or “publish to gallery” button are (or at least I would hope you would know by now :) ) so I’m not going to get into that on each platform. This final post is just to provide some fair estimates from a developer’s point of view on what you may encounter when publishing your application. For this post, we’ll cover two of the major containers, MySpace and Facebook.

 

Below is an overview of what we saw when we published applications on these two containers:

 
MySpace
Facebook
Approval Timeframe
About 1 week
About 2-4 days
Approval Policy
Strict
Lax
Approval Process
Automated QA script
Human Tester
Human Tester
Revision Policy
External includes changeable
Spec file required re-submission
Fully changeable
Communication
No communication unless approved or bugs found
No communication unless approved or bugs found
 

So, let’s go into some of these points in more detail:

 

Application Approval (timeframe / policy / process)
Let’s start with MySpace in the hot seat. During our publication phase, our application took about 5 business days to publish after the last of our reports bugs were repaired…all in all the process was about 1.5 weeks total from the first time we clicked the publish button. It should be noted that when bugs were reported back by MySpace, they were fixed and the application was re-published within about 8 hours.

 

So, what took so long to get this application to the gallery?

 

This has everything to do with the strict approval process that MySpace maintains when approving applications to the gallery. MySpace seems to have taken on the role of a full QA testing facility when you want to get your application out to the world. They will run your application through its paces, both through an automated testing environment and a human engineer looking over your app. Our first bug report from MySpace was from the automated testing script. You can expect to encounter reports such as “Excessive whitespace” if you set your canvas height too high (use gadgets.window.adjustHeight() to dynamically resize your application height) or “No external css/js references” in the canvas / home views (inline all of your javascript and css) during the automated testing round. For the first time through, this script took several hours to report these errors back to you, so check back after about 3-4 hours to see if anything has been reported. The next phase was the engineer testing. We received test case errors from these engineers saying things like “if a user doesn’t have the app installed, goes to a friend’s page with the app installed, they receive this javascript error” or other ones like “when you do this in the app, you get this error”. They thoroughly test your application to make sure it’s working well before allowing it in the gallery.

 

On the flip side we have Facebook with a more lax approval system. When we pushed out our application to Facebook we did not receive any bug reports back from them prior to pushing to the gallery. While our app got out quicker, most of the errors we missed in the program were found by users (sometimes phrased ever so nicely in a terms of service violation message ;) ). There’s not much to say here besides the fact that Facebook seems to go to an engineer to look over but we did not see any evidence of an automated script process at the time we pushed this out.

 

Revision Policy
Now, what happens when your application makes it to the gallery and you want to change something? Again we have some platform differences. On MySpace, if you want to change anything that is controlled by the spec (generally the control flow or any inline code) you’ll need to re-publish your app. Don’t worry though, each time we did this the process only took about 20 minutes to do a quick automated test and then the changes were pushed. Facebook seems to allow you to change every aspect of an application after publishing without having to send it through the checks and balances from the container.

 

Communication
Here’s one area that both of the containers were the same in, that of the communication between the developers and the container & engineers. In both instances, with the exception of reported bugs, we did not see one notice of where our application was in the testing queue, when it might be approved, nothing… it was as if our application dropped into a black hole and was gone until it was pushed to the gallery. What we would have loved to see is some sort of queue counter where we could see how many apps needed to be tested before ours…and maybe when it was being tested, what it had passed and where it was in the testing.

 

Many application developers build their applications to reach the most people they can. While I would love to say that one platform is better than the other, I can only make note here that both have a large user following and if you can port your app to both of these platforms it’ll be better for it. This guide was developed more to present some of our experiences during the process so that no one is surprised along the way.

 

– Jonathan LeBlanc

  • Share/Bookmark


Building a Social Networking Application – Application Construction


Before working on the construction of your first social networking applicaiton, you should have already set up all of the accounts you will need to work with the container of your choice.  If you have not yet done so, please refer to the previous post detailing account setup requirements.

 

So, you’ve created your accounts and want to begin building an application…how do you do that? First off, for all of the social containers you’re going to have to have some web hosting solution where you can host your application online. How this process will basically work is that you will host the application on your web server, point your social container application to your hosted files, and voila!

 

Here is a basic guide for each of the containers on what you’re need to do to construct you application:

  • MySpace
    1. Go to your MySpace Application View and click the “Create New App” button.
    2. Fill out the application setup information. Note here that the e-mail address entered must be unique to MySpace. The method MySpace uses for creating an application is to build a profile for the application, hence the need for a unique e-mail address.
    3. There are a few methods for building out your application. You can reference the MySpace getting started pages for more details.
  • Orkut
    1. Go to http://sandbox.orkut.com/Main#MyApps.aspx to view your application page.
    2. This page will allow you to access / edit your applications in a similar way as MySpace.
  • Facebook
    1. Click on the developer application from your Facebook profile.
    2. Click on the “Set up New Application” button at the top right of the page.
    3. Add in your application information

Below is a container comparison on what’s available to you on each of the platforms:

 
MySpace
Orkut
Facebook
Application Setup
1. Create spec. file

2. Create new application

3. Designate spec. file

1. Create spec. file

2. Create new application w/ spec. file

1. Create application

2. Specify app. Location.

Sample App. Generator
Yes – in dev tools
No
Yes
Supporting Docs. / Dev. Forum
API Docs
API Docs
Code Samples
Minimal API docs
Wiki w/ code samples
Test Harness / Developer Tools
Yes
No
Yes
 

Application Setup

There are some differences between some of the major containers and how they implement their setup process. MySpace and Orkut both required a specification XML file (basically just an interface for setting up how your application will run and be configured). The main difference between MySpace and Orkut in their process is that MySpace allows you to change what spec file you would like your application to use at any point (again – no using the same spec file for multiple applications – this is restricted by MySpace) but Orkut requires you to create a new application if you would like to use a new spec file. Facebook takes a more intuitive approach in that they just have a configuration panel which will allow you to set up your application details.

 

Sample Application Generator

The sample application generator is a great tool if you’re just starting with a platform. This will allow you to automatically create a “hello world” application without having any experience on the platform.
MySpace and Facebook both offer this utility and, if you’re just starting out, I would definitely take a look at this tool.

 

Supporting Docs / Development Forums

All of the major containers have documentation (be it official or unofficial) which support the platform. This ranges from API documentation, code samples, to fully user supported specification standards…so your choice in container might range around what level of documentation you prefer.

 

Test Harness / Developer Tools

The test harness (developer tools) is a utility available to developers to allow them to test out container compliant code or widgets and get back a visual representation of what that script or widget will render as on the platform. Why do you need this tool when you have your own development environment? Well, this tool is great for testing out new container widgets when you don’t want to have to deal with uploading to your server, invalidating cache, etc. I have not found much use out of these tools once my application became very integrated with a database or server side structure set.

 

The final post in this basic setup series will follow pushing your application to the container gallery and the approval process.

 

– Jonathan LeBlanc

  • Share/Bookmark