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:
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!