In the ever-evolving world that is mobile (web) development, it can feel as if it’s impossible to decide on a framework to use in building your app. Having spent the last 7 years or so in app development, trust me, I feel your pain.

Recently I tested out several frameworks. Some were open source, some closed. They all solved similar problems and were generally easy to use. What I took away from this was that there’s a lot of great work being done, but nobody has an all encompassing solution that works for every scenario, and that’s okay.

Frameworks are tools for us developers to utilize. They’re not magical cauldrons that you dump code into to spawn a killer app that works on every device, form factor, and screen size. That said, there are a handful of frameworks that make the development process much easier and more intuitive.

Over the next three weeks we’ll take you on a high-level tour of the frameworks my team tested out, and how we found their overall performance on device.

Let’s take a look at a couple of my favourites, which are both powered by Angular.js.

Ionic Framework is an “open source front-end SDK for developing amazing mobile apps with web technologies” running on AngularJS. It’s my favourite to use, and has an enormous community of developers.

Cost

FREE

MIT Licensed

Cross Platform Support

BlackBerry 10

iOS 7+

Android 4.1+

Windows Phone

Note: While Ionic does not list BlackBerry 10 as an officially supported platform, it does indeed run quite well on our device(s).

PopularityArguably one of the most popular (modern) frameworks available. It’s very well funded, and actively maintained.

AngularJS based. Can make use of nearly any third-party directives, and modules.

Many third-party directives/modules don’t follow “Material Design” principals, so may be harder to find what you’re looking for in that regard.

Larger Screen Support (Desktop / Tablet)

Works well on all form factors

Content layouts re-adjust very intelligently

Localization

i18n (Internationalization)

l10n (Localization)

As you can see, both Ionic and Angular Material are both rated (by me) quite well. I had a hard time choosing between the two. In the end, for me, it came down to maturity of the framework which is why I prefer to use Ionic for the time being.

Are you using Ionic, or Angular Material? Agree/disagree with me? Let me know what you think (@chadtatro), on Twitter!

Lastly, stay tuned for next weeks post by Naveenan who will be covering Sencha Touch, and jQuery Mobile.

I’m lucky enough to have a BlackBerry Z3 on my desk so I can play around with it and develop apps. In my completely unbiased opinion, I think this is a solid device. The Z3 feels great in your hand – perfect size for one-handed use – and is easy to build apps for.

As a developer, it can be challenging to design your app to fit on different devices and resolutions. Luckily you can rest assured that your app should scale to fit and run on the Z3 right out of the box. Even though the Z3 has a lower physical pixel density than the Z30, thanks to hardware-powered scaling, everything on the device believes it’s the same 1280×720 resolution as the Z30!

That being said, let’s take a closer look at some of the specs and some differences you could run into while developing for the Z3 compared to the Z30.

Knowing the Differences Between a Z3 and a Z30

Again, while the Z3 has a lower physical pixel density than the Z30, your app will be scaled automatically and, for all intents and purposes, your app will believe it’s running on a device with a resolution of 1280×720, just like the Z30.

Z3 and Z30 Display Side-by-Side Comparison

Display

BlackBerry Z3

BlackBerry Z30

Screen Size

5”

5”

Scaled Resolution

720×1280

720×1280

Pixel Based Resolution

540×960

720×1280

Aspect Ratio

16:9

16:9

Z3 and Z30 Sensors Side-by-Side Comparison

Note the difference in sensors between the Z3 and the Z30. The Z3 does not have a Magnetometer or Gyroscope sensor.

Sensors

BlackBerry Z3

BlackBerry Z30

NFC

No

Yes

Accelerometer

Yes

Yes

Magnetometer

No

Yes

Proximity sensor

Yes

Yes

Gyroscope

No

Yes

Ambient light sensor

Yes

Yes

TL;DR for Developers:

Apps and assets designed for the Z30’s 720×1280 resolution are automatically scaled in hardware to support the Z3’s 540×960 display.

There is no NFC, Magnetometer or Gyroscope sensor.

If you find this post useful, have questions, or just want to keep up-to-date on all things BlackBerry Development, follow me on Twitter at @chadtatro!

]]>http://devblog.blackberry.com/2014/04/the-blackberry-z3-developer-specs/feed/0Z3_featurectetreault1980Z3Make Money with Your WebWorks 2.0 Apphttp://devblog.blackberry.com/2014/04/make-money-with-your-webworks-2-0-app/
http://devblog.blackberry.com/2014/04/make-money-with-your-webworks-2-0-app/#commentsFri, 11 Apr 2014 17:00:29 +0000http://devblog.blackberry.com/?p=18184/ Read More]]>A little while ago I wrote about my experience monetizing one of my own applications, Filtermama, using the BlackBerry Payment Service and, more specifically, how I was able to increase revenue by over 200% with it. After having a few conversations with fellow developers, I realized we were lacking a proper sample app for integrating the payment service into your WebWorks 2.0 app!

