Continuing the last UCOSP posting, where we talked about the release of the Barcode Scanning Extension for BlackBerry 10 WebWorks, we have some thoughts from another student regarding development of BlackBerry 10 WebWorks Extensions. Developing extensions in C++ that can be called from JavaScript involves some challenges, so if you’ve been thinking about diving in, these hints will be quite useful. Here’s what Alex has to say about his experience this term:

“I had the fortune of joining a number of great software development students as we embarked onto BlackBerry’s new platform, BlackBerry 10. During this term, we explored bbUI.js, BlackBerry Webworks, and the Native Development Kit. I had worked specifically on creating new Webworks community plugins. Two plugins that I had worked on were a vibration feature to allow for additional parameters accessible only through the native development kit and a barcode reading feature with Michael Delong and Tim Windsor. In the end, I had done a great deal of research and developed various approaches to tackle the barcode reading feature.

The vibration community plugin was an effective introduction into developing between Javascript and C++. The feature was originally recommended to be completed when another colleague had required additional granularity in the vibration settings. While I had looked into this issue and was able to flesh it out, we found the APIs themselves were somewhat limiting with how the colleague had envisioned the outcome. Overall this situation was a positive experience in understanding the BlackBerry 10 Webworks architecture and the BlackBerry Platform Services.When developing this plugin I ran into a number of issues due to my own lack of patience which lead to some rather confusing errors.

• JNext does method invocation through string matching

Somehow through development I was using a certain keyword for indicating my command I wanted to invoke from Javascript. On the C++ side, I seemed to have switched around the naming and thus was expecting to read an event from a keyword that did not exist. Since these constants are being used in two different languages and there is not much common ground between this two language process, nothing was telling me that I was passing in the wrong keyword. Copy and paste can be your friend.

• Vibration falls under the BlackBerry Platform Services

While creating the vibration code, I was confused why it was not working at all. I had the keywords matching in both Javascript and C++ and it had all compiled from what I could see. Since vibration falls underneath the BPS family, you need to initialize the BPS before it can be used.

bps_initialize();

After completing this feature, I went on to work with Mike on the barcode scanning feature. Barcode scanning is a relatively interesting concept as it would combine a fairly wide knowledge base of media with my current understanding of Javascript and C++. When working with this feature, initially we tried to piece together what we could from other examples in cascades and the NDK github samples. Requiring a rather large knowledge base was something we had not expected from a feature like barcode scanning. Having to take advantage of input from the camera on the C++ layer introduced us to a number of concepts such as image formats and subsampling. In addition to worrying about these fundamental multimedia concepts we were trying to understand how to take a raw frame from the camera and extract a barcode with the ZXing library. While another of methods were taken in attempting to complete this feature I had participated in two approaches of development to get barcode reading to where it is now on WebWorks.

1. Displaying the images from a base64 representation from C++ to Javascript layer

• Attempted to use card invocation to support video feedback for barcode scanning

Prior to this project, I knew of base64 encoding but I had not ever used it in my own development. The ability to encode the bytes of the image in a string was an interesting idea to take advantage of the JNext bridge to carry the image from the native layer to the web layer. Unfortunately during the actual process, the encoding and decoding process can take a fairly long time and actual rendering on the canvas was not fast enough to capture a snappy mobile experience. it was an interesting usage of base64 but this was not quite the answer for the barcode scanner in its current state.

The second attempt that I had looked into was utilizing card invocation to skip the barcode reading altogether and take advantage of a cascades application to do the barcode reading for us. Card invocation is a great idea that can also be seen on other platforms such as Android. Specific functionality that another application may be able to accomplish very well, can be used as a “card”. These cards are invoked from an application which will run that portion of another application. When the card action is complete, that application is closed and the user is returned to the original invoking application. The advantage to this option was visual feedback the user would feel as if it had been built into the Webworks framework and created a fluid native feel to this highly user requested feature, as I was switching into a cascades barcode scanning application. Unfortunately with the card invocation, an application which did the barcode reading would have to exist on the device prior to launching this Webworks application. In addition to this pitfall, Webworks in its current state allows for the ability to query potential cards to handle jobs and the ability to invocate these actions, but was unable to return values. This is an issue if the developer wants to capture a QR code and use this value in their own application. I however did not look into copying the barcode into the clipboard or providing the option to do this however this extra step could be potentially approached by other developers that are fine with running a utility application and a Webworks application.

