Ionic

I love the fast feedback loop of webdevelopment and wantend to have the same experience for developing mobile applications. I finally found a way, which is ultra fast and dead simple to use.

–

I’m currently writing my bachelor thesis at KIT about iBeacons and have developed this plugin, which allows you to use iBeacons in your Phonegap/Cordova app.

While working on applications using this plugin I was really annoyed by the compile Time. I’m working with web technologies and want to see the changes immediately, like I’m used to.

After a lot of research I found the new PhoneGap Developer App. All you have to do is install the mobile app on your target device (iOS/Android) and run the following command in your terminal:

$ phonegap serve

For Cordova / Ionic users

If you are using Cordova or Ionic and don’t have phonegap installed, never mind: you can use your existing project. Just create a .cordova folder in your project’s root folder (this is a Phonegap relic and will hopefully be removed in the future) and install Phonegap by running:

$ npm install -g phonegap

Try it

You should now see an ip address in your terminal. Run the “PhoneGap” app on your mobile device, enter the ip and click on “Connect”. If everything went well, you’ll be seeing your project application, deployed over the air. If it didn’t work, make sure that both your host system (Notebook/Desktop) and your mobile device are on the same (wifi) network. It even works with multiple devices at the same time.

Livereload

phonegap serve supports livereload out of the box. Just make a change to a file inside your www folder and your application should refresh automagically. Awesome!

At first I had some errors like this:

node[31020] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)

I figured out this occured because there were too many files living in my www folder. I solved this problem by using browserify to auto build my javascript sources into one single file.

Custom plugin support

PhoneGap Developer App doesn’t support custom plugins yet, however I managed to use my iBeacon plugin. I forked their repository and added my plugin via $ phonegap plugin add. I deployed my fork of the PhoneGap Developer App on my mobile device but unfortunately it didn’t work yet.

I had to come up with another workaround (which hopefully won’t be necessary in the future): You have to add a customized cordova_plugins.js and the corresponding plugins directory to your www folder. But at least it worked now.

Conclusion

PhoneGap Developer App is a total lifesaver and makes development with Cordova, Phonegap or Ionic much more fun, since you see your changes immediately. It’s super simple to use and saves you a ton of time.

12 July 2014