'API' 카테고리의 글 목록 (2 Page)

'API'에 해당되는 글 10건

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

Posted at 2018. 8. 29. 05:30 | Posted in API/Telegram

참고① : https://ncube.net/13536

참고② : https://bakyeono.net/post/2015-08-24-using-telegram-bot-api.html

■ 텔레그램 봇을 사용하여 메세지 전송하기

#01. BotFather를 통한 메세지 봇 생성하기

텔레그램의 봇은 @BotFather를 통해 관리된다.

텔레그램 응용프로그램을 실행한뒤 아래 이미지와 같은 순서대로 작업을 진행한다.

01. 메시지 봇 생성하기

① 텔레그램 검색창에 BotFather 라고 입력한다.

② 검색결과에서 BotFather를 선택하고 대화를 시작한다.

③ /start라고 입력한다.

④ /newbot이라고 입력하여 새로운 봇을 생성할 준비를 한다.

⑤ 자신이 사용할 봇의 아이디를 입력한다.(예 : wicked_test)

⑥ 생성한 봇 아이디에 _bot 이라고 추가적으로 입력해 준다.(예 : wicked_test_bot)

⑦ 텔레그램의 답변문구의 토큰 API키 값을 확인한다.

02. 정상적으로 메시지 봇이 생성되었다면 텔레그램 API에 getUpdate 값을 웹 브라우저로 전달하여 생성이 잘 되었는지를 확인해보자.

# 예시

https://api.telegram.org/bot + 토큰 API 키값 + /getUpdates

# 출력결과

https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/getUpdates

#02. Chart ID 확인하기

01. 먼저 메시지를 전달받을 텔레그램 계정으로 로그인한 텔레그램 채팅창에서 위에서 제작한 봇을 검색한다.

① 검색창에서 제작한 텔레그램 봇의 아이디 값을 입력한다.(예 : wicked_test)

② 검색결과에 제작한 봇 아이디가 나온다면 선택해준다.

③ 대화를 시작한다.

02. 대화가 시작되면 위와같이 /start 라고 자동으로 입력되는것을 확인 할 수 있다.

03. 이제 다시 위에서 실행한 웹 브라우저를 새로고침 하여 다시 getUpdates 를 전달해보면 입력한 값이 잘 출력되는 것을 확인 할 수 있다.

#03. 사용자에게 메세지 전송하기

01. 웹 브라우저를 실행해서 아래와 같이 코드를 작성하 메시지를 보내보도록 하자.

# 예시

https://api.telegram.org/bot + 토큰 API 키값 + /sendmessage?chat_id= + 사용자차트ID + &text= + 전송할 메세지

# 출력결과

https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/sendmessage?chat_id=39538219&text=Message

02. 실제 텔레그램 상에서도 작성한 메세지 내용이 정상적으로 출력되는 것을 확인 할 수 있다.

저작자표시

[Editer] NAVER 스마트 에디터 세팅[Editer] NAVER 스마트 에디터 세팅

Posted at 2018. 4. 20. 17:40 | Posted in API/NAVER 스마트 에디터

※ 참고 : 이 포스팅은 SmartEditor Basic을 기준으로 작성되었습니다.

■ 네이버 스마트 에디터 세팅하고 사용하기

01. https://github.com/naver/smarteditor2 사이트에 접속하여 smarteditor2-master.zip 파일을 다운로드 받는다.

02. 다운받은 smarteditor2-master.zip 파일의 압축을 해제한뒤 파일명을 smarteditor로 변경하였다.

03. 생성된 smarteditor 프로젝트에서 board.php 파일을 생성한다.

04. board.php 파일의 소스코드는 아래와 같다.

board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Naver :: Smart Editor 2</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function submitContents(elClickedObj) {

    // 에디터의 내용이 textarea에 적용됩니다.
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
    try {

        elClickedObj.form.submit();

    } catch(e) { }
}
</script>
</head>
<body>
<form action="view.php" method="post" accept-charset="utf-8">
 <b>제목 :</b> <input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once("./workspace/SmartEditor2.html");      // 스마트 에디터를 include 한다.
?>
<div style="height:20px;"></div>
<div align="center">
    <input type="button" value="등록" onClick="submitContents(this);"/>
</div>
</div>
</form>
</body>
</html>

05. 다음으로 workspace폴더로 이동하여 include를 사용하여 가져올 SmartEditor2.html 파일을 수정해야 한다.

06. SmartEditor2.html 파일의 수정사항은 아래와 같다.

① 파란색으로 강조되어 있는 부분은 수정한 내용이다.

② 빨간색으로 강조되어 있는 부분은 삭제해도 된다.