Overall the experience on BlackBerry 10 with the Webworks framework has been an enjoyable opportunity into the world of mobile web applications. With the ability to utilize open source community driven libraries, BlackBerry has helped build an environment to utilize rich web applications with the raw power of the BlackBerry 10 platform. I look forward to seeing what new applications and innovations can arise from this new way of hybrid mobile/native development.”

You can check out the growing list of BlackBerry 10 WebWorks extensions on our Github repository. The university term is wrapping up now, so our next UCOSP update will have the final thoughts from our last two students and an overview of what the students were able to do this term. If you’re interested in doing some open source coding yourself, I’m putting together some projects for the summer. Contact me through email or twitter.

Perhaps the largest single contribution from UCOSP students was recently pushed to our WebWorks-Community-APIs repository: A Barcode Scanning extension for BlackBerry 10 WebWorks. Two students started working on this during the initial hackathon at Facebook. Before I talk any more about it, let’s hear from Mike, who did the first coding and bulk of the C++ investigation:

“My semester working with Blackberry under the umbrella of UCOSP has been a very rewarding and enjoyable experience. Not only have I learned a great deal and gained invaluable new skills and experience, but I have also built on my previous experiences with GitHub, C++, and mobile Blackberry WebWorks development. From the semester-opening code sprint at Facebook HQ, to finishing a native WebWorks extension, to developing and testing a Blackberry 10 mobile app, working on this project has been an enlightening and rewarding journey.

I have spent the bulk of these past four months contributing to the Barcode Reader native C++ extension for WebWorks with my colleague Alex Kwan and mentor Tim Windsor from Blackberry. The idea of creating native C++ libraries that can be invoked from a Javascript layer was intriguing to me right from the beginning, and I wasn’t disappointed in choosing this option. My contribution was mainly for the C++ portion of the extension, which involved writing code to access the BB10 native camera APIs and attempting to detect barcodes from the camera frames using the ZXing image processing library. Development of the extension initially proceeded quite smoothly. The native APIs for accessing the camera and processing frames from the viewfinder were simple enough and sufficiently documented, and the Zxing library was fairly straightforward to use. Within a month the basic functionality of the Barcode reader was implemented, and our extension was capable of scanning barcodes.

The majority of the challenges involved with this project resulted from attempting to pass the image frames captured by the camera viewfinder back to the WebWorks layer. My colleagues and I experimented with several options; although many initial solutions we tried ended up being infeasible due to various performance-related issues, we finally managed to come up with a solution that works well and the extension is now ready for release.

In addition to working on this exciting new extension, I’ve also had the good fortune of building on my
previous experience with mobile development and creating a new WebWorks app for Blackberry 10. For the remaining week of this term, I’m looking forward to completing and refining my application. The WebWorks SDK is straightforward to use and it’s easy for novice mobile developers to get started with it, and Tim’s Ant build script greatly simplifies the process of building and deploying apps to your BB10 mobile device.

Overall, working with both native extensions and the WebWorks SDK was a great learning
experience, and I would highly recommend developers to contribute extensions for providing any functionality they feel is currently lacking in the Blackberry WebWorks SDK.”

Once Mike had the initial C++ code working, another student worked on wiring in Javascript connections so that it could be called from an extension (I’ve saved that students thoughts for the next blog post in the series). Finally, I took the code at the end to finish integrating it together with some tweaks and testing on different devices. As Mike stated, the hardest challenge was with showing the user what they were aiming at. As the JNEXT interface between C++ and Javascript can only handle string data, we were unable to have the viewfinder paint video or even images directly. The solution in the end was to capture burst images from the camera, save them to the filesystem, and pass the file path to the Javascript layer. The resulting image stream isn’t as smooth as direct painting, but the actual scanning and interpretation of barcodes is unaffected, so users have the ability to aim, and the scanning is as fast as any pure native solution.

This is an outstanding example of what these Canadian university students are capable of, and it’s awesome to be able to work with them. If you’ve been looking for a Barcode Scanner API for your BlackBerry 10 WebWorks app, check it out on Github.

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?

(Photo credit to Alan L, and his cat)

