Botpress v12 액션과 Giphy API 사용

1단계: 단계의 제목은 예상대로 여기에 표시됩니다.

최근 블로그 게시물 및 동영상에서 Docker Playground를 사용하여 Botpress v12를 설치하는 방법을 보여드렸습니다. Docker와 Botpress v12를 함께 사용할 수 있는 방법은 애피타이저에 불과합니다! 오늘 블로그에서는 몇 가지 기본적이지만 매우 유용한! - Botpress 요소를 사용하는 방법을 보여드리겠습니다.

Botpress 에서 액션을 사용하여 API를 호출하는 방법
액션에서 기본 콘텐츠를 렌더링하는 방법
기본 제공 요소의 기본 구조 이해하기 Botpress

이에 대한 동영상도 제작했습니다! 이 블로그와 함께 제공되는 첫 번째 동영상을 보려면 여기를 클릭하고, 두 번째 동영상은 공개되었습니다 .

액션이란 무엇인가요?

Botpress 액션은 Botpress v12가 플로우에서 사용할 수 있는 코드 조각입니다. 기본적으로 Axios 및 기타 라이브러리는 Botpress 액션에 번들로 제공됩니다. 제가 만들 액션은 GIPHY 엔드포인트에 대한 API 호출을 사용하며, 이를 통해 Botpress 챗봇이 사용자와 공유할 GIF를 검색합니다.

여담입니다: Botpress 액션과 Botpress 훅은 매우 유사합니다. Botpress 대화 흐름이 검색을 트리거하도록 하고 싶으므로 액션을 사용하겠습니다. 후크는 챗봇 수명 주기의 특정 지점에서 코드를 실행하는 데 더 일반적으로 사용됩니다.

GIPHY API

Botpress 코드를 생성하기 전에 유효한 API Giphy 키를 발급받아야 합니다. 이 키는 GIPHY 개발자 웹사이트에서 찾을 수 있습니다. 먼저 Giphy 앱을 만듭니다.

Giphy 계정에 가입하거나 이미 계정이 있는 경우 로그인해야 합니다.

메인 페이지에서 애플리케이션을 생성하고 오른쪽에 있는 API를 선택합니다.

예, 오른쪽부터 - 권장하지 않는 쪽입니다.

SDK 버전은 확실히 옵션이지만 Botpress 에서 추가 단계를 수행해야 합니다. SDK 라이브러리를 액션 컴포넌트에 삽입해야 합니다. 향후 블로그에서 Botpress 에 외부 라이브러리를 삽입하는 방법을 다룰 예정입니다!

다음으로 앱의 이름과 설명을 입력합니다.

다음 화면에서 GIPHY가 생성된 API 키를 제공하므로 잘 보관하세요! Botpress 챗봇에서 이 키를 사용하게 됩니다.

이제 Botpress 를 열 시간입니다!

시작 Botpress

Botpress v12를 시작하는 몇 가지 방법이 있습니다:

소스에서 Botpress 를 로컬로 실행하는 경우:

원사 실행 시작

또는 바이너리 파일에서

./bp

또는 Docker에서.

도커-컴포지트 업 -d

Botpress 에 들어가면 API 키와 새 작업을 봇에 추가합니다. 지난 블로그에서 만든 봇을 사용하거나 처음부터 새로 만들 수 있습니다.

이 시점에서 GIPHY에서 API 키를 추가할 수 있습니다.

환경 사용 및 API 키 설정하기

챗봇에 들어가야 합니다. 저는 제 챗봇의 이름을 giphy로 지었습니다. 챗봇에 들어가면 코드 편집기 > 구성 > bot.config.json으로 이동합니다. 파일 끝에 챗봇의 이름과 apiKey 변수와 함께 API 키를 추가합니다:

"giphy": { "apiKey": "DQHOmOjCRpGvFCQ9lY46C3gPTZzEq77Q"}

이제 이 환경을 액션에 사용할 수 있습니다. 나중에 자세히 설명하겠지만, 여기서 중요한 것은 botConfig 변수에 bot.config.json의 모든 변수가 포함된다는 것입니다. 다음 단계에서 생성할 giphy.js 액션은 이 변수를 정의하고 사용하며, mergeBotConfig의 첫 번째 매개변수는 봇의 이름(이 경우 giphy)입니다.

액션 만들기

