Ionic實戰:基於AngularJS的移動混合套用開發

Ionic實戰:基於AngularJS的移動混合套用開發

《Ionic實戰:基於AngularJS的移動混合套用開發》是2016年7月電子工業出版社出版的圖書,作者是【美】Jeremy Wilken(傑里米 威爾肯斯)。

基本介紹

  • 書名:Ionic實戰:基於AngularJS的移動混合套用開發
  • 作者:【美】Jeremy Wilken(傑里米 威爾肯斯)
  • 譯者:奇舞團
  • ISBN:978-7-121-29206-4
  • 頁數:288頁
  • 定價:75.00元
  • 出版社電子工業出版社
  • 出版時間:2016年7月
內容簡介,編輯推薦,內容提要,目錄,精彩節摘,前言,

內容簡介

Ionic是近幾年很火的一項跨平台開發技術。Ionic最大的亮點是集成了Angular和Cordova,對於有開發經驗的前端工程師來說上手難度大大降低,並且能直接使用現有的大量第三方庫和框架。《Ionic實戰:基於AngularJS的移動混合套用開發》是一本詳盡的Ionic實戰教程,不僅告訴你“怎么做”,還告訴你“為什麼”,這正是大部分入門書籍所欠缺的。

編輯推薦

只需掌握Web技術就能開發移動套用是不是很爽?有了Ionic之後,App的開發變得如此簡單:使用我們熟知的HTML、CSS和JavaScript技術就可以同時開發iOS和Android套用。
本書指導Web開發者使用Ionic和AngularJS創建移動套用。通過大量帶有注釋的示例,本書展示了如何使用移動UI組件,如何利用當前地點數據,如何集成相機等原生設備功能,如何添加手勢操作以及外部數據存儲等功能,讓我們能創建出更加原生的套用。本書還介紹了如何通過測試提升套用的穩定性以及在開發中定位錯誤。然後,使用命令行工具教會大家如何創建並將套用發布到套用商店。內容包括:
√ 使用HTML、JavaScript和CSS創建移動套用
√ 使用Ionic UI組件創建複雜互動
√ 一次編譯,“到處”發布(iOS和Android)
√ 使用原生設備硬體以及設備特定功能
√ 涵蓋完整的移動套用開發過程
讀者需要了解HTML、CSS和JavaScript知識;對於AngularJS,懂一些最好,不懂也沒有關係。

內容提要

Ionic是近幾年很火的一項跨平台開發技術。Ionic最大的亮點是集成了Angular和Cordova,對於有開發經驗的前端工程師來說上手難度大大降低,並且能直接使用現有的大量第三方庫和框架。《Ionic實戰:基於AngularJS的移動混合套用開發》是一本詳盡的Ionic實戰教程,不僅告訴你“怎么做”,還告訴你“為什麼”,這正是大部分入門書籍所欠缺的。
無論你是否有相關開發經驗,《Ionic實戰:基於AngularJS的移動混合套用開發》都可以幫助你快速掌握Ionic。

目錄

