Naver A.I Platform - Chatbot 서비스(채팅창 작성)

CLOVA Chatbot

• 챗봇 제작 API 서비스
• 사용자의 질문 의도를 이해하여 고객 대응 등 다양한 서비스에 활용할 수 있는 Chatbot 제작 지원
• (1) 도메인 생성
  • Products & Services / CLOVA Chatbot
• (2) 빌더 실행하기
• (3) 대화 생성
• (4) 챗봇 빌드
• (5) 챗봇 테스트
• (6) 우측 상단에서 [서비스 배포]
  • [Custom API Gateway와 End-point 연결이필요합니다] / [연동]
  • APIGW 연동 설정
    • [자동 연동] / [확인]
    • [주소 복사]
  • 메신저 연동 설정
    • Secret Key [생성] / [복사]
  • 연동 완료
• (7) 스프링에서 작업

스프링에서 챗봇 서비스 구현 실습

• (3) 채팅창 작성
  • 채팅 폼 사용
  • 웰컴 메세지 추가
    • 공통 메시지 추가
    • 답변 입력 / 답변 저장

@Service
public class ChatbotService {
//    public static String main(String voiceMessage) {
    public String main(String voiceMessage) {
        String secretKey = "";
        String apiURL = "";

        String chatbotMessage = ""; // 응답 메세지
        try {
            //String apiURL = "https://ex9av8bv0e.apigw.ntruss.com/custom_chatbot/prod/";

            URL url = new URL(apiURL);

            String message = getReqMessage(voiceMessage);
            System.out.println("##" + message);

            String encodeBase64String = makeSignature(message, secretKey);

            HttpURLConnection con = (HttpURLConnection)url.openConnection();
            con.setRequestMethod("POST");
            con.setRequestProperty("Content-Type", "application/json;UTF-8");
            con.setRequestProperty("X-NCP-CHATBOT_SIGNATURE", encodeBase64String);

            // post request
            con.setDoOutput(true);
            DataOutputStream wr = new DataOutputStream(con.getOutputStream());
            wr.write(message.getBytes("UTF-8"));
            wr.flush();
            wr.close();
            int responseCode = con.getResponseCode();

            BufferedReader br;

            if(responseCode==200) { // Normal call
                System.out.println(con.getResponseMessage());

                BufferedReader in = new BufferedReader(
                        new InputStreamReader(
                                con.getInputStream()));
                String decodedString;
                while ((decodedString = in.readLine()) != null) {
                    chatbotMessage = decodedString;
                }
                //chatbotMessage = decodedString;
                in.close();
                // 응답 메세지 출력
                System.out.println(chatbotMessage);
                chatbotMessage = jsonToString(chatbotMessage);
            } else {  // Error occurred
                chatbotMessage = con.getResponseMessage();
            }
        } catch (Exception e) {
            System.out.println(e);
        }
        return chatbotMessage;
    }

    public static String makeSignature(String message, String secretKey) {

        String encodeBase64String = "";

        try {
            byte[] secrete_key_bytes = secretKey.getBytes("UTF-8");

            SecretKeySpec signingKey = new SecretKeySpec(secrete_key_bytes, "HmacSHA256");
            Mac mac = Mac.getInstance("HmacSHA256");
            mac.init(signingKey);

            byte[] rawHmac = mac.doFinal(message.getBytes("UTF-8"));
//            encodeBase64String = Base64.encodeToString(rawHmac, Base64.NO_WRAP);
            encodeBase64String = Base64.getEncoder().encodeToString(rawHmac);

            return encodeBase64String;

        } catch (Exception e){
            System.out.println(e);
        }

        return encodeBase64String;

    }

