Ionic Hello World


Let’s create an app! How do you create a basic Hello World project for your phone or tablet? First have a look at the blog post on Ionic Installation. Once you have installed Ionic and its prerequisites you will want to practice creating new projects. This blog post discusses how to do that.

The code below is just the list of commands you will be using at the command prompt (terminal), with perhaps some changes to your directory naming and file naming. First, change to the directory where you store all of your projects. Mine is called “Sites”. In this example, the project name is MyIonic2Project2. Use whatever you wish (no spaces) and avoid special characters. The ionic start command can take some time so please be patient.

cd c:
cd sites
ionic start MyIonic2Project2 tutorial --v2
cd myionic2project2
ionic serve -lab

In the browser you will see the following for Android if you add the other two platforms by selecting the check boxes under the drop-down in the upper right corner. To do this hover the mouse over the word Platforms and click which platforms you want to see.

Templates

If the tutorial template isn’t something you want to use, Ionic has a few templates available. If you don’t specify a template by running ionic start MyIonic2Project –v2, the tabs template will be used.

  • tabs : a simple 3 tab layout
  • sidemenu: a layout with a swipable menu on the side
  • blank: a bare starter with a single page
  • tutorial: a guided starter project

Transferring Your App to Your Android Phone

You may want to see your app running on your Android phone instead of the browser. That would be cool! If you don’t have an Android device (phone or tablet), the commands are a bit different and will not be discussed here.

Prerequisites

There are a few prerequisites. I had previously installed Android Studio, which installs the Android SDK. The Android SDK must be installed for the above command to work. You need to have your environment variables or path set correctly for the above command to work. If not you will get an error message telling you that it cannot find the path. It’s pretty good about telling you what is wrong.

Plug in your Android phone into your computer. Enter your phone’s password if it has one. At the computer’s command prompt type: adb devices and press enter. If adb is not a recognized command you need to locate your adb.exe file on your computer and set the user’s path to include it. For example, your adb might be located here (computer systems are different):

C:\Users\USERNAME\AppData\Local\Android\sdk\platform-tools

where the USERNAME is your username.

adb devices may give you a serial number and the word unauthorized. Go to your phone and you might see a pop-up message asking for authorization. Click OK.

Below are the commands that you will run at the command prompt. You need to run it in the directory where your project is. Both of these may take some time so please be patient.

ionic platform add android
ionic run android --device

After a moment you will see the hello word app on your phone. It will persist there even you unplug the phone from your computer. Congratulations!

Series Navigation<< Ionic InstallationIonic Hello World Part 2 >>

Leave a comment

Your email address will not be published. Required fields are marked *