跳到主要內容
Fu Yi-Sian
回到專案列表

大學專題 · 資工進二

淡水走走日記 App

Android Studio 客製化 App 專題:先以 Figma 完成 UI 設計,再實作 ListView 景點瀏覽、記事本編輯與 Google Maps 導向。

完整互動介面
3頁完整互動介面
獨立完成設計與開發
100%獨立完成設計與開發
Android StudioJavaFigmaXML

專題資訊

  • 題目:淡水の走走日記
  • 指導教授:林偉川
  • 學生:資工進二 208410133 傅譯賢

動機

豐富自然景觀,是淡水的驕傲,在淡水上課當然也少不了體驗當地四季的美貌。當然現在疫情期間不能出門,在家可以利用手機 App 好好探討,看看生活周遭是否有許多景點沒有去注意到呢?智慧型手機普及化,在家也能安全地遊覽景點,看看影片、照片、地圖過個癮,順便規劃出幾套旅程也不錯。

研究目的

Android 系統開放讓各界可以客製化,運用 Android Studio 製作出許多更人性化的 App,添增我們生活的便利性,也使我們了解 Android 系統運作流程。所以藉由這次的專題了解 Android 平台開發以及資源上的運用,也可以了解線上的 App 如何運作,精進上課所學並加以實作,進而提升對程式軟體開發流程的熟悉度。

如何實作

觀察線上旅遊 App,擬定要達成的成效,先為 App 製作 Figma UI 設計,再藉由參考自己的設計圖,在 Android Studio 中完成介面預期效果,並套用相關上課的功能。

第一個介面製作了標題、輸入框以及 Toast,將第一頁輸入的暱稱顯示在第二頁左上方。第二頁主要呈現 ListView 的陣列,參考 YouTube 線上影片支援調整,使預期功能得以實現:需要多建立一個 .xml 檔設計出 list_item,再藉由 .java 設定路徑,使得陣列可以正常呈現。同一頁中我也多加了三個不同功能的 Button,可以回到首頁、前往記事本、前往地圖查看,運用 OnClickListener、Intent 和 if 判斷完成路徑。

第三頁是製作記事本,可以將前一頁想記錄下來的行程記錄在此頁,同樣做了一個 Button 能回到上一頁,長按清除項目,點一下可以編輯內容,這些是運用 onItemClick、onItemLongClick 去建立的。這次專題整合了一些上課內容實作,並加以改進。

預期成效

  • 剛進入 App 會出現 Toast 顯示「您好!」,需輸入暱稱才可以進入;未輸入則無法進入,Toast 顯示「your name not enter」。
  • 進入第二頁,左上方接收到暱稱並顯示「XXX 先生/小姐」,ListView 可以顯示多筆資料(包含照片、景點名、景點種類、評分數)。
  • 點選資料能複製景點名稱;上一頁按鈕可回到首頁,記事本按鈕前往記事本紀錄行程,右下角按鈕前往 Map 查看,能打開 Google Maps 並導入對應頁面。
  • 進入記事本,按一下 List 可以進入編輯,也可以貼上剛剛複製的景點名,可以儲存或取消編輯。儲存後回到記事本,下方 Toast 顯示編輯項目與編輯日期時間;長按可以清除編輯後的資料。

最後結論與未來展望

目前 App 是雛形,未來若是以相同想法繼續製作,可加入更多方便的功能,例如:SQLite 資料庫建立(為資料庫更新資料)、點 ListView 的項目時前往對應頁面介紹(更直覺讀取資訊)、加入與好友互相分享(前往通訊平台以 email、簡訊分享)、追蹤網友旅遊清單功能、聊天室,以及依照使用者偏好顯示更多推薦(資料庫的篩選)、因應地區縮放與更改推薦。這樣功能提升,說不定之後也可以推廣至 App Store 供更多使用者使用,讓此 App 更能發揮帶給人們方便的意義。

心得(原文)

這次的專題讓我了解,原來 Android App 可塑性這麼大,客製化的 App 變得不是一件那麼困難的事情。這次有許多功能還想再增進,像是更直覺的觸碰對應景點顯現 map 資訊,這樣讀取時會更方便;再來就是記事本可以真正達成儲存,需要到資料庫儲存內容。

我發現 App 的介面設計也是一門學問:符合直覺性的操作、方便性等,讓一個 App 可以正常運行,需要除好幾次的錯誤。當然也遇到許多困難,像是 ListView 陣列的顯示客製化,我上網參考了很多資料才解決。現在剩一個小問題是我的模擬器無法連上網,但是執行 App 按鍵至 map 時可以正常地執行,安裝至手機上能夠成功,希望之後可以改善。

這次專題寫出來的 App 又更進一步熟悉 Java 和 Android Studio 的語言邏輯,最後也要謝謝教授的指導才能完成這次的專題。

畫面截圖

1 / 6先在 Figma 完成三頁的介面設計與流程