Since then, I’ve put together a small showcase sample that teaches you how to get started with the Payment Service and integrate it into your own application(s). In the “Chad-Coin” sample, you’ll see how to interact with the Payment Service APIs, using them to make new purchases, check for existing purchases, and handle API callbacks. Additionally, you’ll learn how to test all of these API calls in Sandbox mode, which is critical for testing your app while it’s under development and not available in BlackBerry World.

Development / Sandbox Testing

To test your payment logic, first set up your app to use the Payment Service’s Development/Sandbox mode. This allows you to make API calls to the Payment Service without actual transactions taking place so that you can thoroughly test your app before releasing it.

Setting up Development Mode is really simple; all you have to do is set the blackberry.payment.developmentMode property to true. Just make sure that before you publish your app in BlackBerry World, you have set this to false or comment the line out.

// enable development mode for the payment service

blackberry.payment.developmentMode = true;

Making a Purchase

When you execute the following function, you’re presented with a Purchase dialog. This is because you’re running in Development Mode. The dialog allows you to test different purchase response scenarios you could face, and code your app accordingly.

// buy coins

buyCoin = function(name) {

var paymentObject = {

"digitalGoodID": "123",

"digitalGoodSKU": "",

"purchaseAppName": "Payment Sample",

"purchaseAppIcon": null,

};

// call the payment service

blackberry.payment.purchase(paymentObject,

// success callback

function(data) {

console.log('success!!!');

console.log(data);

},

// error callback

function(data) {

console.log('Error :(');

console.log(data);

});

};

Check for Existing Purchases

You’ll likely run into the case where you need to check if a user has already purchased a certain item. You can check for existing purchases with the blackberry.payment.getExistingPurchases method. Note that for development testing you’ll need to pass in false, to the function, as the first property.

// get list of existing purchases

var checkExistingPurchases = function() {

// pass in 'false' to tell the payment service this is a test call aka. local mode

blackberry.payment.getExistingPurchases(

false,

// success callback

function(data) {

for (var coin in coins) {

if (coins[coin] !== 0) {

alert('Coin: ' + coin + '\nAmount: ' + coins[coin]);

}

}

// error callback

}, function(e) {

console.log('fail');

console.log(e);

}

);

};

From my experience, these are probably the most commonly used API calls of the Payment Service. If you would like to learn even more about what’s possible, like setting up Subscriptions and more, then you’ll most definitely want to check out our docs.

If you find this post useful, have questions, or just want to keep up-to-date on the world of BlackBerry Development, follow me on Twitter at @chadtatro.

]]>http://devblog.blackberry.com/2014/04/make-money-with-your-webworks-2-0-app/feed/0ChadCoin_featurectetreault1980ChadCoinChadCoin_2Adding BBM Channels to your WebWorks Apphttp://devblog.blackberry.com/2014/03/adding-bbm-channels-to-your-webworks-app/
http://devblog.blackberry.com/2014/03/adding-bbm-channels-to-your-webworks-app/#commentsMon, 03 Mar 2014 19:00:22 +0000http://devblog.blackberry.com/?p=17799/ Read More]]>Last month, Mark Sohm showed us how to Invoke a BBM Channel Within Your App with QML. Well, not to be outdone by my fellow native development consultants, I’m here to show you how to do the same and more today, with WebWorks!

With the ever-growing popularity of BBM Channels, you’re probably looking for a way to integrate the service into your applications. Luckily, using the Invocation Framework, you can easily view a BBM Channel and share content to it. Let’s take a look at the JavaScript.

Invoking a BBM Channel

Here, we’re simply building our ‘request’ object by setting a target, action, and channel uri. Then, we’re calling the blackberry.invoke.invoke() method. If the user is already subscribed to the Channel it will open, if the user is not subscribed they’ll be prompted to do so. Note that the BBM Channel is case sensitive.

Below, is an example on how you would share a photo with a BBM Channel. Again, we’re just building our request object, giving it the path to a photo, and calling the blackberry.invoke.invoke() method. The Invocation Framework takes care of the rest!

Method Man was onto something when he rapped that classic hook. Sound greedy? Maybe, but for app developers this rings true. No, I’m not saying app developers are greedy. In fact, it’s quite the opposite. Like me, part-time developers are just looking to make a few extra bucks doing something they love!

There are a lot of ways developers can make money, such as through ads, subscriptions and upselling, but a lot has changed recently. Previously, if you built a solid app and charged a few dollars for it, you could make some serious cash without ever giving a thought about monetization strategies. I was lucky enough to bring in a full second income for quite a while based on this “premium app” strategy. But whether you like it or not, times are changing.

Now, users want and expect free apps. Some customers have even given my apps bad reviews because of the 99 cents fee. So how can you give people what they want and still make a living?

Actually, it’s pretty easy. By adjusting how you look at monetization, you can make money and keep your customers happy.

My teammate Garrett wrote a great post, “Payment Service: Price Check,” in which he takes a much closer look at the Payment Service itself. It’s worth checking out if you’re thinking about getting into in-app purchases.

Here are a couple strategies I’ve used in the past year using the BlackBerry Payment SDK for WebWorks and Cascades:

