Tag Archives: ionic

Developing & debugging an HTML5 (phonegap) app – part 1 DEVELOPING

Over the past week, I spent my mornings developing an HTML5 mobile app. The main idea behind the project was that I wanted to learn a couple of new tools and technologies out there, as well as figure out how far you could push HTML5 apps in general (“are they close to native at all, or can you possibly get them there?” kind of thing). I set out to use the following new tools to develop the app:

Following is a summary of the things that surprised me most, hopefully providing some people with a shortcut to the right tools and techniques that I had to look pretty hard for 🙂

This post is made up of 2 parts, make sure to check them both out if you think they could be helpful! 🙂

  1. DEVELOPING – this one
  2. DEBUGGING

Developing…

The Cloud9 IDE

First of all, as I pointed out, I have been using the Cloud9IDE to develop my app and I have been more than happy with that. I love the live css preview, the code-completion and the general feel of the IDE itself. What was most interesting for me, however, was that I could test my code, live on an Android and / or iOS device through the use of SauceLabs (integrated with the Cloud9IDE). I did a separate post on Cloud9 here, so I won’t go into more detail in this post.

Adobe phonegap BUILD

Available at build.phonegap.com, this service enables you to upload your html5 code (or github repository) and it spits back a fully functional native (hybrid) app using PhoneGap. Using this service has MANY advantages ranging from auto-updating plugins (you specify your phonegap plugins in config.xml, but the BUILD service makes sure you always use the latest available version when compiling) to updating your app over the air (a service called Hydration) which I’ll get into a bit later. As I was really embracing the development in the cloud, all of this meant I could continue to get away with not installing ANYTHING and never leaving the browser 🙂

Hydration service

Whilst using the BUILD service, you have an option to enable “Hydration” under the “settings” tab of your app.

basic settings adobe built

 

This will adds a little snippet of code to your app which will enable you to update it over the air the next time you upload / update the source code of your app (and ask BUILD to rebuild it). The way it goes is simple:

You update your app source code -> commit to git -> ask BUILD to “pull latest source code” -> builds a new app -> open up your app on your phone and it will ask you to update it -> DONE

Documentation

It doesn’t happen a lot, so when it does it’s worth to point it out: the documentation on PhoneGap BUILD is very good. You can find it at http://docs.build.phonegap.com/ and it really does cover anything you need to get up-and-running.

Google Drive Forms as survey in-app!

This is my first jab at developing an HTML5 mobile app and I wanted to get a little feedback on it from people, mainly to figure out how their experience was in relation to the performance of the app. I was very happy to realize that all I had to do was to create a Google Drive Form, get the embed iframe and insert it in the app. That was it and I was ready to go.

the Ionic Framework

For my first html5 mobile app, I decided to use the Ionic framework. This was partly based on some research on popular mobile frameworks I had done before and partly because they used Angular JS, which I also really wanted to get in to (and thus, this gave me a good excuse to do so).

Set-up

Again, in combination with Cloud9IDE, getting set up to develop with the ionic framework was extremely easy. I ran a single command in the console and I was up-and-running.

Learning curve

Ionic itself is really nicely documented and is easy to pick up. If you are unfamiliar with Angular JS however, you probably have a little bit of a learning curve ahead of you (as did I, and I’m still learning :)).

Other than the Angular JS aspect, the framework is really nice and easy to use and very powerful once you get into it. It’s also accompanied by a pretty active community, which was useful to me mainly because it meant most of the questions I had, had already been answered previously (and thus google picked them up :)).

Conclusion

This is my first try and proper html5 mobile development, so there are probably many tools I should be mentioning here, but I might add them as I find out about them :). I hope this post will help some people get set-up a little more quickly and effectively than I did (as I had to look around for these tools) and of course, all comments welcome!