When your content is so riveting that your users can’t take their eyes off the screen, the last thing you want is the screen dimming and breaking that immersion. Thankfully, BlackBerry 10 offers a simple API to keep the screen from dimming, which conveniently handles things like the user putting the application in the background. Just a few weeks ago, I wrapped up this simple API in a WebWorks Extension using our new Extension Template. I’ve already heard from a few happy developers who have included it in their apps, but there are plenty of use cases, so I figured it would be good to share with the wider developer community. Just remember to use this one properly – turn it on only when displaying content where the user is going to be viewing the screen but not interacting with it. Your users will thank you for being able to see your content, and also for not keeping the screen on when it’s not necessary.

Here’s a quick look at what it’s like to integrate the API.

Add the feature to your config.xml:

<feature id="community.preventsleep" required="true" version="1.0.0.0" />

And call these methods to interact with it:

var setting = true; // boolean
var result = community.preventsleep.setPreventSleep(setting);
// Result is a string value for debugging

var currentSetting = community.preventsleep.isSleepPrevented;
// boolean value for the state of the screen

Thanks for checking it out and if you’ve got any issues, please post them on GitHub. Now your slideshow app of animated cat gifs can be realized in all its deserving glory.

What I’d like to present is one option and some suggestions for being productive in it, but I’d very much like to hear from you through the comments or email what you use, and if you are interested I’d like to collaborate on a blog post about using your favourite IDE and how to get the most out of it. My goal is to make developing BlackBerry 10 HTML5 apps as easy as this:

Image credit Janet Morrell – http://www.flickr.com/people/89509548@N00/

The editor that I want to talk about today is called Sublime. You can evaluate it for free, it’s fully cross platform, and even has portable versions so you can keep it on a USB key. There are plenty of cool features and I could never cover them all, but the first thing you want to do is install the package control plugin, and then all the other packages are just keystrokes away: Ctrl-Shift-P and choose “Package Control: Install Package”.

Some recommended packages to get you started are as follows:

• SublimeLinter
• All Autocomplete
• Markdown Preview
• Color Schemes by carlcalderon (Stereokai is my choice)

One of my favourite capabilities of Sublime is its Build System integration. I put together a video showing how to setup our BlackBerry 10 WebWorks Ant Build Script with Sublime, so you can see how easy it is:

See, that wasn’t so bad. There’s really no need for the pitchforks.