“Forceware”

When I originally released Filtermama, the app was free, but with limited functionality. If the user wanted to fully unlock the app and use all of its features, they would have to pay. This alienated a lot of users; some were okay with paying to unlock the app, but most felt it was a bait-and-switch.

Upselling

With the launch of Filtermama 2 in December, I wanted try something new. Inspired by one of my favorite apps, I took the “upsell” approach. This way, users could have a fully functional app and purchase additional Filter Packs if and when they chose to.

What happened next was a bit of a shock to me. Not only did users leave better reviews, Filtermama generated a ton of in-app purchases. In fact, as of a couple weeks ago, sales have increased over 200%!

Take a look at the download trends…

…and the revenue.

In the end, how you choose to make money from your apps is up to you, but the key lesson here is that if you want to generate more revenue, don’t force your customers to pay, make them want to pay.

Resources

If you find this post useful, have questions or comments, or just want to keep up-to-date on the world of BlackBerry Development, follow me on Twitter at @chadtatro.

]]>http://devblog.blackberry.com/2014/02/cash-rules-everything-around-me-making-money-as-a-developer/feed/0app development_revenue_featurectetreault1980monetizing appsapp development_screenshot 2app development_downloadsapp development_revenue#BBDev101 Part 2: Tools Used to Build WebWorks Appshttp://devblog.blackberry.com/2014/02/bbdev101-part-2-tools-used-to-build-webworks-apps/
http://devblog.blackberry.com/2014/02/bbdev101-part-2-tools-used-to-build-webworks-apps/#commentsWed, 12 Feb 2014 16:00:19 +0000http://devblog.blackberry.com/?p=17531/ Read More]]>Now that we’ve discussed WebWorks basics in #BBDev101 Part 1, it’s time to dig a little deeper! This next #BBDev101 tutorial will take you through the different tools used when building a WebWorks application. This tutorial will also help you understand more about the BlackBerry Simulator.

Next up, learn how to get native functionality in your WebWorks app!

If you have any questions, we’re happy to help! Shoot us a tweet at @BlackBerryDev or follow #BlackBerryDevEd for more development support.

Although I’m primarily a web developer, over the past few months I’ve been working outside of my comfort zone by hacking and slashing my way through C++ and Cascades. Overall it’s been a great experience, and I’ve come to realize something important: the future of mobile development isn’t “native vs. web”, it’s hybrid apps; combining the flexibility of JavaScript with the power of Cascades into a high-performance application.

So, once I knew how I wanted to build an app, it was time to figure out what to build. I’ve always had a love of photography, and over the past few years, camera apps as well. Naturally, I decided to build something ground breaking: an app which (wait for it…) added vintage filters to images!

By combining my JavaScript and HTML skills, with my new-found knowledge of Cascades and a bit of C++, I was able to build an app that combined the best of both worlds: Filtermama.

How hybrid apps work

This blog post assumes that you already have a basic understanding of how Hybrid apps work on the BlackBerry 10 platform.

My teammate, Anzor Bashkhaz, has written an extensive blog series that covers everything you need to know to get started. Rather than duplicate his efforts, I encourage you to check out his post on the BlackBerry DevBlog, titled Hybrid Apps for BlackBerry 10, for more information.

Conception

Capturing an image

To let the user select a photo, the FilePicker control is being used in QML. You might ask why I didn’t use the camera card.Great question. Simple answer is: I’m lazy.

The FilePicker lets us make use of the imageCropproperty. Once the user selects an image or takes a photo, the photo editor card is loaded and the user can crop their photo. That is important because I really didn’t want to deal with detecting different image sizes, aspect ratios, and orientations.

That being said, if I were to redo that logic in the future, I would give the user more control over their picked photo, allowing them to rotate it, crop it (if they want to), and so on. Live and learn, I guess. :)

Let’s take a look under the hood, and see how Filtermama runs.

Native side

Here’s a quick look at the FilePicker QML. Note: the imageCropEnabled property.

Once the file is picked and cropped, it’s prepared to be added to the app. This is where the web layer comes in to play. To prepare the photo, Canvas is used. The photo is resized, and added to the html document.

This is where the magic first happens. To talk to the web layer from Cascades we use the postMessage function.

This back-and-forth communication is the core of how the hybrid app works. Again, check out Anzor’s hybrid app blog series if I’ve lost you. :)

Filtering

One of the biggest factors for handling the filtering in web is that Canvas is absolutely awesome to work with. There are many libraries out there to do this exact thing, and I’ve tested out most of them.

For Filtermama, I decided to go with Filter.me by Matthey Ruddy. It’s dual licensed under the MIT and GPL licenses, coded cleanly, and is optimized for performance.

Native side

To apply a filter we simply post a message to the webview that contains the filter’s settings. These settings all originate from a JSON fileassets/filters/filters.json.

The actual call to the Filter.me library is super easy because it is making use of jQuery (shh, don’t hate). As you can see, an effect object (which contains the JSON data) called filter is passed to Filter.me, and the rest is handled by the library.

