App開發:修訂版本之間的差異
出自六年制學程
(→Cordova) |
|||
(未顯示2位用戶所作出之37次版本) | |||
第 1 行: | 第 1 行: | ||
+ | [[分類:Mediawiki]][[分類:振鐸會務]] | ||
==PhoneGap== | ==PhoneGap== | ||
+ | *不知道為甚麼,下載PhoneGap Desktop的程式打開來後就會一直轉圈圈載入,無法使用。 | ||
+ | |||
==Cordova== | ==Cordova== | ||
+ | *前置安裝作業: | ||
+ | *#下載[https://nodejs.org/en/ Node.js] | ||
+ | *#下載Jdk 8 (一定要使用JDK版本8才可以使用,不可使用更高版本) | ||
+ | *#下載[https://developer.android.com/studio Android Studio] (此動作是為了要安裝SDK,但因現在不能單獨下載SDK,而是包含在Android Studio裡面)<br>下載Android Studio並開啟 -> 按Configure -> SDK Manager -> 選擇Android 5.0(Lollipop) -> 按Ok安裝<br>(下載Android 5.0是因為對普遍Android系統支援度較高) | ||
+ | *#下載[https://gradle.org/next-steps/?version=6.8.3&format=bin Gradle 6.8.3] <br>(在任意槽碟新增名為Gradle的資料夾,並將下載之壓縮檔放入此資料夾並解壓縮) | ||
+ | *#幫JDK、SDK和Gradle建立系統路徑<br>開啟資料夾 -> 對【本機】按右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> 新增 | ||
+ | *#找到JDK安裝檔案路徑並複製路徑<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/JDK安裝1.png' height='*' width='550' /><br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/JDK安裝2.png' height='*' width='550' /> | ||
+ | *#在新增系統變數中,變數名稱設為 JAVA_HOME 並將複製路徑貼在變數值中,按確定新增<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/JDK安裝3.png' height='*' width='550' /> | ||
+ | *#找到SDK安裝檔案路徑並複製路徑<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/SDK安裝1.png' height='*' width='550' /><br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/SDK安裝2.png' height='*' width='550' /> | ||
+ | *#在新增系統變數中,變數名稱設為 ANDROID_HOME 並將複製路徑貼在變數值中,按確定新增<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/SDK安裝3.png' height='*' width='550' /> | ||
+ | *#在系統變數當中找到 Path 對 Path 按編輯<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/Gradle安裝1.png' height='*' width='550' /> | ||
+ | *#找到Gradle的bin資料夾並複製路徑<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/Gradle安裝2.png' height='*' width='550' /><br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/Gradle安裝3.png' height='*' width='550' /> | ||
+ | *#在 Path 的編輯變數中按新增,並把路徑貼上按確定即可<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/Gradle安裝4.png' height='*' width='550' /> | ||
*安裝Cordova: | *安裝Cordova: | ||
− | *# | + | *#打開命令提示字元(CMD) |
+ | *#輸入: npm install -g cordova | ||
+ | *創建一個Cordova Project: | ||
+ | *#在命令提示字元中輸入: cordova create [Project名稱] | ||
+ | *#你可以在創建好的Project檔裡看到一個叫www的資料夾,<br>裡面放有可更改和設定的html、css和js檔案。 | ||
+ | *新增平台: | ||
+ | *#在命令提示字元中輸入: cd [Project資料夾路徑] | ||
+ | *#輸入: cordova platform -1 可看到可用平台:<br>android 9.0.0<br>browser 6.0.0<br>electron 1.0.0<br> windows 7.0.0 | ||
+ | *#輸入: cordova platform add [平台] | ||
+ | *#如使用平台browser (cordova platform add browser)輸入cordova run browser<br>即可使用電腦網頁顯示預覽畫面<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/CordovaBrowser顯示畫面.png' height='*' width='550' /> | ||
+ | *Build Apk: | ||
+ | *#在命令提示字元中輸入: cd [Project資料夾路徑] | ||
+ | *#輸入: cordova build android | ||
+ | *#待指令跑完後,會顯示創建好的Apk檔路徑,下載Apk檔至手機中,即可安裝App<br>(第一次執行會需要較久時間) | ||
+ | |||
+ | *安裝Cordova HelloWorld App(預設): | ||
+ | *#當把HelloWorld.apk檔案放進手機檔案內進行安裝,點進去後畫面呈現如下:<br><img src='http://nice-learning.tw/uploadFiles/不錯學群/潘宗儀/CordovaApp手機畫面.png' height='300' width='*' /> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | *參考影片: https://www.youtube.com/watch?v=ElIDUfPxfmU |
2021年7月7日 (三) 14:00的最新修訂版本
PhoneGap
- 不知道為甚麼,下載PhoneGap Desktop的程式打開來後就會一直轉圈圈載入,無法使用。
Cordova
- 前置安裝作業:
- 下載Node.js
- 下載Jdk 8 (一定要使用JDK版本8才可以使用,不可使用更高版本)
- 下載Android Studio (此動作是為了要安裝SDK,但因現在不能單獨下載SDK,而是包含在Android Studio裡面)
下載Android Studio並開啟 -> 按Configure -> SDK Manager -> 選擇Android 5.0(Lollipop) -> 按Ok安裝
(下載Android 5.0是因為對普遍Android系統支援度較高) - 下載Gradle 6.8.3
(在任意槽碟新增名為Gradle的資料夾,並將下載之壓縮檔放入此資料夾並解壓縮) - 幫JDK、SDK和Gradle建立系統路徑
開啟資料夾 -> 對【本機】按右鍵 -> 內容 -> 進階系統設定 -> 環境變數 -> 系統變數 -> 新增 - 找到JDK安裝檔案路徑並複製路徑
- 在新增系統變數中,變數名稱設為 JAVA_HOME 並將複製路徑貼在變數值中,按確定新增
- 找到SDK安裝檔案路徑並複製路徑
- 在新增系統變數中,變數名稱設為 ANDROID_HOME 並將複製路徑貼在變數值中,按確定新增
- 在系統變數當中找到 Path 對 Path 按編輯
- 找到Gradle的bin資料夾並複製路徑
- 在 Path 的編輯變數中按新增,並把路徑貼上按確定即可
- 安裝Cordova:
- 打開命令提示字元(CMD)
- 輸入: npm install -g cordova
- 創建一個Cordova Project:
- 在命令提示字元中輸入: cordova create [Project名稱]
- 你可以在創建好的Project檔裡看到一個叫www的資料夾,
裡面放有可更改和設定的html、css和js檔案。
- 新增平台:
- 在命令提示字元中輸入: cd [Project資料夾路徑]
- 輸入: cordova platform -1 可看到可用平台:
android 9.0.0
browser 6.0.0
electron 1.0.0
windows 7.0.0 - 輸入: cordova platform add [平台]
- 如使用平台browser (cordova platform add browser)輸入cordova run browser
即可使用電腦網頁顯示預覽畫面
- Build Apk:
- 在命令提示字元中輸入: cd [Project資料夾路徑]
- 輸入: cordova build android
- 待指令跑完後,會顯示創建好的Apk檔路徑,下載Apk檔至手機中,即可安裝App
(第一次執行會需要較久時間)
- 安裝Cordova HelloWorld App(預設):
- 當把HelloWorld.apk檔案放進手機檔案內進行安裝,點進去後畫面呈現如下:
- 當把HelloWorld.apk檔案放進手機檔案內進行安裝,點進去後畫面呈現如下: