Gdg ionic 2
-
Upload
shang-yi-lim -
Category
Technology
-
view
69 -
download
0
Transcript of 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