Native side

Once Filter.me is finished, a message is posted back to the native layer and received by the webview’s onMessageReceived listener, which in this case, tells Cascades to turn off the activity spinner and give focus back to the user.

Sharing, and Saving

Photo sharing and saving is handled by the native layer, but remember we’re filtering the image in the web layer so we need to get the Base64 data from the canvas into Cascades and C++. Since Filter.me is replacing the image source with a Base64 string, we simply grab that data, and post it to Cascades.

Now that the file is saved, and we have the savedFilePath, we detect if the user wants to share or just save the photo.

If they choose to save, a toast is displayed telling the user the photo is saved.

If the user wants to share the photo, we use the Invocation Framework to do so by passing it to the savedFilePath. A Share Card is displayed, and the user can now choose where they want their photo posted.

I used the Social Invocation sample app to add this functionality to the app. Below is a snippet from the shareFile() method.

If you’ve been working hard on an app and you’re ready to submit it for Built for BlackBerry, you’ll want to watch out for one particular prerequisite that’s often overlooked that can result in testing failures and ultimately delays in the approval process. I’m talking about the Privacy Policy.

So, what exactly is a privacy policy? It’s a statement that discloses how your app handles users’ personal information. This includes anything that can be used to identify somebody, for example, a users’ name, email address, date of birth, phone number, PIN number and so on. It’s important to provide a privacy policy because users need to know what information you’re collecting and why you’re collecting it.

Creating a Privacy Policy

The best way to write a solid privacy policy for your app is to consult a lawyer. Not all of us are able to do that, myself included, which is why I used an online generator to create one for my app.

Once you’ve created a privacy policy, you’ll need to provide a link to the document in the Vendor Portal under Manage Account Details.

That’s it! Your vendor account now has a privacy policy.

If you find this post useful, have questions, or just want to keep up-to-date on the world of BlackBerry Development, follow me on Twitter at @chadtatro.

When Brian Zubert approached me with a great idea he had to create an app for Herrle’s Country Farm Market, I was pretty excited to help out. He explained to me the premise of what needed to be built: a simple app that wrapped a few pages from Herrle’s existing website, did some basic integration with core apps, and highlighted Herrle’s existing social channels. This approach offered an easy way for them to have a presence on the platform, and since their website already uses a responsive design they could make use of their existing web assets and resources.

Web or Native?

When it came down to choosing which platform to build the app in, my initial thought was that I could do it really fast using BlackBerry WebWorks, and I could have, but when it was mentioned that perhaps I could use Cascades and QML, I was intrigued.

Those of you who know me know that I’m a web guy. I live in a world full of JavaScript, HTML, and CSS. Very rarely do I poke my head outside of the proverbial web-developer-box, but for some crazy reason I decided to look over the fence to see what Cascades and QML had to offer me, and it was AWESOME.

By making use of WebViews in Cascades, I was able to get the best of both web and native worlds: an app that displayed web content, driven by a sleek Cascades chrome. What was especially great about this approach was that it allowed Herrle’s to update their website at will, and the app automatically displayed the new content to users.

This past week we published some amazing resources, the Built for BlackBerry Boilerplate templates, for both WebWorks and Cascades. These boilerplates allow developers to rapidly develop an app that possesses the signature BlackBerry 10 look and feel the users have come to expect. While in this case I wasn’t necessarily looking to create a true Built for BlackBerry app, the boilerplate still provided me with a solid place to start right out of the box.

The App

To get started, I downloaded the Cascades Built for BlackBerry Boilerplate sample and imported the project into Momentics. That’s really about it! Within two minutes, I had an app that integrated with BBM (Invite to download, BBM Channels), the Invocation framework (for sharing content to Facebook, Twitter, etc.) and had features like Window Covers, Splash Screens, Application Menu (swipe down), etc. As a web guy, this was a great place for me to start modifying the code, and more importantly, learn from.

The next step was to figure out how I wanted the application to function. I didn’t want to hard code a ton of information, or any for that matter, into the app itself because perhaps we’d end up reusing it in the future. Again, I looked back to my web roots and what came natural to me (no, not XML, how dare you!) and decided to use JSON to store all of app settings. For bonus points, I even created a handy web form to generate the JSON for me.

Since nearly everything in the app needed to be dynamic, the entire app was customizable, including the text labels for Tabs and which URL the tab would load. Extra details were also stored in the settings JSON like Herrle’s Twitter username, Facebook page, and even a unique UUID, which is needed during BBM registration.

The web form provided two output methods; Download JSON or Display JSON, in the end all that really matters is that JSON data is stored in a file aptly named settings.json within the assets folder of the project.

Summary

I learnt quite a bit during the development process.

As terrible as it is to admit, before I began working on the app I literally had no clue how to use Momentics, let alone write a native app with Cascades and QML. I was shocked at how user friendly Momentics was, and how natural QML felt to me, a JavaScript coder. After setting up my environment I was up and running within minutes, able to import the Built for BlackBerry boilerplate sample, and have it running on my shiny new BlackBerry Z30.