第1章 Ionic和Hybrid套用介紹 ...................................................................................... 1
1.1 Ionic是什麼 .......................................................................................................... 2
1.2 移動開發類型 ...................................................................................................... 3
1.2.1 原生移動套用 .......................................................................................... 4
1.2.2 移動端網站(Web 套用) ........................................................................ 5
1.2.3 Hybrid 套用 .............................................................................................. 6
1.3 理解Ionic技術棧 .................................................................................................. 7
1.3.1 Ionic :用戶界面框架 .............................................................................. 8
1.3.2 Angular :Web 套用框架 ....................................................................... 10
1.3.3 Cordova :Hybrid 套用框架 .................................................................. 10
1.4 為什麼選擇Ionic ................................................................................................ 11
1.4.1 開發者為什麼要選擇Ionic ................................................................... 11
1.4.2 Ionic 的缺點 ........................................................................................... 12
1.5 使用Ionic構建套用的前提 ................................................................................ 13
1.5.1 掌握HTML、CSS 和JavaScript .......................................................... 13
1.5.2 掌握Web 套用和Angular ..................................................................... 13
1.5.3 擁有移動設備 ........................................................................................ 14
1.6 Ionic支持的移動設備和平台 ............................................................................ 14
1.6.1 蘋果的iOS ............................................................................................. 14
1.6.2 谷歌的Android ...................................................................................... 15
1.7 總結 .................................................................................................................... 16
第2章 配置開發環境 .................................................................................................. 17
2.1 快速上手 ............................................................................................................ 18
2.1.1 設定開發環境 ........................................................................................ 18
2.1.2 創建一個新項目 .................................................................................... 21
2.1.3 項目資料夾結構 .................................................................................... 22
2.1.4 在瀏覽器中預覽 .................................................................................... 23
2.2 配置預覽環境 .................................................................................................... 24
2.2.1 安裝平台工具 ........................................................................................ 25
2.2.2 配置模擬器 ............................................................................................ 26
2.2.3 配置連線設備 ........................................................................................ 31
2.2.4 給項目添加平台 .................................................................................... 32
2.2.5 在模擬器中預覽 .................................................................................... 32
2.2.6 在移動設備上預覽 ................................................................................ 33
2.3 總結 .................................................................................................................... 35
第3章 AngularJS必備知識 ......................................................................................... 37
3.1 AngularJS初探 ................................................................................................... 39
3.1.1 視圖和模板:描述內容 ........................................................................ 39
3.1.2 控制器、模型和作用域:管理數據和邏輯 ........................................ 41
3.1.3 Service :可重用的對象和方法 ............................................................ 43
3.1.4 雙向數據綁定:在控制器和視圖之間共享數據 ................................ 43
3.2 配置本章的項目 ................................................................................................ 43
3.2.1 獲取項目檔案 ........................................................................................ 44
3.2.2 啟動開發伺服器 .................................................................................... 44
3.3 Angular套用基礎 ............................................................................................... 46
3.4 控制器:控制數據和業務邏輯 ........................................................................ 47
3.5 載入數據:使用控制器來載入數據並顯示在視圖中 .................................... 50
3.5.1 過濾器:轉換視圖中的數據 ................................................................ 53
3.6 處理選擇筆記的單擊事件 ................................................................................ 54
3.7 創建一個指令,用來解析Markdown格式的筆記 ........................................... 56
3.8 使用模型來管理內容編輯 ................................................................................ 59
3.9 保存和刪除筆記 ................................................................................................ 62
3.9.1 添加save() 方法 .................................................................................... 63
3.9.2 使用Angular 表單進行驗證 ................................................................. 64
3.9.3 添加和刪除方法 .................................................................................... 64
3.10 繼續學習Angular ............................................................................................. 65
3.11 挑戰................................................................................................................... 66
3.12 總結 .................................................................................................................. 66
第4章 Ionic導航和核心組件 ....................................................................................... 68
4.1 配置項目 ............................................................................................................ 70
4.1.1 創建一個新套用並手動添加代碼 ........................................................ 70
4.1.2 克隆完整版套用 .................................................................................... 70
4.2 配置套用導航 .................................................................................................... 70
4.2.1 設計良好的套用導航 ............................................................................ 72
4.2.2 使用狀態管理器來聲明套用視圖 ........................................................ 73
4.3 構建主視圖 ........................................................................................................ 77
4.3.1 創建內容容器 ........................................................................................ 77
4.3.2 使用CSS 組件並添加一個簡單的連結列表 ....................................... 78
4.3.3 給列表元素添加圖示 ............................................................................ 80
4.4 使用控制器和模型來開發預訂視圖 ................................................................ 81
4.5 把數據載入到天氣視圖中 ................................................................................ 85
4.5.1 給天氣視圖添加模板 ............................................................................ 86
4.5.2 創建天氣控制器載入外部數據 ............................................................ 87
4.5.3 給天氣視圖添加一個載入指示器 ........................................................ 89
4.6 在餐館視圖中使用卡片和無限滾動 ................................................................ 91
4.7 使用幻燈片組件來實現套用介紹 .................................................................... 94
4.8 挑戰 .................................................................................................................... 97
4.9 總結 .................................................................................................................... 98
第5章 選項卡、高級列表和表單組件 ......................................................................... 99
5.1 配置本章的項目 .............................................................................................. 101
5.1.1 手動創建項目並添加代碼 .................................................................. 101
5.1.2 克隆完整項目 ...................................................................................... 101
5.2 ionTabs:添加選項卡和導航 .......................................................................... 101
5.2.1 給套用添加選項卡容器和三個選項卡 .............................................. 103
5.3 給每個選項卡添加ionNavView ...................................................................... 104
5.4 載入並顯示當前的比特幣匯率 ...................................................................... 109
5.5 在同一個選項卡視圖中顯示貨幣細節 .......................................................... 114
5.6 刷新比特幣匯率並顯示幫助信息 .................................................................. 117
5.6.1 IonRefresher :下拉刷新匯率 ............................................................. 118
5.6.2 $IonicPopover :彈出幫助信息........................................................... 120
5.7 繪製歷史數據 .................................................................................................. 123
5.7.1 配置第三方庫 ...................................................................................... 123
5.7.2 歷史信息選項卡模板:使用Highcharts 和下拉列表來切換貨幣... 124
5.7.3 歷史信息選項卡控制器:載入數據並配置圖表 .............................. 125
5.8 貨幣選項卡:支持重新排序和開關 .............................................................. 129
5.8.1 IonReorderButton :讓列表支持重新排序 ......................................... 129
5.8.2 IonToggle :給列表元素添加開關 ...................................................... 131
5.9 挑戰 .................................................................................................................. 132
5.10 總結 ................................................................................................................ 132
第6章 使用Ionic開發一款天氣套用 ............................................................................ 134
6.1 項目配置 .......................................................................................................... 135
6.2 設定側滑選單和視圖 ...................................................................................... 136
6.3 地理位置搜尋 .................................................................................................. 139
6.4 增加設定視圖和數據的服務 .......................................................................... 142
6.4.1 創建收藏地點和設定服務 .................................................................. 142
6.4.2 在側滑選單列表中顯示收藏的地點 .................................................. 144
6.4.3 增加設定視圖模板 .............................................................................. 145
6.4.4 設定視圖控制器 .................................................................................. 147
6.5 設定天氣視圖 .................................................................................................. 148
6.5.1 獲取 Forecast.io API 密鑰 ................................................................... 148
6.5.2 使用 Ionic 命令行代理 ........................................................................ 149
6.5.3 增加天氣視圖的控制器和模板 .......................................................... 150
6.6 ionScroll:製作自定義滾動內容組件 ............................................................ 151
6.6.1 在頁面中使用 ionScroll ...................................................................... 152
6.6.2 為天氣數據查詢創建過濾器 .............................................................. 158
6.7 活動選單列表:顯示可選列表 ...................................................................... 160
6.8 ionModal:顯示日出和日落數據表 ............................................................... 162
6.8.1 配置彈窗 .............................................................................................. 164
6.8.2 數據列表集:讓日出和日落時間列表顯示得更快 .......................... 166
6.9 彈框:提示並確認收藏地點修改 .................................................................. 169
6.10 挑戰 ................................................................................................................ 171
6.11 總結................................................................................................................. 172
第7章 開發高級套用 ................................................................................................ 173
7.1 配置本章項目 .................................................................................................. 174
7.1.1 獲取代碼 .............................................................................................. 174
7.2 使用 Sass 自定義 Ionic 樣式 ........................................................................... 174
7.2.1 設定 Sass .............................................................................................. 175
7.2.2 使用 Sass 變數自定義 Ionic ................................................................ 176
7.2.3 使用 Sass 編寫樣式 ............................................................................. 177
7.3 如何支持聯網和離線模式 .............................................................................. 178
7.4 處理手勢事件 .................................................................................................. 180
7.4.1 使用 Ionic 事件指令監聽事件 ............................................................ 180
7.4.2 使用 $ionicGesture 服務監聽事件 ...................................................... 182
7.4.3 支持的手勢事件 .................................................................................. 185
7.5 數據持久化 ...................................................................................................... 186
7.5.1 使用 localStorage ................................................................................. 187
7.5.2 使用 Web SQL、IndexedDB 和 SQLite ............................................. 189
7.5.3 Cordova 外掛程式提供的其他選項 ........................................................... 190
7.6 製作跨平台的套用 .......................................................................................... 191
7.6.1 一種尺寸並不能滿足所有情況 .......................................................... 191
7.6.2 根據平台或者設備類型適配樣式 ...................................................... 192
7.6.3 為平台和設備類型適配互動 .............................................................. 194
7.7 使用 $ionicConfigProvider編輯默認互動行為 ............................................... 196
7.8 總結 .................................................................................................................. 197
第8章 使用Cordova外掛程式 .......................................................................................... 198
8.1 Cordova 外掛程式 .................................................................................................... 199
8.1.1 使用外掛程式要考慮的問題 ...................................................................... 200
8.1.2 安裝外掛程式 .............................................................................................. 201
8.1.3 使用外掛程式 .............................................................................................. 201
8.1.4 在模擬器中使用外掛程式 .......................................................................... 202
8.1.5 外掛程式和系統限制 .................................................................................. 203
8.1.6 Angular 和 Cordova 陷阱 .................................................................... 203
8.1.7 關於設備和模擬器的一些常見問題解決辦法 .................................. 205
8.2 ngCordova ......................................................................................................... 207
8.2.1 安裝 ngCordova ................................................................................... 207
8.3 在套用中使用相機和相冊外掛程式 ...................................................................... 208
8.3.1 創建相機套用 ...................................................................................... 208
8.3.2 增加相機外掛程式 ...................................................................................... 209
8.3.3 創建相冊視圖 ...................................................................................... 210
8.4 在天氣套用中使用地理位置 .......................................................................... 212
8.4.1 配置地理位置外掛程式示例 ...................................................................... 213
8.4.2 添加地理位置外掛程式和 ngCordova ....................................................... 214
8.4.3 請求用戶的地理位置 .......................................................................... 214
8.4.4 最佳化天氣套用 ...................................................................................... 216
8.5 本章挑戰 .......................................................................................................... 218
8.6 總結 .................................................................................................................. 219
第9章 預覽、調試和自動化測試 .............................................................................. 220
9.1 預覽、調試和測試之間的區別 ...................................................................... 220
9.1.1 為什麼測試如此重要 .......................................................................... 222
9.2 配置本章示例 .................................................................................................. 222
9.3 預覽套用的其他方法 ...................................................................................... 223
9.3.1 Ionic Lab ............................................................................................... 223
9.3.2 Ionic View ............................................................................................ 224
9.4 使用真機調試 .................................................................................................. 226
9.4.1 在 Android 設備上進行調試 ............................................................... 227
9.4.2 在 iOS 或模擬器中進行調試 .............................................................. 229
9.5 自動化測試 ...................................................................................................... 232
9.5.1 使用 Jasmine 和 Karma 進行單元測試 .............................................. 233
9.5.2 使用 Protractor 和 WebDriver 進行集成測試 .................................... 240
9.6 更多的測試示例 .............................................................................................. 245
9.7 總結 .................................................................................................................. 245
第10章 編譯並發布套用 ........................................................................................... 246
10.1 創建套用過程一覽 ........................................................................................ 247
10.2 創建套用圖示和啟動頁面圖片 .................................................................... 248
10.2.1 創建圖示 .......................................................................................... 249
10.2.2 創建啟動頁面圖片 .......................................................................... 250
10.3 準備上線套用 ................................................................................................ 251
10.4 編譯 Android 套用並發布到 Google Play .................................................... 252
10.4.1 配置套用的簽名 .............................................................................. 252
10.4.2 編譯套用檔案 .................................................................................. 253
10.4.3 簽名套用檔案 .................................................................................. 253
10.4.4 最佳化 APK 檔案 ................................................................................ 254
10.4.5 編譯套用的升級版本 ...................................................................... 254
10.4.6 創建套用清單並將套用上傳到 Play Store .................................... 255
10.4.7 升級套用清單或上傳新版本 .......................................................... 256
10.4.8 選擇 Android 商店 ........................................................................... 256
10.5 編譯 iOS 套用並發布到 AppStore ................................................................ 257
10.5.1 配置認證和 ID ................................................................................. 257
10.5.2 配置套用的 ID 標識 ........................................................................ 258
10.5.3 在 iTunes Connect 中創建套用清單 ............................................... 259
10.5.4 使用 Xcode 編譯並上傳套用 .......................................................... 259
10.5.5 完善 iTunes Connect 套用清單信息 ............................................... 260
10.5.6 更新套用 .......................................................................................... 261
10.6 總結 ................................................................................................................ 261
附錄A 相關資源 ....................................................................................................... 263

