Building Cordova powered mobile apps is pretty easy in terms of barrier to entry and technical debt. There’re a plethora of resources available to you as a developer, many of them, discussions taking place in public forms and blogs, but let’s face it… web frameworks are a dime a dozen. So where do you even begin? While it’s awesome to have so much choice in which frameworks and technologies to use, the wrong choice can literally “make or break” your application.
I’ve tried out a lot of frameworks through-out the years. Some great, some bad, some worse, and some that seemingly disappeared as quickly as they showed up on the scene so, where do you start?
I’ve been a big fan of Ionic and AngularJS for quite a while now, and I know for a fact that many of you are also huge fans of both frameworks which is why I’m really excited to show you how to integrate BlackBerry Dynamics into an Ionic application.
While we’re currently building out future support for Ionic and AngularJS, including the new Ionic and Angular versions, into the BlackBerry Dynamics SDK for Cordova, you can use them all in your app(s) today using these best practices.
Note: Don’t forget that we’re still working to provide compatibility between the frameworks and SDKs. While this work-around has been working quite well for myself, you’ll want to fully test it out for your own use-case. If you stumble into a compatibility issue please let us know in our Developer Forums.
New to BlackBerry Dynamics or need a refresher? I recorded a video which will walk you through all the steps that are required to successfully build an Ionic app, secured by BlackBerry Dynamics. We’ll touch on the most important steps each of these steps below at a high level below, but I highly recommend taking 15mins to watch the video for a full walk-through.
iOS Development
While BlackBerry Dynamics, and Ionic will also run on iOS this blog post, and accompanying screencast, focuses mostly on Android. Thanks to the NSUrl Loading System in iOS, the workarounds covered here are not needed. You can build Ionic apps right now!
Android Development
As you’re likely aware by now, the BlackBerry Dynamics SDK for Cordova, in part, works by remapping the native XMLHttpRequest object and points the WebView at our implementation of GDXMLHttpRequest. This remapping allows you to simply add our plugin to your Cordova projects and immediately reap the features of the BlackBerry Dynamics SDK.
While this works great in most cases, it creates some challenges when it comes to building apps using AngularJS’ $http service but don’t fret, you can still use both in harmony!
Prerequisites
At this point it’s assumed that your system is setup and configured to build apps with Cordova, Ionic, and the BlackBerry Dynamics SDK for Cordova. If you need help setting up your development environment please refer to our Getting Started Guides and/or watch the video which accompanies this blog post before continuing.
Create a new app
Let’s take a look at how to run Ionic, AngularJS, and BlackBerry Dynamics together in a brand-new app.
When building apps with Ionic it’s important that you use their Command-line Interface (CLI) to build your application. This will ensure that all the hooks/tie-ins Ionic and Cordova share will execute as designed. Refer to the Ionic Getting Started docs for additional support.
Ionic v1 or Ionic v2?
If you’re familiar with Ionic you know that the framework has recently gone through some major versioning, and technology changes (TypeScript). It’s important to note that the lessons learned here will also work if you are targeting the newer Ionic v2, and Angular!
- Let’s start by creating an Ionic v1 app.
– $ cd <path-to-sdk>/plugins
– $ ionic start myApp sidemenu —type ionic1
– $ cd myApp
- Add platforms.
– $ ionic cordova platform add android ios
- Test the app to ensure you can build a non-BlackBerry Dynamics app.
– $ ionic cordova build
– $ ionic cordova emulate android **and/or** ionic cordova emulate ios
If at this point, if the app does not successfully build and deploy to your emulator something is wrong. Pause here and fix your development environment before continuing.
Adding the BlackBerry Dynamics SDK for Cordova
Now that you’ve built and deployed a HelloWorld App you’re ready to add the BlackBerry Dynamics SDK for Cordova. At a minimum, you must configure and add the cordova-plugin-bbd-base plugin to your project. Setup and configuration instructions can be found in our Getting Started Guides and in the video.
XMLHttpRequest vs. GDXMLHttpRequest
As I mentioned above, the BlackBerry Dynamics implementation of XMLHttpRequest remaps the native window.XMLHttpRequest (XHR) object to use our plugin instead. While this works great for most apps, we need to disable this remapping for Ionic and AngularJS applications.
Disable the XHR remapping (Android only)
Note: This section only applies to Android. iOS targeted apps do not need to complete these steps.
- In your favorite editor, browse to the plugin’s source code located in:
– <path-to-sdk>/plugins/cordova-plugin-bbd-xmlhttprequest/assets/www/android/
– Open the GDXMLHttpRequest.js file.
- Comment out the XHR remapping.
– Scroll down to line #588 and comment out the code XMLHttpRequest = GDXmlHttpRequest;
- Save the file.
- Add the modified plugin to your project
– $ ionic cordova plugin add <path-to-sdk>/plugins/cordova-plugin-bbd-xmlhttprequest
- Build and test the app
– $ ionic cordova build
– $ ionic cordova emulate android
How to make secure XHR calls to a backend
At this point you should have added cordova-plugin-bbd-xmlhttprequest plugin to your project, and have successfully built and deployed the app. Next let’s look at how to make calls which route securely through the BlackBerry Proxy.
To make secure calls, you will need call the BlackBerry Dynamics XHR Plugin explicitly when you wish to connect behind the firewall. In fact, I often recommend taking this approach because the plugin does a lot of heavy lifting on your behalf (settings headers for authorization for example).
Take a look at the code snippet below.
1 2 3 4 5 6 7 8 9 | var gdxhr = new window.GDXMLHttpRequest();gdxhr.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { console.log(this.responseText) }};gdxhr.send(); |
This code demonstrates how to perform an “anonymous” (no authorization needed) call to a backend. As you can see I’m using the window.GDXMLHttpRequest method to make my API call, then simply outputting the results to the console.
Finally, at this stage, you should have a HelloWorld app that’s built with Ionic, powered by AngularJS, and secured by BlackBerry Dynamics!
It’s that easy!
I want to reiterate that this blog post is meant to compliment my video. If you would like to see a full video walk-through, including Getting Started steps, be sure to check-out the video! Don’t forget we also have a collection of Getting Started Guides available on our Developer Website for those who prefer to follow along via the docs.
Help, I’m stuck!
No worries! After watching this video, join the Developer Community LIVE chat with any questions you may have on this topic. Our experts will be online for a Q&A office hour on June 28th at 11am ET.
Anytime… Whether you’re building an app with Ionic, AngularJS, or anything else BlackBerry Dynamics related, we’re here to help! Be sure to check-out the conversations going on in our Developer Forums and don’t forget to sign-up for a free account!
For more developer resources or to get started on any of our platforms, please visit the BlackBerry Developer Community website.
