Time for the last in my series of blog posts on hybrid development with MobileFirst 7.1. Obviously I’ve got more to say about MobileFirst, but this last post will complete the picture so to speak about the development is like in 7.1. I want to give a special shout out to my coworkers Carlos Santana and Karl Bishop. They helped quite a bit with the first two blog posts and this one in particular is thanks to Carlos. Both are smart folks who make my job of telling yall stuff quite a bit easier. With that in mind, before going further, be sure to read my introductory post (Getting Started with Mobile Development and IBM MobileFirst 7.1) and my follow up (Developing Hybrid Mobile Apps with IBM MobileFirst 7.1).

For this post, I’m going to speak specifically about Ionic development and MobileFirst. In general, you can follow much the same path as what I described in the last blog entry. Basically make a new MobileFirst project, make a new Ionic project, and then copy over the www assets. But you will also want to make sure you include Ionic’s keyboard plugin: com.ionic.keyboard. Finally, you want to include the code I mentioned that makes use of wlCommonInit. Remember, this is the “MobileFirst is ready to go” event.

In general, that would work fine, but there’s a way to make it even easier. As I mentioned, my buddy Carlos has been working on this issue and has already made something that will help quite a bit – a set of Ionic templates: https://github.com/csantanapr/mfp-ionic-templates. These templates make it easier to work with MobileFirst and Ionic. Assuming you’ve checked out the repo, you can simply provide the path to the repo when creating a new MobileFirst hybrid project:

Once you’ve created the project, you then need to initialize Ionic library values and other settings. Luckily Carlos made this easy – just run: npm install. This will read in the dependencies defined in package.json and run bower as well. (This means that Carlos didn’t need to include a specific Ionic JavaScript library – you’ll always get the latest).

If you crack open the code, you’ll see that app.js has been updated to include MobileFirst specific chores including wlCommonInit. He also includes a bit of code to ensure the app will work in our Mobile Browser Simulator (Using the MobileFirst Mobile Browser Simulator) and Ionic serve as well. To be honest, I kinda felt like it was a mistake to include code that just works in those situations, but I’m glad he included it. He clearly marked them in app.js and if you’re worried about the ‘waste’ of 15 lines of unnecessary JavaScript code in production, it will be easy to remove it. (And since this is a repo, you can always just check it out and modify it yourself).

Here’s an incredibly cool animated Gif of the blank starter in action.

And there you have it. Let me know what you think in the comments below!