You Know Programing?

카카오 API를 통해 웹 이미지 검색 하기

설명

이번에 다음 API가 카카오 API와 통합하면서 웹 검색 방식이 변경 되었습니다. 다음 웹 검색 방식이 조금 옛날 버전이라 프로젝트를 진행하면서 warning 때문에 스트레스 아닌 스트레스를 받았었는데,, 카카오로 넘어오면서 warning이 없어지면서 속이 다 시원합니다. (물론 제가 제대로 못해서 있었던 warning이었겠지만요..)
이번에 카카오 API 넘어오면서 Get 방식으로 변경 되었습니다.

일단 밑에 카카오 디벨로퍼 링크를 통해 들어가셔서 회원가입 후 로그인을 해주고 내 애플리케이션에 들어가면 앱을 만들고 4개의 키(네이티브 앱, REST API 키, JavaScript키, Admin 키)를 얻을 수 있습니다.
KakaoDevelopers_

웹 이미지 검색에서 필요한 키는 REST API키 입니다. 나머지 키는 SDK나 웹에서 사용 하시면 됩니다.

사용환경

포스팅 시점에서 iOS11 버전이 발표 되긴 했지만 아직 베타테스트여서 Swift3.x 버전을 사용 하도록 하겠습니다.

* Swift3.x
* Xcode 8.3.3

Get 방식이기 때문에 유명한 라이브러리인 Alamofire를 사용하도록 하겠습니다. 설치 방법은 밑에 Alamofire github를 참고 하시면 됩니다.
Alamofire github

소스코드

// 주소 관련입니다. 키워드 부분에 원하는 검색어를 적어주시면 됩니다.
let keywordWebLink = "https://dapi.kakao.com/v2/search/image?query=키워드"

// 한글이 포함된 주소는 작동 하지 않기 때문에 urlQueryAlll 옵션을 사용해서 인코딩을 해줍니다.
let searchLink = str_temp.addingPercentEncoding(withAllowedCharacters: CharacterSet.urlQueryAllowed)!

// Alamofire를 통해서 값을 받아옵니다.
// 헤더부분에서 "Authorization" 항목에 REST API 키를 넣어 주셔야됩니다. 여기서 주의 할점은 앞에 "KakaoAK" 키워드는 필수 입니다.
Alamofire.request(str_search,
                  method: .get,
                  encoding: JSONEncoding.prettyPrinted,
                  headers: ["Authorization": "KakaoAK your REST API KEY"])
    .responseJSON{ response in
        switch response.result {
        case .success(let json):
            // 검색에 성공을 하면 검색 결과가 json으로 넘어 옵니다. 이 값을 통해 원하는 화면을 표시 하면됩니다.
            print(jsont)
        case .failure(let error):
            // 검색에 실패할 경우 error 메세지와 함께 넘어옵니다.
            print("Request failed with error: \(error)")
            DispatchQueue.main.async {
                   print(message: "검색 도중에 에러가 발생했습니다.")
            }
        }
}

요청을 할 때 사용할수 있는 파라메타 입니다. query부분은 필수이고 나머지는 옵션입니다. 필요한 부분이 있다면 위에 keywordWebLink 뒤에 &sort=accuracy 이런식으로 연달아 붙여서 사용 하시면 됩니다.

검색을 요청을 했을 때 넘어오는 값의 종류 입니다. meta 데이터와 document 데이터로 구성 되어있습니다.

meta 데이터

document 데이터

마치며

다음 API에서 아직 종료 되지 않은 서비스 이지만 그래도 결국은 통폐합을 통해 종료될거 같아서 제 프로젝트에 적용 할겸 포스팅을 했습니다. 방식 자체가 어렵지는 않지만 생각보다 헤매는 부분이 있어서 이렇게 포스팅을 합니다. 다른 검색 API도 이런식으로 접근 하시면 쉽게 활용 하실 수 있을꺼 같습니다. 틀린점이나 잘못된 점이 있다면 알려주시면 수정하도록 하겠습니다. :)

iPad에서 UIAlertController의 actionSheet사용시 발생하는 오류

오류 메세지

'Your application has presented a UIAlertController (<UIAlertController: xxx>) of style UIAlertControllerStyleActionSheet.
The modalPresentationStyle of a UIAlertController with this style is UIModalPresentationPopover.
You must provide location information for this popover through the alert controller's popoverPresentationController.
You must provide either a sourceView and sourceRect or a barButtonItem.
If this information is not known when you present the alert controller, you may provide it in the UIPopoverPresentationControllerDelegate method -prepareForPopoverPresentation.'