With the revitalization of the Built for BlackBerry program, you’re probably thinking, “That’s super great guys, but how can I make an app that delivers the signature BlackBerry 10 look and feel users have come to expect?”

I’m glad you asked.

To give you some foundation and help you rapidly develop an app that provides the user with the BlackBerry 10 experience they expect, we’ve produced three simple, yet incredibly useful, sample apps.
Whether you’re a Cascades or WebWorks developer, these samples will provide you with the perfect starting point for creating an app capable of qualifying for Built for BlackBerry, leaving you more time to focus on the actual development of your application.16

This sample also provides the perfect starting point for Cascades developers looking to create an app that could earn the Built for BlackBerry designation. The features included in this are the same that are in the WebWorks version. In fact, we’ve tried to align them as closely as possible, and it will help you achieve the signature BlackBerry 10 experience right out of the box.

Cascades “Showcase” by Par Kjellberg and Olof Stenlund

Written by our teammates out of Malmo, Sweden, the “Showcase” sample takes the idea of a boilerplate one step further and teaches you how to create a complete full-featured application that could qualify for Built for BlackBerry. Cascades developers will learn how to parse RSS feeds, display images asynchronously and how to integrate with the services on the device.

You can find all of these samples in the official BlackBerry GitHub repos:

If you find this post useful, have questions, or just want to keep up-to-date on the world of BlackBerry Development, follow me on Twitter at @chadtatro.

]]>http://devblog.blackberry.com/2013/10/built-for-blackberry-boilerplates-the-essential-starting-point-for-web-and-native-development/feed/0ctetreault1980Built for BlackBerry BoilerplatesLearn how users interact with your app using Flurry Analyticshttp://devblog.blackberry.com/2013/07/learn-how-users-interact-with-your-app-using-flurry-analytics/
http://devblog.blackberry.com/2013/07/learn-how-users-interact-with-your-app-using-flurry-analytics/#commentsWed, 31 Jul 2013 06:00:31 +0000http://devblog.blackberry.com/?p=15714/ Read More]]>Are you a BlackBerry WebWorks / HTML5 developer like me who has an almost unhealthy need to know what user’s are doing while using your BlackBerry 10 application? Well I have some great news for you! Flurry Analytics has recently released a free HTML5 SDK for their analytics service and it is AWESOME.

Whether you’re looking to track simple application usage, or more in-depth analytics, Flurry has got you covered. Integrating the SDK into your project will literally take a few minutes and provide you with a ton of information on how your app is being used.

The basic usage of the SDK allows you to track quite a bit of stats right out of the box and enabled you to see analytics surrounding app Usage (Active Users, Sessions, Session Length, Frequency of Use, etc.).

Event Analytics

If you want to get much more detailed, and if you’re anything like me I’m sure you do, Flurry also provides you with Event analytics.

Events can essentially be anything you want them to be. By executing one line of code in your app during an “event” you’re able to start tracking occurrences of said event, and see how often the event is being triggered in your app.

This can really come in handy when you’re looking for ways to monetize your app. In one of my own applications, Filter Mama, I wanted to know which photo filters and effects users were using the most. By collecting event analytics I was able learn which filters users added most often, and was able to focus on creating new ones based upon the most popular effects.

Integration

Adding Flurry to your project is super easy, and literally takes only a few lines of code.

function initApp() {

// set the application version number

FlurryAgent.setAppVersion(blackberry.app.version);

// set the os version

var env = {

‘os': blackberry.system.softwareVersion

};

// Annnnnd GO!

FlurryAgent.startSession(‘<your API key here>’);

FlurryAgent.logEvent(‘environment’, env);

}

Adding events is just as easy, and can be as simple or detailed as you want. Here we’re simply logging the event name as a String, but this could be an Object, or really, any type data is relevant to you and your application.

// Event 1

function eventOne() {

FlurryAgent.logEvent(‘Event 1′);

console.log(‘Triggered: Event 1′);

}

// Event 2

function eventTwo() {

FlurryAgent.logEvent(‘Event 2′);

console.log(‘Triggered: Event 2′);

}

I’ve written a small sample app, which shows you how to integrate Flurry into your BlackBerry WebWorks application and begin gathering analytics. I’ve included both the basic usage, as well as how to trap events within your app.

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter @chadtatro!

]]>http://devblog.blackberry.com/2013/07/learn-how-users-interact-with-your-app-using-flurry-analytics/feed/0ctetreault1980He Said: Chad on Leveraging the Power of Foursquare in BlackBerry 10http://devblog.blackberry.com/2013/05/he-said-chad-on-leveraging-the-power-of-foursquare-in-blackberry-10/
http://devblog.blackberry.com/2013/05/he-said-chad-on-leveraging-the-power-of-foursquare-in-blackberry-10/#commentsTue, 07 May 2013 18:14:10 +0000http://devblog.blackberry.com/?p=14931/ Read More]]>

