gdg ionic 2

Before we start…

Save time by installing these firstNpm (http://tinyurl.com/nodejs-en-download)

Then open command line/bash

Today’s source code:http://tinyurl.com/gdg-ionic2

Code editor: https://code.visualstudio.com

$ npm install -g ionic

$ git fetch --all

Getting Started With Ionic 2

Getting Started With

Ionic 2Build Beautiful Cross Platform App with

Ionic 2

Lim Shang Yi• Full stack Developer @ • Angular 1/Angular 2• Ionic

What is Ionic • Cross platform mobile development

framework• Angular 2 powered• Write once, deploy on different devices• Runs on browser and devices• Debug on browser

Why Ionic

Powered by Angular 2 TypeScriptPerformance Open

SourceNative Look

& FeelCordova for Hardware

Getting Started

Ionic CLI• Install ionic 2.1.0$ npm install -g ionic

• Create a new application$ ionic start –-v2 myApp

• Start the application$ ionic serve

Basic Template

Recipe for today: To-do list!• Create a to-do list • Add new to-dos• Delete a to-do

Strip it down

Todo list empty state• Add an message to inform users how to

get started.

• Add a floating action button (FAB) to compose a new to-do

• Clicking the compose button will bring you to the create todo page

Create To-do Page• Add text boxes for details of to-do

• Add button to save the data

• Add some color to the to do

• Data saved to native storage

Storing into Native Storage• We will need to store the data into a persistent storage• NativeStorage, SecureStorage, SQLite• Requires cordova

• Cordova plugins can be run in the browser with

$ ionic plugin add cordova-plugin-nativestorage

$ ionic run browser

Display todo action list• Show actions associated to the to-do card

Display options• Display options to add, or remote to-do items

Emulating on device• Emulate on android

• Deploying to device

$ ionic emulate android

$ ionic run android

Resources• Angular 2 docs https://angular.io/docs/ts/latest/• Ionic 2 docs http://ionicframework.com/docs/v2