用HTML和JS來開發移動app - 部署Cordova配套開發環境

最近想玩一玩手機app開發，之前都是本身DIY家裏的一些硬件設備的，在這個每天喊智能的年代，不讓它們上上網用手機控制都以爲這些玩意LOW得拿不出手了~ 決定要改造改造，第一步得學學怎麼開發手機端控制應用。

原本想買本android 軟件開發的書看看的，可是以爲難道學完android開發難道還要再學iso開發嗎？Java跟objectC 難道都得去學一遍麼.. 公司IT大牛推薦用HTML5（即 JavaScript + HTML + CSS）來開發應用程序~ 這樣的好處是跨平臺，能夠在android上跑也能夠在ios上運行。如今的跨平臺技術真洋氣~ 在大牛指點下，先要搭起開發環境，折騰了2個晚上終於搞定，總結以下：

安裝 JDK（後續的 Android SDK 須要）

到 Oracle 官方網站下載最新的 JDK 8，Windows 和 Mac OS X 及基於 Yum 的 Linux （好比 Red Hat、CentOS）有二進制安裝程序，基於 apt 的 Linux（好比 Debian、Ubuntu）須要本身編譯或者安裝系統自帶的 OpenJDK（但 OpenJDK 如今沒有 Java 8 版本，安裝 Java 7 也行）

安裝完成後須要配置環境變量（JAVA_HOME，Java 安裝文件夾），將 JAVA_HOME 下的 bin 文件夾添加到環境變量 Path 中，主要是能夠在命令行執行 java 和 javac 命令。

我是在MBP上搭的環境，因此下載安裝包直接安裝便可。接着終端打開bash_profile

#JAVA
export JAVA_HOME=/Library/Java/Home
export PATH=$JAVA_HOME/bin:$PATH

安裝 Apache Ant（後續的 Android SDK 須要）

到 Apache 官方下載最新的 Ant（http://ant.apache.org/bindownload.cgi），放到特定文件夾下，將該文件夾下的 bin 目錄添加到環境變量 Path 中，主要是能夠在命令行執行 ant 命令。

#Apache Ant
export PATH=/oct/Apacheant/bin:$PATH

安裝 Android SDK（後文的 Cordova 須要）

到 Android 官方網站下載最新的 Android SDK，能夠安裝單獨的 SDK，也能夠安裝打包了 SDK 的 Android Studio。

安裝完成後須要配置環境變量（ANDROID_HOME），將 ANDROID_HOME 下的 tools，platform-tools 添加到環境變量 Path 中，主要是能夠執行 adb、android 等命令行工具

#Andriod
export ANDROID_HOME=/oct/Library/Android/sdk
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

運行 Android SDK Manager，下載特定 API 版本（就是 Android 版本，好比 4.三、4.四、5.0）的庫及工具

能夠在 Android Studio 裏啓動 Android SDK Manager，也能夠經過命令行 android update sdk 來啓動，而後參考 GUI 說明下載特定版本好比 API 19（Android 4.4.2）。最低的安裝要求是：

• Android SDK Tools
• Android SDK Platform-tools
• Android SDK Build-tools
• SDK Platform
• Android Support Repository
• Android Support Library

若是要用到 Google 服務的 API，則安裝相應的：

• Google APIs
• Google Repository
• Google Play Services

若是須要用虛擬設備調試（不過不建議使用 Android 自帶的虛擬設備，建議使用 Genymotion 基於 VirtualBox 開發的虛擬設備），則安裝相應的：

• xxx System Image

安裝 Nodejs、npm

到 Nodejs 官方網站下載安裝最新的 Nodejs（http://nodejs.org/download/），針對 Windows 和 Mac OS 有安裝包（包含了 nodejs 和 npm），Linux 上面能夠直接安裝軟件倉庫裏面的 nodejs 和 npm。

安裝 Git

到 Git 官方網站下載最新的 Git（http://git-scm.com/），針對 Windows 和 Mac OS 有安裝包，Linux 上面能夠直接安裝軟件倉庫裏面的 git。

安裝 Apache Cordova 跨平臺 HTML5 環境

在命令行使用 npm install cordova 便可安裝 Cordova 命令行工具（也建議到 Cordova 官方瞭解下 Cordova 命令行的使用 - 嗯！沒免費圖形界面工具的~要圖形界面的軟件就找A逗比買吧）

使用 Cordova 命令行建立手機 HTML5 項目

在命令行裏使用 cordova create DirectoryName project_id product_name 便可以建立手機 HTML5 項目，好比 cordova create IoTgoAppDir com.iteadstudio.iotgo IoTgo

若是針對 Android 平臺開發，須要執行命令 cordova platform add android 添加 android 相關工具，若是須要安裝擴展，須要執行命令 cordova plugin add pluginNameOrGitUrl，若是須要打包 Android Apk，須要執行 cordova build android，若是須要安裝到經過 USB 鏈接的手機，須要執行 cordova run android

安裝 HTML5 項目依賴的 JavaScript 庫

全部 HTML5 相關的文件，放在 Cordova 建立的項目根目錄下的 www 文件夾下，能夠手動將相關的 HTML、JavaScript、CSS 文件放到該文件夾下，也能夠經過 bower 等軟件包管理工具來自動下載。

使用文本編輯器或 IDE 編寫 HTML5 程序

寫代碼能夠直接修改 www 文件夾下的文件，也能夠用 NetBeans 或 WebStorm 之類的 IDE。建議用 WebStorm，對 Nodejs 和 Cordova 有比較好的支持。

完成上面的配置後~ 就能夠開始用前端開發熟悉的HTML+CSS+JS來開發手機APP了！固然...做爲一個嵌入式系統工程師，我對彙編對C很熟悉，對C++也還比較瞭解，對HTML及JS一竅不通...不過在一週速成過python後，我以爲這些上層腳本解析語言應該都不難~ 下來的一週及過年，會繼續學習並開發一個應用來。