Upload
kyle-shen
View
557
Download
0
Embed Size (px)
Citation preview
Ionic Cordova App2016.02.20 KYLE SHEN
About Me
Kyle ( 凱爾 ) Study4 社群成員 2014-2015 Microsoft MVP 個人網站 : http://kyleshen.com Blog: 程式宅急便 專注於 Web 應用程式 ASP.NET(Webform & MVC) for
C# 、 MS SQL 、 jQuery 、 Angular.js 、 Cordova
Agenda
環境: Cordova . Ionic 介紹、安裝環境介紹 開發: UI 元件, Angular.js.Cordova Plugin 部暑:上版工具介紹、發佈到手機 偵錯:如何偵錯 App ,輔助工具介紹
環境開發
發佈偵錯
Web vs Native vs Hybird App
HTML5 (JavaScript + CSS3) RWD 響應式網站設計 上手容易、發佈方便 跨平台 具有眾多的 JavaScript Freamwork 硬體裝置支援較不足
Web vs Native vs Hybird App
學習曲線高、維護成本高 iOS : Objective-C/Swift 、 Xcode Android : Java 、 Android Studio Windows : C# 、 Visual Studio
原生擁有較高的效能 支援該平台的所有功能 Xarmarin in C# Unity React Native & Angualr.js 2.0 in JavaScript
Web vs Native vs Hybird App
使用 Web Developer 熟悉的前端語言 將 Html5 放置於本機控制項中 透過 JavaScript 當橋梁,來與原生功能溝通 跨三大 App 平台 ( 甚至更多 ) ,發佈到市集 JavaScript Rock !!
Web vs Native vs Hybird App
Ionic Freamwork
Open Source 針對 Mobile UI 所設計的 CSS 框架 好用的 CLI (Command-Line Interface) Ionic 包含
Cordova : 打包 Web 代碼並編譯成原生專案 AngularJS : 建議需掌握 Angular.js 框架 SASS : 使用 SASS 進行開發較方便,但也可單純使用 CSS 來撰寫 Gulp.js :前端自動化流程,可增加開發效率,非必要 Node.js :透過 Node.js 的 NPM 來管理套件 Git :版本控管,非必要 Bower :前端套件管理工具
http://ionicframework.com/docs/
Show Case
Demo Example
本堂範例程式碼 https://github.com/kyleap/study4love.ionic/
Ionic 如何開始 Node.js
跨平台的、可用於伺服器端和網路應用的執行環境 不是程式語言,也不是 JavaScript JavaSciprt 運行平台
NPM 安裝 Node.js 即會安裝 NPM Node 模組套件管理器
Cmder 命令提示字元工具 ( 建議安裝 ) 讓 Windows 下 CMD 更友善 透過 alias 把一些常用的指令簡化
e.g ionic build android => iob
Ionic 如何開始需先安裝 Node.js ,透過 npm 來安裝 ionic ( 星號為提示於命令列下,不用輸入 ) $ npm install –g cordova ionic // 透過 NPM 安裝 cordova
& Ionic $ ionic start myApp // 建立 myApp 資料夾及專案範本 $ cd myApp // 進入 myApp 專案資料夾
Cordova 安裝環境 (Android)
Windows : http://kyleap.blogspot.tw/2015/10/cordova-windows.html
OSX : http://kyleap.blogspot.tw/2015/10/cordova-osx.html TACO CLI : http://taco.tools/docs/dependency-installer.html
Ionic 如何開始 Http Server + Live Reload
$ ionic serve // 透過瀏覽器執行 $ ionic serve –lab // Android + iPhone Preview
建置原生專案 $ ionic platform add android // 建置 Android 專案 ( 可先略過 ) $ ionic build android // 編譯 ( 可先略過 ) $ ionic android run // 部屬到手機,或執行模擬器
Visual Studio 安裝 ionic 範本 Ionic Project Templates for Visual Studio
Demo - Ionic Start My App
開發 Ionic – 專案目錄介紹 hooks : 撰寫 Script 客製化 Cordova 專案 plugins : Cordova 已安裝套件 www : Web 程式位置 config.xml : Cordova 專案設定檔 ionic.project : ionic 專案設定檔 package.json : NPM 套件管理
開發 Ionic – 專案目錄介紹 Bower
Web 前端套件管理 $ bower install jquery VS 會自動載入
開發 Ionic – 專案目錄介紹 SASS
CSS 變數 巢狀 函式 繼承
開發 Ionic – 專案目錄介紹 Gulp
自動化流程管理 非常多 gulp 套件 e.g js minify $ gulp sass
Demo – 範本程式介紹 ( 前端工具套件 )
開發 Ionic – Angular.js 介紹 已” Model” 的概念來操作 由 Google 推出,目前 1.5.0(Stable) 、 2.0(Beta) HTML Template 使用 {{ }} 來做資料繫結 非常適合做 CRUD ,過於依賴操控 DOM 的網站不適合 Code 會少很多,關注點分離變成很好維護
開發 Ionic – Angular.js 介紹 Controller View
開發 Ionic – Angular.js 介紹 Route
SPA (Single Page Application) Angular Route Module
Demo – 範本程式介紹 (Angular.js)
開發 Ionic – UI 元件
開發 Ionic – ICON
開發 Ionic - Cordova plugin
開發 Ionic - Cordova plugin
安裝會置於 Plugins 資料夾 Open Source ,可自訂 Plugin Visual Studio 2015 可利用介面來管理套件 CLI (Command Line Interface)
$ Cordova plugin add [Plugin Name] – 新增套件 $ Cordova plugin remove [Plugin Name] – 移除套件 $ Cordova plugin list – 查看所有套件
開發 Ionic - ngCordova 將常用的 Cordova Plugin 寫成 Angular module 方便引入、更容易使用 透過 bower 安裝 ( 由 Twitter 團隊研發,自動下載安裝前端套件 )
$ bower install ngCordova 於 index.html 載入
<script src="lib/ngCordova/dist/ng-cordova.js"></script> Angular app module 引入 NgCordova
$ angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
Demo – 加入 QR Code 掃描器
開發 Ionic - Ionic Resource http://ionicframework.com/docs/cli/icon-splashscreen.h
tml 透過指令直接製作 icon.Splash
製作 icon.psd (192x192) 放置 resources 資料夾 製作 splash.psd (2208x2208) 放置 resources 資料夾 自動產生各種適應大小圖片
$ ionic resources
發佈 Ionic - Ionic view Ionic Platform 提供 App 發佈平台 User 安裝 Ionic View App 即可瀏覽 AppID 與 Key 定義在 io.project 設定檔 $ ionic upload –note ‘ 備註’
發佈 Ionic
Android $ ionic run 會先偵測 USB 是否連結,如果沒有會開啟模擬器建議透過 Cmder 設定快速鍵 => ior $ Ioinc run --deivce 部屬到手機
Xcode 安裝 XCode7(beta) ,可直接部屬到 iPhone 需開發者帳號
Demo – 部暑 ionic view & Device
偵錯 -GepDebug
總結 環境:了解 Cordova 架構 .SDK 環境 開發:了解 Angular.js 開發 .Cordova 套件使用 發佈:了解如何上版 . 發佈到手機 偵錯:了解開發者工具 .GapDebug 偵錯
環境開發
發佈偵錯
總結 Native or Hybird Apps 依需求 . 人力 . 成本評估 善用 CLI 來增加開發效率 三螢幕是您的好選擇 (CLI.Browser.IDE) 參考資源
http://codepen.io/ 搜尋 ionic 有多個範例可參考 http://blog.ionic.io/ Ionic Blog http://ionichina.com/ Ionic China http://www.phonegap100.com/ PhoneGap中文網
Ionic Cordova AppTHANK YOU FOR YOUR ATTENTION