Ionic Hello World

Look here a simple hello world using the Ionic platform with an Android device as target. The app generation, deploy and test in the browser, Android Virtual Device (AVD) and real phone.

If you haven't a configured environment, take a look here, otherwise start by running:

ionic start hello tabs

This will create a project and folder called 'hello' in the current directory with the Ionic template app 'tabs'. Now enter in the 'hello' folder:

cd hello

And download the Android basic plug-ins and stuff for your project:

ionic platform add android

Build and generate the app / APK file:

ionic build android

And finally deploy and test it in your AVD:

ionic emulate android

Then you should see it running:

Now try it in your host machine's browser, with:

ionic serve

And you should see:

If you pay attention, there are a few differences between the browser and AVD version, like the placement of the tabs, so you need to keep this in mind, although is easier to develop and test in the browser, you will not (and cannot) see the final and real result, because the browser can't access low-level / hardware features like camera and so on. But at least is useful to do a quick test and development of the front-end.

Now you might be wondering... why should I use the 'ionic serve' instead of open the "index.html" file directly ? Well, with 'ionic serve' the code changes will reflect instantly in the browser, because Ionic will be looking for changes.

A full-featured test can be done in a real Android phone using the following command (Just make sure to have the phone connected with the developer settings enabled as well as its USB drivers installed):

ionic run android

The phone screenshot result:

That's all !

About the used versions

• Windows 7 x64
• NodeJS v6.3.1
• Android AVD Intel Atom x86 Android 6.0 API 23
• Firefox Browser 47.0.1
• Android Phone P880 4.2.2