NETFLIX CLONE 10편 (유튜브 API 갖고오기)

• ✅ 유튜브 API 갖고오기 
• 구글 클라우드 플랫폼 웹 사이트에 들어가서 새 프로젝트 생성
• 생성된 프로젝트 내에서 API 키 생성 
• 유튜브 API 사이트에 들어가서 유튜브 Data API 키 생성 
• 생성된 유튜브 API 키와 유튜브 API를 받아올 URL 주소 상수로 선언
• 유튜브 API를 통해 데이터를 받아올 함수 선언
• 받아온 데이터를 기준으로 데이터 모델 생성
• 데이터 모델을 기준으로 서버로부터 받아온 데이터 확인

 

---

✅ 유튜브 API 갖고오기 

• 구글 클라우드 플랫폼 사이트 방문
• 프로젝트 생성 

https://console.cloud.google.com/welcome?project=netflix-416515

Google 클라우드 플랫폼

 

• 생성된 프로젝트 내에서 유튜브 API 키를 생성

https://developers.google.com/youtube/v3/docs/search/list?hl=ko

Search: list  |  YouTube Data API  |  Google for Developers

 

• APICaller 클래스 내에 유튜브 관련 상수 설정

struct Constants {
    static let API_KEY = "678025f9b853729922748d16feb442f9"
    static let baseURL = "https://api.themoviedb.org/"
    
    // Youtube API 키
    static let YoutubeAPI_KEY = "AIzaSyBGHqi6PWreXIPacV4y7lTCUVPEJE2YWqI"
    static let YoutubeBaseURL = "https://www.googleapis.com/youtube/v3/search?"
    
}

 

• 유튜브 API를 통해 서버로부터 데이터 받아오는 함수 생성 

func getMovie(with query: String) {
        guard let query = query.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) else { return }
        
        guard let url = URL(string: "\(Constants.YoutubeBaseURL)q=\(query)=\(Constants.YoutubeAPI_KEY)") else { return }
        
        let task = URLSession.shared.dataTask(with: URLRequest(url: url)) { data, _, error in
            guard let data = data, error == nil else { return }

            do {
                let results = try JSONSerialization.jsonObject(with: data, options: .fragmentsAllowed)
                print(results)
            } catch {
                print(error.localizedDescription)
            }
        }
        task.resume()
    }

 

 

• 위에서 받아온 데이터를 근거로 데이터 모델 생성 

⭐️ 불러온 데이터 변수 이름 그대로 사용할 것 ⭐️

 

import Foundation


struct YoutubeSearchResponse: Codable {
    let items: [VideoElement]
}


struct VideoElement: Codable {
    let id: IdVideoElement
}


struct IdVideoElement: Codable {
    let videoId: String
    let kind: String
}

 

•  getMovie 메서드에 데이터 모델 적용

 // Youtube에서 영상 가져오기
    func getMovie(with query: String, completion: @escaping (Result<VideoElement, Error>) -> Void) {
        
        guard let query = query.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) else { return }
        
        guard let url = URL(string: "\(Constants.YoutubeBaseURL)q=\(query)&key=\(Constants.YoutubeAPI_KEY)") else { return }
        
        let task = URLSession.shared.dataTask(with: URLRequest(url: url)) { data, _, error in
            guard let data = data, error == nil else { return }

            do {
                let results = try JSONDecoder().decode(YoutubeSearchResponse.self, from: data)
                completion(.success(results.items[0]))
            } catch {
                completion(.failure(error))
                print(error.localizedDescription)
            }
        }
        task.resume()
    }

 

• 홈 화면 내에서 컬렉션 뷰 셀 안의 데이터를 터치하면 해당 셀의 유튜브 데이터를 불러오게 설정
• extension 부분에 작성

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        collectionView.deselectItem(at: indexPath, animated: true)
        
        let title = titles[indexPath.row]
        guard let titleName = title.original_title ?? title.original_name else { return }
        
        
        APICaller.shared.getMovie(with: titleName + " trailer") { result in
            switch result {
            case .success(let videoElement):
                print(videoElement.id)
            case .failure(let error):
                print(error.localizedDescription)
            }
        }
    }

 

• 에뮬레이터를 호출하고 콘솔창에 확인
• 에뮬레이터에서 컬렉션뷰 셀에 있는 영화 데이터를 누르면 그에 대한 유튜브 API를 보여준다. 
• 아래에 "The data couldn`t ~~" 이부분은 해당 셀에 영화가 아니라 TV 프로그램 같은게 있을 경우에 뜬다. 

 

https://youtu.be/O0G2kwfTGWM?si=T6AYgmogvs0fGtPs