精彩節摘

譯者序
剛入職的時候,團隊參加Hackathon 的過程中需要製作一款移動套用,在沒有iOS 和Android 工程師的情況下,經過調研,Ionic 成了我們最終的技術解決方案,也為我翻譯本書打下了契機。我經常說技術沒有銀色子彈,沒有最完美的,只有最適合的。Web App 雖然有為人詬病的性能問題,但是在人員、時間、功能、性能等的權衡下,Ionic 必然是有它的客群的。
本書是In Action 系列的一員,這就注定了它是一本實戰書的命運。而事實也是如此,基本上每章都會用一個示例貫穿全章。我喜歡這種感覺,純理論的書讀起來讓我昏昏欲睡,實戰這種從0 到1 將最終成品展現在眼前的形式讓我非常有成就感。
相信這也是大多實戰派鐘愛的感覺吧!當然這並不是說理論不重要,我希望的是以實戰為引,通過實戰慢慢去理解並深入理論,而後將理論反作用於實戰,相輔相成才是最終奧義。
實戰書不好的地方在於它勢必會貼很多代碼,我甚至在有的書上看到過整頁整頁的代碼。相信本書的作者也不想這樣,所以很多時候他只列出了一些必要的代碼並提醒大家可以到Github 倉庫上查看完整代碼。在這裡也推薦大家在看完本書中的內容後再去看看倉庫中的示例,雖然書上的註解非常詳細,但我相信大家定會有另一番收穫。
書上的代碼是基於Ionic 1.x 的,而Angular 2 發布在即,Ionic 2 也發布了Beta 版。
很多人對於這本書是否已經過時產生了疑問。對於這一點大家大可放心,官方文檔對於修改的地方詳細地列出了新舊版本的寫法,而且Ionic 2 的接口和組件基本上都維持了原樣。當然,我個人覺得還是要理解Ionic 的精髓,舉一反三才能對代碼的理解大有助益。
李喆明
2016 年5 月15 日

