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