영어를 해석해보면 actionSheet의 모달스타일은 UIModalPresentationPopover라고 설명을 해주면서 UIModalPresentationPopover을 사용 할 때는 barButtonItem또는 팝업에 대한 위치를 설정해줘야 된다고 명시 되어 있습니다.

해결 방법

해결방법은 만약 앱이 iPhone과 iPad를 같이 지워하는 앱이라면 디바이스에 따라 분개해주고 iPad만 사용 가능하다면 따로 설정은 안 해주셔도 됩니다.

• 위치를 정해주는 방법

  if UIDevice.current.userInterfaceIdiom == .pad { //디바이스 타입이 iPad일때
    if let popoverController = alertController.popoverPresentationController {
        // ActionSheet가 표현되는 위치를 저장해줍니다.
        popoverController.sourceView = self.view
        popoverController.sourceRect = CGRect(x: self.view.bounds.midX, y: self.view.bounds.midY, width: 0, height: 0)
        popoverController.permittedArrowDirections = []
        self.present(alertController, animated: true, completion: nil)
    }
  } else {
    self.present(alertController, animated: true, completion: nil)
  }
  

• UIBarButtonItem에 추가해주는 방법

  if UIDevice.current.userInterfaceIdiom == .pad { //디바이스 타입이 iPad일때
    if let popoverController = alertController.popoverPresentationController {
        // ActionSheet가 표현되는 위치를 저장해줍니다.
        popoverController.barButtonItem = sender as? UIBarButtonItem에
        self.present(alertController, animated: true, completion: nil)
    }
  } else {
    self.present(alertController, animated: true, completion: nil)
  }
  

마치며

당연히 문제 없이 되는 줄 알았는데 뜻밖에 오류를 확인하고 당황했었습니다. 보통은 iPhone 작업만 하다보니 확인하지 못했던 문제였습니다. 그리고 뿜어내는 오류를 일단 해석하고 이해하는게 중요하다는걸 또 깨달았습니다.감사합니다. 틀린점이 물어보실게 있다면 댓글로 남겨 주시면 적극 반영하겠습니다.

SCWebPreview

설명

페이스북, 카카오톡에서 URL을 공유하게 되면 미리보기 형식으로 이미지, 제목, 내용을 보여주는 창들이 있습니다. 그런 창들을 쉽게 구현 할 수 있게 도와주는 라이브러리 입니다. 원리는 html tag중에 meta data중 og:(og:url, og:image, og:title, og:description) 속성을 가지고 있는 내용을 가져와서 사용 할 수 있게 구성 되어 있습니다.

Github 주소

https://github.com/myoungsc/SCWebPreview

스크린샷

작업환경

* Swift 3.0.1
* XCode 8.3.3
* iOS 9.0 (Min SDK)

설치방법

일반적인 CocoaPod 설치 방법과 동일합니다.

1. 터미널에서 해당 프로젝트 디렉토리로 이동한 후 'Pod init'
2. 디렉토리에 있는 PodFile에 (pod "SCWebPreview")를 추가
3. 터미널에서 'pod install'

사용방법

• SCWebPreview를 import 합니다.

  import SCWebPreview
  

• HTML에서 metaData를 가져옵니다.([String]배열을 통해 url을 넣어 주시면 됩니다.)

  let webPages: [String] = ["https://github.com/myoungsc", "http://devsc.tistory.com/"]
  let scWebPreview = SCWebPreview()
  scWebPreview.initWebPages(webPages)
  scWebPreview.startCrawling(){
    for i in 0 ..< webPages.count {
        let dic = self.scWebPreview.getPreviewDataFromIndex(i)
        guard dic.count != 0 else {
            print("error: dic is optionl Value")
            return
        }
        //doSomething
    }
  }
  

• 데이터를 가져오는 방법입니다.

  let dicWebData: [String: String] = scWebPreview.getPreviewDataFromIndex(0)
  print("og:url - \(dicWebData["og:url"]!)")
  print("og:url - \(dicWebData["og:title"]!)")
  print("og:url - \(dicWebData["og:description"]!)")
  print("og:url - \(dicWebData["og:image"]!)")
  

• 해당 인덱스의 url를 사파리로 오픈 하는 방법입니다.

  scWebPreview.openSafariFromUrl(0)
  

라이센스

라이센스는 MIT라이센스를 따릅니다. 앱에 적용하실때는 사용하였다고 명시해주셔야됩니다.