Start Ionic Development

As a developer using Ionicframework for over 2 years, I think Ionic is a great tool for small team deploy mobile APP. I mean 1–2 developer for whole project! This year, Ionic team publish several tool Like CLI, Creator and open Marketplace. That make develop and ship quality Apps faster.

I just publish Ionic Version Medium APP on Marketplace, a full copy Medium iOS APP just using Ionic.

Here I will show process start Ionic Development.

Ionic CLI

Install Ionic CLI, full Ionic document can find on http://ionicframework.com/docs/cli/

$ npm install -g ionic

If get error like: Error: EACCES, mkdir… use:

$ sudo npm install -g ionic

Before you start to install Ionic CLI, you might need to check if you already installed Node.js. How to install Node.js

Starting an Ionic APP

Yes, you can starting an APP, as Ionic CLI do the job for you.

$ ionic start myapp

Now, you has your APP named “myapp”. Just 10 seconds.

cd to your directory and you can check the APP in your browser now.

$ cd myapp
$ ionic serve

SASS

Start setup SCSS:

$ ionic setup sass

There are tutorial on Ionic official website about Writing a Sass Theme.

Ionic CSS can be customized by override it’s variables. You can check all variables on your project at /www/lib/ionic/scss/_variables.scss

There are global variables like Colors, Base. And blow that are all component variables like Buttons, Bars, Items…

So you might write your own variable at /scss/ionic.app.scss like:

$positive: #057b6c !default;

and then:

@import "www/lib/ionic/scss/ionic";

Save the file, and the app will instantly be updated. With one simple change, the entire feel of the app has changed.

If some css you want change that not include in Ionic variables, you can override after import Ionic CSS. Something like:

$positive: #057b6c !default;
@import "www/lib/ionic/scss/ionic";
.box h1{
    line-height: 400px;
}

Running

Adding a platform target:

$ ionic platform ios android

Running your app:

$ ionic run ios

You may need design Icon and Splash Screen for your APP. Put your design file like icon.psd and spalsh.psd on the directory /resources. And run:

$ ionic resources

That will generate all icon and splash for your app.

Ionic is Angular

Yes, Ionic is Angular. Like it say:

Ionic utilizes Angular in order to create a powerful…

So you can create your own directive that they called Plugin. Don’t like Ionic Side Menu? You can write your own.There are many tutorial about how create Angular directive, you can google it.

Thoughts

As a self-taught designer and programmer, I find many of my friends are starting or planning to learn how to coding. And HTML, CSS and JS is a good starting point. Ionic is a very high level framework, that will help people pass HARD PART of the front-end, and create quality Apps.