從工具開始,理解一個 App 怎麼運作
建立專案、啟動模擬器、改動畫面,再把程式變更保留下來。這幾個動作,是後續每次開發都會重複使用的基本流程。
先閱讀共通的 Git 基礎,再依 Android 或 iOS 路線準備開發環境。最後透過簡單的輸入與列表練習,把語言、元件和狀態串起來。
用 Git 保留每一步變更
Git 管理程式的版本,Gitea 提供遠端 repository 與協作介面。先區分工作目錄、暫存區、本機提交與遠端儲存庫,就能理解 commit 和 push 的差別。
先看變了什麼,再決定怎麼記錄
在已建立的本機練習 repo 裡,可以先用以下指令查看變更:
git status
git diff
git log --oneline -5status 查看檔案狀態;diff 比較已追蹤檔案尚未暫存的改動;log 查看既有提交。空 repo 尚未有提交時,log 不會有歷史可顯示。
之後再練習選取檔案加入暫存區、建立提交,以及在分支上修改功能。新的專案先整理好平台適用的 .gitignore,讓建置產物、個人 IDE 設定與憑證留在本機。
分支與 Pull Request
分支讓一段工作有獨立的變更紀錄,Pull Request 則整理這段工作的差異與討論。先掌握這個概念,再閱讀 Gitflow 的分支安排;Gitflow 是協作方式的一種,實際流程依 repo 約定選擇。
用 Android Studio 跑起 Compose
先依官方安裝文件確認系統需求,再安裝相容的穩定版 Android Studio。建立採用 Kotlin 與 Compose 的 Empty Activity 專案,使用模擬器或已設定好的 Android 實機執行。
- 建立並執行最小專案讓範本畫面先正常顯示,再修改其中一段文字,重新執行確認修改出現。
- 跟著官方教程建立元件閱讀 Android Basics with Compose 的 Unit 1、Unit 2,練習文字、按鈕與輸入。
- 配合語言練習理解型別以 Kotlin Koans 補充 null safety、data class 與 lambda,連回畫面中的實際寫法。
畫面為什麼會更新?
Compose 用 composable 函式描述畫面。可觀察的 state 改變時,讀取這些狀態的相關 composable 會重新執行,更新對應的 UI。先用一個按鈕改變計數或文字,就能觀察資料與畫面的關係。
Kotlin 的可空型別將「值可能不存在」寫進型別;data class 適合表達一筆資料;lambda 則常用來描述按下按鈕後執行的動作。這些概念會在下一篇的裝置列表再次出現。
用 Xcode 跑起 SwiftUI
Xcode 與 macOS、模擬器及實機系統有版本相容性關係。先查看目前 Mac 的 macOS 版本,對照 Apple 的 Xcode 支援表,再選擇可使用的版本;建立 SwiftUI 專案後,先在可用的模擬器執行。
- 確認工具能配合現有環境對照 Xcode 支援表,確認開發工具與測試裝置的版本。能在模擬器執行後,再安排實機連線。
- 建立第一個 View跟著 Develop in Swift 的 SwiftUI 入門單元,修改範本文字與畫面配置。
- 觀察資料改變後的畫面使用按鈕修改 @State,觀察文字或列表隨狀態更新。
View 與狀態的關係
SwiftUI 用 View 組合畫面,@State 適合保存 View 擁有的局部狀態。狀態改變後,SwiftUI 會更新相關畫面。Swift 的 Optional 則表示資料可能不存在,取值前要選擇合適的處理方式。
需要更多練習時,可搭配 100 Days of SwiftUI。範例使用的 API 要和目前 Xcode、Swift 及 deployment target 相容,遇到差異時先確認版本,而不是直接把整個專案升級。
用一個小列表,串起輸入與狀態
完成基本元件練習後,可以做一個簡單的待辦列表:輸入文字、按下新增、把項目顯示在列表上,再加入刪除操作。資料先放在記憶體,就能把注意力放在操作如何改變狀態。
重新啟動後資料消失,是記憶體儲存的預期結果;這個練習聚焦畫面狀態。
觀察空白輸入、新增一筆、連續新增與刪除最後一筆的差別。列表為空時可以顯示提示文字,按鈕則依輸入內容決定是否可操作。這些行為稍後都能沿用到裝置列表與登入表單。
把練習換成 SHM 的資料。
當開發環境能執行、基本元件和狀態已熟悉,就能把列表的資料換成站點與裝置。下一篇使用固定 JSON 開始,不必等真實 API 才能建立畫面。
第 2 週:從資料到畫面