카카오링크 API로 카카오톡 공유하기 버튼 만들기
다른 학교 도서관의 책을 빌리기 위해서는 그 학교의 지인에게 부탁할 경우가 많을텐데 그때 도서 검색 결과를 같이 보내면 서로가 편하기 때문에 이 검색 결과를 공유할 일이 많을 것이라 생각했다. 그래서 카카오톡 공유하기 버튼을 만들고자 했고 이는 카카오에서 제공하는 카카오링크 API와 메시지 API로 구현할 수 있었다.
kakao developers 홈페이지(https://developers.kakao.com/)에서 간단히 회원가입하고 내 어플리케이션에 API를 사용할 도메인을 등록하는 것이 기본적인 준비였다. 그 이후 다양한 형식 중 원하는 템플릿에 따라 HTML에는 버튼을 추가해주고,
<a id="kakao-link-btn" href="javascript:sendLink()" style="float: right;">
<span style="color: black; font-weight: bold;">카카오톡 공유하기</span>
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" style="width: 25px;"/>
</a>javascript 코드를 추가해주면 어렵지 않게 구현할 수 있었다.
<script type='text/javascript'>
Kakao.init('개인 JavaScript 키');
</script>
function sendLink() {
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: "YES LIBRARY "+'"{{keyword}}"' +" 검색 결과",
description: '연세대, 이화여대, 서강대 도서관 통합 검색',
imageUrl:
'https://i.ibb.co/BPJLn8p/yeslibrary.png',
link: {
mobileWebUrl: 'http://yeslibrary.shop/result?keyword_give=' + "{{keyword}}",
webUrl: 'http://yeslibrary.shop/result?keyword_give=' + "{{keyword}}"
},
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://yeslibrary.shop/result?keyword_give=' + "{{keyword}}",
webUrl: 'http://yeslibrary.shop/result?keyword_give=' + "{{keyword}}"
},
}
],
})
}
메인 화면에서 최근 검색어 보여주기
최근에 다른 사람들은 어떤 책을 검색했는지 보여주기 위해 검색창 아래에 최근 검색어를 보여주고 검색어를 누르면 그에 대한 검색결과를 보여주는 기능을 만들고자 했다. 이 기능을 구현하기 위해 기존에 검색어를 입력하면 그 검색어에 대한 검색결과로 이동하게 하는 함수에 ajax POST 요청으로 서버에 검색어를 전달하고 그 검색어를 DB에 저장하도록 했다. 또한 메인 페이지가 로드될 때 DB에서 최근에 입력된 검색어 4개를 ajax GET 요청으로 가져와 일정한 HTML 양식에 맞추어 추가해주었다.
function searching() {
let keyword = $("#searchBox").val();
$.ajax({
type: "POST",
url: "/keywords",
data: { 'keyword_give': keyword },
success: function (response) {
if (response['result'] == 'success'){
alert(response['msg'])
window.location.href = `/result?keyword_give=${keyword}`;
}
}
});
}DB에는 이전 입력 데이터 ~ 최근 입력 데이터순으로 데이터가 정렬되어 있기 때문에 최근에 입력된 검색어를 가져오기 위해 시간 데이터를 가지고 있는 '_id' 영역을 기준으로 내림차순으로 db를 정렬하고자 하였다.
db.search.find().sort({"_id": -1})하지만 '_id' 값이 ObjectID("~~~")라는 자료형이어서 그런지 내림차순 정렬이 되지 않고 계속 에러가 발생했다. 그래서 DB에서 '_id'를 제외한 데이터 모두를 가져와 list로 변환한 뒤 리스트의 슬라이싱을 이용해 뒤에서 4개의 데이터를 keywords라는 리스트에 담아 GET 요청을 통해 넘겨주었다.
keywords = list(db.search.find({},{'_id':False}))[-1:-5:-1]
return jsonify({'result': 'success', 'keywords':keywords})이렇게 넘겨받은 검색어를 HTML에 추가해주는 함수도 만들었다.
function recent_keyword() {
$.ajax({
type: "GET",
url: "/keywords",
success: function (response) {
if (response['result'] == 'success') {
let keywords = response['keywords'];
for (let i = 0; i < keywords.length; i++) {
let keyword = keywords[i]['keyword'];
let temp_html = `<a href="http://yeslibrary.shop/result?keyword_give=${keyword}">
<span class="recent-item">${keyword}, </span>
</a>`
$('#recent-list').append(temp_html);
}
}
}
});
}
TIL
- 네이버나 카카오 페이지에는 능력자 분들이 만들어 놓으신 API가 아주 잘 정리되어 있다.
- pymongo 데이터의 '_id' 영역은 시간 정보를 담고 있지만 'ObjectID' 자료형이기 때문에 활용하기 위해서는 str(object_id)를 이용해 문자열로 바꿔주어야 한다.
