Menggunakan Botpress v12 Tindakan dengan API Giphy

Dalam catatan blog & video baru-baru ini, kami menunjukkan kepada anda cara memasang Botpress v12 menggunakan Taman Permainan Docker. Main dengan Docker hanyalah pembuka selera untuk apa yang Docker dan Botpress v12 boleh capai bersama! Untuk blog hari ini, saya akan menunjukkan kepada anda cara menggunakan beberapa asas - tetapi sangat berguna! - Botpress Unsur.

• Cara menggunakan Tindakan dalam Botpress untuk memanggil API
• Cara memaparkan kandungan lalai dalam tindakan
• Memahami struktur lalai unsur terbina dalam Botpress

Saya juga membuat video ini! Klik di sini untuk menonton video pertama yang mengiringi blog ini, dan bahagian kedua keluar

Apa itu tindakan?

A Botpress Tindakan adalah sekeping kod yang Botpress V12can digunakan dalam aliran. Secara lalai, Axios dan pustaka lain digabungkan dalam a Botpress Tindakan. Tindakan yang akan saya buat akan menggunakan panggilan API ke titik akhir GIPHY , di mana saya Botpress Chatbot akan mengambil GIF untuk dikongsi dengan penggunanya.

Selain itu: Botpress Tindakan & Botpress Cangkuk sangat serupa. Oleh kerana saya mahu Botpress aliran perbualan untuk mencetuskan pengambilan semula, saya akan menggunakan tindakan. Cangkuk lebih biasa digunakan untuk melaksanakan kod pada titik tertentu dalam kitaran hayat chatbot.

GIPHY API

Sebelum mencipta Botpress kod, anda perlu mendapatkan kunci API Giphy yang sah. Kunci ini boleh didapati di laman web pemaju GIPHY. Anda mulakan dengan mencipta Aplikasi Giphy.

Anda perlu mendaftar untuk akaun Giphy, atau log masuk jika anda sudah mempunyainya.

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

Ya, dari sebelah kanan - yang tidak disyorkan.

Versi SDK pastinya merupakan pilihan, tetapi anda perlu melakukan langkah tambahan dalam Botpress - perpustakaan SDK perlu disuntik ke dalam komponen tindakan. Kami akan menutup penyuntikan pustaka luaran ke dalam Botpress dalam blog masa depan!

Seterusnya, berikan nama dan perihalan kepada aplikasi.

Pada skrin seterusnya, GIPHY akan memberi anda kunci API yang telah dibuat - tahan! Anda akan menggunakan kunci ini dalam kunci anda Botpress chatbot.

Sudah tiba masanya untuk dibuka Botpress!

Memulakan Botpress

Terdapat beberapa cara untuk bermula Botpress v12:

Sekiranya anda Menjalankan Botpress secara tempatan, dari sumber:

Permulaan Larian Benang

Atau daripada fail perduaan

./Bp

• Atau dari Docker.
  

docker-compose up -d

Sekali dalam Botpress, kami akan menambah kunci API dan tindakan baru ke bot. Anda boleh menggunakan bot yang anda buat di blog terakhir kami, atau membuatnya dari awal.

Pada ketika ini, anda boleh menambah kunci API anda daripada GIPHY.

Menggunakan Persekitaran & Menyediakan Kunci API anda

Anda perlu pergi ke chatbot anda - saya menamakan chatbot giphy saya. Sebaik sahaja dalam chatbot anda, pergi dalam Editor Kod > Konfigurasi > bot.config.json. Pada akhir fail tambahkan kekunci API anda, dengan nama chatbot dan pemboleh ubah apiKey:

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

Kini anda boleh menggunakan persekitaran ini dalam tindakan anda. Lebih lanjut mengenai itu kemudian, tetapi idea di sini ialah botConfig yang berubah-ubah akan mengandungi semua pembolehubah dari bot.config.json anda. Tindakan giphy.js yang akan anda cipta dalam langkah seterusnya akan menentukan & menggunakan pemboleh ubah itu dan parameter pertama mergeBotConfig ialah nama bot anda (dalam kes ini, giphy).

Mencipta 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 adalah kod yang saya tulis untuk tindakan giphy.js saya - untuk memanggil API giphy.com dan mengembalikan imej.

‍

'''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 Nod & Peralihan dalam Botpress

Dalam editor aliran, buat dua nod baru dan Peralihan baru.

Dalam nod entri dengan label #1, saya menggunakan pernyataan teks mentah sebagai perintah.

(Jangan risau tentang peralihan kedua atau nod ketiga - kami akan mengemas kini mereka kemudian dalam blog ini.)

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

Buat tindakan untuk menjadikan karusel

Mengembalikan giphy dengan baik sendiri, tetapi kita boleh menjadikannya lebih berkuasa. Kita boleh menggunakan komponen karusel untuk melakukannya. BotpressKomponen karusel boleh digunakan untuk memaparkan banyak perkara berguna kepada pengguna chatbot - kemeja-T individu dari laman e-dagang, barangan pada menu dari restoran, kenderaan untuk disewa, dll. Dalam bot ini, saya akan memaparkan imej dari pertanyaan carian yang dihantar ke API Giphy.

Sekali lagi, saya akan membuat tindakan baru, yang dipanggil Carousel.js ini. Tindakan ini akan memaparkan 5 imej yang dikembalikan daripada Giphy apabila kami menghantar pertanyaan carian pengguna dan memberi pengguna pilihan untuk dipilih. Ikuti proses yang sama seperti di atas untuk mencipta tindakan baharu dan sertakan kod 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 */}

Selepas anda membuat tindakan karusel, anda boleh mengemas kini nod dalam editor aliran anda untuk mengenali arahan karusel.

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

Menggunakan Chatbot Giphy Baharu anda

Dan anda sudah selesai! Sekarang bot anda boleh memahami dan bertindak hanya pada dua arahan:

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

Inilah yang saya dapat apabila saya berkata !anjing giphy ke bot saya:

Dan inilah yang saya dapat apabila saya berkata !kucing karusel ke bot saya:

Langkah Seterusnya & Pembelajaran Lanjut

Saya harap tutorial ini membantu anda! Sekiranya anda berminat, sila pergi dan sertai kami Botpress Komuniti, tempat anda boleh mengemukakan soalan dan belajar daripada yang lain Botpress Pemaju.

Sekiranya anda mahukan lebih banyak maklumat mengenai apa yang kami bincangkan hari ini, berikut adalah senarai sumber untuk penerokaan selanjutnya:

• Botpress Dokumen untuk mencipta tindakan
• Dokumen tentang memanggil API luaran daripada Botpress
• Gambaran keseluruhan Botpress v12 Platform, terutamanya pengalaman pembangun (video)

Dan jika anda suka kandungan ini, Daftar untuk Botpress surat berita!

‍