The much-anticipated BlackBerry 10 operating system is already creating a splash with customers, analysts and developers alike. In this tutorial, BlackBerry developer evangelist Luca Sale teaches us how to develop a Web app for the new OS that hooks into the native functions of BlackBerry devices such as the camera and the ever-popular BlackBerry Messenger (BBM).
Three or four years ago the mobile app ecosystem was dominated by native languages such as C, C++ and Java. Web-based languages were mostly reserved for mobile sites that struggled to rival the user experience of a native app. But with the evolution of HTML5, JavaScript, CSS3 and the on-going ratification/publication of APIs that allow browsers to access the handset’s native functions – camera, messaging, storage etc – Web apps have now come of age. What can be achieved today using HTML5 in a mobile environment is far more exciting than what could be done three or four years ago – thanks to the hard work of the W3C (which has worked for years to bring the HTML5 specification to completion) and the mobile browser vendors that have been quick to adopt the standard and implement JavaScript APIs that enable access to the hardware (e.g. getUserMedia). This article will show you how easy it is to develop a mobile Web app that can be hosted on a Website or downloaded to the user’s device (like a native app) – depending on what the developer prefers. We’ll start with the basics, then gradually add the BlackBerry 10 look and feel, and then finally move on to adding advanced device features such as camera integration and the ability to share an image using BBM. And this will all be done using Web technologies.
So, let’s start from the basics.
The first step is to set up all required tools, so we don’t have to worry about it later.
If you don’t already have a Web server installed, you can take advantage of Ripple services. This is included in the Ripple extension we’ve just downloaded and serves up locally stored Web content. Create a folder called “RippleSites” as follows:
Windows XP: C:Documents and SettingsRippleSites
Windows 7: C:UsersRippleSites
Mac OS: /Users//RippleSites
Create a new folder called “HelloWorld” in the above location and we are ready to go.
Next, let’s install the WebWorks packager.
Using your favorite code editor create a new .html file called index.html and write the main structure of an HTML page: