專案:建立 My City 應用程式

1. 事前準備

在本單元中,您已瞭解以下內容:

  • 如何使用多個螢幕建構應用程式
  • 如何建構調整式版面配置,讓應用程式適用各種螢幕尺寸
  • 應用程式架構的重要性
  • 確保應用程式遵循活動生命週期,避免浪費不必要的資源
  • 如何在裝置設定變更後保留使用者狀態

看來,您已瞭解不少內容了呢!

完成程式碼研究室的步驟後,您應該或多或少瞭解這些新概念了,但將知識與技能應用在新的應用程式中,更能加深您的理解。

當您遇到全新情況、錯誤或需要自行設計解決方案時,您就可以學以致用。建議您回顧先前的應用程式和程式碼研究室,快速複習自己所學,並付諸行動。

當您嘗試自行解決這些問題,收穫會更多,也更貼近開發人員日常面臨的工作環境。瞭解該如何分析問題、進行疑難排解,以及搜尋資源,藉此找出解決方案,這本身就是一項技能。因此,建議您完成每個單元結尾的各項專案。心中有此動力並掌握背景資訊後,請查看以下有關單元 4 專案的提示。

必要條件

  • 能夠在 Android Studio 中建立及執行專案。
  • 熟悉 Kotlin 程式設計語言的基本概念
  • 熟悉如何在 Compose 中建立 UI 版面配置,以及如何根據不同螢幕尺寸調整版面配置
  • 能夠透過 Compose 新增及實作 Jetpack Navigation 元件
  • 能夠使用 ViewModel、UiState 和 Jetpack Navigation,以建議的應用程式架構實作應用程式

建構項目

  • 一款 Android 應用程式,能針對您居住的城市顯示活動和景點建議

軟硬體需求

  • 已安裝 Android Studio 的電腦

2. 總覽

恭喜您完成第 4 單元,課程已進入尾聲!

為深化您在本單元中學到的知識,您將建構一款應用程式,針對所選城市列出各種活動和景點建議。

這個應用程式應符合以下條件:

  • 含有多個畫面;例如,每個畫面都會顯示不同的建議類別。
  • 使用 Jetpack Navigation 元件,讓使用者能夠瀏覽應用程式。
  • 明確區分 UI 層和資料層。
  • 使用 ViewModel,並透過單向資料流 (UDF) 模式從檢視模型中更新 UI。
  • 使用可因應各種螢幕尺寸的版面配置。
  • 遵循 Material Design 的調整式設計導覽功能準則。

3. 收集應用程式內容

收集應用程式所需的內容,您可以寫在紙上,或輸入到文件中。在開始編寫應用程式前這樣做,也會更容易整理相關內容。

決定該應用程式要使用的城市或區域。建議您使用喜愛的城市或居住城市。您也可以指定更廣泛的區域來涵蓋多個城市。

根據所選城市選擇應用程式名稱。雖然這項專案稱為 My City 應用程式,但建議您根據自己的城市自訂應用程式名稱。

為您選定的城市建立不同的建議類別清單。舉例來說,您可以建立清單來建議:

  • 咖啡店
  • 餐廳
  • 親子景點
  • 公園
  • 購物中心

應用程式應包含多種不同類別建議的清單。請試著為每個類別提供至少 3 到 5 項建議,以免螢幕畫面看起來過於空蕩。

如果您想在應用程式中新增相片,請在這個階段收集相片。

4. 繪製應用程式畫面的草圖

請拿出一張紙,描繪應用程式各個畫面的樣子。您可以在畫面之間畫出箭頭,並在版面配置中加入按鈕,以展示使用者瀏覽不同畫面的方式。

這份草圖不需要非常細緻精美。主要目的是為導覽圖上的目的地和應用程式的整體版面配置制定概念。這些繪圖可協助您進行下一個步驟。

如果您在描繪應用程式草圖和導覽流程方面需要協助,請查看下列範例:

第一個畫面會列出類別。選取類別後,下一個畫面會顯示該類別的建議。如果選取建議,詳細資料畫面會顯示更多詳細資料。

您能否參考這個範例,繪製適合大型螢幕的應用程式設計圖和導覽流程?如需進一步協助,歡迎參閱引導您建構 Reply 應用程式的程式碼研究室

5. 規劃步驟

根據您描繪的應用程式草圖,寫出一般建構步驟。

例如:

  • 為建議地點建立資料類別。
  • 為建議的咖啡店製作螢幕版面配置。
  • 製作所有螢幕畫面的導覽圖。

這些筆記可協助您判斷應優先處理應用程式的哪個部分。

如要進一步整理,您也可以為要完成的順序決定編號。如果某個步驟需要您先完成其他步驟,請務必妥善安排各步驟的先後順序。

6. 實作應用程式

現在,您已大致瞭解應用程式的規畫,可以開始編寫應用程式了!

請建立專案,並逐一完成各項工作。如果某項工作需要較長時間,請耐心等候。建構這種複雜的應用程式時,往往並不能一蹴可幾。

提示:

  • 請參閱先前的程式碼研究室和 GitHub 程式碼存放區。
  • 查看其他 Compose 範例應用程式Now in Android 應用程式。請注意,相較於目前為止建構的應用程式,這些應用程式的規模更大且複雜。
  • 如果您在應用程式中發現錯誤,但不知道如何修正,請考慮使用 Android Studio 偵錯工具

7. 取得使用者的意見回饋 (可略過)

建議您完成這一節的事項,這是非常好的學習機會。如果您有可正常運作的應用程式版本,請向潛在使用者展示應用程式,並取得他們的意見回饋。

如果您擁有 Android 裝置,請在裝置上安裝該應用程式。或者,您也可以使用模擬器,但請注意,使用者可能不熟悉模擬器,也不瞭解模擬器與實際裝置的關係。

請盡量不要向使用者提供任何指引或指示,而是應將重點放在觀察使用者並提出問題,瞭解他們首次使用應用程式的可能方式。您可以留意他們如何與應用程式互動,並觀察對方是能以符合直覺的方式瀏覽應用程式,還是會感到困惑。想想他們是否能正常使用應用程式,或是不知道該如何使用應用程式?

確認他們瀏覽所有畫面,並與應用程式的每個部分互動。您可以向對方提出其他問題,包括以下範例:

  • 你對這個應用程式的第一印象是什麼?
  • 你喜歡這個應用程式的哪些方面?
  • 你是否有任何建議,可以協助我們改善應用程式?

最後,請考慮是否要將使用者的建議整合至應用程式,為他們提供更優質的體驗。

8. 使用 Resizable Emulator 測試應用程式

建議您測試在 Resizable Emulator 上建構的內容,看看應用程式在不同大小的螢幕上是否可正常運作。請務必調整模擬器的大小,並試用不同的裝置選項 (如下圖所示)。

您可以在下拉式選單中,針對可調整大小的模擬器變更裝置選項。

9. 祝一切順利!

希望您能建立理想的應用程式!如果一切都已大功告成,請使用 #AndroidBasics 主題標記在社群媒體上分享您的應用程式。我們非常期待看到您的應用程式未來發展,並瞭解可提供的推薦內容!