🔥 TIL - Day 3

📌 단어장 프로젝트 open-api 활용

✔️ 단어정보 받아오기 (owlbot api)

OwlBot-API

API 요청
owlbot이 제공해주는 token을 api-key값으로 하여 단어를 경로변수로 전달하면 해당 단어의 여러 정보를 제공해준다.
(단어이름, 소리, 품사,예문,이미지 ...)

API 요청 결과 예시

{
  "word": "owl",
  "pronunciation": "oul",
  "definitions": [
    {
      "type": "noun",
      "definition": "a nocturnal bird of prey with large eyes, a facial disc, a hooked beak, and typically a loud hooting call.",
      "example": "I love reaching out into that absolute silence, when you can hear the owl or the wind.",
      "image_url": "https://media.owlbot.info/dictionary/images/hhhhhhhhhhhhhhhhhhhu.jpg.400x400_q85_box-15,0,209,194_crop_detail.jpg",
      "emoji": "🦉"
    }
  ]
}

api 요청 fstring을 이용해서 클라이언트로부터 받은 문자를 경로변수로 하고 발급받은 토큰을 헤더에 구성해서 api서버로 요청한다.

flask 경로변수 사용법

@app.route('/test/<param>')
def test(param):

요청 후 받은 결과는 json으로 변환 후 클라이언트에게 전달한다.

r = requests.get(f'https://owlbot.info/api/v4/dictionary/{keyword}',
                     headers={'Authorization' : f'Token {owlApiKey}'})

result = r.json()

깃헙에 소스코드를 올리고 싶다면??
key(token) 숨기기 (xml로 key 리소스 작성)

[keys.xml]

<?xml version="1.0" encoding="utf-8" ?>
<resource>
    <string name="owlbot-key">[my-apikey]</string>
</resource>

xml로 작성된 리소스 가져오기

import xml.etree.ElementTree as et
tree = et.parse('keys.xml')
owlApiKey = tree.find('string[@name="owlbot-key"]').text

.gitignore에 keys.xml 설정

---

✔️ 서버로부터 받은 단어정보 랜더링 (jinja2)

{
  "word": "owl",
  "pronunciation": "oul",
  "definitions": [
    {
      "type": "noun",
      "definition": "a nocturnal bird of prey with large eyes, a facial disc, a hooked beak, and typically a loud hooting call.",
      "example": "I love reaching out into that absolute silence, when you can hear the owl or the wind.",
      "image_url": "https://media.owlbot.info/dictionary/images/hhhhhhhhhhhhhhhhhhhu.jpg.400x400_q85_box-15,0,209,194_crop_detail.jpg",
      "emoji": "🦉"
    }
  ]
}

클라이언트는 단어를 요청하면 서버로부터 위와 같은 json포멧 데이터를 받는다.

받은 json포멧 데이터를 HTML에 맞춰 끼워줘야 하는데 이때 jinja2 템플릿을 사용한다.

jinja2 템플릿 간단 문법
값표현: {{ }}
형변환: {{ a|int }} (a를 정수로 변환)
if문 : {% if a>=0 %} ... {% endif %}
for문 : {% for row in rows %} ... {% endfor %}

파이참 jinja2 템플릿 설정 (mac)
[perference]-[Template Languages]-HTML을 Jinja2로 설정

서버로부터 result라는 key값으로 api의 응답에 대한 응답이 내려왔다면 {{ result['word'] }} or {{ result.word }} 와 같은 방식으로 값을 나타낼 수 있다.

---

📌 맛집지도 프로젝트 - Naver open API 활용

✔️ Naver open-api 요청

네이버 클라우드 플랫폼의 콘솔로 이동



애플리케이션 등록

애플리케이션 이름 지정 후 Web Dynamic Map, Geocoding 선택,
서비스 환경 등록 - web 서비스 URL 등록

등록 후 인증정보 확인

Client ID
(X-NCP-APIGW-API-KEY-ID)

Client Secret
(X-NCP-APIGW-API-KEY)

✔️ 네이버 지도 API 사용

html파일에 API 요청 스크립트 추가

<script type="text/javascript"
            src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=[클라이언트ID]"></script>

naver-map 오브젝트를 생성하는 함수 정의

$(document).ready(function () {
    let mymap = new naver.maps.Map('map', {
      center: new naver.maps.LatLng(위도, 경도), 
      zoom: 10, 
      zoomControl: true, 
      zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.SMALL,
        position: naver.maps.Position.TOP_RIGHT
      }      
   });	                               

center: 지도의 시작 위도,경도 지정
zoom: 지도 시작시 줌 배율 지정
zoomControl: 줌 조절 버튼 활성화
zoomControlOptions: 줌 조절 버튼 스타일 설정

marker 추가

let marker = new naver.maps.Marker({
  position: new naver.maps.LatLng(위도, 경도), 
  map: mymap,
  icon: "{{ url_for('static', filename='image.png') }}" // 마커 이미지
});

position: 마커의 시작 위도,경도 지정
map: 해당 마커가 표시될 map 지정
icon: 마커의 icon 지정

infowindow 추가
infowindow: 마커 클릭시 나타나는 창

let infowindow = new naver.maps.InfoWindow({
  content: `<div><h5>infoWindow content</h5></div>`,
});

marker에 이벤트 추가 (클릭시 infowindow 열기/닫기)

naver.maps.Event.addListener(marker, "click", function () { // marker 클릭시 이벤트 지정
  if (infowindow.getMap()) { // infowindow가 열려있다면 true
    infowindow.close(); // 열려있다면 (true라면) close
  } else {
    infowindow.open(map, marker);
  }
});

✔️ Naver Geocoding api 요청

Geocoding api는 주소를 입력받아 해당 주소의 상세정보를 제공해주는 API이다.

응답 예시 Json
프로젝트에서 필요한 정보는 경도, 위도 정보인 x, y 이므로 요청 후 두 정보만 파싱한다.

{
    "status": "OK",
    "meta": {
        "totalCount": 1,
        "page": 1,
        "count": 1
    },
    "addresses": [
        {
            "roadAddress": "경기도 성남시 분당구 불정로 6 그린팩토리",
            "jibunAddress": "경기도 성남시 분당구 정자동 178-1 그린팩토리",
            "englishAddress": "6, Buljeong-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea",
            "addressElements": [
                {
                    "types": [
                        "POSTAL_CODE"
                    ],
                    "longName": "13561",
                    "shortName": "",
                    "code": ""
                }
            ],
            "x": "127.10522081658463",
            "y": "37.35951219616309",
            "distance": 20.925857741585514
        }
    ],
    "errorMessage": ""
}

API 요청
address는 스크래핑을 통해 얻어온 맛집주소가 들어가게 된다.
이전과 마찬가지로 API의 응답결과를 파싱하기 위해 Json으로 변환한다.

r = requests.get(f"https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query={address}", headers=headers)

response = r.json()

API 요청헤더 구성 (key포함)

headers = {
    "X-NCP-APIGW-API-KEY-ID": "[클라이언트ID]",
    "X-NCP-APIGW-API-KEY": "[클라이언트Secret]"
}

API 응답 파싱

x = float(response["addresses"][0]["x"])
y = float(response["addresses"][0]["y"])

---

두 개 프로젝트를 통해 open api를 요청하는 몇 가지 방법을 알아봤습니다. 잘 모방하고 잘 갖다 쓰는 것도 매우 중요한 개발 능력이라고 생각합니다.

그러니 잘~ 쓰겠습니다 😁