swift 실습 - 6.1: Movie App 만들기

 

 

 

오늘은 이런 영화 정보 출력 앱을 만드는 방법에 대해 배웠다.

 

이전에 안드로이드 앱을 만들 때나 웹애플리케이션을 만들때도 많이 사용하던

http request를 보내서 response를 받아와 parsing하여

원하는 정보만을 빼내와서 Model에 저장하고, 화면에 뿌려주는 로직이다.

 

애플은 뭔가 이런 공공 api를 이용하는게 더 쉬워보였다.

 

오늘 한 부분을 순서대로 정리하자면

1. 화면 구성하기(테이블뷰, 뷰 셀)

2. 모델 만들기

3. 네트워크 호출 및 데이터 가져오기

4. 화면에 뿌려주기

 

 

 

 

 

 

1. 화면 구성하기

 

 

 

레이아웃은 이렇게 생겼다.

 

먼저 테이블 뷰를 생성하고 그 안에 테이블 뷰 셀을 만든다.

 

테이블 뷰 셀은

레이블 4개와 이미지 뷰 1개로 구성되어있다.

 

이 과정에서 오토레이아웃 설정중에

Content Hugging Priority를 만지는 부분이 있었는데

거기서 뭘 잘못한건지 아닌지 

타이틀이 아래위가 좀 짤려서 나오게 되었는데 이건 차차 고쳐야겠다.

 

 

 

 

 

 

 

2. 모델 만들기

api로 가져온 데이터들에서 원하는 정보를 빼와서 저장하기 위한 모델을 만든다.

 

여기서 JSON 형식으로 반환되는 response 파일에서 필요한 정보가 어떤 이름으로 되어있는지를 보고

그 이름이랑 똑같이 하면된다. 그럼 별다른 코드를 추가하지 않아도 이용할 수 있게 된다.

 

import Foundation

struct MovieModel: Codable {
    let resultCount: Int
    let results: [Result]
}

struct Result: Codable {
    let trackName: String?
    let previewUrl: String?
    let thumbnail: String?
    let shortDescription: String?
    let longDescription: String?
    let currency: String?
    let trackPrice: Double?
    
    enum CodingKeys: String, CodingKey {
        case thumbnail = "artworkUrl100"
        case trackName
        case previewUrl
        case shortDescription
        case longDescription
        case currency
        case trackPrice
    }
}

 

그래서 이런식으로 만들어주면 된다.

여기서 만약 JSON파일에 있는 이름으로 안하고 임의로 지정하겠다 하면

밑에 CodingKeys라는 enum을 선언해줘야 한다.

이름을 바꿔서 사용할 데이터 뿐만 아니라 다른 것들도 다 적어줘야 오류가 안난다.

 

 

3. 네트워크 호출 및 데이터 가져오기

가장 중요한 부분이다.

 

먼저 requestMovieAPI라는 이름으로 함수를 하나 만들었다.

 func requestMovieAPI(){
      let sessionConfig = URLSessionConfiguration.default
      let session = URLSession(configuration: sessionConfig)
       
      var components = URLComponents(string: "https://itunes.apple.com/search")
        
      let term = URLQueryItem(name: "term", value: "marvel")
      let media = URLQueryItem(name: "media", value: "movie")
        
      components?.queryItems = [term, media]
        
      guard let url = components?.url else{
          return
     }

 

세션을 만들때 사용할 sessionConfig를 생성하고, 세션을  그 configuration을 사용하여 생성한다.

그리고 URLComponents로 url를 설정해주는데,

그 뒤에 GET으로 쿼리를 보낼 때 필요한 값들을 설정해주고,

components?.queryItems = [term, media] 로 url 컴포넌트 설정을 해준다음, url을 생성한다.

 

Apple의 API사용은 여기를 참고하자.

http://resources.organicfruitapps.com/documentation/itunes-store-web-service-search-api/

 

 

  var request = URLRequest(url: url)
  request.httpMethod = "GET"

 

그리고 생성한 url을 사용하여 request를 생성하고 GET방식으로 설정하여 request를 보낸다.

 

 

 let task = session.dataTask(with: request) { data, response, error in
       print((response as! HTTPURLResponse).statusCode)
            
       if let hasData = data {
                
           do {
               self.movieModel = try JSONDecoder().decode(MovieModel.self, from: hasData)
                  
               print(self.movieModel ?? "no data")
                    
               DispatchQueue.main.async {
                   self.movieTableView.reloadData()
               }
           }catch{
               print(error)
             }
        }           
    }

그리고 session.dataTask를 request를 통해 실행하면

data, response, error 이렇게 세가지를 반환해주게 된다.

 

그걸 이용해서 HttpStatus code를 불러와서 콘솔에 출력해보고,

data를 JSONDecoder를 사용해서 파싱한다음 movieModel에 저장한다.

 

이 모든 과정은 main thread가 아닌 곳에서 실행되고 있으므로

movieTable을 다시 reload하는 과정은 main에서 실행되도록 DispatchQueue 해준다.

 

    task.resume()
    session.finishTasksAndInvalidate()

task를 resume으로 실행하고, session을 닫는다.

 

 

4. 화면에 뿌려주기

화면에 뿌리는 것은 앞에서 여러번 했던 것과 같이 table view에 delegate, datasource 함수들을 구현해주면서

할 수 있다.

extension ViewController: UITableViewDelegate, UITableViewDataSource {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.movieModel?.results.count ?? 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "MovieCell", for: indexPath) as! MovieCell
        
        cell.titleLabel.text = self.movieModel?.results[indexPath.row].trackName ?? ""
        
        cell.descriptionLabel.text =
        self.movieModel?.results[indexPath.row].shortDescription ?? ""
        
        let currency = self.movieModel?.results[indexPath.row].currency ?? ""
        
        let price = self.movieModel?.results[indexPath.row].trackPrice?.description ?? ""
        
        cell.priceLabel.text = currency + " " + price
        return cell
	}
}

문제는 값이 없을 수도 있기 때문에 대부분의 변수들이 옵셔널이라 그거 처리를 잘 해줘야 한다.

 

 

이제 다음에는 이미지를 가져오고, 검색어를 사용하여 값들을 가져오는 것을 할 예정이다.