Menggunakan Botpress v12 Actions dengan API Giphy

Dalam postingan blog & video baru-baru ini, kami menunjukkan kepada Anda cara menginstal Botpress v12 menggunakan Docker Playground. Bermain dengan Docker hanyalah hidangan pembuka untuk apa yang dapat dicapai oleh Docker dan Botpress v12 secara bersama-sama! Untuk blog hari ini, saya akan menunjukkan kepada Anda cara menggunakan beberapa elemen dasar - tetapi sangat berguna! - Botpress elemen.

• Cara menggunakan Tindakan di Botpress untuk memanggil API
• Cara merender konten default dalam suatu tindakan
• Memahami struktur default dari elemen bawaan di Botpress

Saya juga membuat video tentang ini! Klik di sini untuk menonton video pertama yang menyertai blog ini, dan bagian kedua sudah tersedia

Apa yang dimaksud dengan Aksi?

Sebuah Botpress Action adalah sepotong kode yang Botpress v12dapat digunakan dalam sebuah flow. Secara default, Axios dan pustaka lainnya dibundel dalam action Botpress . Aksi yang akan saya buat akan menggunakan panggilan API ke titik akhir GIPHY, di mana chatbot Botpress saya akan mengambil gif untuk dibagikan kepada penggunanya.

Sebuah samping: Botpress Tindakan & Botpress Hooks sangat mirip. Karena saya ingin alur percakapan Botpress untuk memicu pengambilan, saya akan menggunakan tindakan. Hooks lebih sering digunakan untuk mengeksekusi kode pada titik-titik tertentu dalam siklus hidup chatbot.

API GIPHY

Sebelum membuat kode Botpress , Anda perlu mendapatkan kunci API Giphy yang valid. Kunci ini dapat ditemukan di situs web pengembang GIPHY. Anda dapat memulai dengan membuat Aplikasi Giphy.

Anda harus mendaftar untuk mendapatkan akun Giphy, atau masuk jika Anda sudah memilikinya.

Pada halaman utama, buat aplikasi dan pilih pilihan API di sebelah kanan.

Ya, dari sisi kanan - yang tidak direkomendasikan.

Versi SDK jelas merupakan sebuah pilihan, tetapi Anda harus melakukan langkah tambahan di Botpress - pustaka SDK harus diinjeksikan ke dalam komponen action. Kami akan membahas cara menyuntikkan pustaka eksternal ke dalam Botpress di blog mendatang!

Selanjutnya, berikan nama dan deskripsi pada aplikasi.

Pada layar berikutnya, GIPHY akan memberi Anda kunci API yang telah dibuat - simpanlah! Anda akan menggunakan kunci ini di Botpress chatbot Anda.

Saatnya membuka Botpress!

Mulai Botpress

Ada beberapa cara untuk memulai Botpress v12:

Jika Anda menjalankan Botpress secara lokal, dari sumbernya:

mulai menjalankan benang

Atau dari file biner

./bp

• Atau dari Docker.
  

docker-compose up -d

Setelah berada di Botpress, kita akan menambahkan kunci API dan tindakan baru ke bot. Anda dapat menggunakan bot yang telah Anda buat di blog sebelumnya, atau membuat bot dari awal.

Pada titik ini, Anda dapat menambahkan kunci API Anda dari GIPHY.

Menggunakan Lingkungan & Menyiapkan Kunci API Anda

Anda harus masuk ke chatbot Anda - saya menamai chatbot saya giphy. Setelah berada di chatbot Anda, masuk ke Editor Kode> Konfigurasi> bot.config.json. Di akhir file tambahkan kunci API Anda, dengan nama chatbot dan variabel apiKey:

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

Sekarang Anda dapat menggunakan lingkungan ini dalam aksi Anda. Lebih lanjut tentang itu nanti, tetapi idenya di sini adalah variabel botConfig akan berisi semua variabel dari bot.config.json Anda. Aksi giphy.js yang akan Anda buat pada langkah berikutnya akan mendefinisikan & menggunakan variabel tersebut, dan parameter pertama mergeBotConfig adalah nama bot Anda (dalam hal ini, giphy).

Buat Tindakan

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.

Berikut ini adalah kode yang saya tulis untuk aksi giphy.js - untuk memanggil API giphy.com dan mengembalikan gambar.

‍

```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 () =&gt; { 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}&amp;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 */}

‍

```

‍

Buat Node & Transisi di Botpress

Di editor alur, buat dua node baru dan Transisi baru.

Pada simpul entri dengan label #1, saya menggunakan pernyataan teks mentah sebagai perintah.

(Jangan khawatir tentang transisi kedua atau simpul ketiga - kami akan memperbaruinya nanti di blog ini).

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

Buat Tindakan untuk Merender Korsel

Mengembalikan giphy dengan sendirinya tidak masalah, tetapi kita bisa membuatnya lebih kuat. Kita dapat menggunakan komponen korsel untuk melakukannya. BotpressKomponen carousel dapat digunakan untuk menampilkan banyak hal yang berguna bagi pengguna chatbot - kaos individu dari situs e-commerce, item pada menu dari restoran, kendaraan untuk disewa, dll. Dalam bot ini, saya akan menampilkan gambar dari permintaan pencarian yang dikirim ke API Giphy.

Sekali lagi, saya akan membuat sebuah action baru, kali ini bernama Carousel.js. Action ini akan menampilkan 5 gambar yang dikembalikan dari Giphy ketika kita mengirimkan kueri penelusuran pengguna, dan memberikan opsi kepada pengguna untuk memilih. Ikuti proses yang sama seperti di atas untuk membuat action baru, dan sertakan kode ini:

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 () =&gt; { const regex = /!carousel/i let parsedText = event.payload.text.replace(regex, '') if (parsedText == '' || parsedText.toLowerCase().trim() == 'help') { parsedText = 'Help : `!carousel &lt;Picture to search&gt;`' 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}&amp;api_key=${botConfig.giphy.apiKey}` ) let cards = [] for (let i = 0; i &lt; 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 */}

Setelah Anda membuat aksi korsel, Anda dapat memperbarui node di editor alur untuk mengenali perintah korsel.

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

Menggunakan Chatbot Giphy Baru Anda

Dan Anda selesai! Sekarang bot Anda dapat memahami dan bertindak hanya dengan dua perintah:

• !giphy <subject>
• !carousel <subject>

Inilah yang saya dapatkan ketika saya mengatakan!giphy dog ke bot saya:

Dan inilah yang saya dapatkan ketika saya mengatakan!carousel cat kepada bot saya:

Langkah Selanjutnya & Pembelajaran Lebih Lanjut

Saya harap tutorial ini membantu Anda! Jika Anda tertarik, silakan kunjungi dan bergabunglah dengan komunitas Botpress , di mana Anda bisa mengajukan pertanyaan dan belajar dari pengembang Botpress lainnya.

Jika Anda ingin informasi lebih lanjut tentang apa yang kita bahas hari ini, berikut adalah daftar sumber daya untuk eksplorasi lebih lanjut:

• Botpress dokumen tentang membuat tindakan
• Dokumen tentang memanggil API eksternal dari Botpress
• Gambaran umum PlatformBotpress v12, khususnya pengalaman pengembang (video)

Dan jika Anda menyukai konten ini, daftarlah untuk mendapatkan buletin Botpress !

‍