前言

本書是Jeremy Wilken 九個月的努力成果,他是一位頂尖的Ionic 開發者,從2013 年開始我們就在一起開發並開源Ionic,和他一起工作是一件非常愉快的事。本書不僅介紹了Ionic 的開源SDK,還包含許多對資深Ionic 開發者有幫助的信息。
Jeremy 為本書開發了三個Ionic 套用,幾乎用遍了現有的Ionic 組件。通過這三個套用,你可以學會如何組合這些組件。第一個套用可以幫助度假勝地服務用戶,它用到了滑動頁面、列表、卡片、內容容器以及基礎導航。第二個套用是比特幣市場套用,可以展示比特幣的實時匯率,用到了下拉刷新、彈出視窗、選項卡、圖表、高級列表以及嵌套視圖。第三個套用是天氣套用,使用了模態框、自定義滾動區域(分頁滾動)、外部數據載入、邊欄選單以及一個搜尋視圖。
這些套用都很有特點並且比較完整,它們已經完成了套用商店上架所需的80%的功能,其餘的20% 會在每章結尾列出,由讀者完成。
對於經驗豐富的Ionic 開發者來說,本書介紹了如何實現特定平台的功能開發,比如在iOS 上使用動作選單,在安卓上使用彈出視窗。本書同樣介紹了Ionic 生態系統的背景以及如何使用Cordova 及其外掛程式;介紹了Ionic 平台提供的各種服務,比如Ionic 視圖;還介紹了如何使用高級技巧和測試來最佳化Ionic 開發流程。Jeremy 用優秀的例子結合他獨到的視角來教大家如何搭建環境並編寫你自己的測試。
在和Max Lynch 以及Ben Sperry 一起開發Ionic 之前,我加入了他們的公司,負責開發已經獲得成功的產品,其中就包括Codiqa,這是一個圖形化的jQuery Mobile 拖曳構建工具。在開發Codiqa 時,我意識到設備和瀏覽器的潛力並沒有被充分開發,用戶一直在要求我們為工具添加更多的功能。最終,我們決定創建自己的Hybrid 套用開發套件,充分發揮移動設備的潛力。有了Angular 這樣的強力工具,我們有能力將Hybrid 移動套用開發推進到能和原生套用開發相抗衡的程度。我們在2013 年發布了Ionic 的alpha 版,令我感到自豪的是,開發社區非常快地接受了Ionic 並幫助它進一步發展。更令我激動的是,Ionic 才剛剛起步,我們會繼續完善它,讓開發者可以更快更輕鬆地開發高性能的套用。
本書既有對Ionic 的介紹,也有更加深入的套用開發最佳實踐,因此無論你是初學者還是資深開發者,都會有所收穫。非常感謝你加入Ionic 社區。
玩得開心!
Adam Bradley
Ionic 框架聯合創建人
前言
幾年前人們還在爭論是否值得為移動端套用開發投入時間和精力,時至今日,手機的重要性已經毋庸多言。截至2015 年夏天,蘋果和谷歌套用商店中的套用數量已經突破一百萬。手機的銷量已經達到台式機/ 筆記本電腦的六倍,平板電腦的銷量眼看著也要在年內超過台式機/ 筆記本電腦。移動設備已經無處不在。
回到2013 年,移動套用開發領域主要的關注點還是構建原生套用。這些原生套用使用Java 或者Objective-C 寫成,開發者需要學習這些語言、平台工具、SDK 等。對於像我這樣的Web 開發者來說,這是一道很難跨越的障礙。當時的移動端Web 主要是構建回響式網站而不是移動端套用。由於老式設備和瀏覽器對Hybrid 套用(使用Web 技術構建的原生套用)支持不好,再加上設計風格和原生套用完全不同,很少有人會選擇Hybrid 套用。
Ionic 的發起者們看到了機會。他們意識到移動設備正在迅速發展,Hybrid 套用會成為原生套用的有力對手。有些開發者想用他們已經掌握的Web 技術來開發原生套用,而這也正是Ionic 的目標。Ionic 使用了開源項目Cordova 和Angular,把它們整合成一個統一的Hybrid 移動套用開發平台。
1.0 版本發布之後,Ionic 已經可以支持Web 開發者構建移動套用。Ionic 團隊自豪地把Ionic 稱作:Hybrid 套用“一直在等待的那個SDK”。寫完本書之後,我已經可以看到Ionic 的光明未來。Ionic 如此強大的核心就是本書介紹的那些開源組件。此外,圍繞Ionic 的服務平台正在搭建中,包括推送通知、數據分析、beta 測試等。我維護著很多受歡迎的開源項目,這些項目都有完善的開發和社區支持,Ionic 就是其中之一(目前是GitHub Star 最多的前40 個項目之一,Ionic 使用的Angular 在本書編寫時是前三名)。大量的套用使用Ionic 構建,有些甚至得到了套用商店的推薦。
我一直想把自己的學習經驗分享出來,告訴大家如何成為一名移動套用開發者,寫這本Ionic 的書也延續了這一思想。最初我的計畫是將Ionic 的特性作為核心進行講解,對每個特性進行單獨介紹。寫了6 章之後,我發現這個方法行不通。我喜歡那些能夠運行並且能夠互動的東西,對移動套用來說能上手使用是最好的。
因此,寫完前三個核心章節的草稿之後,我扔掉了它們,從頭開始,直接用實踐來進行介紹。這和我使用Ionic 開發第一個套用時所採用的學習方法很像,希望這能幫助你更好地學習Ionic。實際上,你會發現本書的所有章節都充滿這種對讀者的關懷。
我在不斷試錯中掌握了Ionic,文檔永遠是一位好老師。工作中需要開發移動套用的時候,我可以使用Ionic 在一天之內做出一個原型。Ionic 剛出來的時候,我總會不斷更新我的套用,讓它適配Ionic 的改動和新特性,在這個過程中我深深感受到Ionic 發展速度之快。beta 版發布幾個月之後,Ionic 就完善了API 和架構設計,並沿用至今。
在未來,Ionic 必將包括更多社區驅動的貢獻和組件、更多的平台服務和更高的性能及質量。我迫不及待地想知道你會做出什麼,我也很高興能見證你在Ionic 的幫助下成為一名移動套用開發者。
致謝
在本書中,我分享了許多學習經驗,這些經驗都要歸功於我得到的鍛鍊、指導和支持。雖然無法將每個為本書誕生做出貢獻的人都羅列出來,但我知道,貢獻最大的人是開源社區中的那些重度參與者。他們編寫、維護並支持了開源項目,我對他們致以最崇高的尊重和感激。
謝謝Manning,謝謝那些優秀的編輯,是你們的努力工作讓這本書成為現實。多虧有Robin de Jongh,本書才得以起步,我的寫作熱情也全靠他維持。真誠地感謝Helen Stergius,是她不知疲倦地編輯、深夜頭腦風暴、積極的態度和活力推動我完成主要的編寫流程。我還要感謝團隊中的其他人,在他們的幫助下完成了本書的出版和審校工作,尤其要感謝Gregor Zurowski、Katie Tennant、Mary Piergies、JanetVail、Matt Merkes、Candace Gillhoolley、Kevin Sullivan、Donna Clements 和Jodie Allen。
許多同行評審者幫助我完善草稿中薄弱環節的漏洞,也讓我更有信心做出積極改變。非常感謝Andrea Prearo、Barbara Fusinska、Charlie Gaines、Cho S. Kim、Chris Graham、Gareth van der Berg、Giuseppe de Marco、Jeff Cunningham、KenRimple、Kevin Liao、Lourens Steyn、Patrick Dennis、Rabimba Karanjai、Satadru Roy和Wendy Wise——你們提出了許多有用的建議,如果沒有你們,書稿還會遺留很多問題。許多MEAP 評審者也在論壇上提出了很多有用的反饋。很高興有這些願意花錢買書並且願意幫助作者完善內容的人。
如果你見過Ionic 團隊中的成員,你就會發現他們是技術和開源領域中最無私並且最聰明的那群人。我非常感謝Ionic 團隊開發出Ionic(這樣我才有了寫書的機會!),還要感謝他們用心地閱讀和回答我的問題。我尤其要感謝Adam Bradley,Ben Sperry, Katie Ginder-Vogel 和Mike Hartington,感謝他們的郵件、Skype 電話以及我們的私下溝通。Ionic 社區就是在你們不知疲倦地努力和工作下日益壯大。此外,特別要感謝Adam 給本書撰寫序。
最後,還要感謝我的妻子Linda,她一直是我堅強的後盾。我向她保證,以後絕對不在孩子出生的時候寫書。如果沒寫過書,你無法想像需要投入多少時間和精力。在我窩在辦公室里寫稿子的時候,Linda 給予我極大的支持和理解。我永遠愛你,也永遠愛我們的孩子。
關於本書
Ionic 整合了一些現有的項目和自身開發的一套工具,幫助Web 開發者構建移動套用。Ionic 已經獲得極大關注,成為移動套用開發者的首選。
本書是一本實例驅動的Ionic 實戰教程。在閱讀本書的過程中,你會構建幾個接近完成的套用,學習到幾乎每一個Ionic 特性。Ionic 的文檔質量很高,但是並沒有教你如何組織大型套用。
使用Ionic 構建套用時, 你實際上用到了多種技術( 主要是Angular 和Cordova)。為了讓你充分掌握Ionic,本書用一些章節來介紹這些技術。Angular 和Cordova 是兩個很大的話題,它們本身就可以寫一本書,但是本書只會介紹一些使用Ionic 必備的關於它們的基礎知識。
移動套用通常需要訪問外部數據,理解如何在Web 套用中通過API 獲取數據很有幫助。本書在多個示例中都介紹了如何使用RESTful API。
本書的目標讀者
本書的目標讀者是掌握基礎Web 套用開發知識的Web 開發者。
你需要有一定的CSS、HTML 和JavaScript 知識。你應該知道如何用HTML 組
織內容並用CSS 修改樣式。此外,還需要理解一些JavaScript 概念,包括異步、對
XII 關於本書
象和字面量。
不需要具備Cordova 和Angular 的知識。如果你之前用JavaScript 開發過瀏覽器
中的Web 套用那是最好的,不過沒有也沒關係,可以跟著本書的示例項目進行學習。
你需要有一個移動設備來構建和測試套用。對Ionic 來說,需要iOS 或者Android
設備,兩個都有那就更好了!
本書的組織結構
本書共分為10 章,涵蓋了從配置環境到發布最終套用的完整流程。
第1 章詳細介紹了Ionic 以及其他Hybrid 套用構建技術,並介紹了Ionic 的優勢。
第2 章會帶領大家配置本書用到的所有工具,幫助你使用默認的起步模板創建第一個移動套用。
第3 章為那些不熟悉Angular 的開發者介紹開發Ionic 需要的Angular 知識。
第4 章會為一個虛擬的旅遊度假村開發一款移動套用,它包含基礎的套用跳轉功能,用到了一系列界面組件,比如卡片、無限滾動列表、載入數據時的載入標識以及滑動頁面。你會在構建第一個套用的過程中掌握這些Ionic 開發的基礎知識。
第5 章會構建另一個監控比特幣當前價格的套用。這個比特幣套用用到了選項卡、下拉刷新功能、幾個表單組件、帶滑動選項的高級列表以及一個展示一段時間數據的圖表。本章的目的是介紹如何使用標籤來組織套用,同時學習更多Ionic 組件。
第6章會幫大家構建一個天氣套用。本章會深入介紹如何使用邊欄選單跳轉、模態框展示數據、動作選單展示選項按鈕以及自定義滾動行為。本章會加深大家對Ionic 組件的理解並學習Ionic 套用的核心設計元素。
第7章會介紹構建Hybrid套用需要的高級技術。你會學習如何存儲用戶數據、自定義Ionic 組件、兼容線上和離線狀態、配置Ionic 默認設定、讓套用使用平台特有的功能以及處理手勢事件。
第8 章會介紹如何通過Cordova 讓Ionic 套用支持平台特性,比如獲取感測器數據。本章會用之前展示過的兩個示例套用進行講解,我們會給天氣套用和旅遊度假村套用分別添加地理位置支持和相機支持。你會學到如何使用ngCordova 以及如何集成Cordova 外掛程式。
第9 章會介紹如何測試Ionic 套用。本章會介紹兩種主要測試方法:測試業務邏輯的單元測試和測試套用整體功能的集成測試。你還會學到如何使用Ionic 視圖和Ionic Lab 來預覽套用。
第10 章會介紹如何把套用提交到商店。本章會介紹一些套用產品化的技巧,比如添加必要的圖片和組件,以及如何構建iOS 和Android 套用。

相關詞條

熱門詞條

聯絡我們