SmartEditor2.html

// 인클루드를 할 것이기 때문에 SmartEditor2Skin.html의 연결경로를 절대경로로 변경한다.

    , sSkinURI : "http://localhost/smarteditor/workspace/SmartEditor2Skin.html"
    , htParams : {
        bUseToolbar : true                            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseVerticalResizer : true                    // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseModeChanger : true                    // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
        // , bSkipXssFilter : true                        // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
        // , aAdditionalFontList : aAdditionalFontSet    // 추가 글꼴 목록
        , fOnBeforeUnload : function() {
            //alert("완료!");
        }

, I18N_LOCALE : sLang
    } // boolean
    , fOnAppLoad : function(){
        //예제 코드
        //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
    }
    , fCreator : "createSEditor2"
});

/*
function pasteHTML() {
    var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
    oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
*/

/*
function showHTML() {
    var sHTML = oEditors.getById["ir1"].getIR();
    alert(sHTML);
}
*/

/*
function submitContents(elClickedObj) {
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.

    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.

    try {
        elClickedObj.form.submit();
    } catch(e) {}
}
*/

/*
function setDefaultFont() {
    var sDefaultFont = "궁서";
    var nFontSize = 24;
    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
}
*/
</script>

</body>
</html>

07. 다음으로 스마트 에디터의 스킨내용이 담겨있는 SmartEditor2Skin.html 파일을 수정한다.

08. SmartEditor2Skin.html 에서 수정할 내용은 화면에 띄워지는 스마트 에디터의 버전 정보를 삭제하는 것 뿐이다.

SmartEditor2Skin.html

~ 기타 코드 생략 ~

</head>
<body>




<div id="smart_editor2">
<div id="smart_editor2_content"><a href="#se2_iframe" class="blind">글쓰기영역으로 바로가기</a>

~ 기타 코드 생략 ~

09. 마지막으로 smarteditor 폴더로 돌아와서 view.php 파일을 생성한다.

10. view.php 파일의 내용은 아래와 같다.

view.php

<?php
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
?>

11. 이제 board.php 파일을 열고 정상적으로 작동되는지 테스트 해보자.

12. 그럼 아래와 같이 view.php에 작성내용이 정상적으로 나타나면서 작업이 완료 되었다.

저작자표시

