SlideShare a Scribd company logo

Gdg ionic 2

•Download as PPTX, PDF•
•
Shang Yi Lim
Shang Yi Lim

This document provides instructions for building a to-do list app with Ionic 2. It begins by explaining how to install Ionic and other necessary tools. It then outlines the basic template and components needed for a to-do list, including an empty state, add button, create form, and native storage. The document concludes by explaining how to display todo items, add options, emulate on devices, and includes additional resources.

1 of 17
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
Getting Started With Ionic 2 Build 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 Source Native Look & Feel Cordova 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

More Related Content

Gdg 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
  • 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
  • 9. Recipe for today: To-do list! • Create a to-do list • Add new to-dos • Delete a to-do
  • 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