iOS期末專題App-BanG Dream！少女樂團派對(續作業二主題)
BanG Dream！是日本武士道公司旗下以同名漫畫為基礎所發展出來的一個企劃，漫畫主要在描述一群女高中生們的樂團活動所展開的精彩故事，隨著時間發展，BanG Dream！企劃已推出了達三季的電視動畫、劇場版電影、以及推出音樂遊戲等等。目前團體陣容也越來越精彩，總共有Poppin’Party、Roselia、RAISE A SUILEN、Morfonica、Afterglow、
Pastel＊Palettes、Hello, Happy World……等等相當多的團體
原本也在尋找到底要用什麼樣的API來做這次作業比較好，前前後後也花了不少時間在選擇API和串接API，後來誤打誤撞發現這個主題竟然也有別人整理好的API，仔細想想如果做很普遍的主題，很有可能和別人的成品主題差不多，所以這次就選用了BanG Dream! Girls Band API來做這次的作品，雖然這個API算是比較小的API，但我想完成的作品一定很符合我的個人風格吧！
先附上之前作業二相關的文章：
回憶作業二當時資料都還要自己手動一個一個慢慢抓(汗，而且抓的圖片格式還不太一致，有了整理好的API可以串接後顯示角色列表真方便！
（一）App操作GIF
（二）Github網址
（三）部分App畫面截圖
（四）作業說明
★主畫面為使用5個TabView分頁製作的分頁畫面，角色與卡片列表選擇時以及企劃官方網站使用NavigationView導入下一個頁面
★接下來最重要的API部分，選用BanG Dream! Girls Band API，其中的兩個API，分別是
「http://bandori.party/api/members/」取得企劃角色相關JSON資料
以及
「http://bandori.party/api/cards/」取得音樂遊戲中卡片相關JSON資料
★在QRcode頁面中使用UIImagePickerController選擇手機相簿照片並顯示
★企劃官方網站的畫面使用SFSafariViewController在畫面上以sheet頁面來顯示網頁頁面
★演唱會畫面頁面使用WKWebView將Youtube中的演唱會影片內嵌到一個畫面中播放
★企劃官網頁面使用 SPM 加入KingFisher這個第三方套件，KingFisher可以很輕易地抓取網路上的圖片並進行處理，大幅簡化SwiftUI對圖片語法的處理，這裡用來顯示圖片，僅需要圖片遠端URL，就可以使用KingFisher語法直接把此連結當作圖片使用，還可以使用SwiftUI內定的語法來控制圖片大小與形狀等等，十分方便，不用再自己寫麻煩的程式轉換型別就能使用圖片了
★QRcode頁面在開場時讓QRcode播放動畫，漸入移動到畫面中間，並且QRcode使用Gesture來讓QRcode長按時能夠放大，並使用picker讓使用者可以選擇不同地區的手機音樂遊戲官方網站
★EnvironmentObject的部分，因為我的各頁面暫時還沒有什麼資料需要共享，所以只建立一個尚未使用到的角色資料charData，然後由TabView共享這份資料，等到有需要用到時再讓它出馬
★QRcode頁面可以用手機掃描，就可以傳送到不同地區的手機音樂遊戲官方網站，分別是如下網站：
★App擁有多國語言的功能，目前只設定了三種語言（繁體中文、日文、英文），在切換到不同語系的狀態下，有三個地方會不一樣，首先是App標題名稱會按語系決定，接著是App裡面的說明文字會跟著設定語言改變，最後是特別設定的顯示圖片在不同語系版本顯示的圖片也會不同，操作方法很簡單，但也很有趣就是了，過程最難的是要想怎麼把現有字串翻譯成別的語言……，翻譯真的是一件很痛苦的事情
多國語言的設定方法，我是參考以下文章來製作的：
在角色選擇頁面以及卡片選擇頁面中，加入了一點小小設計，在下方加入「觀看下一頁」的選擇按鈕，當按鈕被按下時，就抓取下一頁的JSON資料，然後將轉換過後的列表內容接在原來的陣列中，因此陣列就會從原來長度的地方加長，畫面就可以往下拉，看起來就像是更新選單的效果，現在還不知道如何實作滑到底就能自動更新，所以先使用按鈕代替。另外是每當使用者點選List中的項目觀看詳細資訊時，一旦回到原來的選擇頁面，因為我抓取資料定義在onAppear時抓取，導致同樣的資料會再度被抓取然後加進陣列中，變成陣列有同樣資料出現的情況，在這裡我的解決方法是紀錄第一頁是否已經載入以及紀錄當前抓取的頁數和目前的頁數，然後使用條件判定，當第一次進入第一頁時載入一次，之後無論如何跳入詳細頁面再回來都不會觸發再次抓取，其他頁數時，只有每當按下按鈕時當前的頁數會增加一，然後每次判定當前頁數不是現在頁數時才抓取資料，所以每次到新頁數時會抓取一次資料，之後就不會再重複抓取資料了。
原本想改滑到底就可以自動更新，不過參考了一些Youtube影片，還有Github文章等等資料，看起來要實作這個功能整個架構都要重刻，因為還有學校專題要做啊啊啊QQ時間實在很棘手，加上自己沒有自信有辦法自己再重新寫出整個架構，所以暫時還是保留按按鈕更新頁面，雖然有點冗，不過也算不錯的暫時替代方案
角色選擇頁面以及卡片選擇頁面仍然有些問題在，比方說使用者選擇List中的項目觀看詳細資訊時，下一頁按鈕不應該出現；還有抓取API的時候，有一些頁面會抓取失敗，錯誤訊息如下
我試過使用option來抓取圖片，如果沒有值就不顯示出來，不過仍然會有同樣錯誤訊息，而且觀察過JSON檔案資料，圖片應該都有URL而不是空值，如果不接收和圖片相關的任何資料就不會有錯誤訊息，但角色選擇頁面以及卡片選擇頁面大部分的圖片還是可以顯示，我想可能程式碼哪邊有出問題了，或是API出現問題了，更奇怪的是，兩三週前都還沒有這個奇怪的問題，一直找不出錯誤原因，所以暫時還沒有解決
（五）網頁操作App連結(appetize.io)
※建議開啟的時候使用較大螢幕的手機才不會跑版
（範例使用iPhone 11 Pro Max）
（六）加分功能：App Demo影片
※因為Medium塞不下太大的影片，加上轉換太久了，所以只取一小段長度，也犧牲了一些畫質
（七）結語
時間真的過得很快，轉眼間就已經學期末了，這學期寫App作業遇到很多的困難，尤其是因為Swift語言從來沒有接觸過，SwiftUI又是比較新的，很多時候真的會一直在紅色錯誤裡面打轉，感覺相當痛苦；加上自己沒有Mac電腦，所以常常來回跑Mac教室真的頗辛苦的。不過如果沒有Peter這堂課，或許這輩子不會想過有一天自己也能打造一個專屬於自己的App吧。雖然現在這樣程度要上架可能還遠，不過也算是一次很獨特的體驗吧。還是要感謝Peter整理這麼多文章和講義讓大家來看，不用自己在像天書的英文世界裡面打轉，真的是辛苦了！