[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작

Posted at 2018. 4. 20. 12:43 | Posted in API/DAUM 오픈 에디터

■ 다음 오픈 에디터 YouTube 영상 삽입 커스텀 버튼 제작

01. 먼저 다음 오픈 에디터 라이브러리중 editor.html 파일을 열고 수정한다.

02. editor.html 소스코드에 YouTube 영상 삽입 메뉴를 추가한다.

editor.html

~ 기타 코드 생략 ~

<li class="tx-list">
    <div style="height:25px;font-size:11px;margin-top:3px;">
        <a href="javascript:;" onClick="youTubeImplant();" title="YouTube">
            <div style="float:left;display:flex;align-items:center;">
                <img src="./daumEditor/images/icon/editor/youtube-logo.png"/>    
            </div>
            <div style="float:left;display:flex;align-items:center;margin-top:2px;"> YouTube</div>
        </a>
    </div>
</li>

<li class="tx-list">
    <div unselectable="on" id="tx_media" class="tx-media tx-btn-trans">
        <a href="javascript:;" title="외부컨텐츠" class="tx-text">외부컨텐츠</a>
    </div>
</li>

~ 기타 코드 생략 ~

※ 사용된 CSS Style들은 삽입한 이미지에 맞추기위해 사용된것이다. 각자 주어진 환경에 맞게 수정해야 할것이다.

03. 그럼 상단 메뉴에 아래와 같이 YouTube 버튼이 추가된 모습을 확인 할 수 있다.

04. 다음으로 다음에디터를 불러올 board.php 파일을 수정한다.

05. board.php 파일에 YouTube 업로드 기능을 수행할 팝업 기능을 가진 자바스크립트 함수를 추가한다.

board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Daum 에디터</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<style type="text/css">
    a { text-decoration:none;color:#000000; }
</style>
<script type="text/javascript">
function saveContent() {
    if(jQuery("#title").val() == "") {
        alert("제목을 입력해 주세요.");
        jQuery("#title").focus();
        return;
    }

    Editor.save();
}

// YouTube 영상 업로드 창 팝업
function youTubeImplant() {

    var popUrl = "./daumEditor/pages/trex/youtube.html";
    var popOption = "./daumEditor/pages/trex/youtube.html";
    window.open(popUrl, "", popOption);
}
</script>
</head>
<body>
<form name="tx_editor_form" id="tx_editor_form" action="view.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
 <b>제목 :</b> <input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once ("./daumEditor/editor.html");
?>
<div align="right"><input type="button" value="등록" onClick="saveContent();"/></div>
</div>
</form>
</body>
</html>

06. 마지막으로 YouTube 동영상 업로드 기능을 수행할 youtube.html 파일을 제작한다.

※ 이 포스팅은 multimedia.html 파일을 복사한 youtube.html파일 안의 코드를 수정하는 식을 작업을 진행하였다.

07. youtube.html 파일의 수정결과는 아래와 같다.

youtube.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Daum 에디터 - YouTube 영상첨부</title>
<script src="../../js/popup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../css/popup.css" type="text/css" charset="utf-8"/>
<style type="text/css">
   input,textarea { border:1px solid #000000;vertical-align:middle;font-size:12px;}

   /* swf wrapper, set width/height */
   .wrapper { width:458px; }
   .code { width:458px; }

   .hidden { display:none;}
   .show { display:auto;}
   .desc{ margin: 15px 27px 5px 25px;padding:10px 8px;text-align:left;font-weight:bold;}
   .desc span{ color:#496ce5; }
   .field { margin:0 auto 10px;background:#ffffff url(../../images/icon/editor/tvpot/body_bg.gif?rev=1.0.1);width:420px;height:239px;}
   .field li{ list-style-type:none;}
   .field .codesubmenu { padding-top:20px;width:350px; margin:0 auto; }
   .codeMenu { margin:0px auto;}
   .codeMenu li { display:inline;margin-right:20px; }
   .inputmenu { margin-top:20px;padding-left:30px; color:#333;font-size:11px;font-family:"돋움",dotum}
   .inputmenu input, .inputmenu textarea{ width:308px; }
   #codeUrl { margin-top:10px;}

   .inputmenu .unselected{color:#bbbbbb}
   .inputmenu .unselected input, .inputmenu .unselected textarea{border:1px solid #bbbbbb;}

   .point {
       font-weight:normal;
       color:#a7b9ec;
   }
</style>
<script type="text/javascript">
// <![CDATA[
   function initEmbeder() {
       var _opener = PopupUtil.getOpener();
       if(!_opener) {
           alert('잘못된 경로로 접근하셨습니다.');
           return;
       }

       var _embeder = getEmbeder('media');
       window.execEmbed = _embeder.embedHandler;

       autoResizeHeight($tx("wrapper"));
   }

   // 코드 삽입 완료 후
   function done() {

       var _data = {};
       var str = document.getElementsByName("url")[0].value.trim();

// YouTube URL 주소에서 뒤에서 11자리의 문자열을 잘라낸다.

        youtubeCode = str.substring(str.length - 11);
       _data.url = "https://youtu.be/" + youtubeCode;

       if(typeof(execEmbed) == 'undefined') { // Virtual Function
            return;
        }
       executeAfterDataCheck(_data, function(){
           execEmbed(_data);
           closeWindow();
        });
   }

   function executeAfterDataCheck(data, successHandler) {
       if (data.url || data.code) {
           successHandler();
       } else {
           alert("첨부할 멀티미디어 주소를 바르게 입력해주세요.");
       }
   }

<!-- 삭제

-->

// ]]>
</script>
</head>

<body onload="initEmbeder()">
<div id="wrapper" class="wrapper">
<div class="header">
   <h1>YouTube 동영상 삽입</h1>
</div>
<div class="body">
   <div id="code" class="code">
       <p class="desc">링크입력 상자에 삽입할 <span>YouTube</span> 영상의 주소를 입력하세요.</p>
       <p class="desc">
           <label>링크입력 </label>
           <input type="text" name="url" style="width:320px;"/>
       </p>
   </div>
</div>
<div class="footer">
   <p><a href="#" onclick="closeWindow();" title="닫기" class="close">닫기</a></p>
   <ul>
       <li class="submit"><a href="#" onclick="done();" title="등록" class="btnlink">등록</a> </li>
   </ul>
</div>
</div>
</body>
</html>

08. 이제 다시 브라우저에서 에디터를 오픈하고 YouTube 동영상을 Daum Open Editor에 삽입해보자.

저작자표시

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[Editor] Daum Open Editor 세팅하고 사용하기 (0)	2018.03.26

[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기

Posted at 2018. 4. 4. 20:11 | Posted in API/우편번호

■ 다음 우편번호 - 팝업창 띄우지 않고 사용하기

-. 이전 포스팅에서 팝업창을 띄워서 사용하는 방법에 대한 포스팅을 작성하였는데. 이 방법만으로는 사용에 한계가 있었다.

① 모바일 환경에서의 사용을 고려한 반응형 웹에서 사용가능하도록 UI 변경

② 팝업창 사용을 막아둔 브라우저 환경 대응

-. postcode.v2.js 가 나오면서 좀더 다양하고 많은 기능을 사용할 수 있게 되었다.

-. 다음 우편번호 서비스의 "iframe을 이용하여 페이지에 끼워 넣기"를 바탕으로 작성하였다.

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
    function openDaumZipAddress() {

       // 우편번호 찾기 화면을 넣을 element를 지정
        var element_wrap = document.getElementById("wrap");

       // wrap 레이어가 off된 상태라면 다음 우편번호 레이어를 open 한다.
        if(jQuery("#wrap").css("display") == "none") {
           new daum.Postcode({
               oncomplete:function(data) {
                   jQuery("#zonecode").val(data.zonecode);
                   jQuery("#address").val(data.address);
                   jQuery("#address_detail").focus();
                   console.log(data);
               }

               // 사용자가 값을 주소를 선택해서 레이어를 닫을 경우
               // 다음 주소록 레이어를 완전히 종료 시킨다.
                , onclose:function(state) {
                   if(state === "COMPLETE_CLOSE") {

                       // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
                        offDaumZipAddress(function() {
                            element_wrap.style.display = "none";
                       });
                   }
               }
, width:"100%" // 가로사이즈를 wrap 레이어에 맞움
            }).embed(element_wrap);

           // 슬라이드 다운 기능을 이용해 레이어 창을 오픈한다.
            jQuery("#wrap").slideDown();
       }

       // warp 레이어가 open된 상태라면 다음 우편번호 레이어를 off 상태로 변경한다.
       else {

           // 콜백함수를 실행하여 슬라이드 업 기능이 실행 완료후 작업을 진행한다.
           offDaumZipAddress(function() {
                element_wrap.style.display = "none";
               return false;
           });
       }
   }

   function offDaumZipAddress() {

        // 슬라이드 업 기능을 이용해 레이어 창을 닫는다.
       jQuery("#wrap").slideUp();
    }
</script>
</head>
<body>
   <input id="zonecode" type="text" value="" style="width:50px;" readOnly/>
    
   <input type="button" onClick="openDaumZipAddress();" value = "주소 찾기"/>
    

    <div id="wrap" style="display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px"></div>
   <div style="height:10px;"></div>
   <input type="text" id="address" value="" style="width:240px;" readOnly/>
   <input type="text" id="address_detail" value="" style="width:200px;"/>
</body>
</html>

※ 계속 값을 체크해 강제로 display:none 처리한 이유

기본적으로 위에서 설명한 다음 우편번호 서비스의

"iframe을 이용하여 페이지에 끼워 넣기"를 필자의 입맛에 맞게 수정한 내용이다.

이렇게 한 이유는 좀 자연스러운 애니메이션(슬라이드) 효과를 사용하고 싶어서 였다.

그래서 위 코드에서는 if(jQuery("#wrap").css("display") == "none") 으로 한번

onclose:function(state) 기능으로 또 한번

다음 주소록 레이어를 강제로 종료시키고 있는데.

이렇게 한 이유는 아래와 같다.

처음 제작 했을때는 slideUp과 slideDown 기능이 아니라 slideToggle만을 사용하여 편하게

display 설정 만을 변경해가며 사용했었다.

그런데 다음 주소록 레이어가 제대로 종료가 되지 않아서 발생을 하는지.

실제 사용중 종종 <div id="wrap"></div>를 지정한 영역에

# slideToggle 기능만을 사용한 결과물

위와 같이 실선이 생기는경우가 발견되었다.

그래서 위와같이 callback과 slideDown기능을 사용하여 레이어를 한번 닫고.

작업이 완료된 이후 한번더 다음 주소록 레이어를 완전히 숨기는 방식으로 변경하였다.

# 출력결과 - Computer Web

# 출력결과 - Mobile Web

위와같이 모바일에서의 사용에 문제가 없게끔 변경해 보았다.

저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 주소 검색 - 행정안전부 API 사용하기 (0)	2019.11.20
[API] 다음 - 우편번호 API 사용하기 (0)	2018.03.13

Prev Next

1 2 3

'API'에 해당되는 글 10건

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

[Editer] NAVER 스마트 에디터 세팅[Editer] NAVER 스마트 에디터 세팅

[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[API] 다음 - 우편번호 API 모바일에서 사용하기[API] 다음 - 우편번호 API 모바일에서 사용하기

'API > 우편번호' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바