Build an ionic3 web app

What is ionic3 framework?

The Ionic3 framework is a hybrid development framework, which is dependent on the elements, Sass, Cordova.

Ionic3 development environment preparation.(Windows)

1. install node

2. install JDK1.8

3. install cordova and ionic (npm install -g cordova ionic)

4. install Android Studio

5. install Visual Studio Code

 

Run ionic -h to check your ionic

Start An Ionic3 Project

Run command “ionic start name template”

If you are not sure the detail, run “ionic start -h” for help.

You might have problems like this.

Solution 1.

Run command “npm install -g ionic@3.9.2” to the fallback version

Then run command to create ionic project again.

Solution 2

Download a demo-seed project from github:

https://github.com/yurirobertcensi/ionic3-template-seed

Open the project by Visual Studio Code.

 

Run App in browser(chrome)

1. Run “cmd” in your project folder.

2. Run “npm install” to install the dependencies.

3. Run “ionic serve”,the browser will open localhost:8100 automatically.

4. Press F12 to select the mobile mode.

Ionic3 project structure

This is an ionic3 blank demo project structure. The src folder is the main folder in this project where we wirte our code. We can add a new page in the pages folder by running command “ionic g page pagename”.Add the app/app.component.ts to edit the rootPage, edit app.moudle.ts to add your page. Each page folder contains pagename.html, pagename.scss, pagename.ts.

Build APP with cordova

1. Run command “ionic cordova add platform android”,the project will create an Android project in the folder platforms. Run“ionic add platform ios” to build an ios platform.(PS:You must install XCode in your MAC OSX if you want to build an ios project)

2. Run command “ionic cordova build android”, it will create an apk file. You can also open the android project in the platform by using Android Studio. And run build to compile the apk file, the apk file will be installed and run automatically.

3. Using adb to install the apk to your android phone. Run command “adb install apk path”, for example: “adb install C:\app\platforms\android\app\build\outputs\apk\debug\app-debug.apk”.