8주차_3일차_앱 개발 심화_동영상 앱 만들기_TIL

---

---

<TIL>
오늘은 동영상 앱 만들기 실습을 해봤다.
낮에는 강의보면서 공부하고,
오후에는 해설강의 보기 전에 먼저 만들어봤다.
4시에 Standard반 수업을 듣고,
저녁 회의 전까지 동영상 재생 앱 마무리하는 시간을 가졌다.
(스탠다드반 컬렉션 뷰 연습은 내일 할 예정)

지난 팀 프로젝트 때,
검색 페이지를 맡으면서 URLSession을 사용했어서
크게 어렵지는 않았던 것 같다.
(오늘의 바보 썰 하나 있음 ㅋ.ㅋ)

내일은 iOS 앱 개발 심화 강의 정리하고,
오늘은 동영상 앱 만들기 내용 정리를 간단하게 해보려고 한다.

---

---

AVKit을 사용해서
동영상 재생 앱 만들기

---

 

이번 심화강의 마무리 과제(?)
요구사항을 README에 정리해봤다.

<github 주소>
(https://github.com/yeggrrr/YeggrrrAVPlayerApp)

 

<실습에서 사용한 Dummy API 정보>

[GET]https://gist.githubusercontent.com/poudyalanil/ca84582cbeb4fc123a13290a586da925/raw/14a27bd0bcd0cd323b35ad79cf3b493dddf6216b/videos.json

---

< 앱 구현 전, info.plist 설정 >

 

info.plist - ‘App Transport Security Settings’ 항목 생성 - 하위에 ‘Allow Arbitrary Load’ 항목 생성 후 ‘Yes’로 설정

---

 

< Model >

 

struct VideoInfo: Decodable {
    let id: String
    let title: String
    let thumbnailUrl: URL
    let duration: String
    let uploadTime: String
    let views: String
    let author: String
    let videoUrl: URL
    let description: String
    let subscriber: String
    let isLive: Bool
}

VideoInfo 파일을 하나 생성해서
dummy API로 해당 Response JSON을 확인하여
그 형식에 맞게 만들어주었다.
(안쓰는 정보들은 빼도 되지만, 우선 다 넣음) 

 

---

< UI 설정 >

아직 코드 베이스가 익숙하지 않아서 마무리 과제는 스토리보드를 활용했다.
(어차피 이번 개인 과제는 코드 베이스..🥹 피해갈 수 없음)

Show Library에서
Table View & Table View Cell & Image View & Label
을 추가해서 오토레이아웃을 잡아주었다.
(이제 스토리보드 오토레이아웃은 나름..마스터 했을지도..?😀)

---

< Outlet 연결 >

①
TableViewCell 파일 새로 생성해주고,
CustomClass에 Class 설정해주기!
Identifier도 잊지말기!

②
TableViewCell 코드에 
ImageView, Label 아울렛 연결

TableView는 VC 코드에 아울렛 연결!

③
코드에 static으로 identifier 저장해주기
static let identifier = "VideoTableViewCell"
(이렇게 해주면, 나중에 쓰기 편함)

---

< Cell >

우선, 셀에서 작성해주어야하는 것은
로직을 구성하는 썸네일 셋팅, 타이틀 셋팅!
이 두 가지 메서드를 구현하면 된다.

    func setThumbnail(imageURL: URL) {
        DispatchQueue.global().async { [ weak self ] in
            if let data = try? Data(contentsOf: imageURL), let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.thumbnailImage.image = image
                    }
            } else {
                DispatchQueue.main.async {
                    self?.thumbnailImage.image = UIImage(systemName: "video.fill")
                    self?.thumbnailImage.tintColor = .darkGray
                }
            }
        }
    }

이렇게 setThumbnail 함수로 imageURL을 받아오고, 
DispatchQueue를 사용하여 비동기적으로 작업해주기!
그리고 위와 같이 imageURL를 데이터화 해주는 코드를 작성해주면 된다.
(메모리 누수를 해결하기 위해서 weak self 사용)

그리고 작업이 잘 이루어졌을 때에는 main에서 비동기 처리가 되도록 해주었다.
(UI 작업은 모두 main에서 해줘야함)

반환이 되지 않고, 이미지 URL이 없는 경우에는
빈 화면이 나오지 않도록 "Video.fill"이라는 디폴트 이미지를 넣어주었다.

    func setTitle(title: String) {
        self.titleLabel.text = title
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        self.thumbnailImage.image = nil
    }

다음은 타이틀 셋팅해주기!

setTitle 함수에서 title이라는 인자를 받아오도록 만들고,
연결해논 titleLabel의 text에 넣어주기!

그리고
prepareForReuse()를 사용해서 재사용되는 셀의 속성을 초기화 해주었다.

