페이스북 메신저 플랫폼 – 1 – 굿닥 병원 검색 봇 개발기

사이드 프로젝트로 페이스북 메신저 플랫폼 스터디를 진행하면서 개발한 굿닥 병원 검색 봇에 대한 개발 후기 입니다.

시작


굿닥에서는 매주 금요일 서비스팀 개발자들이 모여 기술 세미나를 진행하거나 한주간 공유 되었던 글들을 살펴보는 ‘테크톡’ 을 진행하고 있습니다.

테크톡에서 공유되었던 ‘Node.js로 5분안에 봇 만들기‘ 라는 글을 보고 정말 5분이면 만들수 있는까? 에서부터 시작 되었습니다.

Heroku 환경 구축과 페이스북 페이지 설정을 하다 보니 실제로는 30분 정도 걸려서 에코봇을 완성하였습니다.

5분봇 테스트

[에코봇]

 

다시 시작


에코봇을 완성하고 “그래 요정도 까지만 하자, 만들어봤자나..” 라는 마음으로 접어두고, 굿닥의 새로운 커뮤니티 서비스 굿닥속닥 오픈에 매진하였습니다. 

서비스 오픈후 안정화 작업까지 진행하고 나니 새로운 활력소가 필요하게 되었습니다

그래서 페이스북 메신저 플랫폼에 대해서 좀더 자세히 알아보고,  병원검색 기능을 제공하는 굿닥 병원 검색 봇 개발을 시작하였습니다.

 

Heroku 에서 AWS Lambda로


에코봇 테스트는 Heroku 환경에서 진행 했었는데  Lambda로 변경하는 작업을 먼저 시작하였습니다. 

Lambda로 변경하게 된 이유는 다음과 같습니다

  • 프론트개발자로서 Severless 환경에 구축에 대한 관심
  • 차후 확장성 및 운용, 모니터링 강화
  • 굿닥속닥에서 사용중인 환경

이미 굿닥에서 AWS 환경을 사용중이여서 서버 개발자분의 도움을 받아 Lambda 환경을 구축하였습니다.(굿닥의 커뮤니티 서비스 굿닥속닥의 서버 환경은  Lambda 기반으로 구축한 서비스 입니다. 굿닥의 테크스택에 관하여 -1- 서버스택편 참고)

참고 : Building a Serverless Facebook Messenger Chatbot

 

개발 시나리오  


  • 첫 메신저 실행시 인사 메시지 설정
  • 시작하기 버튼 추가(클릭시 콜백 메시지 전송)
  • 고정메뉴 추가(병원 이벤트 모아보기, 굿닥 캐스트, 굿닥 웹사이트)
  • 사용자가 전송한 메시지를 굿닥의 검색API 를 이용하여 병원 검색
  • 병원 검색 결과를 generic 탬플릿 구조에 맞게 사용자에게 전송
  • 검색 결과 없을시 “[검색어]의 검색 결과가 없습니다메시지 전송

 

굿닥 병원검색 봇 


현재 굿닥 병원 검색 봇은 페이스북 메신저를 통해서 사용할 수 있습니다. 

굿닥 페이스북 PC bot

[PC 페이스북 페이지]

굿닥 메신저 mobile 봇

[모바일 페이스북 메신저 앱]

고정메뉴

[고정 메뉴]

병원 검색 결과

[메시지 검색 결과]

 

후기


페이스북 메신저 봇 개발은 자발적인 스터디와 사이드 프로젝트로 시작 하였습니다.

새로운 기술에 대한 관심, 자기주도 학습, 리뷰를 통해서 성장할 수 있는 기회가 되었고, 앞으로도 더 많은 것을 해보고 싶다는 생각이 든 계기가 되었습니다.
사내 리뷰

[사내 리뷰]

현재는 병원 검색을 이용할 수 있는 단순한 기능의 챗봇 이지만 굿닥에서 진행하는 ‘병원 이벤트’, 유용한 의료 콘텐츠 ‘굿닥 캐스트’ 등 다양한  콘텐츠를 제공할 수 있는 챗봇을 만들기 위해서 노력하고 있습니다. 

 

굿닥에서는 좋은 개발자와 함께 하기를 항상 기대하고 있습니다. 개인의 성장이 회사의 성장으로 이어 질 수 있도록, 많은 노력을 해나가고 있습니다.

현재 서버 백엔드, 모바일(Android) 개발자를 채용중에 있으므로 관심있으신 분들의 많은 지원을 기다리고 있겠습니다. 

ECMAScript 2016 표준 릴리즈

ECMAScript의 표준 릴리즈 주기를 1년으로 결정하고 뒤에 붙는 버전(ES7)대신 발표년도(2016)를 쓰기로 한 이후 첫 정식 릴리즈 입니다.

ES2016은 ES2015에 비해서 크게 달라진 점은 없지만 자바스크립트의 표준화가 이루어 지고 있다는 점에서 의미가 있다고 생각합니다.


Array.prototype.includes

이 메소드는 원래 ES2015에서  Array.prototype.contains로 추가 될 예정이였으나 명칭의 혼동이 있어서 이번에 includes로 추가 되었습니다. 배열안에 있는 데이터 중에서 찾고자 하는 요소가 있는지 여부를 알수 있는 메소드 입니다.

Syntax

array.includes(searchElement[, fromIndex])

Examples

[1, 2, 3].includes(2);     // true

[1, 2, 3].includes(4);     // false

[1, 2, 3].includes(3, 3);  // false

[1, 2, 3].includes(3, -1); // true

[1, 2, NaN].includes(NaN); // true


Exponentiation(거듭제곱) Operator

x ** y” 형태로 사용하며 Math.pow(x, y) 의 결과와 동일합니다.

Syntax

var1 ** var2

Examples

2 ** 3 // 8

3 ** 2 // 9

3 ** 2.5 // 15.588457268119896

10 ** -1 // 0.1

NaN ** 2 // NaN

2 ** 3 ** 2 // 512

2 ** (3 ** 2) // 512

(2 ** 3) ** 2 // 64


지원

크롬은 52 버전에서 ES 2016을 지원할 예정이고, 파이어폭스는 이미 정식 배포된 43버전부터 시험판 단계인 48 버전까지 단계별로 ES 2016 기능을 구현할 예정입니다.


참고링크

ECMAScript 2016 Language Specification