포건시 페이지를 카카오톡으로 공유하기

추천0

페이지 정보

작성자 GCK낸시

작성일 2023-12-14 14:23 조회 96회 댓글 0건

본문

첨부파일

Share_contents.fgko (1.1M)

관련링크

국내에서 카카오톡 메신저는 고객과의 소통을 위한 통로 뿐만 아니라, 회사 내에서 직원들과 자료를 빠르게 공유하고 협업을 하는 용도로 많이 활용되고 있습니다.

그렇기 때문에, 많은 기업에서 기업용 솔루션을 개발할 때, 카카오톡 공유 기능을 통해 직원 또는 고객분에게 데이터를 공유할 수 있는 기능을 요구하고 있습니다.

포건시에서는 자체적으로 카카오톡 연동 기능을 제공하지 않지만, 포건시의 확장 기능을 통해서 쉽게 구현할 수 있습니다. 이를 통해서, 포건시(Forguncy)에서 제작한 업무보고서, 견적서, 발주서 등의 페이지를 카카오톡을 통해서 공유할 수 있습니다.

카카오톡 공유 API를 이용하여 포건시 페이지를 공유할 수 있습니다.

이번 포스팅에서는 "포건시의 개발 확장기능"과 "카카오톡 API"를 통해서, 포건시로 만든 웹 페이지를 카카오톡을 통해서 공유하는 기능을 구현하는 방법을 설명합니다.

* 다소간의 코딩/프로그래밍이 들어가지만, 필요하신 경우, 프로젝트 파일이나 아래의 설명의 코드를 그대로 "복사/붙여넣기"하시면 동일한 기능을 구현할 수 있습니다.

결과화면

아래는 포건시 페이지를 카카오톡으로 공유하는 실제 화면입니다.

카카오톡 공유 데모 실행하기
샘플 프로젝트 다운로드하기

카카오 Developers 설정

카카오톡 공유하기 기능을 사용하기 위해서는 먼저 카카오 Developers(개발자)를 설정해야 합니다.

1. 카카오톡 개발자 사이트에 가입해 주세요.

2. 가입하였다면 우측 상단에 [내 애플리케이션]을 클릭합니다.

3. [애플리케이션 추가하기]를 클릭합니다.

4. 앱 이름과 사업자명을 입력한 후, [저장] 버튼을 클릭합니다.

5. 정상적으로 애플리케이션이 생성되었다면 해당 애플리케이션을 클릭하여 앱 키를 확인합니다.

이번 포스팅에서는 "JavaScript 키"를 사용할 예정입니다.

6. 좌측 메뉴에서 [플랫폼]을 클릭한 후, 하단의 [Web플랫폼]을 추가합니다.

카카오톡 공유 기능을 사용할 사이트 도메인을 아래와 같이 적어줍니다.

포건시 빌더 실행 URL

- 포건시 빌더를 켠 후 "실행버튼"을 눌렀을 때 브라우저(인터넷) 주소창에 "http://localhost:숫자"로 나오는 주소(URL)을 적어 주시면 됩니다.

- 포건시 빌더 사용자(포건시 개발자) PC에서 카카오톡 기능을 사용하려면 필수로 등록해야합니다.

ex) http://localhost:43694

포건시 배포 URL

- 실제 포건시 빌더에서 만든 웹 시스템을 서버에 배포 또는 해당 사이트를 접속할 때 사용하는 주소 입니다.

- 실제 운영되는 웹 시스템에서 카카오톡 기능을 사용하기 위해서는 필수로 등록이 되어야 합니다.

위와 같이 설정을 마무리하면,

포건시에서 카카오톡 연동할 수 있는 준비가 완료되었습니다.

포건시에서 카카오톡 공유하기 기능 설정하기

이제 본격적으로 카카오톡 API를 사용하여, 포건시에서 카카오톡 공유 기능을 구현해보겠습니다.

1. [파일>옵션>JavaScript 및 CSS 제작 관리]에서 아래 링크를 추가합니다.

https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js

2. 카카오톡 공유를 사용할 페이지에 [페이지 로딩 시 처리 명령 편집]을 클릭하여 명령을 아래와 같이 설정합니다.

명령 선택 : 자바스크립트로 직접 프로그래밍하기

아래의 JavaScript 코드를 입력해줍니다.

 Kakao.init('JavaScript키')

위에서 확인했던 카카오톡 앱의 JavaScript 키를 Kakao.init 괄호 안에 넣어줍니다.

JavaScript키는 카카오 Developers에서 확인 가능합니다. (상단 설명 5번을 참조해 주세요.)

3. 카카오톡으로 공유하는 메시지에서 포건시의 셀 값을 사용하기 위해 아래와 같이 셀 이름을 설정합니다.

셀 이름: TITLE
셀 이름: URL

4. 셀 영역을 선택한 후 이미지 셀 유형을 선택합니다.

우측에서 [이미지 선택]을 클릭하여 카카오톡 이미지를 넣어줍니다.

5. 이미지 지정 후, 마우스를 우클릭하여 [명령 편집]을 클릭합니다.

6. 카카오톡 이미지에 아래와 같이 명령 편집을 합니다.

명령선택 : 자바스크립트로 직접 프로그래밍하기

7. 아래의 JavaScript 코드를 복사하여 붙여넣습니다.

var page = Forguncy.Page;

//TITLE셀 값 가져오기

var title_cell = page.getCell("TITLE");
var TITLEcellValue = title_cell.getValue();

//URL셀 값 가져오기

var url_cell = page.getCell("URL");
var URLcellvalue = url_cell.getValue();

Kakao.Share.sendDefault({
  objectType: 'feed', //공유 메시지 타입을 feed로 설정
  content: {
  title: TITLEcellValue, //피드의 title에 TITLE셀 값이 나오도록 설정
  imageUrl:
      //피드의 Image로 사용할 이미지 링크 설정
      'https://www.grapecity.co.kr/images/metalsmith/forguncy/index/forguncy.png',
  link: {
           mobileWebUrl: URLcellvalue, //[자세히보기] 버튼 클릭 시 URL셀 값이 나오게 설정
           webUrl: URLcellvalue, //[자세히보기] 버튼 클릭 시 URL셀 값이 나오게 설정

        },
  }
});

이제 모든 설정이 끝났습니다.

※ 카카오톡 공유 개발 방법

이번 예제에서는 [피드(Feed)] 메시지 형식의 템플릿을 사용합니다.

피드 형식은 아래와 같이 Image URL, Title, Description, Link buttons로 구성되어 있습니다.

자세한 내용은 카카오톡 공유 개발 가이드를 참고해 주시기 바랍니다.