google devfest 2016 georgetown penang ionic 2

1. Before we start…
Save time by installing these first
Npm (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

2. Getting Started
With Ionic 2
Build Beautiful Cross Platform App with
Ionic 2

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

4. 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

5. Why Ionic
Powered by
Angular 2 TypeScriptPerformance Open
Source
Native Look
& Feel
Cordova for
Hardware

6. Getting Started

7. Ionic CLI
• Install ionic 2.1.0
$ npm install -g ionic
• Create a new application
$ ionic start –-v2 myApp
• Start the application
$ ionic serve

8. Basic Template

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

10. Strip it down

11. 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

12. 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

13. 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

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

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

16. Emulating on device
• Emulate on android
• Deploying to device
$ ionic emulate android
$ ionic run android

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