[Android][iOS] 如何將你的網頁變成 Android / iOS APP (使用 Cordova，超簡單適合新手)

你已經做了一個漂亮的網頁應用程式（HTML+CSS+JS），想讓它變成一個可以安裝在手機上的 App 嗎？

這篇文章將說明如何不寫APP原生程式碼，也能讓你的網頁變成手機可以安裝的APP！

今天我們要用的工具是：Apache Cordova 這是一個超實用的開源工具，適合不想接觸原生程式碼的初學者，能幫你把網頁轉成 Android 或 iOS 的 App！

---

🛠️ 第一步：安裝必要工具 （以 Mac 環境為例）

1. 安裝 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 安裝 Node.js（Cordova 需要用到）

brew install node

3. 安裝 Cordova

npm install -g cordova

---

📁 第二步：建立 Cordova 專案

建立專案

cordova create myapp com.example.myapp MyApp

cordova create [目錄] [ID] [名稱]

第一個參數 "目錄" 是在執行指令後，Cordova 會在目前路徑下，以第一個參數當名稱建立資料夾，這就是專案的根目錄，所有與這個專案相關的檔案，都會存放在這個資料夾裡面。

第二個參數 "ID" 採用的是反向網域名稱的格式，用來確保 App 在所有裝置和應用程式商店中是獨一無二的。

第三個參數 "名稱" 是使用者在手機主畫面、應用程式列表或設定中會看到的 App 名稱。

---

🌐 第三步：放入你的網頁檔案

專案根目錄下有一個 www 的資料夾，預設裡面會有一些用來示範的檔案，請全部清空，將你的網頁的所有檔案(eg. index.html、style.css、script.js...等)，全部放到 www 資料夾內。

---

📱 第四步：執行 App 模擬器

Android

cordova platform add android

請先用 Android Studio 建立一個虛擬裝置，然後運行虛擬Android手機。

cordova run android

iOS

cordova platform add ios

cordova run ios

會自動觸發 simulator.app 來啟動 iphone 模擬器，如果沒建立手機裝置，需先建立一支。

---

📦 第五步：打包 APK / IPA 檔案

Android APK：

cordova build android

產生的 APK 檔會在：platforms/android/app/build/outputs/apk/debug/app-debug.apk

iOS IPA（需用 Xcode 打包）

cordova build ios

然後用 Xcode 開啟 platforms/ios/MyApp.xcodeproj，選擇模擬器或實機，點「Build」。

---

🎉 成功啦！

你已經把一個原本只能用瀏覽器看的網頁，變成了一個真正的 Android / iOS App！

• 你可以拿 APK 安裝到 Android 手機
• 用 Xcode 打包上架 App Store（需開發者帳號）

---

🔚 結語

這篇文章是給零經驗的新手，希望你能順利體驗把網站「變 App」的成就感！
Cordova 非常適合簡單的 Web App，如果你以後想要進階，也可以考慮像是 Flutter 或 React Native。