I’m super excited to be presenting three sessions at BlackBerry Jam 2013 in Orlando next week! As a former 3rd party developer I’ve had the chance to attend several BlackBerry events over the past couple of years. Now that I’m working on the Developer Relations team I’ve got the opportunity to not only attend these awesome events, but also present some killer content to my developer friends!

Here’s what I’ll be doing next week:

Are you building an app which requires a solid database of venues, and an amazingly easy API to interact with? Myself, Erin Rahnenfuehrer, and Kyle Fowler of Foursquare will be presenting JAM37, “Building context-aware applications by leveraging the power of Foursquare APIs”.

Looking to make to most out of your app by connecting it with all the big name social networks like Foursquare, Twitter, Facebook, and LinkedIn? Again, myself, Erin Rahnenfuehrer, and Kyle Fowler will be presenting JAM52, “Get Social: Connecting your app to Facebook, Twitter, Foursquare, and more!”.

Are you trying to make the most out of your BlackBerry World app reports? Jerome Carty, the creator of Blaq, and I will present an in-depth look at how to measure the success of your app using BlackBerry World Reports, and enhancing them with Distimo Analytics.

Which sessions are you looking forward to the most? Let me know on Twitter (@chadtatro), and I’ll see you in Orlando!

]]>http://devblog.blackberry.com/2013/05/he-said-chad-on-leveraging-the-power-of-foursquare-in-blackberry-10/feed/0ctetreault1980TITLE_IMAGEBlackBerry 10 Web Development – Working With Photos and EXIF Datahttp://devblog.blackberry.com/2013/04/blackberry10-webdev-exif/
http://devblog.blackberry.com/2013/04/blackberry10-webdev-exif/#commentsTue, 30 Apr 2013 16:56:27 +0000http://devblog.blackberry.com/?p=14856/ Read More]]>Working with user-generated photos can be a pretty daunting task at times for developers. There are so many variables that come in to play.

What is the aspect ratio?

Is it taken in landscape or portrait?

What orientation is the photo saved in?

Luckily I came across a great library to help you handle these photos a lot easier. JavaScript EXIF Reader by Jacob Seidelin is an extremely powerful library, which lets you read the EXIF (Exchangeable Image File Format) from photos.

So why is this important? Well, as you may be aware of, photos taken on your BlackBerry 10 device are actually stored sideways. How this affects you, as a developer, is that if you need to use that user-taken photo in your app it will appear sideways unless

Why not? Photos taken from the front, and rear cameras are both stored sideways, rear camera photos appear “right-side up” (with an EXIF.orientation value of 6) while photos from the front camera are store “left-side up” (EXIF.orientation 8). As you can see, you need to be able to detect not only if a photo is stored sideways, but also which orientation it’s stored with so you can rotate it accordingly.

This is where the EXIF Reader library helps out. By calling one method, you’re able to fetch not only the orientation data of a photo, but all of its EXIF data. This could include the photo’s dimensions, device make and model, or right down to very specific properties of the photo like what exposure was used, or whther the flash went off or not.

I wrote a quick sample app which demonstrates how a developer would handle a photo taken from the camera within their application. When the user takes a photo the EXIF data is read, the photo’s orientation is determined, and the photo is rotated on a HTML5 Canvas so that it appears “top-side up”. The developer is then left with a handy Base64 string which can be saved, uploaded, etc.

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!

]]>http://devblog.blackberry.com/2013/04/blackberry10-webdev-exif/feed/0ctetreault1980noTITLE_IMAGEBuilt For BlackBerry – WebWorks “Bootstrap” Sample v1 released!http://devblog.blackberry.com/2013/04/webworks-bootstrap-sample-v1/
http://devblog.blackberry.com/2013/04/webworks-bootstrap-sample-v1/#commentsThu, 25 Apr 2013 20:00:27 +0000http://devblog.blackberry.com/?p=14809/ Read More]]>Building great BlackBerry 10 WebWorks app just got easier! The other day I released a new sample app on our BlackBerry GitHub repository which gives you a push in the right direction to quickly build a “Built for BlackBerry” designated application.

So what is a Built for BlackBerry app? In a nutshell, a BFB app is an application which is designed from start-to-finish to be awesome in performance, looks, and functionality. Apps which apply for, and pass, the Built For BlackBerry program tell users that this app meets BlackBerry’s high standards for quality and performance.

My latest sample app was created to give you a head start in achieving the BFB designation, allowing you to focus more of your time on the functionality of your app, rather than the actual UI and setup. It’s simply a starting point/blank slate for you to work with and customize.

