Our open source projects with university students from across Canada have been going superbly this term with many excellent contributions to the BlackBerry Open Source community. This is our second post this term, the first one being about the kickoff sprint at Facebook headquarters. First let’s hear what Amritpal has to say about what he’s been up to.

“Being a part of the Blackberry team through UCOSP has been a world of firsts: contributing to an open source project, bbUI.js, and developing my own mobile application.

In the first month of UCOSP, I was contributing to bbUI.js with bug fixes and features. About three weeks ago, I learned that BlackBerry extended their limited edition device upgrade. From that point, the race was on to create fully functional and entertaining application (who needs productivity!). I chose to create a 2D game in HTML5. Having not created a mobile application before, the entire process was a learning experience that encompassed the canvas element to using bbui.js in real life applications.

During the process, my go to resource was the BB10 Sample apps repository. With a variety of applications that make use of a diverse set of BB10 elements, it provided helpful launch pad and reference. I was able to use code to get my application set up (config.xml and index.html examples specifically), and see examples of API calls, and bbUI.js use cases.”

Here are some helpful tips for a new BlackBerry 10 WebWorks developer:

1. Set up your development environment such that you don’t have to recompile after every modification. (See http://devblog.blackberry.com/2009/12/update-your-blackberry-widget-without-recompiling)
2. Test your application on device frequently! Don’t assume Ripple is an exact replication of the BlackBerry 10 experience. From my own development experience, I had my biggest ‘oh-no’ moment when I tested my application on device after hours of development time and it was not functioning properly. After dreading the hours of reverts I would have to make, I was able solve the issue through a quick search on the WebWorks forum.
3. Finally, use the Web and WebWorks Development forum! Tips, helpful developers and an archive of other issues faced by developers

Since this posting is somewhat delayed from when Amritpal initially wrote it, his application has actually been approved so you can download it to your BlackBerry 10 device and check it out. Another student, Willie, had this to say about his work so far:

“Since the code sprint in mid-January, I mostly focused on getting myself acquainted with BlackBerry WebWorks and the bbUI.js components. Working on bbUI.js allowed me to get my feet wet with mobile web development, and the entire project is a great resource to get acquainted with Blackberry and developing web applications on the platform.

I’ve been mainly focusing on developing a mobile application using HTML5 and jQuery Mobile with PhoneGap to test and deploy on BlackBerry 10 (a health activity tracker). This has been my first experience with mobile development and in the past month it’s been extremely rewarding. Working with the various PhoneGap plugins that is provided allowed me to access the Blackberry camera functionality easily and the built-in Ant build and deploy scripts make it very easy to test on an actual device. The next step is to add bbUI.js elements to give any application a native look and feel, which is all easily accessible on GitHub.

As the technical lead at a mobile health technology startup, it’s been challenging to navigate through the mobile space and its fragmentation. BlackBerry 10 WebWorks has provided an easy and logical way to develop for the BlackBerry 10 platform while also giving the flexibility to use web frameworks that can work on a variety of platforms. BlackBerry has made the development process smooth and seamless for even people inexperienced with mobile development to jump in!

For the rest of the term, I’m looking forward to completing/refining my application and also continue contributing to bbUI.js”

As you can see, the students are doing some great work. In our next update we hope to showcase some achievements in WebWorks Extension development. Until then, maybe you’d like to get involved in Open Source at BlackBerry?

The socialinvocation sample shows you how to invoke Facebook, Twitter, and LinkedIn with all the currently supported invocation parameters. You can set your Facebook status, compose a Tweet, upload a picture, invoke a Facebook page or Twitter profile, and much more!

Besides being an avenue for seeing cute pictures of your high school friends’ kids, social media plays an important role in marketing your apps. Use the invocation framework features to direct users to your company’s Facebook page, display your Twitter feed, or allow users to post screenshots of your app! Effectively employing social media is a great way to attract new users, so be sure to take advantage of the invocation framework’s support of Facebook, Twitter, and LinkedIn.

(Our Hackathon space at Facebook)

This is our second term working with the UCOSP organization, with a team of students from across Canada. This term we have 8 students, and I’m thrilled with what they’ve been able to accomplish already. First let’s hear from Karan Khiani, of the University of Ottawa, who is a returning student from last term:

“This past weekend has been a great mix of work and play. We were a huge group of people coming together from all around Canada to hack together for a whole weekend. We all gathered for a weekend in Palo Alto, CA and got to do our hacking at the Facebook Campus. From the moment we got to the campus for the first time (I learnt that Facebook is located on 1 Hacker Way) right to the time we left the campus (I learned that 82% of traffic on Facebook.com comes from outside USA) it was a weekend of discovery.

“Apart from having the opportunity to experience the work culture at Facebook, we managed to get quite a bit of work done ourselves. By happy coincidence, BlackBerry was hosting its final port-a-thon for the BlackBerry 10 platform. This was great timing for me as I was just about ready to get my first BlackBerry 10 app into the app store. By the time I finished my first app (a bucket list app), I had become quite familiar with the development process for the platform. This enabled me to spend another few hours to also come up with a second app (“Clock of Death”). The fact that BlackBerry 10 apps are developed using web technologies made things really convenient for me as I have a fair amount of experience working as a web developer.

“The folks at BlackBerry have done a great job with all the frameworks they have published to make things easier for app developers. That, combined with the power and flexibility of HTML5, makes the entire journey quite smooth! I can’t wait to come up with a killer idea for my third app.”

With 8 students, including 2 returning from last term, we are able to work on a few different areas at once. As a top contributor to bbUI.js, and now with a couple of applications developed using WebWorks, I’ve asked Karan to work on a new template for bbUI.js applications so that new developers have quick starting points for applications using bbUI.js. Two other students with strong C++ experience will be working on WebWorks Extensions using the new Template, and the other four are each contributing to the bbUI.js framework. Now let’s hear from one of those students, Haixuan Chen of Simon Fraser University:

(Team members join a BBM group on their new Dev Alpha devices)

“It was a great experience to meet with a bunch of new faces from other Canadian universities, to work on a new mobile platform (BlackBerry 10), and to use a new version control system (GitHub). Everything is new, but a lot of fun too!

“I have had some experience of building web applications using various frameworks, and basic experience with jQuery for front-end UI. But using HTML5, CSS3, and JavaScript to build mobile application is a brand new wonderland to me.

“Thankfully, Tim has a magic handy Ant build script, which greatly simplifies the process of building and deploying applications. I have already tried the bbUI.js samples at home. So on the first day of the hackathon, I started with the WebWorks extension sample. But I’m more interested in HTML5 and CSS3, so I spent the rest of the weekend working on bbUI.js. We have two students, Karan and Hidaya, who have already worked on bbUI.js for one term. They transferred a lot of valuable experience to newbies like me during the event. By the end of the weekend, I had submitted two pull requests regarding two bug fixes in bbUI.js. More importantly, I had gained a clear picture of the complete workflow of developing a new feature in bbUI.js, and the relationship between WebWorks framework and the underlying native device APIs.”

The students have already been hard at work with coding over the last few weeks and it’s exciting to see their progress. You can see what the students and our other open source developers are working on by checking in on our open source repositories, and perhaps you’ll find a project that you’d like to contribute to as well.

Luckily for them, sharing content from your BlackBerry WebWorks app just got super easy.

While browsing through our ever-growing catalogue of Sample Apps on GitHub, I realized we were missing some crucial Invocation samples for Facebook and Twitter! “Blasphemy,” you say?! I agree, so here is some quick info about how you can share data to Facebook and Twitter from your app.

With only a few lines of JavaScript, you can invoke these two lovely cards.

…and here’s the code:

function invokeTwitter() {
    blackberry.invoke.invoke({
        target: "Twitter",
        action: "bb.action.SHARE",
        type: "text/plain",
        data: "In @chadtatro we trust."
    }, onSuccess, onError);
}
function invokeFacebook() {
    blackberry.invoke.invoke({
        target: "Facebook",
        action: "bb.action.SHARE",
        type: "text/plain",
        data: "I’m eating tacos with Alex."
    }, onSuccess, onError);
}

All memes and jokes aside, the invocation framework is incredibly powerful. Integrating it in to your application is another simple way for you to provide that genuine BlackBerry 10 “look and feel” to your users.

For the full sample app, check out our GitHub repository.

If you have any question, concerns, or just want to show your love, you can find me on Twitter at @chadtatro. (http://twitter.com/chadtatro)

Today, I am thrilled to tell you that the BlackBerry® 10 browser meets the Ringmark Ring 1 benchmark standard for HTML5 app compatibility. The browser team here at RIM has been working closely with the HTML5 experts at Facebook, who developed the Ringmark HTML5 test suite, to ensure the BlackBerry 10 browser would meet the standard. By meeting the Ringmark Ring 1 benchmark standard, developers can add a level of advanced functionality to their HTML5 apps and be confident that the BlackBerry 10 browser can execute the app without problem.What is Ringmark?
Ringmark is an HTML5 test suite developed by Facebook and delivered to the Open Source community. It identifies a much needed standard to ensure consistency and a basic level of functionality for HTML5 app developers. In fact, Facebook says, “One of Ringmark’s primary goals is to prove that web features work for mobile web developers.” This is a great benefit to web developers and we wanted to showcase our support for this kind of standardization initiative. More info is available here – check it out or you can run the test suite against your mobile browser by visiting http://rng.io. Developers with a BlackBerry 10 Dev Alpha testing device running the latest BlackBerry 10 developer OS, will find that the browser passes all the Ring 1 tests successfully.

What is Ring 1?
Ringmark connects various features into tiers, or Rings. Ring 1, which is actually the second tier, identifies functionality developers would need at a fundamental level to build some of the more advanced types of apps in HTML5, such as 2D games, music and video apps, and camera apps.

So, where do we go from here? On to Ring 2! We’re diligently working to continue our support for the Ringmark standard and to provide developers an increased sense of confidence in the web as a platform.

We’re no strangers to the importance of standardization – especially in support of Web technologies. I’m proud to say that the BlackBerry 10 Browser is not only the highest scoring browser for HTML5 standard support (on html5test.com), but is actually built entirely in HTML5! Talk about putting your money where your mouth is, right?

We also participate in W3C’s Core Mobile Web Platform Community Group (AKA CoreMob), along with Facebook and other organizations dedicated to promote the adoption of the mobile web as a platform for app development.

Check out Ringmark and let us know what you think. And, in the meantime, score another amazing achievement for the BlackBerry 10 browser!

So how do you actually go about integrating features from these services into your application?  First the needs to allow your application access to their profile, and this bring us to Open Authorization – better known as OAuth.

OAuth you say?!

OAuth is an open standard for authorization used by tons of popular services, foursquare, Twitter, and Tumblr, to name a few.  It allows applications to connect their users to these services without having to handle their username and password.

There are a couple versions of OAuth which we have created sample apps for.

OAuth 1

Let’s be honest, OAuth 1 can be darn right nasty to work with out-of-the-box.  OAuth 1 and I are not really good friends, we’ve had many fights over the past year, and often I’ve been on the losing side.  In a nutshell, the way OAuth 1 works is by having an application perform a series of requests to a service, exchanging “tokens”, and ultimately granting the application access to the service on behalf of the user.  It requires several things to go just right, and if something doesn’t, access is denied.

Luckily there is a really awesome open-source JavaScript library written by Rob Griffiths (@bytespider) called jsOAuth. JsOAuth takes the pain and extensive process of OAuth 1 away, and allows you to focus on connecting your app with a service such as Twitter rather than spend a ton of time working with the OAuth 1 protocol.

OAuth 2

While OAuth 1 is my adversary; OAuth 2 is my best friend.  This is the next evolution of the OAuth protocol and is used by services like foursquare, and Facebook.  OAuth 2 is much friendlier for developers to integrate into their apps, and provides much easier, and straight forward authorization “flows” to work with.  Though the standard is still evolving, it’s solid, and in contrast to OAuth 1, is amazingly easy to work with.

The Sample Apps

Getting started with OAuth can be pretty intimidating to say the least.  As a former 3^rd party developer, I’ve been there.  I’ve screamed at my console log, cried like a baby, and even begged the OAuth gods for it to “just work”.  Since joining the BlackBerry® Developer Relations team here at RIM®, I vowed to help make this process easier for fellow developers and I’m glad to finally say that we’ve released two sample apps on GitHub today to help guide you on your OAuth journey.

The first sample app shows how to integrate Twitter into your application by using the OAuth 1 protocol.  You’ll learn how to quickly and painlessly authenticate with Twitter, and post a Tweet to a user’s timeline by taking advantage of the jsOAuth library.

The second sample shows integration with foursquare, and uses OAuth 2.  It’ll show you how your application can authenticate a user with the service, search for near-by venues, and then check-in to a venue.

The third sample shows how to integrate Facebook and OAuth 2 into your application.  You’ll learn how to authenticate a user with Facebook, and interact with their feed by posting, and reading content.

Each of these samples are completely Open Source, and available on GitHub.  If you find them useful, have any feedback, or need an extra helping hand along your way find me on the BlackBerry Developer Support Forums or Twitter @chadtatro.

Download the sample app

So this is it folks — no more hair-pulling to figure out how to talk to social networks directly. There are already apps for them, so let’s learn how to leverage those apps from ours instead of reinventing it.

The first step is to create the data or context we would like to share. This context is simply a JSON object that encapsulates our data. Here is an example:

JSONObject context = new JSONObject();
try {
context.put(SendCommandContextKeys.TEXT, "Your Text");
context.put(SendCommandContextKeys.SUBJECT, "Your Text");
// context.put(SendCommandContextKeys.PATH, "file:///.....");
} catch (JSONException e) {
System.out.println(e.toString());
}

I intentionally commented out the PATH type data because we cannot use PATH data in a context that also has TEXT or SUBJECT types. But I still wanted to highlight that we can also share a file path (e.g. a photo).

Once we have our data context nicely wrapped up in a JSONObject, we need to create SendCommand objects that point to specific apps with a specific context. So how do we get these SendCommands? Easy peasy — we simply query the Send Command Framework with our context data. Here’s how:

SendCommand[] commandsAll =
SendCommandRepository.getInstance().get(SendCommand.TYPE_TEXT, context, true);

Notice that the 3rd parameter above is a Boolean. If true, the query returns all commands regardless if their associated applications can be opened; if false, it returns only commands whose associated applications can be opened. Ideally we would set it to false; however, in this post we will see how we can get them all and filter them in our own application logic.

Each SendCommand object has an ID that uniquely identifies the target app and the context. Note that the IDs are not documented as there could be so many of them, but it is fairly easy to figure them out by experimentation. Since our target is the Facebook app and the Twitter app, let me save you the work by telling you what their IDs are.

Now let’s filter:

for (int i = 0; i < commandsAll.length; i++) {
if (commandsAll[i].getId().equals("Twitter_text")) {
commands[0] = commandsAll[i];
}
if (commandsAll[i].getId().equals("Facebook_text")) {
commands[1] = commandsAll[i];
}
}

…and we are done. We have our SendCommand objects and we are free to call their run() method anywhere in our app. Be it a Button click or a Menu selection, knock yourself out!