[REST API] 카카오 웹 검색 API - Swift

[REST API] 카카오 웹 검색 API - Swift

 

✅ 목차

 1. 카카오 API 발급 방법 

 2. Xcode 기본 세팅

 3. Codable 만들기

 4. Alamofire 이용해서 통신하기

 5. 최종 소스코드

 

✅ 카카오 API 발급 방법

 

https://developers.kakao.com/

Kakao Developers

 

아래에 사이트에 접속해서

내 애플리케이션 클릭

 

애플리케이션 추가하기 클릭

여기 필드를 채운 후 저장

내가 만든 애플리케이션 들어가기

 🟠 옆에 iOS가 붙어 있는데, 나는 먼저 해둔 상태이고 처음하는 경우에는 없음.

 

클릭!

🟠 플랫폼 부분 클릭해서 내가 원하는 플랫폼 등록하시면 됩니다

 

⚡️ 앱 키 부분을 보면 키가 발급되어 있을탠데, 우리는 REST API 키를 사용할 예정

 

 

✅ Xcode 기본 세팅

 

🟠 Main.Storyboard

버튼 하나와 텍스트 뷰 하나만 대충 채워두기

 

🟠 ViewController.swift

import UIKit
import Alamofire

class ViewController: UIViewController {

    @IBOutlet weak var CallButton: UIButton! // 버튼
    @IBOutlet weak var APITextView: UITextView! // 텍스트 뷰
    
    @IBAction func CallButtonClick(_ sender: Any) {
        // 버튼 클릭시
    }
    
    
    let url = "https://dapi.kakao.com/v2/search/web"
    
    let headers : HTTPHeaders = [
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        "Authorization": "KakaoAK {Rest API KEY}", // 이 부분에 당신의 REST API 키 넣어주기
        
        /* ! 예시 ! 
        "Authorization": "KakaoAK 1abec3hyn81d3nut7as" // KakaoAK 하고 띄어쓰기 유심히 보기
        */
    ]
    
    // 문서에 보면 더 정확!
    let parameters : [String: Any] = [
                "query": "삼성전자", // 얘는 필수 나머지는 옵션
                "page": 1,
                "size": 15
            ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

}

🟠 이게 가장 기초적인 세팅이야 일단 이렇게 설정.

 

문서 링크

https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

Kakao Developers

문서에서 작성되어 있는 예시

이 부분이 위에 코드로 저렇게 작성.

 

파라미터는 리스폰스를 직접 스크롤하면 쉽게 이해할 수 있음.

 

우리는 Alamofire를 이용할 에정인데, 이건 cocoapod 혹은 spm으로 사용

 

2021.04.23 - [iOS/꼼꼼한 재은씨(실전)] - Alamofire 라이브러리 ( + CocoaPods 개념) 설치 및 사용법

Alamofire 라이브러리 ( + CocoaPods 개념) 설치 및 사용법

 

🟠 샘플 데이터 확인하기

카카오 개발자 문서에서 제공해주는 샘플 데이터

샘플 데이터를 꼭 확인 해야함.

 

🟠 여기서 꿀팁 

https://app.quicktype.io/

Instantly parse JSON in any language | quicktype

JSON트리 분석해서 Codable 쉽게 만들어 줌.

 

 

✅ Codable 만들기

이렇게 만들어짐!!

✅ Alamofire 이용해서 통신하기

AF.request(url,
                   method: .get,
                   parameters: parameters,
                   encoding: URLEncoding.default,
                   headers: headers)
            .validate(statusCode: 200..<300)
            .responseJSON { response in
                //여기서 가져온 데이터를 자유롭게 활용하세요.
                switch response.result {
                case .success(let res):
                    let resultData = String(data: response.data!, encoding: .utf8)
                    
                    do {
                        // 반환값을 Data 타입으로 변환
                        print("1")
                        let jsonData = try JSONSerialization.data(withJSONObject: res, options: .prettyPrinted)
                        print("2")
                        let json = try JSONDecoder().decode(Response.self, from: jsonData)
                        print("3")
                        self.dataSource = json.documents
                        print("4")
                        print(self.dataSource)
                        print("5")
                    } catch (let error) {
                        print("catch error : \(error.localizedDescription)")
                    }
                    self.APITextView.text = self.dataSource[2].contents
                case .failure(let error):
                    print("Request failed with error: \(error)")
                }
            }

 

 

✅ 최종 소스코드

import Foundation
import Foundation
import Alamofire

// MARK: - Welcome
struct Response: Codable {
    let meta: Meta
    let documents: [Document]
}

// MARK: - Document
struct Document: Codable {
    let datetime, contents, title: String
    let url: String
}

// MARK: - Meta
struct Meta: Codable {
    let totalCount, pageableCount: Int
    let isEnd: Bool

    enum CodingKeys: String, CodingKey {
        case totalCount = "total_count"
        case pageableCount = "pageable_count"
        case isEnd = "is_end"
    }
}


class ViewController: UIViewController {

    @IBOutlet weak var CallButton: UIButton!
    @IBOutlet weak var APITextView: UITextView!
    
    
    @IBAction func CallButtonClick(_ sender: Any) {
        // 버튼 클릭시 함수 호출
        getPost2()
    }
    
    var dataSource = [Document]()
    let url = "https://dapi.kakao.com/v2/search/web"
    let headers : HTTPHeaders = [
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        "Authorization": "KakaoAK {Your REST API Key}",
    ]
    
    let parameters : [String: Any] = [
                "query": "삼성전자",
                "page": 1,
                "size": 15
            ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func getPost2() {
        
        AF.request(url,
                   method: .get,
                   parameters: parameters,
                   encoding: URLEncoding.default,
                   headers: headers)
            .validate(statusCode: 200..<300)
            .responseJSON { response in
                //여기서 가져온 데이터를 자유롭게 활용하세요.
                switch response.result {
                case .success(let res):
                    let resultData = String(data: response.data!, encoding: .utf8)
                    
                    do {
                        // 반환값을 Data 타입으로 변환
                        let jsonData = try JSONSerialization.data(withJSONObject: res, options: .prettyPrinted)
                        let json = try JSONDecoder().decode(Response.self, from: jsonData)
                        self.dataSource = json.documents
                    } catch (let error) {
                        print("catch error : \(error.localizedDescription)")
                    }
                    self.APITextView.text = self.dataSource[2].contents
                case .failure(let error):
                    print("Request failed with error: \(error)")
                }
            }
    }

}

 

✅ 향후 보완점. 

HTML 태그가 그대로 드러난다.

 

1️⃣ HTML 태그 지우기

self.APITextView.text = self.dataSource[2].contents
							.replacingOccurrences(of: self.HTMLtag,
                                              	  with: "",
                                              	  options: .regularExpression,
                                              	  range: nil)

 

 

이렇게 작성해주면 정규표현식을 활용하여 HTML 태그를 지울 수 있다.

태그 지운 결과물

 

2️⃣ input 받아서 검색하는 부분 만들기

 

1. 스토리보드에 SearchBar를 추가한 후에, Delegate를 연결해준다.

extension ViewController : UISearchBarDelegate {
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        let keyword = searchBar.text
        parameters["query"] = keyword
        getPost2()
    }
}

이 코드는 서치바에서 검색 버튼 클릭하면 실행된다.

 

🔶 서치바는 굳이 IBOutlet을 연결을 안해도 된다.

 

3️⃣ rx이용해서 검색 구현하기 (고난도)