如何使用Cordova建置Android App 教學

安卓(Android)系統的App是使用Java程式語言去做開發的

蘋果(Apple,IOS)系統的App是用Objective-C或是Swift去做開發的

微軟(Windows)系統的App是用C#或C++去做開發的 ((這邊沒寫過所以不是很熟

這意味著甚麼呢? 意味著如果一家公司要上架一個app，且要每個平台都適用的話，就要有這麼多工程式去幫忙寫這些App，意思就是今天要設計一個版面與商業規則在app裡面，就要用Java、Swift、C#...各自寫一遍，雖然很累但這也是沒辦法的事情

要1個工程師包辦這全部的也是有的啦 先幫QQ...

(之後再來介紹Web app、hybrid app、cross comiling app、native app的差異)

好的言歸正傳，今天就來教學怎麼從無到有使用cordova 去建置一個App



一、安裝

1.首先 你要先去下載Node.js，因為他是用npm封包管理套件去做管理的。(點這裡下載)

2.安裝Node.js(npm)，他會將npm.cmd這個東西自動加到你的「系統環境變數」裡面，如此一來你就可以使用cmd去執行Node.js(npm)囉！

3.在windows 搜尋打上「cmd」，然後打上下列指令，等他跑完就安裝好囉！

npm install -g cordova

二、建立App

1.在windows 搜尋打上「cmd」，然後打上「cd Desktop」按下Enter→這個意思就是要將執行的目錄移到桌面，想要移動到C槽、D槽...都可以。

cd Desktop

2.接著我們要在桌面上開一個專案，cmd視窗打上「cordova create <資料夾名稱> <app上架的ID> <app名稱>」，例如：「cordova create myFirstApp com.test123.app FirstApp」，要注意的是這邊不要打中文喔，這些參數到後面都可以改，如果在這邊打中文的話我印象中好像會出錯，所以不要緊張，就先打英文吧~

cordova create <資料夾名稱> <app上架的ID> <app名稱>
例如：cordova create myFirstApp com.test123.app FirstApp

3.等他建置完之後，在同個cmd視窗上打「cd <剛剛創建的資料夾名稱>」承續上面的例子：「cd myFirstApp」，這邊的用意就是讓執行視窗，進入到這個專案的目錄。

cd myFirstApp

4.在同個cmd視窗上打「cordova platform add android --save」→用途是告訴這個專案我是要for安卓(Android)系統的App所使用。

cordova platform add android --save

5.成功了之後就會看到專案(資料夾)內長這樣：

6.接下來你要改的，就只有一個東西，把你前端的專案放到「www」資料夾底下，要注意的是，你的index.html的header一定要加上，尤其是匯入cordova.js這行，你沒有這支js沒有關係，他會在你build(建置)的時候，將這個js引入進去。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<script type="text/javascript" src="cordova.js"></script>

7.把你的web專案放「www」資料夾後，就可以回到cmd視窗打上「cordova build」，等待他跑完就會給你路徑apk的路徑位置囉！

cordova build

------------------------------------------------------------------------------------------------------------------------
關鍵字：#打包, #安卓, #建置, #軟體開發, #android, #app, #build, #cordova, #css, #js, #html, #hybrid app, #web app

如果有甚麼不清楚的地方，再麻煩底下留言發問
如果有甚麼寫錯的地方，也再麻煩讓我知道一下，
讓小弟能有所進步，避免誤人子弟 XDDD
敬請各位大大不吝賜教