I’ve incorporated all of the features we look for in a Built For BlackBerry app. Right out of the box you’ll have an application that meets the BlackBerry 10 UI guidelines, connects to BlackBerry Messenger and to the Share Framework. There are also several other features including: App Menu (swipe down), Toasts, Window Covers, and device specific Splash Screens. I’ve even included CSS media queries to show you how to style your app on a Z10 vs. Q10 with CSS!. This will allow you to quickly customize this “boiler-plate” to meet your own needs and focus on the content of your app rather than getting the “right” look.

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!

]]>http://devblog.blackberry.com/2013/04/webworks-bootstrap-sample-v1/feed/0ctetreault1980TITLE_IMAGEIntegrating the new Foursquare SDK in to your BlackBerry WebWorks Appshttp://devblog.blackberry.com/2013/02/foursquare-sdk-webworks/
http://devblog.blackberry.com/2013/02/foursquare-sdk-webworks/#commentsWed, 13 Feb 2013 14:58:09 +0000http://devblog.blackberry.com/?p=13721/ Read More]]>The other day, Kyle from Foursquare announced a couple of new and exciting features for BlackBerry developers to make use of in their apps – Single Sign On and Place Picker cards. This is an absolutely stellar implementation of our Invocation Framework. To compliment his native sample app, I created a BlackBerry 10 WebWorks version. Before you dive in to the code, let’s see what these new cards are all about, and more importantly, why you should be using them in your own applications.

Single Sign On (SSO) Card

The Foursquare Single Sign On card (SSO) makes it extremely UI-friendly for customers to authenticate, and authorize your app to connect with Foursquare. Before the SSO card was created it was up to the developer to open up a web-view, wait for the user to authenticate, close the web-view, and handle all the associated callbacks which would eventually return an OAuth token. It was both a lot of work to implement, and could be a very cryptic and confusing process. SSO eliminates the need for all of that jazz.

To authenticate a user with Foursquare and obtain an OAuth token (used to make authorized requests to their API) you simply invoke the SSO card, wait for the card to close, then grab the returned OAuth token. That’s it. Seriously.

Place Picker Card

The Place Picker card, as the name suggests, is a seamless way to prompt the user to select a near-by location, and instantly provides you, the developer, with a contextually aware application. Just like the SSO card, all of the legwork is handled by the Foursquare SDK. By simply invoking the card, and listening for the onChildCardClosed event, you’re able to handle the returned JSON object any way you see fit in your application.

The Sample App

Again, making use of these new features is incredibly easy. I created a small sample app to show you how to authorize your app with Foursquare via the SSO card, pick a near-by venue with the Place Picker card, and lastly check-in to the selected venue.

As always, the sample app is open sourced, well documented, and hosted on GitHub. Head on over, and check it out!

If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!

]]>http://devblog.blackberry.com/2013/02/foursquare-sdk-webworks/feed/0ctetreault19801TITLE_IMAGETouch Anywhere (on the screen) You Want With Hammer.js and BlackBerry 10 WebWorkshttp://devblog.blackberry.com/2013/02/hammer-js/
http://devblog.blackberry.com/2013/02/hammer-js/#commentsFri, 08 Feb 2013 19:52:55 +0000http://devblog.blackberry.com/?p=13334/ Read More]]>With the launch of BlackBerry 10 and all touch devices ready to rock and roll, you may be interested in adding touch or multi-touch gestures in to your BlackBerry WebWorks apps.

I came across an amazing JavaScript library called Hammer.js which makes it super easy to incorporate gestures into your application with only a few lines of code. The library is extremely lightweight, running ~2KB minified, and handles all of the legwork for you.

Hammer.js supports quite a few gestures too:

Tap

Double Tap

Hold

Swipe

Drag

Transform (Pinching)

Of course, what would touch events be without the actual Event data? When a user interacts with the screen, Hammer.js reports back to you with all of the information related to the touch. You can find out how long somebody touched the screen, where they touched, which direction they were swiping or dragging, the momentum of the swipe, and so on

So, why would you want use Hammer.js in your projects?

It’s lightweight

Sure, there are other libraries out there that handle gestures, but it’s important to think about resources when creating mobile apps. Hammer.js runs about 2kb (minified) and leaves a very tiny footprint.

Simple to use

The syntax is incredibly easy to both use and understand. There’s even a jQuery plugin available if you’re like me and like to take shortcuts in your code.

Plays nice with others

Hammer.js works well alongside other libraries and frameworks. Whether you’re using jQuery, bbUI.js, Backbone.js, or others, you should have no worries that Hammer.js will interfere. It performs very well, and doesn’t get in the way.

Check out my sample app!

I worked very hard for what seemed like minutes, creating an awesome sample app to show how easy it is to use the Hammer.js library. Check it out in our GitHub repo – there’s even a special appearance by the one-and-only Jesse Ariss!

If you have any questions, or comments, feel free to hit me up on Twitter. I like the attention. @chadtatro

]]>http://devblog.blackberry.com/2013/02/hammer-js/feed/0ctetreault1980Over-sharing with Twitter and Facebook Cardshttp://devblog.blackberry.com/2013/02/twitter-and-facebook-cards/
http://devblog.blackberry.com/2013/02/twitter-and-facebook-cards/#commentsFri, 08 Feb 2013 18:24:53 +0000http://devblog.blackberry.com/?p=13343/ Read More]]>Let’s face it: YOU ARE AWESOME. You’re the most important person in your friends’ and family members’ lives. They’d be completely lost, wandering the streets like zombies, without knowing what you were up to 24/7 on Twitter and Facebook.

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.

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.

