串接多種 API 製作Lady Gaga App(Youtube篇)

1.畫面截圖:

2.App操作GIF:

3.GitHub連結:

00657136/gaga

4.程式解說:

取得Json

Peter已經把大部分的東西都解釋好了，請參考此篇

#101 使用 YouTube Data API 抓取有趣的 Youtuber 影片 & MV

除了playlist外，我還串接了lady gaga頻道的資料

頻道的資料可以看一下google的網站

Channels | YouTube Data API | Google Developers

附上resource url：

https://www.googleapis.com/youtube/v3/channels?part=brandingSettings,snippet,contentDetails,statistics,status&id=頻道的id&key=你的apikey

畫面設計

每部影片點選後，下一頁就是影片的網頁

所以我們要把videoId傳到下一頁( youtubeVideoUIView)

NavigationLink(destination: youtubeVideoUIView(videoId: result.videoId))

再藉由WKWebView顯示該影片的網頁

import SwiftUI
import WebKit
struct youtubeVideoUIView: View {
    var videoId : String
    var body: some View {
            wkWebView(url: "https://www.youtube.com/watch?v="+videoId)
                .frame(width: UIScreen.main.bounds.width)
        
    }
}

wkWebView：

struct wkWebView : UIViewRepresentable{
    var url : String
    func makeUIView(context: UIViewRepresentableContext<wkWebView>) -> WKWebView{
        let webview = WKWebView()
        webview.load(URLRequest(url: URL(string: url)!))
        return webview
    }
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<wkWebView>) {
        
    }
}

詳細原理請見peter的文章

在 SwiftUI App 加入 UIKit View，比方網頁和地圖

至於navigationBar上的Youtube logo，是加了這張圖片

code：

.navigationBarItems(leading:
                    HStack{
                        Image("Youtube-Logo")
                            .resizable()
                            .scaledToFit()
                          .frame(width:UIScreen.main.bounds.width/4)
                    })

5.結語:

youtube是五個api相對容易的，推薦大家都可以嘗試看看