    public static String getReqMessage(String voiceMessage) {

        String requestBody = "";

        try {

            JSONObject obj = new JSONObject();

            long timestamp = new Date().getTime();

            System.out.println("##"+timestamp);

            obj.put("version", "v2");
            obj.put("userId", "U47b00b58c90f8e47428af8b7bddc1231heo2");
//=> userId is a unique code for each chat user, not a fixed value, recommend use UUID. use different id for each user could help you to split chat history for users.

            obj.put("timestamp", timestamp);

            JSONObject bubbles_obj = new JSONObject();

            bubbles_obj.put("type", "text");

            JSONObject data_obj = new JSONObject();
            data_obj.put("description", voiceMessage);

            bubbles_obj.put("type", "text");
            bubbles_obj.put("data", data_obj);

            JSONArray bubbles_array = new JSONArray();
            bubbles_array.put(bubbles_obj);

            obj.put("bubbles", bubbles_array);
//            obj.put("event", "send");

            if(Objects.equals(voiceMessage, "")) {
                obj.put("event", "open"); // 월컴 메세지
            } else {
                obj.put("event", "send");
            }
            requestBody = obj.toString();
            // 웰컴 메세지 출력


        } catch (Exception e){
            System.out.println("## Exception : " + e);
        }
        return requestBody;
    }
    public String jsonToString(String jsonResultStr) {
        String resultText = "";
        // API 호출 결과 받은 JSON 형태 문자열에서 텍스트 추출
        // JSONParser  사용하지 않음
        // images / 0 / fields / inferText 추출
        JSONObject jsonObj = new JSONObject(jsonResultStr);
        JSONArray chatArray = (JSONArray) jsonObj.get("bubbles");
        JSONObject tempObj = (JSONObject) chatArray.get(0);
        JSONObject dataObj = (JSONObject) tempObj.get("data");
//      tempObj = (JSONObject) dataObj.get("description");
        resultText += (String) dataObj.get("description");
        return resultText;
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
      <title>chatbotForm</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="js/chatForm2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/chatbot.css">
  </head>
  <body>
    <div id="wrap">
      <!-- Header -->
      <div id="chatHeader">
        <span>챗봇</span>
        <button id="btnClose">X</button>
      </div>
    <h3>챗봇 서비스</h3>

    <!-- 응답 메시지 출력  -->
    <div id="chatBox"></div><br>

    <!-- 질문 메시지 입력 폼 -->
    <form id="chatForm">
      <input type="text" id="message" name="message" size="30" placeholder="질문을 입력하세요">
      <input type="submit" value="전송">
    </form>

    <br><br>
    <a href="/">index 페이지로 이동</a>
    </div>
  </body>
</html>

$(function(){
    // 웰컴메시지를 받기 위해 message 입력 받기 전 빈 값으로 서버에 전송해서 웰컴메세지 받음
    callAjax();
    $('#chatForm').on('submit', function(event){
        event.preventDefault();
        if($('#message').val() == "") { // 질문을 입력하지 않고 전송 버튼 누를 때 웰컴 메세지 뜨지 않게
            alert("질문을 입력하세요");
            return false;
        }
        if($('#message').val() != ""){
            $('#chatBox').append('<div class="msgBox send"><span id="in"><span>' +
                $('#message').val() + '</span></span></div><br>');
        }
        callAjax();
        /* 입력란 비우기*/
        $('#message').val('');
    }); // submit 끝
    // 별도의 ajax 생성
    function callAjax() {
        $.ajax({
            url:"chatbotSend2",
            type:"post",
            data:{message: $('#message').val()},
            success:function(result){
                /* chatBox에 받은 메시지 추가 */
                $('#chatBox').append('<div class="msgBox receive"><span id="in"><span>챗봇</span><br><span>' +
                    result +'</span></span></div><br><br>');
                // 스크롤해서 올리기
                $("#chatBox").scrollTop($("#chatBox").prop("scrollHeight"));
            },
            error:function(){
                alert("오류가 발생했습니다.")
            }
        });
    }
});

@charset "UTF-8";

#wrap { margin:0 auto; width: 500px;     height: 800px; }

#chatHeader {padding: 10px 15px; border-bottom: 1px solid #95a6b4;}
#btnClose {border: none; background: none; float: right;}

#chatBox {height: 600px; width: 500px; overflow-y:scroll; padding:10px 15px; background:#9bbbd4;}

#message {width: 440px;}

#btnSubmit {float: right; background:#eeeeee; height: 28px; padding-right:0;}

.msgBox  span {padding:3px 5px; word-break:break-all; display:block;
    max-width:300px; margin-bottom: 10px; border-radius: 10px;}

.msgBox.send  span {background:#fef01b; float:right; }

.msgBox #in {width:480px; background:#9bbbd4;}
.msgBox.receive  span {background:#ffffff; float:left; }