(오픈 API를 사용해서 데이터를 받아오게 되면, 인터넷 상황이 좋지 않은 경우에 빠르게 스크롤을 했을 때,
해당 이미지가 있어야하는 곳이 아닌 다른 셀에서 보여지는 경우가 있다.

이런 현상은 셀이 재사용이 되기 때문에 이미지와 텍스트가 올바르게 위치하지 않는 것이다!!

이런 문제를 위와 같은 코드로 해결할 수 있다.😆)

---

< VC >

video 데이터를 담을 리스트 변수를 생성해줬다.

var videoInfoList: [VideoInfo] = []

그리고 앞서 스토리보드로 만들었던 테이블 뷰에 대한 설정부터 해주었다.

extension ViewController:  UITableViewDelegate, UITableViewDataSource {
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return videoInfoList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: VideoTableViewCell.identifier, for: indexPath) as? VideoTableViewCell else { return UITableViewCell() }
        
        let product = self.videoInfoList[indexPath.row]
        cell.setThumbnail(imageURL: product.thumbnailUrl)
        cell.setTitle(title: product.title)
        return cell
    }
}

그리고 viewDidLoad에서

        videoListTableView.dataSource = self
        videoListTableView.delegate = self

해주면 된다ㅎㅎ


+


추가적으로 데이터가 느리게 넘어오는 경우에
자연스럽게 보여질 수 있도록
Kingfisher 패키지를 활용해서 추가해줬다.

        let placeholderImage = UIImage(systemName: "video.fill")
        cell.thumbnailImage.kf.setImage(with: product.thumbnailUrl, placeholder: placeholderImage)
        cell.thumbnailImage.kf.indicatorType = .activity
        cell.thumbnailImage.kf.setImage(with: product.thumbnailUrl,
                                        options: [.transition(.fade(0.5)), .forceTransition, .keepCurrentImageWhileLoading])

다음은 데이터 받아오기!!
(URLSession 활용)

let urlString = "https://gist.githubusercontent.com/poudyalanil/ca84582cbeb4fc123a13290a586da925/raw/14a27bd0bcd0cd323b35ad79cf3b493dddf6216b/videos.json"

    func getData() {
        guard let url = URL(string: urlString) else { return }
        let urlRequest = URLRequest(url: url)
        URLSession.shared.dataTask(with: urlRequest) { data, request, error in
            guard let data = data else { return }
            
            do {
                let decorder = JSONDecoder()
                let result = try decorder.decode([VideoInfo].self, from: data)
                self.videoInfoList = result
            } catch {
                print("error:\(error)")
            }
        }
        .resume()
    }

ㅋㅋㅋㅋㅋ 여기서 등장하는 바보썰..
guard let data = data else { return }
에서 print로 데이터 잘 넘어왔는지 확인하는데..
잘 찍히길래 '오.. 잘 넘어오는군..'

그러고 아무리 실행해도 안뜨길래 멘붕🤯
코드를 이리저리 바꿔보고 '내가 잘못 알고있나..? 이게 아닌가..?'
혼자 난리난리 하다가

튜터님 찾아가서 이야기하다가 발견된..ㅋㅋㅋㅋㅋㅋㅋㅋ

guard let data = data else { return }
다음에 error 있으면 확인해야지~ 하고 썼던
guard let error = error else { return }
이녀석을 지우지 않아서 생긴 문제...ㅋㅋㅋㅋㅋㅋㅋ....

data가 잘 넘어왔으니, error는 없을텐데
error를 guard문으로 남겨놔서 아래 do catch 코드가 실행되지 않았던...😂

내 눈에만 보이지 않는.. 찾아가면 발견되는..MAGIC..🪄

---

아무튼!! 이렇게 하고!
tableView를 reloadData를 해줘야하니

do문에서 

DispatchQueue.main.async {
	self.videoInfoList.reloadData() 
}

해주거나!!

var videoInfoList: [VideoInfo] = [] {
        didSet {
            DispatchQueue.main.async {
                self.videoListTableView.reloadData()
            }
        }
    }

앞서 만들었던 videoInfoList에서 didSet으로 reloadData 해주기!

---

이제 거의 마지막 단계!!
AVPlayerContoller 띄우기!

    func presentAVPlayerViewController(videoURL: URL) {
        let playerController = AVPlayerViewController()
        let player = AVPlayer(url: videoURL as URL)
        
        playerController.player = player
        
        self.present(playerController, animated: true) {
            player.play()
        }
    }

이렇게 해주기!
(import AVKit 해줘야함)


마지막으로 테이블 뷰 셀이 선택됐을때의 코드만 작성해주면 끝!!

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let product = self.videoInfoList[indexPath.row]
        presentAVPlayerViewController(videoURL: product.videoUrl)
    }

 

---

실행해보면!

0

 

짠!✨

(전체 코드는 위에 github에 올려뒀습니다!)

---