카카오톡 공유하기
보통 MBTI나 여러 설문조사를 진행하면 마지막에 카카오톡 공유하기 버튼이 나온다.
그래서 나도 공유하기 버튼을 추가해보기로 했다.
카카오톡 공유하기는 카카오 API를 사용하면 쉽게 사용할 수 있다.
카카오 개발자 사이트 셋팅
우선 카카오 개발자사이트에 가입 후 어플리케이션을 등록해야한다.
가입 후 내 애플리케이션을 누르면 만들 수 있다.
어플을 만든 후 눌러보면 위와 같은 창이 나온다.
앱 키는 API를 쓸 때 사용해야하고 내가 어플리케이션에 도메인을 등록하기 위해 플랫폼에서 설정을 해야한다.
플랫폼이라고 써져있는 부분을 누르면
위와 같은 창이 나온다.
여기서 사용할 플랫폼에 도메인을 등록해주면 된다. 나는 웹에서만 서비스할거라 웹 도메인만 등록했다.
도메인이 2개인 이유는 처음에 freenom을 이용해 무료 도메인으로 배포했었는데 한 3일 지나니까 모바일에서 접속이 안된다... 그래서 돈주고 도메인을 구매해 하나 더 등록했다.
개발 환경에서 셋팅
카카오톡 메세지 보내기 문서를 참고해서 만들었다.
카카오 API를 처음 써봤는데 정리가 잘 되어있어서 좋았다. 카카오에서 제공하는 버튼을 사용하거나 개발 환경이 저와 다르다면 공식 문서를 참고하시는걸 추천드립니다 !
나는 자바스크립트를 사용했고 기존에 내가 쓰던 버튼을 활용해서 구현했다.
모든 코드는 공유하기 버튼이 들어갈 html파일에서 작업한 코드이다.
1. 자바스크립트 링크 추가하기
링크를 <head> 추가해줬다.
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
2. html 파일에 버튼 추가하기
나는 기존에 있던 버튼을 사용했다.
<button id="share">카카오톡 공유하기 </button>
3. 카카오 코드 추가하기
아래의 코드를 추가해줬다.
Kakao.init('카카오 앱 자바스크립트 키');
function sendLink() {
Kakao.Link.createDefaultButton({
container: "#share", /*버튼 아이디*/
objectType : "feed", /*공유 타입. 다른 방식도 있는데 공식 홈페이지에서 확인이 가능하다.*/
content: {
title: "공유할 때 보이는 제목",
description: "설명 글",
imageUrl:"함께 첨부될 이미지의 url",
link:{
webUrl:"연결될 웹사이트 url"
mobileWebUrl:"연결될 웹사이트 url"
}
}
});
};결과
버튼을 누르면 이렇게 공유가 잘 되는걸 볼 수 있다. 자세히 보기를 누르면 내 웹사이트의 첫 화면으로 이동한다.
피드백 적용하기
배포하고 주변 지인들에게 먼저 테스트를 요청했었다.
간단한 오류 몇 개는 금방 수정했는데 카카오톡 공유하기에 문제가 조금 있었다.
보통 공유하기를 했을 때 결과창이 공유되어 다른 사람들과 서로의 결과에 대해 얘기하는데 내 사이트의 경우 첫 페이지로 이동되니까 아쉽다는 것이었다.
쉽게 생각하면 결과창으로 url을 바꾸면 되는거 아니야? 할 수 있는데 내가 만든 사이트의 경우 POST방식으로 설문 결과를 넘겨줘서 ORM을 이용해 결과를 불러오기 때문에 단순히 URL을 변경한다고 결과를 볼 수 없었다.
그래서 어떻게 해결할까 고민했던게 몇 개 있었는데
1. 결과창마다 고유의 값을 줘서 url에 값 넘겨주기
result.html로 설정되어 있는 사이트를 result_01.html, _02.html.... 이런 식으로 만드는 것이다.
하지만 내 결과값은 총 96개고 이리보나 저리보나 너무 비효율적이다 ㅎ
2. 결과값에 값을 주고 쿼리스트링 이용하기
결과창마다 고유의 값을 주고 쿼리스트링에 넣어서 공유하는 것이다. 예를들면
urtype.xyz/result?number=01이런식으로 ! 그리고 저 쿼리스트링 값을 이용해 db를 불러오는 거지.. 근데 이것도 DB속 모든 브랜드에 컬럼을 추가해 번호를 줘야하는 노가다를 뛰어야한다.
3. 설문 결과를 쿼리스트링에 넣어주기
기존에 있는 데이터와 코드를 가지고 할 수 있는 방법이 없을까 ? 하고 고민하다가 설문 결과를 쿼리스트링에 넣기로 했다.
설문할 때 POST타입으로 받아온 설문의 결과를 HTML에 넘겨주고, 카카오톡 공유하기 할 때 쿼리스트링으로 붙여줬다.
http://urtype.xyz/result_share?Size=soho&Genre=미니멀&Point=Y&Color=Y&Price=LOW
공유하기 링크를 이렇게 보내주는 것이다. 자세한 코드는 아래에 쓸 예정 !
상세 코드
글로 보면 조금 어려울 수 있는데 코드를 보면 쉽다. views.py 와 result.html의 코드를 보면 된다.
views.py
거의 동일한 코드인데 POST방식인지, GET방식인지의 차이이다.
POST방식은 유저가 직접 설문을 했을 때 이며 GET방식은 공유된 링크를 통해 결과만 볼 때 이다.
유저가 설문했을 때는 form을 통해 POST로 넘어오고 링크를 통해 접속했을 땐 GET으로 들어오기 때문이다.
공유된 결과를 봤을 때 유저 정보가 업데이트 되면 안되므로 POST방식일 때만 DB를 업데이트한다.
def Result(request):
if request.method == 'POST' :
brand_Size = request.POST.get('brand_Size')
brand_Genre = request.POST.get('brand_Genre')
design_Point = request.POST.get('design_Point')
design_Color = request.POST.get('design_Color')
avg_Price = request.POST.get('avg_Price')
# 브랜드 규모에 따라 DB에서 값 불러오기
if brand_Size == 'Globals' :
datas, name = ReadGlobals(brand_Genre,design_Point, design_Color, avg_Price)
if brand_Size == 'National' :
datas, name = ReadNational(brand_Genre, design_Point, design_Color, avg_Price)
if brand_Size == 'Middle' :
datas, name = ReadMiddle(brand_Genre,design_Point, design_Color, avg_Price)
if brand_Size == 'Soho' :
datas, name = ReadSoho(brand_Genre, design_Point, design_Color, avg_Price)
length = datas.count()
# 유저 정보 업데이트 (포스트로 넘어올 때만 업데이트)
UserInfoUpdate(name)
# 카카오톡 공유하기를 위한 데이터
kakao_data = {'Size':brand_Size, 'Genre':brand_Genre, 'Point':design_Point, 'Color':design_Color, 'Price':avg_Price}
return render(request, 'result.html',{'datas':datas, 'length':length, 'kakao_data':kakao_data})
def ShareResult(request):
if request.method == 'GET' :
brand_Size = request.GET.get('Size')
brand_Genre = request.GET.get('Genre')
design_Point = request.GET.get('Point')
design_Color = request.GET.get('Color')
avg_Price = request.GET.get('Price')
# 브랜드 규모에 따라 DB에서 값 불러오기
if brand_Size == 'Globals' :
datas, name = ReadGlobals(brand_Genre,design_Point, design_Color, avg_Price)
if brand_Size == 'National' :
datas, name = ReadNational(brand_Genre, design_Point, design_Color, avg_Price)
if brand_Size == 'Middle' :
datas, name = ReadMiddle(brand_Genre,design_Point, design_Color, avg_Price)
if brand_Size == 'Soho' :
datas, name = ReadSoho(brand_Genre, design_Point, design_Color, avg_Price)
length = datas.count()
# 카카오톡 공유하기를 위한 데이터
kakao_data = {'Size':brand_Size, 'Genre':brand_Genre, 'Point':design_Point, 'Color':design_Color, 'Price':avg_Price}
return render(request, 'result.html',{'datas':datas, 'length':length, 'kakao_data':kakao_data})result.html
render를 통해 넘어온 값을 share_data라는 변수에 저장해준다.
share_data는 /result로 연결되지 않고 /result_share로 연결되어 view.py에서 get방식의 함수로 연결되게 해준다.
공유할 때 url에 share_data 변수를 붙여주면 결과값이 공유된다.
/* 공유하기 */
Kakao.init('자바스크립트 앱키');
share_data = "/result_share?Size={{kakao_data.Size}}&Genre={{kakao_data.Genre}}&Point={{kakao_data.Point}}&Color={{kakao_data.Color}}&Price={{kakao_data.Price}}"
function sendLink() {
Kakao.Link.createDefaultButton({
container: "#share",
objectType : "feed",
content: {
title: "[UR-Type] 내 패션 취향에 맞는 브랜드 찾기",
description: "취향에 맞는 무신사 브랜드를 찾아보세요.",
imageUrl:"https://media.vlpt.us/images/eesiwoo/post/9d808c0c-45d8-4ef1-97d5-619c6bf16202/urtype.png",
link:{
webUrl:"http://urtype.xyz" + share_data,
mobileWebUrl:"http://urtype.xyz" + share_data
}
}
});
};