IT & Art

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에 fulfillment inline editor 대신 webhook을 사용하여 외부 솔루션 연동을 확장했습니다. 오늘은 클라이언트 사이드를 구현해 보겠습니다. 클라이언트 사이드는 텍스트 및 오디오 기반 앱과 챗봇으로 구현할 수 ..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에 fulfillment inline editor를 사용해서 외부 사이트 연동해 봤습니다. 서비스가 복잡해지면 fulfillment 코드도 복잡해지는만큼, webhook이 필수적인데요, 지금부터는 fulfillment inline..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 편에서 fulfillment를 사용해봤습니다. 오늘은 fulfillment inline editor를 통해 외부 사이트를 연동해 봅니다. 외부 서버 연동 코딩에 앞서, 날씨 정보를 가져올 수 있는 외부 사이트가 필요한데, 실제 날씨 ..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 시간에는 티키타카를 위한 컨텍스트에 대해 알아봤습니다. 이번 시간에는 Fulfillment에 대해 알아봅시다. Why Fulfillment? 지금까지는 브라우저로 Dialogflow 콘솔에 접속해서 마치 서류의 빈 칸을 채우듯 쉽고 ..

Google Cloud Platform(이하 GCP)은 Speech, Dialogflow, Vision AI, Firebase 등 다양한 서비스를 제공하는 클라우드 플랫폼입니다. 시작하기 GCP는 유료 서비스이지만, 최초 가입 시 90일간 $300의 무료 크레딧이 제공되는데, 이 정도만 있으면 Dialogflow는 물론, TTS, STT 등 다양한 서비스를 배워보고 체험하기 충분합니다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 가입해 봅시다. 최초 가입 시 90일간 무료로 $300 제공됩니다. 가입을 완료하면 메인 화면이 나오는데, 좌측 상단의 메뉴를 열어 결제로..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 지난 편에서 우리는 Dialogflow 에이전트를 만들고 날씨 인텐트를 만들어 보면서 개념을 이해했습니다. 오늘은 컨텍스트(Context)에 대해 이해해 봅시다. 날씨 대화 같은 경우에는 "오늘 날씨 어때?" / "응, 좋아." 1회성으로..

Dialogflow 웹앱 시리즈입니다. Dialogflow - 1. Intent Dialogflow - 2. Context Dialogflow - 3. Fulfillment Dialogflow - 4. 외부 사이트 연동 Dialogflow - 5. Webhook Dialogflow - 6. 클라이언트 Dialogflow - 7. 챗봇 클라이언트 Dialogflow - 8. Node.js 클라이언트 Dialogflow - 9. React 클라이언트 ★Sample Code 구글의 Dialogflow는 머신과 인간의 대화를 가능하게 해주는 플랫폼입니다. 모바일이나 웹, 챗봇 등 다양한 형태로 사용할 수 있고 텍스트 기반뿐만 아니라 음성 기반으로도 가능합니다. 구글 계정만 있으면 사용할 수 있습니다. 사용해 볼..

React 라이브러리를 만들어 npm(node package manager)에 배포해 봅시다. &nbsp&nbspSample Code React 라이브러리 만들기 React 라이브러리를 만드는 몇 가지 방법이 있는데 저는 create-react-library 패키지를 자주 사용합니다. 노드 쉘에서 전역으로 설치한 뒤 명령어로 실행하면 됩니다. npm install -g create-react-library create-react-library react3d react3d/examples/ 디렉토리에서 npm install && npm start 하면 브라우저에서 아래 화면이 나옵니다. 브라우저가 뜬 상태에서, 라이브러리를 고쳐봅시다. react3d/src/index.js 의 return 내 컨텐츠를 변경..

MQTT 통신 시리즈입니다. 네트워크 - 1. MQTT 네트워크 - 2. MQTT Client ★Sample Code MQTT Client : 웹앱 웹앱에서 MQTT Client를 설치하는 방법은 다음과 같습니다. 일반적인 Javascript 코드라면, mqtt.js를 CDN으로 링크할 수 있습니다. Node 앱이라면 npm(node package manager)를 사용하여 mqtt.js로 설치할 수 있습니다. React 앱이라면 위 2번 방법으로 할 수도 있고 별도의 react-mqtt 패키지도 있긴 한데, 저는 개인적으로 2번 방식을 추천합니다. 우리는 간단한 React 앱을 만들어 볼 텐데요, 아래와 같이 MqttComponent를 품고 있는 앱인데요, MQTT 연결 상태나 설정은 MqttCompo..

MQTT 통신 시리즈입니다. 네트워크 - 1. MQTT 네트워크 - 2. MQTT Client ★Sample Code 웹앱에서 다른 앱이나 서버 등과 통신할 수 있는 다양한 프로토콜 서비스가 있지만, Restful, 웹소켓, MQTT이 자주 사용됩니다. 오늘은 그중 MQTT에 대해 알아볼 텐데요, 사실 MQTT는 웹앱에서만 쓰이는 것이 아니라 광범위하게 사용되는 일반적인 통신 프로토콜입니다. MQTT MQTT(Message Queuing Telemetry Transport)는 발행-구독(Publish-Subscribe) 구조로 구성되는데요, 말 그대로 누군가 어떤 주제(topic)로 메시지를 발행하면 해당 주제에 가입된, 즉 해당 주제를 구독 중인 디바이스들만 메시지를 받게 됩니다. 또한 이러한 발행-구..