​​Ionic share
​​

​​前言

  • ​​接觸ionic前已學會開發App, 包含Android/iOS
  • ​​2016年6月,為了尋找高效率開發App的方法, 開始接觸Cordova, 然後接觸ionic1 and AngularJS
  • ​​模仿別人寫的範例(envato market), 開始入門
  • ​​以下範例以 Ionic 2 來說明

​​Ionic 是什麼?

  • ​​Concept
  • ​​Ionic framework是一個開源的SDK, 讓開發者能夠使用熟悉的web技術(HTML、CSS、Javascript)來建置高效率、高品質的APP
  • ​​Ionic framework專注在APP UI元件上, 並不是要取代Cordova
  • ​​cordova framework
​​
 
User-uploaded image: image.png
​​
  • ​​相關技術 (ionic, cordova, typescript, angular, css)
  • ​​主要的元件(20~30mins 瀏覽官網文件)
  • ​​Ionic CLI
  • ​​Ionic component
  • ​​API
  • ​​Ionic Native
  • ​​Storage
  • ​​Theming

​​開發工具

  • ​​VS Code
  • ​​Chrome
  • ​​Chrome ADB plugin
  • ​​Android Studio
  • ​​Xcode
  • ​​Safari Web Inspection

​​Ionic sample專案

  • ​​Project structure
  • ​​project/
  • ​​├─ ionic.config.json # Ionic project config file
  • ​​├─ package.json
  • ​​├─ src/
  • ​​│ ├─ app/
  • ​​│ │ ├─ app.component.ts# root component for your app
  • ​​│ │ ├─ app.html # app component template
  • ​​│ │ ├─ app.module.ts # NgModule for app component
  • ​​│ │ ├─ app.scss # global SCSS
  • ​​│ │ └─ main.ts # bootstrap file
  • ​​│ ├─ assets/ # put your images, etc. here
  • ​​│ ├─ pages/ # contains the page components for your app
  • ​​│ ├─ theme/
  • ​​│ └─ index.html # main html file
  • ​​└─ www/ # build output directory
​​
​​
​​