🎉ARK ALL 是一個免費的開源 APP🎉

• 感興趣的話可以來 Wiki 看看更多關於 ARK 的故事~
• 如果 ARK ALL 有幫助到您，可以請我們喝杯咖啡！
• 如果您也想參與到 ARK ALL 的開發中，立即聯繫我們 [email protected]！

APP熒幕截圖

• 🎉ARK ALL 是一個免費的開源 APP🎉
• 🎉 首次運行該項目
  • 🤖 Android 環境 Setup
  • 🍎 iOS 環境 Setup
• 🌈 開發本項目準備
  • ⛵ 啟動流程
    • 🤖 Android 運行
    • 🍎 iOS 運行
  • 🐛 使用 Debugger （Web Console 工具）
• 📦 打包方式
  • 🍎 iOS 打包
  • 🤖 Android 打包
  • 🐛 故障排除
• ⛵ 維護須知

---

🎉 首次運行該項目

在此查看已知 BUG

🤖 Android 環境 Setup

1. 確保自己是 Android API 33 或 API 31 的模擬器環境，下載安裝 JDK、SDK
2. 在項目根目錄(package.json所在的目錄)打開命令行運行 npm i --legacy-peer-deps 安裝 npm 依賴
3. 前往 Android Studio 啟動所需的模擬器
4. 敲入 react-native run-android or npm run android or yarn android (如需使用 yarn 需要先npm install yarn -g) 運行本項目吧!

---

🍎 iOS 環境 Setup

基於 React Native CLI 下的安裝流程，iOS APP 目前只能在 Mac 開發調試

1. 先安裝node包，方便之後使用指令npm和npx

brew install node
brew install watchman

2. 確保安裝了 Xcode (版本 10 或以上)，建議在官網下載
3. 安裝CocoaPods去管理 ios 系統相關的包

brew install cocoapods

4. 在項目根目錄(package.json所在的目錄)打開命令行運行 npm i --legacy-peer-deps 安裝 npm 依賴 2024 年更新：在[email protected]+，使用yarn install安裝依賴。
5. Pod 自動鏈接好 iOS 的包

cd ios
pod install --repo-update

如有衝突可先刪除./ios/Podfile.lock文件再運行上述命令。

6. 啟動 Xcode ，打開項目 ./ios/UMALL.xcworkspace
7. Command + R 運行項目，先除錯，沒有問題再回 VSCode 的命令行使用 yarn ios 啟動 [email protected]+更新：需要在Xcode -> Product -> Scheme -> Edit Scheme，設置為 Debug 模式，Metro 才能接收控制台命令進行調試和 log。

---

🌈 開發本項目準備

⛵ 啟動流程

1. 克隆倉庫的代碼到本地（推薦使用GitHub Desktop）

git clone https://github.com/UM-ARK/UM-All-Frontend.git

2. 在項目根目錄下(./package.json所在的目錄)啟動 Terminal/命令行安裝依賴包

忽略警告安裝 - 正常會使用這條指令，因為某些有問題的包尚未能解決衝突
npm i --legacy-peer-deps

🤖 Android 運行

1. 在 Android 上運行 App

npx react-native run-android
or
yarn android
or
npm run android

如果不喜歡運行命令後彈出新的窗口，可以先在 VSCode 中打開一個命令行窗口，敲入 yarn start，再在另一個命令行窗口中 yarn android，就不會有額外彈窗了

🍎 iOS 運行

1. 在 ios 上自動鏈接 Pod

cd ios
pod install

完成此步驟後，./ios的代碼將更新

2. 打開Xcode，使用Command + R編譯運行 APP，先 Debug，再回 VSCode 開發調試

3. 命令行編譯/運行 App

yarn ios
or
yarn ios --simulator="iPhone 15"

---

🐛 使用 Debugger （Web Console 工具）

• 當需要 log 出對象或者數組時，有 Chrome 的 Web Debugger 肯定更好用。
• 舊版的項目可以在 Metro 的命令窗口中按下 d 再在模擬器中選擇 Debug 即可直接跳轉瀏覽器查看 log。 [email protected]+更新：
• iOS 模擬器Open Debugger可能無法正確跳轉到瀏覽器，
  • 方法1：Chrome 可前往chrome://inspect，在Remote Target中找到React Native Experimental (Improved Chrome Reloads)下的 inspect 按鈕打開DevTools。
  • 方法2：使用sh debug.sh，其實是運行npx react-devtools，然後再在模擬器中Open Debugger，即會使用該插件打開Console查看log。

---

📦 打包方式

🍎 iOS 打包

1. 找到 ./ios/UMALL.xcworkspace，點擊打開 Xcode。
2. Build。

• 點擊左側欄目找到UMALL項目，然後再中間的面板中輸入新的版本號（Version 和 Build 通常一樣）。
• 將設備設為"Any iOS Device"，並command+B來 Build，並進行實機測試。

3. 歸檔並發佈。

• Build 成功後，點擊頂欄 Product->Archive 歸檔，隨後在彈出的頁面中一直點擊確認。
• 最後點擊 Distribute App 按鈕發佈。

4. 到Appstore Connect 頁面查看並提交審核。
5. 注意：

• 一個 Build 號只能用一次。如果 build 失敗則更換 build 號，通常加一個小版本即可（如 2.2.0->2.2.1）。
• 檢查Info.plist的App Uses Non-Exempt Encription選項，必須設置為 No，否則會被 Apple 禁止上傳。

6. 發佈注意：

• 切換 Any iOS Device arm64 進行 Build
• 使用 Product - Archive 進行封包，如提示React-Core.common字樣的問題，在 Pods 中刪除非React-Core.common-CoreModulesHeaders的相似文件，再進行 Build 與 Archive

🤖 Android 打包

1. Android 端需保存好.keystore或.jks文件。編譯出包時，將該文件放置在android/app目錄下，以作 App 密鑰。
2. Android 打包，需要保證 jdk 版本為18.0.2.1
3. 在 ./android 目錄下，使用 gradlew assembleRelease 打包 APK 文件，但似乎會出現密鑰不正確的問題無法繼承安裝。
4. 在 ./android 目錄下，使用 gradlew bundleRelease 打包 Google Play Store 所需的 .adb 文件。

🐛 故障排除

在此查看Android 解決方案與iOS 解決方案

---

 

⛵ 維護須知

1. 澳大日曆更新。從 https://reg.um.edu.mo/university-almanac/?lang=zh-hant 獲取 ics 文件；使用任何工具將 ics 轉為 json（course-data-parse 倉庫內也有 icsToJSON 工具），例如 https://ical-to-json.herokuapp.com/。務必注意最終 json 中的 key 必須為小寫。覆蓋 src/static/UMCalendar/UMCalendar.json 中的內容即可。
   • 按照程序注釋增加校曆的繁體中文翻譯內容。
2. 澳大課程更新。使用預選課 Excel，使用 Excel to JSON 工具獲得 JSON 數據，放入src/static/UMCourses/offer courses.json。
   • 按照程序注釋增加開設課程的繁體中文翻譯內容。
3. icon 更新。使用 https://www.appicon.co/ 生成 iOS icon 文件，使用 Android Studio 生成 Android icon 文件（Studio 生成的文件最全面，適配各個廠商的 UI）。