Forget everything you know about working with maps and BlackBerry WebWorks. Mapping just got real, real easy!

We heard you ask for an easy way to integrate mapping services with your BlackBerry WebWorks applications, and today I’m happy to announce that on BlackBerry 10, the process has become much simpler.

We’ve put together a straight-forward sample application that will show you how to integrate with a few of the services out there: Google Maps, Bing, Leaflet, and OpenLayers.

If you’ve been following the progression of the BlackBerry WebWorks framework, you’ve probably noticed an awesome amount of transparency. Open web standards are lovingly embraced and adopted here at RIM. Even the framework itself is staged publicly on GitHub. Continuing this theme of openness and following web standards, the maps samples we’ve released are not platform specific. Whether you’re writing an exclusive BlackBerry app, or planning on targeting multiple platforms using Cordova (previously known as PhoneGap), these samples are most definitely for you!

For each service, you’ll be able to learn how to:

– Setup a mapping service to use to in your app

– Find the users location with HTML5 Geolocation

– Perform a search for nearby points of interest

– Display push-pins on the map, showing the search results.

The goal of this sample is to show you how you can quickly integrate maps into your app and have it perform great in WebWorks for BlackBerry 10.

When it comes down to picking which service is right for your app, it’s completely up to you. One of my teammates, Jim Ing, wrote a really in-depth article on maps, comparing services and much more. I strongly recommend checking it out “Lightweight Maps For Mobile”.

Have you been yearning to contribute to the BlackBerry 10 cause but weren’t sure how? Why not take this WebWorks sample, and build a Native version?! If you’re interested, get in touch with Shadid Haque (@ShadidHaque) on Twitter.

If you’ve got a success story, have a question, or just want to chat about apps, hit me up on Twitter @chadtatro!

]]>http://devblog.blackberry.com/2012/12/blackberry-webworks-maps/feed/0ctetreault1980TITLE_IMAGEYes, yes, yes we do! We’ve got icons, how ’bout you?!http://devblog.blackberry.com/2012/12/blackberry-10-icon-sets/
http://devblog.blackberry.com/2012/12/blackberry-10-icon-sets/#commentsMon, 03 Dec 2012 15:33:07 +0000http://devblog.blackberry.com/?p=12262/ Read More]]>When I think of what makes an app great to me, there are a few key things that come to mind. Is it easy, and intuitive to use? Does it follow our BlackBerry UI Guidelines? Is it beautiful? If the answer to these questions is “YES!” then chances are I will love it.

Before I joined the Developer Relations team, I was a 3rd party developer with mblware and created the apps LensBoost and Memegasm. One of the difficulties I often ran into when creating an app was finding a high-quality set of icons I could use in my application. Sure, there are tons of amazing icon packs out there (some free, some premium) but while the icon packs I ran into looked great, they didn’t necessarily “work” in my app.

In my new role as an Application Development Consultant, part of my job is to create sample apps that showcase specific features, or APIs. I love working with the new BlackBerry 10 SDKs – it gives me a chance to not only learn about the new, and existing APIs, but also allows me to do what I love, develop apps. That being said, when I start writing my sample apps I still come across that old issue of finding icons that follow our UI Guidelines and “work” in my app!

Finally, due to some incredible contributions from a couple of amazing developers, there is a solution. Thanks to efforts of Liz Myers and Pixle, we can all use high-quality icons that follow the proper UI Guidelines in our applications for BlackBerry 10! Let’s take a closer look at the sets:

This set of icons is a subset of Subway Icons (http://subway.pixle.pl) and contains 16 of some of the most common icons developers use in their apps. They come in three sizes: Small (61×61), Medium (71×71), and Large (81×81).

If you find these icons as useful as I do, be sure to show your support and follow the creators on Twitter. I’m sure they’ll appreciate it!

I’m stoked to spread the word to all of our developers that as of version 2.2, you can now build apps with PhoneGap that target BlackBerry® 10!

Our very own official Apache Cordova contributor Gord Tanner (@gordtanner) has been hard at work making sure you can build PhoneGap apps for BlackBerry 10 today. What’s got me really excited about this news is that even though BlackBerry 10 is still in beta, a quick test revealed more than half of the APIs are already supported. With monthly updates to PhoneGap being released, this means that developers can start working on their BlackBerry 10 apps right away, and have peace of mind knowing that more and more support will be available in each release.

What is PhoneGap, you say?

PhoneGap is an open source framework that allows developers to quickly build cross-platform apps using HTML5, JavaScript®, and CSS. PhoneGap is powered by Cordova and is compatible with BlackBerry® OS 5+, BlackBerry® PlayBook™ OS, and now BlackBerry 10!

Have a PhoneGap app created for another platform? We’ve got 10,000 reasons for you to port it over!

If you already have a PhoneGap app available on other platforms, why not take advantage of the recent BlackBerry 10 support? By porting your app over to BlackBerry 10, and registering for the 10k Developer Commitment, we’re guaranteeing you will make at least $10,000 in 12 months or we’ll pay the difference!