Getting Started with Ionic

August 15th, 2017

I had a good experience on Cordova and PhoneGap when I decided to test on a real project the Ionic Framework. At the raising of Ionic 1, I’ve already tested this framework but was disappointed by performance issues. Now, I have to migrate from Angular 1 to Angular 2/4 (means rebuild my whole code), and regarding new Ionic versions announcements and others reasons why Ionic 2 is better than Ionic 1, it’s a good moment to re-evaluate the framework. Ionic 2

With Ionic 2, we no longer use JavaScript scrolling, so apps now scroll with 60FPS on both Android and iOS. Our new Virtual Scroll implementation (updated for 2.0 final!) makes it possible to build apps that scroll through very large lists of items (and images!) with a minimal performance hit, along with apps that animate based on scroll events.

An all new rendering pipeline shared with Ionic components reduces layout thrashing and repaints, historically a challenging source of perf issues for web developers.

Ionic apps benefiting from a significantly faster Angular 2, giving them an “inherent performance improvement out of the box.”

Ionic 3.0 includes support for Lazy loading: Conceptually, we’re taking one segment of code, a chunk, and loading it on demand as the app requests it.

Getting started

Prerequisites

We need to have Node.js and Git installed in order to install both Ionic and Cordova.

$ npm install cordova ionic typescript -g
...
$ npm ls -g cordova ionic npm typescript --depth 0
/usr/local/lib
├── cordova@7.0.1 
├── ionic@3.9.2 
├── npm@5.0.3 
├── npm-check-updates@2.10.3
├── phonegap@6.5.2
├── typescript@2.3.4 
└── typings@2.1.1

Starting a project with Ionic CLI

The best way to start a new project, for learning or real work, is using a starter. Ionic provides some useful, you can list using ionic cli: ionic start --list.

We’ll start with the sidemenu starter. The launch could spend a long time because ionic start installs all npm dependencies. If you prefer you can skip dependencies install using --skip-deps option.

$ ionic start hello-world sidemenu

That means:

  • ionic start creates the app.
  • hello-world is the name we gave it.
  • sidemenu tells the Ionic CLI you want to start with the sidemenu template.

You should see something similar to the following output:

$ ionic start hello-world sidemenu
✔ Creating directory ./hello-world- done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
✔ Downloading - done!
[INFO] Fetching starter template sidemenu 
       (https://github.com/ionic-team/ionic2-starter-sidemenu/archive/master.tar.gz)
✔ Downloading - done!
✔ Updating package.json with app details - done!
✔ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
✔ npm install - done!
✔ git init - done!
✔ git add -A - done!
✔ git commit -m "Initial commit" --no-gpg-sign - done!

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic cordova run ios

Test and share your app on a device with the Ionic View app:
  http://view.ionic.io
  
Next Steps:
Go to your newly created project: cd ./hello-world
$

Now, test it on your browser with ionic serve, try the --lab option to see multiple platforms at once.

$ cd ./hello-world
$ ionic serve --lab

Market place

You can also choose to download starter provided and rated by the community on market.ionic.io.

Run app on device

At this stage you can already test your App on device. You have two solutions:

  • the easiest is using the Ionic View App. You should link your App to Ionic Cloud and download the Ionic View on your device. It works like a nutshell, Ionic View will load your resources, content of www directory, and run it on a native environment.
  • you also can plug your device on your computer, via usb and through ionic-cli run ionic cordova run android --device. In order to work you should have installed on your computer the environment Android and/or iOS. Check Deploying to a Device for more details

Ionic view app

Ionic View App is part of Ionic Cloud Services, to use it you’ll need an Ionic account. Signup for free. In your project directory, run ionic link, the prompt should authenticate you and suggest to create a new App on Ionic Cloud Services to link with the current directory.

$ ionic link
...
$ ionic upload
...

Troubleshooting

[WARN] No Cordova platforms listed in config.xml

If ionic upload raise log [WARN] No Cordova platforms listed in config.xml. Nothing to prepare., you can fix it by running:

$ ionic cordova platform add android -r

It will save a platform, android, on config.xml and though prevent error on ionic cordova prepare.

ADB device unauthorized in Android

$ adb devices -l
List of devices attached
42001e15fabec200       unauthorized usb:605028352X

Check and uncheck the USB Debugging option in the device. If that doesn’t work unplug and plug in the USB. The device should show a message box to ask you to authorize the computer. Click yes and then the device will be authorized.

Error Could not find an installed version of Gradle either in Android Studio

If you use Mac and have Homebrew installed, just ran this command:

brew install gradle

For more installs check Gradle Build Tool website.

Source: Error Could not find an installed version of Gradle either in Android Studio

You have not accepted the license agreements of the following SDK components

Open android Manager and check licenses.

Add sidebar menu on blank starter

As good exercise you can create a new App from blank starter and add sidemenu.

Feeling lost

Don’t worry, run ionic docs on cli and reach the official Ionic doc in your browser.

Top Ionic resources

Victor Dias

Sharing mobile Experiences

Follow me