Using Your Target

ComicsViewcontroller.swift로 가고 뷰 컨트롤러의 시작에 다음 코드를 추가합니다.

let provider = MoyaProvider<Marvel>()

앞에서 언급했듯이 Moya target과 상호작용하는데 사용하는 주요한 클레스는 MoyaProvider 이므로, 새로운 Marvel Target을 사용하는 MoyaProvider 인스턴스를 만들어야 합니다.

그런 다음 viewDidLoad() 내부에서 다음 코드를

state = .error

다음으로 대체 합니다

// 1
state = .loading

// 2
provider.request(.comics) { [weak self] result in
  guard let self = self else { return }

  // 3
  switch result {
  case .success(let response):
    do {
      // 4
      print(try response.mapJSON())
    } catch {
      self.state = .error
    }
  case .failure:
    // 5
    self.state = .error
  }
}

새로운 코드는 다음과같이 작동합니다

1. 첫째, view의 상태를 .loading으로 설정합니다.
2. provider를 사용하여 .comics 끝점 요청을 수행합니다..comics는 열거형(enum) case 이므로 전적으로 타입 안전 합니다. 따라서 잘못된 옵션을 입력한 염려는 없습니다. target의 모든 끝점에 대해 자동 완료 사례(auto-completed cases for every endpoint of your target)를 얻는 이득도 함께 얻습니다.
3. 클로져의 결과(result)는 .success(Moya.Response), .failure(Error)중 하나일수 있습니다.
4. 요청이 성공하면 Moya의 mapJSON 메소드를 사용하여 성공한 응답을 제이슨 객체에 맵핑하고 콘솔에 출력합니다.
5. 반환된 결과가 .failure인 경우 뷰의 상태도 .error로 설정됩니다.

앱을 빌드하고 실행합니다. 디버깅 콘솔에서 다음과 비슷한 메시지들을 볼수 있어야 합니다.

