SwiftUI iOS App 入門課程期末專題-終極哈利波特！

（一）App操作影片＆Gif：

（二）Github連結：

Chinger-Chang/FinalApp

（三）特製的 App 畫面截圖及文字說明：

1. 串接API

一開始還在想期末到底要做什麼時，看到老師有提供哈利波特api的網址，毫不猶豫立馬決定了主題，畢竟之前我的功課都是哈利波特!

第二個api我思考了很久，最後決定用哈利波特壁紙，一開始選擇了Google Search Api，結果搞了很久不知為什麼一直抓不到東西，用了同學的方法也上網查了資料，api也換了幾個還是沒成功，之後改用Flickr，在老師給的程式上成功呈現出哈利波特壁紙後移到自己的程式發現不知怎麼把他顯示在tapview，嘗試半天後發現超出理解範圍以及時間不夠我就先放在一旁了，好可惜(github裡面看得到程式)😢

func GetCharacter(){
        let urlStr =
        "https://www.potterapi.com/v1/characters?key=$2a$10$NdVzFYYO8xalSWuVCNzWcOgT.lT4Yf3V.Uc7OqpHAyjmJUKf9GPZq"
        if let url = URL(string: urlStr) {
        URLSession.shared.dataTask(with: url) { (data, response , error) in
        let decoder = JSONDecoder()
        if let data = data, let characterResults = try? decoder.decode([Character].self, from: data) {
                         self.characters = characterResults
                     }
                     else{
                         print("error")
                     }
                 }.resume()
         }
    }

2.UIImagePickerController

Button(action: {
                self.showSelectPhoto = true
            }){
                VStack{
                    selectImage
                        .resizable()
                        .renderingMode(.original)
                        .scaledToFill()
                        //.frame(width: 350, height: 220)
                        .clipped()
                    Text("放入你拍攝的場景吧！")
                      .font(Font.custom("GillSans-Bold", size: 25))
                      .foregroundColor(Color(red: 255/255, green: 48/255, blue: 48/255))
                    } .padding(20)
                    .background(Color(red: 255/255, green: 193/255, blue: 193/255))
                    .cornerRadius(30)
                }
            }
            .sheet(isPresented: $showSelectPhoto){
                ImagePickerController(showSelectPhoto: self.$showSelectPhoto, selectImage: self.$selectImage)
            }

3.SFSafariViewController

一開始主畫面就連結到哈利波特官網

.sheet(isPresented: $showWebpage) {
SafariView(url: URL(string: "https://www.wizardingworld.com/collections/harry-potter-at-home")!)
}

4.使用MKMapView，WKWebView

用MKMapView呈現知名哈利波特景點

struct ExtractedView: View {
    @State private var annotations = [MKPointAnnotation]()
    var lat:Double
    var lon:Double
    var place:String
    var body: some View {
        VStack {
            Button("標記") {
            let annotation = MKPointAnnotation()
            annotation.coordinate = CLLocationCoordinate2D(latitude: self.lat, longitude: self.lon)
            annotation.title = self.place
            self.annotations.append(annotation)
        }
        MapView(coordinate: CLLocationCoordinate2D(latitude: self.lat, longitude: self.lon),annotations: self.annotations)
        }
    }
}

用WKWebView呈現每一集哈利波特預告

WebView(urlString: movie.url)

5.使用 SPM 加入第三方套件

使用Kingfisher呈現圖片，這是從同學那參考的，不錯用，可惜的是我後面才做這個功能，不然可以省掉很多麻煩。

onevcat/Kingfisher

import KingfisherSwiftUI
KFImage(URL(string: "https://img.jakpost.net/c/2019/06/01/2019_06_01_73727_1559403221._large.jpg")!)

6.使用到動畫

7.使用 Gesture

List(characters.indices, id: \.self) { (index)  in
                    CharacterRow(character: self.characters[index])
                .onTapGesture {
                   self.showCharacterDetail = true
                   self.nowIndex = index
                    }
            }

8.儲存資料在 document 資料夾

儲存咒語列表，關上模擬器重開仍一樣

9.使用到 EnvironmentObject

@EnvironmentObject var spellData : SpellData2
SpellList()
              .tabItem{
                  Image(systemName: "wand.and.stars")
                  Text("學咒語")
              }
            
          }
          .environmentObject(spelldata)

10.利用AVSpeechSynthesizer 講話

這是上次使用的功能，在學咒語那邊

.onTapGesture {
                let utterance = AVSpeechUtterance(string: "\(episode1[self.episodenum].name)")
                utterance.rate = 0.3
                utterance.voice = AVSpeechSynthesisVoice(language: "en-GB")
                let synthesizer = AVSpeechSynthesizer()
                synthesizer.speak(utterance)
            }

（五）appetize.io連結：

Appetize.io - Run native mobile apps in your browser

（五）心得：

沒想到最後一次作業還能延續哈利波特的主題，剛好可以把之前做的都結合起來，可能是沒好好上課，在串接Api用了最久，結果還沒用完整，真的很讓人生氣，不然如果照片牆有成功那一定很美，加上比較晚開始，所以美化方面只能稍微用用，幸好之前的程式都有好好寫可以拿來將就一下。

寫的時候發現真的有很多功能可以套用，非常方便，我覺得對於list,for還有資料型態上的用法我還有待加強，有時真的會搞混，導致在小地方用很久，而這個app還有很多想加以及改善的地方，希望之後能有機會繼續修改他們。

感謝彼得潘大帥哥這學期的指導，簡報都超詳盡而且有些範例還會給程式，感覺之後如果需要寫Swiftui這些資料一定幫助很大，這學期經常待在iOS教室，每次都在想不如我就買一台蘋果電腦好了，這大概是我這學期最常說的話哈哈，雖然每次功課都花了不少時間，但因為都是做自己喜歡的主題，所以也很開心，甚至想把哈利波特的書和電影再重新看一遍！總言而之這學期在這堂課收穫滿滿，再次感謝老師。