gdg ionic 2
TRANSCRIPT
![Page 1: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/1.jpg)
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
![Page 2: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/2.jpg)
Getting Started With
Ionic 2Build Beautiful Cross Platform App with
Ionic 2
![Page 3: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/3.jpg)
Lim Shang Yi• Full stack Developer @ • Angular 1/Angular 2• Ionic
![Page 4: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/4.jpg)
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
![Page 5: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/5.jpg)
Why Ionic
Powered by Angular 2 TypeScriptPerformance Open
SourceNative Look
& FeelCordova for Hardware
![Page 6: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/6.jpg)
Getting Started
![Page 7: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/7.jpg)
Ionic CLI• Install ionic 2.1.0$ npm install -g ionic
• Create a new application$ ionic start –-v2 myApp
• Start the application$ ionic serve
![Page 8: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/8.jpg)
Basic Template
![Page 9: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/9.jpg)
Recipe for today: To-do list!• Create a to-do list • Add new to-dos• Delete a to-do
![Page 10: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/10.jpg)
Strip it down
![Page 11: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/11.jpg)
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
![Page 12: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/12.jpg)
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
![Page 13: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/13.jpg)
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
![Page 14: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/14.jpg)
Display todo action list• Show actions associated to the to-do card
![Page 15: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/15.jpg)
Display options• Display options to add, or remote to-do items
![Page 16: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/16.jpg)
Emulating on device• Emulate on android
• Deploying to device
$ ionic emulate android
$ ionic run android
![Page 17: Gdg ionic 2](https://reader035.vdocuments.site/reader035/viewer/2022062823/58729efd1a28ab07208b554d/html5/thumbnails/17.jpg)
Resources• Angular 2 docs https://angular.io/docs/ts/latest/• Ionic 2 docs http://ionicframework.com/docs/v2