(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.

In the interest of full disclosure, I admit that the BlackBerry 10 WebWorks extensions scared me a little when I first looked at them. It’s been a long time since I really wrote C++ code. We won’t dwell on how long it’s been, but let’s say it’s been long enough. And, when I looked at the memory sample, it didn’t get me to the point of being really confident in how to approach extensions. Though we called it a template, it was more accurately a small example. That said, the potential of extensions, and the cool native APIs that we could be accessing in WebWorks apps kept me thinking about ways to get better at them, and make it easier. Now, after consulting with the experts in the WebWorks team, and studying the source of many core extensions, I’m quite happy to say that we have a new template for WebWorks Extensions.

Now the template is designed as a real starting point for creating extensions, with examples for all the most common ways that the JavaScript layer needs to talk to the native layer. We haven’t changed the fact that you will be writing C, C++, or Qt code on the other end, but we have made it much easier to get right to that code instead of learning about what’s in the middle. Here’s what the template provides:

• Synchronous and Asynchronous method templates
• Sending and receiving text and numeric values
• Sending and receiving JSON values
• Starting and stopping native threads
• Receiving ongoing callback events from native
• Defining a custom property in the extension
• Ant Build Script for packaging and installation in the WebWorks SDK

The results from the developers who have used the new template are superb – not only do we have some new extensions being built and contributed, but developers have confidence in what they need to do and the possibilities unlocked are immediately visible in their faces when they get coding. And, when you can focus on the code, it turns out that native code isn’t so bad after all: The rabbit hole turns out to be an underground railway with free WiFi. So, give it a shot and let’s create some cool extensions for BlackBerry 10 WebWorks.

Qt developers often ask the following questions: Is there a porting guide to help me port my Qt apps to BlackBerry 10? What about porting Qt Quick to BlackBerry 10? How do I configure Qt Creator for BlackBerry 10?

The good news has arrived: you now have a porting guide covering the most commonly-encountered use cases. This guide provides the necessary information to developers of native mobile apps who fall in one of the following categories:

• Developers who have Qt apps written in C/C++/ QML/JavaScript and intend to have their apps running on the BlackBerry 10 platform;
• Developers who want to write new Qt C++, QML and/or JavaScript code for the BlackBerry 10 platform;
• And finally, developers who want to take advantage of the Cascades UI framework and change their existing UI to the Cascades framework.

BlackBerry supports developers in all of the above described scenarios, and so this guide provides developers with best practices for each category. It also explains why a particular practice is considered the best one.

Please check the full Qt porting guide at:

http://developer.blackberry.com/native/documentation/bb10/porting_qt_apps.html

Related Posts:

YouTube: BlackBerry Jam Session (JAM12): Porting Qt Applications to BlackBerry 10
Porting Qt Applications to BlackBerry 10 is Easier than Ever!
Writing Qt apps for the BlackBerry 10 platform
YouTube: QtDD12 – How Qt Helped RIM Build BlackBerry 10
YouTube: QtDD12 – Developing with Qt for the BlackBerry 10

If you haven’t already heard, the BlackBerry 10 countdown is on. If you have an existing application using PJSIP libraries, this is your opportunity to port your pjsip open source stack to BlackBerry 10 in a matter of minutes. As you may have already heard, Bob Cripps has successfully ported PJSIP to BlackBerry 10. Just very recently Bob has helped simplify building PJSIP for BlackBerry 10 by creating a set of executable scripts. This work has now all been committed to our BlackBerry github repository.

I took this opportunity to dig deep into building PJSIP for BlackBerry 10. As soon as I had my Linux environment up and running with all the prerequisites installed, I am happy to say that it took me less than ten minutes to build and load PJSIP BlackBerry 10 Cascades sample project to my BlackBerry 10 Dev Alpha device. So please don’t try to reinvent the wheel – dive right into this github repository to port PJSIP to BlackBerry 10. Remember to follow the README instructions as they are very important. You can also follow the instructions in below PJSIP porting guide knowledge base article: http://supportforums.blackberry.com/t5/Native-Development/Porting-PJSIP-PJMEDIA-and-PJLIB-to-BlackBerry-10/ta-p/2085751

If you run into any issues in porting PJSIP to BlackBerry 10 you can send me a tweet @_GurtejSandhu or write your comment below and I will be happy to assist.

Again, huge kudos to Bob Cripps for contributing his recent work in simplifying building PJSIP for BlackBerry 10.

Success stories:

http://devblog.blackberry.com/2012/07/voip-development-on-blackberry-10/

BlackBerry 10 Development:

https://developer.blackberry.com/develop/platform_choice/ndk.html

http://devblog.blackberry.com/2013/01/blackberry-10-voip/

Next week isn’t just CES in Las Vegas; it’s also the 2013 AT&T Developer Summit – and the BlackBerry Developer Relations team will be there in full force.

Our own Larry McDonough will be presenting “Building Applications for Launch of the New BlackBerry 10 Platform” on Monday, January 7th, 2013 from 2:00 PM – 2:45 PM. On the same day, our good friend Andrew Poliak from the QNX Auto Team will be a panelist on “Navigating the Connected Vehicle Vision” from 3:00 PM – 3:45 PM.

That’s not all – we’ve also got an exciting BlackBerry 10 live porting challenge during the hackathon portion of the summit:

“Be part of open source history and participate in the AT&T API for BlackBerry 10 “Live Port” challenge! Using the iOS version of the AT&T API as reference, complete the port and build the best BlackBerry 10 app leveraging the AT&T API and be eligible for prizes including a trip to BlackBerry Jam Europe in Amsterdam! There will be plenty of help onsite to help with any question you may have. Are you up to the challenge?”

• What’s involved:
  • All participating teams contribute to porting AT&T API for BlackBerry 10
  • Each team builds their “best app” using the API with the BlackBerry Native SDK
• Prizes:
  • Chance to go home with a BlackBerry 10 Dev Alpha B!
  • All apps are eligible for the BlackBerry 10K challenge (turn your app into $10K)!
  • The “best app” (as judged by our panel of experts) wins trips to BlackBerry Jam Europe 2013 in Amsterdam!

Hope to see you at the AT&T Developer Summit next week!