Toy Project/Netflix Style Application(iOS) 11

11. 오늘의 영화 구현

오늘의 영화 구현 Search에서 collectionView cell delegate는 구현했다. 하지만 우리는 아직 홈에서 cell을 클릭할때 Play하도록 구현하지 않았다. 해보자 데이터를 갖고 있는 상태에서 바로 띄우는 것도 가능하지만, 좀 다르게 해보자 재생버튼을 누르게 되면 오늘의 영화에 해당하는 title이 있을 것이고, 이를 SearchAPI를 통해 검색을 해서 네트워킹으로 데이터를 받아오고 데이터 안에 존재하는 url을 Player에 전달해서 재생해보겠다. 그런데 토토로는 그냥 지정한 것이지 랜덤으로 지정한 것은 아니다. 핵심은 home에서 header에 있는 데이터를 재생시키는 것이다. interstella에서 Totoro로 변수명을 변경했다. Header item의 title을 sear..

10. PlayerView

시작 전 PlayerViewController에 몇가지만 추가하자. player을 추가하고 AVPlayer객체로 생성한다. AVPlayer에 extension으로 compute property를 추가하는데 재생하고 있는지 여부를 판단하는 변수이다. 이제 실제 Player를 만들어 보자 우선 위의 코드를 살펴보면 변수 playerView의 경우 PlayerView!로 선언되어 있는데, 이는 Custom Class가 PlayerView로 지정되어 있어서 이다. PlayerView의 경우 개발자 공식 홈페이지에서 가져온 코드이다. 우리는 AVPlayerLayer를 이용하기 위해 Custom Class를 지정한 것이었다. developer.apple.com/documentation/avfoundation/avp..

9. PlayerViewController

Player storyboard에서 PlayerView를 만들것이다. View를 넣고 superView과 top, bottom, leading, trailing을 모두 0으로 맞춘다. 여기서 top, bottom의 경우는 safeArea가 아닌 superView에 맞춘다. 이제 이 흰색화면에서 영상이 재생되는 것이다. AVPlayer 이를 구현하기 위해서는 AppleMusic Application에서 사용한 것과 같이 AVPlayer를 사용한다. 음악, 동영상을 재생할 때 사용하는 API이다. AVPlayerView https://developer.apple.com/documentation/avkit/avplayerview AVPlayerLayer https://developer.apple.com/doc..

8. Player View 가로모드 구현

swift 11.4 버전 부터 simulator에서 Rotate 기능이 생겼다. Cmd + 방향키 로도 방향을 바꿀 수 있다. Netflix의 경우 동영상을 재생할때 알아서 가로모드로 바꾼다. 가로 Landscape, Horizontally 세로 portrait, vertical 실제 보여지는 화면은 이렇기에 Landscape(가로)로 미리 지정한다. Delegate 이제 CollectionView에서 cell을 클릭했을 때 영상이 재생되도록 하는 것이다. collectionView의 Delegate를 구현하면 된다. storyboard의 customClass와 identity를 PlayerViewController로 지정한다. 그럼 이제 SearchViewControllerDelegate에서 Playe..

7. Search 결과 구현 3 - OpenSource Kingfisher

Search 결과 구현 3- OpenSource Kingfisher UI update 우리가 데이터로 갖고 있는 것은 실제 thumbnail이 아닌 thumbnailPath이다. 즉, path(string) 정보를 갖고 image를 불러와야 update 가 가능하다. 물론 Networing로 직접 구현해서 가져와도 되지만 여기서는 외부 코드를 사용해보겠다. 오픈소스 서버에 있는 이미지를 쉽게 가져와서 캐싱하고 이미지로 만들어 주는 기능을 갖는다. 개발 시간에 한계가 있을때 오픈소스를 사용하는 것이 효율적으로 좋다. https://github.com/onevcat/Kingfisher onevcat/Kingfisher A lightweight, pure-Swift library for downloading ..

6. Search 결과 구현 2 - UI Update through MainQueue

