Tips and Hints for Getting Your First Ionic Hybrid Off the Ground

Tips and Hints on
Posted on May 16th, 2014 by Fernando Zamora

Today I heard about Ionic for the first time. It’s a way to create iOS/iPhone or Android Apps using HTML and Javascript (via AngularJS and CSS). Lately I’ve been playing around and learning how to use AngularJS so this caught my eye. Ionic uses the Node Package Manager to install the necessary modules. The steps in the Ionic website describe the steps as easy as 1, 2, 3 to construct a simple app that will run on Android or iOS. Literally 1, 2, 3! I found out that not to be quite that easy. So after about four or five hours, I finally had an app running on the Android Emulator. Yes 3 easy steps in five hours (as my friend likes to say sarcasm tags go here). I can’t knock Ionic for that because if it pans out I think it has great potential as tool for creating apps and using something I already know(HTML, Javascript and AngularJS).

I decided to record my experience since I will probably be the main one coming back to it when I decide to create my hybrid app.

The ionic website describes these 3 easy steps

1. Install Ionic
2. Star a project
3. Run it

Each of those steps alone is easy. Each one of them simply requires running a command on the command prompt. Easy enough right? Wrong! First off I ran into my first problem installing Ionic. There was an error that said that one of my dependencies was not the correct one. After some web searching, I found that the answer was to clear my cache by running the command

npm cache clear

. That took that first error out but then I got another one. Some more google searching indicated that I probably needed to update my node version. So off I went to download and install the latest version of Node. Once I did that, more errors. So off I went to update the node package manager. Once I finally got that done I was ready for step two. Yes you read right that was only step one.

Step two indicates to start a project. I ran the command for step two and ran into more issues. The ant command was not recognized. ant?!! I don’t have ant installed. So off I went and downloaded ant. I had to add the ant bin directory to my path environment variable, which means that I had to shut down the command prompt and restart it (always remember to shutdown and open a new command prompt after modifying your path variable, otherwise you will be scratching your head as to why the command is not recognized). Once I did that it cleared the ant problem but I ran into some more module issues. Some incompatibilities of sorts. I was getting an error with the suggestion that my cordova was probably out of date. So I went and updated that with NPM. After all that I was ready for step 3.

At step 3 I ran into some more issues. Apparently I could not build or emulate android because I did not have the required Android SDKs (version 19 as of this writing). I will give cordova credit because it even gave a suggestion on how to get those. Ooh did I say cordova, yes I mean cordova. At some point one the links recommended to use cordova since ionice could actually be hiding the issues. That is by simply running the android command from the command line. Once I did that, the android SDK manager opened up in a window and I was able to select the recommended packages. That actually took a while. Even after installing android SDK I still was having problems with step 3. Apparently you have to manually add the path to the SDK tools (C:\Program Files (x86)\Android\android-sdk\platform-tools on my box) to the path environment variable. Once I got past all that, finally application build successfully and started to launch the android emulator. That took longer than five minutes probably even longer than 10 minutes. So I waited. Finally, anticipating that I would finally see my app, instead I get an error message that read

the connection to the server was unsuccessful. (file:///android_asset/www/index.html)

Another google search indicated that the issue was that the emulator was probably taking too long so the application probably timed out (this is HTML remember?). So instead of following the post’s advice to set a timer event and then load the page, yadi yadi. I closed the error message on the emulator, opened the apps menu in the emulator and found my HelloCordova app and ran it from there.

Hello Cordova from Apps

At last Voila! The app was running. It couldn’t be a sweeter victory. Not 3 easy steps as advertised but 3 steps none the less. Please excuse me if I am not providing all of details in an organized manner. I’ll do my best to list all the links of my research at the end of this post and hey at least you’re getting more than I did when I started. I didn’t record all of my error messages or get screen captures but here is a list of the issues I ran across and the solutions for them.

Android Emulator with Ionic App

Clearing Node’s NPM Cache Try this first if you’re getting dependency errors even after updating.

The connection was unsuccesful this error happens after you successfuly launch the emulator on step 3 but the application fails to run.

error-unable-to-add-plugins-perhaps-cordova-version-too-old/2919/6 I got this error when trying to run step 2.

Leave a Reply




Post Comment

Connect With Us

Recent Posts

A Guide for Learning Design Patterns

July 28th 2016 by Fernando Zamora If you’ve been writing code for more than a year, you might have h...

Read More

Using UML to Analyze Legacy Code

June 30th 2016 by Fernando Zamora For every programmer out there creating brand new code and working...

Read More

Python vs. Other Languages

April 29th 2016 by Fernando Zamora For the last two months or so my fellow McLane Advanced Technolog...

Read More

Naming Your Adapter When Implementing the Adapter Pattern

October 19th 2015 by Fernando Zamora At some point in your project you may need to use a third party...

Read More

10 Methods to Help You Debug Legacy Code

September 24th 2015 by Fernando Zamora A large majority of the work we do in our project is to fix r...

Read More