잡코더

이제 받아온 데이터를 searchTerm에 넣기만 하면 된다. 현재 출력된 데이터는 snapshot.value에 해당하는 데이터이다. 우리가 필요한 것은 term과 timestamp를 키로 가지는 Dictionary 배열이 필요한 것이다. 우선 Dictionary array로 type casting을 시도하자. 우리는 사실 id를 필요로 하지는 않는다. 그래서 searchHistory의 values만 뽑아내서 사용할 것이다. 그JSON Decoder로 decode하여 [SearchTerm]으로 parsing 할 것이다. 다음과 같이 searchHistory.values를 Array로 type casting을 하고 decode할 데이터로 넣는다. 이때 SearchTerm의 배열형으로 parsing을 한다...

HistoryViewController 저장된 컨텐츠 목록 tabbar controller을 생성한다. Custom class로 지정한 뒤 TableView를 넣을 것이다. TableView에 TableViewCell을 추가하고 Label 하나만 넣자 간단하게 AutoLayout을 적용한 뒤 TableViewCell의 height를 86으로 지정하자. 셀 사이즈 지정이 가능함을 되새기기위해 사진으로 보여준 것이다. Custom cell을 만들어서 지정하고 Label과 searchTerm을 연결한다. 이제 HistoryViewController에 들어올 때마다 TableView의 reload 작업을 할려고 한다. 그렇다면 TableView를 변수로 담아놔야겠지 일단 데이터를 받아와보자 데이터를 정상적으로 ..

검색어 서버에 저장하기 우선 데이터베이스에 searchHistory를 추가시키고 db 변수는 이를 참조하도록 지정한다. 검색 결과를 담당하는 부분에서 작업하도록 하자. Id를 Firebase가 알아서 생성하도록 한다. 검색어를 넣는다. 검색한 시간 데이터도 넣는다. 시간 데이터는 Unix Timestamp를 이용한다. Unix Timestamp는 현재 시간을 유니크하게 표현해주는 놈이다. let timeStamp: Double = Date().timeIntervalSince1970 여기에서 값이 1049273.1438029 같은 수가 나오면 소수점 밑의 숫자를 제외시킬 것이다. 결과 다음과 같이 검색과 timestamp값을 firebase에 Write했음을 확인할 수 있다.

Nested Scroll View 구현 공개예정에 해당하는 UpcomingViewController이 아직 custom class로 지정되지 않았기에 이를 지정하고 기능을 구현한다. 우선 HomeViewController의 코드를 해석해보자 HomeViewController에서는 3개의 RecommandListViewController를 갖고있다. 이때 prepare을 통해 각각의 segue의 identifier로 ViewController를 구분하고 type을 지정해서 fetch하는 구조이다. RecommandListViewController에 들어가게 되면 updateUI를 하게되고 각 sectionLabel은 HomeViewController에서 updateType으로 지정한 type에 해당하는 텍..

Container View를 활용한 Nested ScrollView 만들기 공개예정 Tabbar에서 생성한 vertical stack view에 임의의 View를 삭제하고 container view 2개를 삽입하자. height는 200이다. 여기서 stack view는 안에 존재하는 content의 크기에 따라 사이즈가 지정이 되기에 stack view의 height auto layout 지정은 삭제한다. 이때 stack view의 height 600을 유지하게 되면 안에 존재하는 contents의 크기가 전부를 못채우기 때문에 에러가 발생한다. 현재 UIView라는 빈공간이 들어가있고 이 빈공간이 오른족에 존재하는 ViewController로 대체되는 구조이다. 일반 ViewController을 Em..

Nested Scroll View TableView 와 CollectionView는 ScrollView의 한 형태이다. ScrollView는 화면에 보여지고 스크롤을 할 수 있는 ScrollView 자체가 있고, 그 안에 컨텐츠를 담은 왔다갔다하는 ContentsView가 존재한다. 예를들면 기차를 타고 창밖을 바라보면 배경은 엄청 넓지만 창문으로 바라보는 세상은 위의 그림처럼 제한적이다. 창문이 ScrollView와 대응되고 배경이 컨텐츠와 대응되는 개념이다. 스크롤 뷰는 “공개 예정” tabbar에서 만들어 보겠다. ScrollView를 넣고 Auto Layout으로 4방향 모두 space를 지정해 줬지만 다른 UIComponents와 달리 오류가 계속 뜨고 있다??? --> ScrollView에는 ..

기존의 넷플릭스st application에서 기능을 추가해서 확장해보겠다. 추가할 기능은 두가지다. 1. HomeViewController에서 구현한 것과 같이 Nested Scroll View를 완성한다. 2. Firebase를 연동해서 Search History data를 R/W 한다. Firebase의 경우 연동하는 방법을 정리했으니 참고하길 바란다. 내용이 길지 않으니 이론부터 익히길 바란다. https://yeongwoo-cho.tistory.com/153 1. Firebase Firebase 란? 앱을 만들다 보면 서버와의 Networking을 하는 경우가 많이 생기고, 서버를 만들어야 되는 경우가 존재한다. 이제는 서버를 서비스로 제공하는 것이 존재하고 이는 google의 Firebase이다..

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

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

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..

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

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 ..