A few months ago I wrote a post discussing how to use IBM MobileFirst 7.1 with Ionic (Developing Ionic Apps with MobileFirst 7.1). Recently, the Ionic folks have done some darn good improvements to Ionic Creator. Not only is the app more powerful to use, but more importantly, the output of Ionic Creator is, in my not so humble opinion, a heck of lot better. I'm still struggling to become "Angular-literate" so I'm not sure if I'm the best judge of Angular code, but I find the output from Creator to be a lot easier to work with, and more importantly, closer to the default code you get when you create Ionic applications with the CLI. So in this post, I thought I'd quickly demonstrate how to go from an app designed and created in Ionic Creator to a MobileFirst-enabled hybrid application.

First, I assume you've got a project up on Ionic Creator already. How it looks, what it does, etc. doesn't really matter. But it has to include a picture of a cat.

To begin, you'll want to grab the zip download. First hit the export link:

Then select the zip tab:

Extract the zip someplace - it doesn't matter where, we'll be moving it in a second.

Ok, next, create a new MobileFirst Cordova application with: mfp cordova create. Just name it whatever you want and accept the defaults. (Or change them if you know what you're doing.)

Now - I assume you've already got a working MobileFirst development server, but I like to be sure. So before going any further, go ahead and push the app to the server (mfp push) and then send it to your emulator (mfp cordova emulate -p ios).

Ok, so now lets get in your Ionic Creator code. Open the directory containing your MobileFirst Cordova project. Find the www folder and either delete it or rename it.

Then, copy the assets from your Creator zip export into a new www folder.

Ok, so you're almost done actually. First, be sure to add in Ionic's keyboard plugin: mfp cordova plugin add ionic-plugin-keyboard. NOTICE: At the time I write this, a bug in the mfp CLI will report Error adding plugin "ionic-plugin-keyboard". But if you mfp cordova plugin ls you will see that the plugin was added. This bug is known and will be fixed in a future release.

Next you need to prepare the app to "speak" to MobileFirst. I covered this process in depth in my earlier article: Developing Hybrid Mobile Apps with IBM MobileFirst 7.1. But if you want to quickly just see your app running, open up app.js and simply add this to the end:

var wlInitOptions = {
    // Options to initialize with the WL.Client object.
    // For initialization options please refer to IBM MobileFirst Platform Foundation Knowledge Center.
};

Then simply emulate. (Note, previously you needed to mfp push before every emulation. Now that is unnecessary.)

And that's it. Let me know if you've got any questions about this process by leaving a comment below.