Search 결과 구현 2 - UI Update through MainQueue 지금까지 수행한 구현을 Build 하게 되면 오류가 발생한다. Main Thread에 의하면 UI update가 main Thread 가 아닌 곳에서 불려서 문제가 생긴 것이다. ?? 여기는 무슨 Thread인데 ?? 여기에서는 계속 Networking에 대한 기능을 구현했다. —> Global thread , qos: utility 네트워킹은 느린 녀석이기에 위의 thread를 통해 기능이 동작하는데 여기서 main thread에서 해야할 UI update를 해서 에러를 날린 것이다. 다음과 같이 Main Thread로 옮겨서 기능을 수행하면 오류없이 빌드 된다.

5. Search 결과 구현 1 - CollectionView

Search 결과 구현 1 - CollectionView 현재 검색 API를 만들었고, 결과를 받아올 모델 Movie, Response와 데이터를 받아오는 logic을 완성했다. 이제 결과를 받아와서 CollectionView를 표현해보자 CollectionView DataSource, Delegate를 구현해보자 MVVM패턴에서는 ViewController에서 데이터를 갖는게 아닌 ViewModel이 데이터를 갖고있고 메소드를 통해 가져오도록 해야하지만, 전체적 구조에 대한 이해를 높히고자 이렇게 구현해뒀다. CollectionView와 SearchViewController의 DataSource, Delegate를 연결하고 다음과 같은 protocol을 구현하면 된다. UICollectionViewCe..

4. SearchAPI 구현 2 (parsing)

SearchAPI 구현 2 - parsing 현재 받아온 JSON데이터는 다음과 같다. 그렇다면 이를 parsing하기위해서 Codable을 이용할 것이다. 이렇게 key를 맞춰서 parsing 할 준비가 완료되었다. Type Method --> search() 검색할 데이터를 SearchBar에 넣고 Search를 누르게 되면 해당 text 데이터를 ITunes에서 네트워킹을 시도한다. 여기서 적절한 예외처리 후 받아온 데이터를 parsing 하는 작업이 필요하다. 왜? 우리는 Movie데이터를 이용하기 때문에!! 현재 메소드의 길이가 길어지니 parsing하는 method를 새롭게 만들어보자 —> parseMovies() 받아온 데이터는 현재 Data type를 가진다. 데이터를 받아와서 [Movie..

3. SearchAPI 구현 1 (Networking)

SearchAPI 구현 1 (네트워킹) 이제 searchBar.text를 받아서 이를 SearchAPI를 통해 겸색 결과를 받을 것이다. 우선 우리가 필요한 것, 구현할 것에 대해 적어보자 Type Method 우리는 class SearchAPI 를 정의하고 메소도를 선언할 것인데, 이를 instance method가 아닌 type method로 선언한다. Type method 와 Instance method 의 차이점이 궁금하면!!! —> yeongwoo-cho.tistory.com/133 6. Instance Method vs. Type Method Instance Method vs. Type Method https://cocoacasts.com/swift-fundamentals-what-is-the..

2. SearchBar 구현

SearchBar 구현 1. Search Bar와 collectionView가 필요하다. 2. 빈틈없게 Auto Layout을 적용한다. SearchViewController 우선 적용한 searchBar와 collectionView를 ViewContoller에 outlet으로 연결한다. searchBar의 경우 searchbar에 의한 결과들을 ViewContoller에 위임시켜서 거기에 해당하는 일들을 VC에서 담당하도록 할 것이다. —> searchBar를 ViewContoller에 Delegate 연결 여기서 SearchBar와 관련된 메소드를 구현할 것이다. 여기서 search를 눌렀을 때, ViewContoller에게 알려주는 method가 존재한다. —> searchBarSearchButto..

1. Netflix Style Application

Netflix Style Application 검색 결과를 CollectionView로 보여준다. 서버에 있는 영상을 스트리밍 할 수 있게 기능을 만들어 본다. 기본 작업 yeongwoo-cho.tistory.com/135 8. Tabbar, SafeArea, collectionView 설정 Storyboard Tabbar Controller initial 우리는 ViewController이 실행되면 home에서 시작되도록 해야하고, 이때 적절한 초기화 작업이 필요하다. 간단하다 --> Tabbar Controller을 "Is initial View Controller".. yeongwoo-cho.tistory.com