{
    attributionHTML = "<a href=\"http://marvel.com\">Data provided by Marvel. \U00a9 2018 MARVEL</a>";
    attributionText = "Data provided by Marvel. \U00a9 2018 MARVEL";
    code = 200;
    copyright = "\U00a9 2018 MARVEL";
    data =     {
        count = 19;
        limit = 50;
        offset = 0;
        results =         (
            {comic object},
            {comic object},
            {comic object},
            ...
        )
}

놀랍습니다. Moya와 새로운 Marvel target을 사용하여 백앤드에서 유효한 제이슨 객체를 얻었습니다!

Note: 결과가 디버그 콘솔에 나타나려면 몇초가 걸릴수 있습니다.

이 뷰 컨트롤러를 완성하는 마지막 단계는 실제로 JSON 응답을 적절한 데이터 모델로 매핑하는 것입니다. - 이 경우에는 미리 구성한 Comic 구조체를 사용합니다.

원시 JSON 대신 Decodable로 응답을 매핑할 다른 Moya 응답 맵퍼를 사용할수 있는 완벽한 시간입니다.

JSON 응답 구조가 다음과같이 보일 것입니다.

data ->
  results -> 
      [ Array of Comics ]

객체 그 자체에 도달하기전에, 두가지 수준의 중첩(data, results)를 의미합니다. 시작 프로젝트에는 이미 디코딩 가능한 객체가 포함되어 있습니다.

다음 코드를

print(try response.mapJSON())

다음과 같이 변경합니다.

self.state = .ready(try response.map(MarvelResponse<Comic>.self).data.results)

객체를 원시 JSON 응답에 매핑하는 대신, Comic 구조체와 함께MarvelResponse 제네릭 decodable을 사용하는 맵퍼를 사용합니다. 이렇게하면 두개의 중첩 수준을 구문 분석하여 data.results에 접근하여 만화 배열에 접근할수 있습니다.

뷰의 상태를 해독할수 있게(decodable) 매핑을하고 반환된 Comic 객체의 배열과 연관된 값과 함께 .ready로 설정합니다.

프로젝트를 빌드하고 실행 합니다. 첫 화면이 완벽하게 작동해야합니다.

다음은 세부사항 뷰 입니다.

만화를 탭할때, 시작 프로젝트는 이미 CardViewController를 보여주기 위한 코드와 선택된 만화를 전달하는 코드를 가지고 있습니다. 하지만 만화를 탭하면 단지 만화의 세부사항 이 없는 빈 카드만 보여줍니다. 이것을 다루어 봅니다.

CarViewController.swift로 전환하고 layoutCard(comic:) 매소드를 찾습니다. 메소드 내부에 다음을 추가합니다.

// 1
lblTitle.text = comic.title
lblDesc.text = comic.description ?? "Not available"

// 2
if comic.characters.items.isEmpty {
  lblChars.text = "No characters"
} else {
  lblChars.text = comic.characters.items
                       .map { $0.name }
                       .joined(separator: ", ")
}

// 3
lblDate.text = dateFormatter.string(from: comic.onsaleDate)

// 4
image.kf.setImage(with: comic.thumbnail.url)

이 코드는 Comic구조체로 부터 제공된 정보와 함께 화면을 갱신합니다.

1. 만화의 타이틀과 설명을 설정합니다.
2. 만화에 대한 캐릭터 목록을 설정하거나 캐릭터가 없다면 캐릭터 없음으로 설정합니다.
3. 미리 구성된 DateFormatter를 사용하여 만화의 on sale 날짜를 설정합니다
4. Kingfisher를 사용하여 만화의 이미지를 로딩합니다-웹 이미지 로딩을 위한 좋은 타사 라이브러리 입니다.

앱을 빌드하고 실행합니다. 그리고 목록중 하나를 탭합니다. 그러면 다음과같이 아름다운 카드 정보를 볼수 있습니다.

추가할수 있는 두가지 기능이 있습니다: Imgur에 카드를 업로드하고, 사용자가 카드를 삭제할수 있게 합니다.

import UIKit
import Moya

public enum Imgur {
  // 1
  static private let clientId = "YOUR CLIENT ID"

  // 2
  case upload(UIImage)
  case delete(String)
}

extension Imgur: TargetType {
  // 1
  public var baseURL: URL {
    return URL(string: "https://api.imgur.com/3")!
  }

  // 2
  public var path: String {
    switch self {
    case .upload: return "/image"
    case .delete(let deletehash): return "/image/\(deletehash)"
    }
  }

  // 3
  public var method: Moya.Method {
    switch self {
    case .upload: return .post
    case .delete: return .delete
    }
  }

  // 4
  public var sampleData: Data {
    return Data()
  }

  // 5
  public var task: Task {
    switch self {
    case .upload(let image):
      let imageData = image.jpegData(compressionQuality: 1.0)!

      return .uploadMultipart([MultipartFormData(provider: .data(imageData),
                                                 name: "image",
                                                 fileName: "card.jpg",
                                                 mimeType: "image/jpg")])
    case .delete:
      return .requestPlain
    }
  }

  // 6
  public var headers: [String: String]? {
    return [
      "Authorization": "Client-ID \(Imgur.clientId)",
      "Content-Type": "application/json"
    ]
  }

  // 7
  public var validationType: ValidationType {
    return .successCodes
  }
}

private let provider = MoyaProvider<Imgur>()
private var uploadResult: UploadResult?

// 1
let card = snapCard()

// 2
provider.request(.upload(card),
  // 3
  callbackQueue: DispatchQueue.main,
  progress: { [weak self] progress in
    // 4
    self?.progressBar.setProgress(Float(progress.progress), animated: true)
  },
  completion: { [weak self] response in
    guard let self = self else { return }
    
    // 5
    UIView.animate(withDuration: 0.15) {
      self.viewUpload.alpha = 0.0
      self.btnShare.alpha = 0.0
    }
    
    // 6
    switch response {
    case .success(let result):
      do {
        let upload = try result.map(ImgurResponse<UploadResult>.self)
        
        self.uploadResult = upload.data
        self.btnDelete.alpha = 1.0
        
        self.presentShare(image: card, url: upload.data.link)
      } catch {
        self.presentError()
      }
    case .failure:
      self.presentError()
    }
})

// 1
guard let uploadResult = uploadResult else { return }
btnDelete.isEnabled = false

// 2
provider.request(.delete(uploadResult.deletehash)) { [weak self] response in
  guard let self = self else { return }

  let message: String

  // 3
  switch response {
  case .success:
    message = "Deleted successfully!"
    self.btnDelete.alpha = 0.0
  case .failure:
    message = "Failed deleting card! Try again later."
    self.btnDelete.isEnabled = true
  }

  let alert = UIAlertController(title: message, message: nil, preferredStyle: .alert)
  alert.addAction(UIAlertAction(title: "Done", style: .cancel))

  self.present(alert, animated: true, completion: nil)
}