植物圖鑑 APP
Published in
Jan 19, 2021
- gif
- GitHub：https://github.com/00657106-ios/00657106_Final
- 特製的 App 畫面截圖三張
- 文字說明：該作品是包含植物資料API的一個APP，裡面包含各種植物的圖片、一般名稱、學名相關資料，除了可以知道一些沒聽過的植物名稱之外，還可以看到該植物長什麼樣子，是一個可以增加課業之外知識的APP，進入APP之後看到的第一個畫面為植物圖片APP的文字介紹，原本這個畫面預計要播放一些動畫，但是因為有衝突所以就拿掉了(後面的文章會說明原因以及東西放到哪了)，點進去以後就是我們的APP主體，豐富的植物種類及預覽圖，由左到右的tabItem依序為首頁，在首頁看到喜歡的植物圖片可以點進去看大圖以及他的名稱的相關內容，點擊該植物的學名之後，植物圖片會播放一段動畫，接著是植物清單(沒有圖片，全部都是植物名這樣讀取比較快)、包含特殊動畫、功能並且可以操作的植物，最後是選擇照片的功能。
這是我的植物APP的Icon：一顆可愛的高麗菜。
- 將作品上傳到 appetize.io，分享 App 連結，從網頁即可操作 App。
- 加分功能: App Demo 影片
必備功能：
- 以 TabView & NavigationView 製作多頁面 App。
- 串接後台的 API 抓取 JSON 資料後以 List 顯示，點選 row 可到下一頁顯示 detail。
至少使用到兩個 API，使用愈多 API 分數愈高。(上課範例以外的 API) 比方串接電影 API，Youtube API，Dcard API。以下電影 TMDB API 的 Get Popular & Get Top Rated 代表 2 個 API。
使用到植物相關資料的API的function，可以將網路上的植物資料抓下來變成Array的型態之後再去分別抓取資料來顯示。
加分: 採用 MVVM 架構串接後台 API。
這個應該沒有..
- 使用 UIViewControllerRepresentable 加入 UIImagePickerController 選照片。
使用上課時教的從預設路徑去抓電腦裡內建的圖片，可以選照片之後再把所選的照片覆蓋APP預設的圖片。
- 將 UIImagePickerController 選的照片或網路上抓到的圖片存到 Document directory，下次 App 打開時可以看到。
- 使用 UIViewControllerRepresentable 加入 UIActivityViewController 實現分享功能。
- 使用 UIViewRepresentable 加入 UISearchBar
- 使用 SPM 加入第三方套件。(不包含上課範例提到的 URLImage)
這幾個功能研究了幾個小時之後仍然不太懂要去哪邊設定圖片路徑以及如何進行分享以及SPM的使用會讓程式碼太複雜，UISearchBar植物API包含的內容顯示在APP內以後程式碼變得相當龐大且複雜，之後要再實作這些功能會直接讓整個APP排版跑掉，要加入新功能變得非常困難部分，因此這部分沒有辦法完成。
- 使用到動畫。
左邊的為每一種植物的相關資料，點選他的學名之後會產生旋轉的動畫，每一種植物都有這個功能唷。
右邊的花是只要點選到這個畫面就會自己一直產生類似波紋的動畫。
- 使用 Gesture。(不包含 TapGesture)
下面那顆高麗菜就是Gesture的主角，可以把那顆高麗菜到處丟。
- 使用到 EnvironmentObject。
抓到json資料之後要用到的功能之一，這樣才能共用資料
- 使用 Core Data 儲存資料，比方加入收藏功能儲存網路抓取的資料。
這個也…研究不出來，好難用。
- 使用 WidgetKit 製作 widget
上課教到的widget，會在螢幕顯示當前的時間，屬於一個不知道可以做什麼的功能，可能可以提醒你該吃飯睡覺吧…
- 使用到至少一個沒教過的功能技術，使用愈多分數愈高。可在文章裡特別說明使用哪些沒教的技術。
該動畫的呈現方式透過尋找網路其他動畫的呈現方式，進行研究並且拼貼出來的，原本想放在APP開啟後的第一個畫面，但是這個動畫功能似乎會跟NavigationView衝突，不管怎麼改位置都不行，如果使用ZStack該圖片會整個消失，只剩下NavigationLink的文字在螢幕上，如果讓此圖片包含在NavigationView裡面，動畫顯示的方法會跑掉，產生一個不是我想要的畫面，因此把它放在另外一個畫面內才會呈現我想要的動畫方式。
