1. 사이트에 접속하여 API Key 발급
Owlbot English Dictionary API
owlbot.info
2. 사용법 (ajax) // 3번 사용법(Jinja2)가 더 좋음
- Javascript
<script>
let word = '{{ word }}'
$(document).ready(function () {
get_definitions()
})
function get_definitions() {
$.ajax({
type: "GET",
url: `https://owlbot.info/api/v4/dictionary/${word}`,
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Token {API Key}");
},
data: {},
error: function (xhr, status, error) {
alert("에러 발생!");
},
success: function (response) {
$('#word').text(response['word'])
if(response['pronunciation'] == null){
$('#pronunciation').text("")
}else{
$('#pronunciation').text(`/${response['pronunciation']}/`)
}
let definitions = response['definitions']
$("#definitions").empty()
for (let i = 0; i < definitions.length; i++){
let definition = definitions[i]
let temp_html = ""
if (definition['example'] == null) {
temp_html = `<div style="padding:10px">
<i>${definition['type']}</i>
<br>${definition['definition']}<br>
</div>`
}else{
temp_html = `<div style="padding:10px">
<i>${definition['type']}</i>
<br>${definition['definition']}<br>
<span class="example">${definition['example']}</span>
</div>`
}
$('#definitions').append(temp_html)
}
}
})
}
</script>
- app.py
@app.route('/detail/<keyword>') # <keyword> 브라우저 url로 받아옴
def detail(keyword):
# API에서 단어 뜻 찾아서 결과 보내기
return render_template("detail.html", word=keyword)
*** 한번 페이지를 띄우고나서 바뀔일이 없는 페이지는 Jinja2 같은 템플릿언어를 이용해서 html을 완성해서 보내주는 서버사이드 랜더링을 하는것이 더 좋다.
3. 사용법 (Jinja2)
- .py
@app.route('/detail/<keyword>')
def detail(keyword):
# API에서 단어 뜻 찾아서 결과 보내기
r = requests.get(f"https://owlbot.info/api/v4/dictionary/{keyword}", headers={"Authorization": "Token [내토큰]"})
result = r.json()
print(result)
return render_template("detail.html", word=keyword, result=result)
- HTML
<body>
<div class="wrap">
<div class="banner" onclick="window.location.href = '/'">
</div>
<div class="container">
<div class="d-flex justify-content-between align-items-end">
<div>
{# <h1 id="word" style="display: inline;">{{ result['word'] }}</h1>#}
<h1 id="word" style="display: inline;">{{ result.word }}</h1>
{# {% if result.pronunciation != None %}#}
{% if result.pronunciation %}
<h5 id="pronunciation" style="display: inline;">/{{ result.pronunciation }}/</h5>
{% endif %}
</div>
<button id="btn-save" class="btn btn-outline-sparta btn-lg">
<i class="fa-regular fa-floppy-disk"></i>
</button>
<button id="btn-delete" class="btn btn-sparta btn-lg">
<i class="fa-regular fa-trash-can"></i>
</button>
</div>
<hr>
<div id="definitions">
{% for definition in result.definitions %}
<div style="padding:10px">
<i>{{ definition.type }}</i>
<br>{{ definition.definition.encode('ascii', 'ignore').decode('utf-8') }}<br>
{% if definition.example %}
<span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8')|safe }}</span> {# htmp의 bold처리 같은 코드를 처리해줌 #}
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</body>
** 설명
<span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8')|safe }}</span>
# htmp의 <bold> 같은 삽입 코드 처리 #
|safe
# 인코딩 - 깨지는 문자 처리 #
.encode('ascii', 'ignore').decode('utf-8')'프로그래밍 > API' 카테고리의 다른 글
| 다음 주소 API (우편번호 서비스, 주소로 지도 띄우기) (0) | 2022.06.26 |
|---|---|
| API TEST Tool (0) | 2022.05.30 |
| 네이버 쇼핑 API (0) | 2022.05.25 |
| 네이버 지도 API 사용법 (0) | 2022.05.02 |