Now let’s add the actions that will make the chatbot work. In the left side panel, go in the Code Editor `</>`, choose the Actions tab, and click on the +. The first action I’m going to create is called giphy.js, then I click `Submit.` This action will contain the code to call the Giphy API and return an image based on the search query you pass to it.

다음은 giphy.js 액션을 위해 작성한 코드입니다. giphy.com API를 호출하고 이미지를 반환하는 코드입니다.

‍

```jsx

function action(bp: typeof sdk, event: sdk.IO.IncomingEvent, args: any, { user, temp, session } = event.state) { /** Your code starts below */ const axios = require('axios') /** * Fetch one GIF image * @title Get image from Giphy * @category Example * @author Botpress */ const giphy = async () => { const regex = /!giphy/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!giphy `' const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } // const apiKey = await bp.ghost.forBot('giphy').readFileAsObject('/', 'bot.config.json') const botConfig = await bp.config.mergeBotConfig('giphy', {}) const response = await axios.get( `https://api.giphy.com/v1/gifs/search?q=${parsedText}&api_key=${botConfig.giphy.apiKey}` ) if (response.data.data.length === 0) { parsedText = `Didn't find any picture for the following Query **${parsedText}**` const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } const payloads = await bp.cms.renderElement( 'builtin_image', { image: response.data.data[0]['images']['original']['url'], title: response.data.data[0]['title'] }, event ) return await bp.events.replyToEvent(event, payloads) } return giphy() /** Your code ends here */}

‍

```

‍

에서 노드 및 전환 생성 Botpress

흐름 편집기에서 두 개의 새 노드와 새 전환을 만듭니다.

레이블이 #1인 항목 노드에서 원시 텍스트 문을 명령으로 사용하고 있습니다.

(두 번째 전환이나 세 번째 노드에 대해서는 걱정하지 마세요. 이 블로그의 뒷부분에서 업데이트할 예정입니다.)

event.payload.text.startsWith("!giphy")

캐러셀을 렌더링하는 액션 만들기

지피를 반환하는 것 자체로도 훌륭하지만 더 강력하게 만들 수 있습니다. 이를 위해 캐러셀 컴포넌트를 사용할 수 있습니다. Botpress의 캐러셀 컴포넌트는 이커머스 사이트의 개별 티셔츠, 레스토랑의 메뉴 항목, 렌트할 차량 등 챗봇 사용자에게 유용한 많은 것들을 표시하는 데 사용할 수 있습니다. 이 봇에서는 Giphy API로 전송된 검색 쿼리의 이미지를 표시하겠습니다.

다시 한 번 Carousel.js라는 새 액션을 만들어 보겠습니다. 이 액션은 사용자의 검색 쿼리를 전송할 때 Giphy에서 반환된 5개의 이미지를 표시하고 사용자에게 선택할 수 있는 옵션을 제공합니다. 위와 동일한 프로세스에 따라 새 액션을 생성하고 이 코드를 포함하세요:

function action(bp: typeof sdk, event: sdk.IO.IncomingEvent, args: any, { user, temp, session } = event.state) { /** Your code starts below */ const axios = require('axios') /** * Giphy Carousel * @title Created A giphy Carousel * @category Custom * @author Botpress */ const carousel = async () => { const regex = /!carousel/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!carousel <Picture to search>`' const payloads = await bp.cms.renderElement('builtin_text', { text: parsedText, markdown: true }, event) return await bp.events.replyToEvent(event, payloads) } const botConfig = await bp.config.mergeBotConfig('giphy', {}) const response = await axios.get( `https://api.giphy.com/v1/gifs/search?q=${parsedText}&api_key=${botConfig.giphy.apiKey}` ) let cards = [] for (let i = 0; i < 5; i++) { // If the response is empty don't push the value if (response.data.data[i]) cards.push({ title: response.data.data[i]['title'], subtitle: response.data.data[i]['subtitle'], image: response.data.data[i]['images']['original']['url'], actions: [ { action: 'Open URL', url: response.data.data[i]['images']['original']['url'], title: response.data.data[i]['title'] } ] }) } console.log(cards) const payloads = await bp.cms.renderElement( 'builtin_carousel', { items: cards }, event ) return await bp.events.replyToEvent(event, payloads) } return carousel() /** Your code ends here */}

캐러셀 동작을 만든 후 캐러셀 명령을 인식하도록 플로우 편집기에서 노드를 업데이트할 수 있습니다.

event.payload.text.startsWith("!carousel")