Geekly articles weekly

Tindakan di Google: menulis aplikasi sederhana untuk Google Assistant di Dialogflow dan Cloud Functions for Firebase

Pada akhir bulan lalu, Asisten Google secara resmi dirilis dalam bahasa Rusia, jadi inilah saatnya untuk mencari tahu bagaimana membuat aplikasi Anda sendiri ( tindakan ) untuk Asisten pada tumpukan teknologi Google standar. Dalam artikel ini, kami akan mempertimbangkan untuk membuat tindakan dalam Tindakan di Google , menganalisis proses penggalian entitas dan niat dari frasa di Dialogflow , mempelajari cara menulis penangan untuk informasi yang diekstraksi dan bekerja dengan jaringan di Cloud Functions for Firebase .


Fig. 1. Arsitektur aplikasi untuk Asisten.

Pengembangan untuk Asisten telah mulai berkembang relatif baru-baru ini, sehingga jaringan memiliki beberapa bahan, dan jumlah alat dan teknologi yang digunakan secara signifikan meningkatkan ambang masuk. Artikel ini, meskipun tidak menyelesaikan, tetapi setidaknya berkontribusi pada solusi dari masalah ini. Mari kita mulai dengan arsitektur aplikasi untuk Asisten (Gbr. 1), diimplementasikan pada tumpukan teknologi Google standar:

  • Tindakan di Google adalah platform untuk membuat aplikasi untuk Google Assistant.
  • Dialogflow - Mesin NLU (Pengertian Bahasa Alami), bertanggung jawab untuk memproses bahasa alami dan dialog desain.
  • Cloud Functions for Firebase (untuk kenyamanan, kami akan menggunakan singkatan Firebase Functions) - fungsi cloud untuk memproses logika kompleks interaksi pengguna dan untuk bekerja dengan layanan pihak ketiga. Fungsi Firebase dan Dialogflow berinteraksi melalui webhook, jadi secara teknis solusi server lain dapat digunakan. Namun, Fungsi Firebase adalah alternatif yang baik, dan kadang-kadang pengganti backend sendiri. Ini memungkinkan Anda untuk membuat dan menjalankan layanan pada infrastruktur Google, tanpa khawatir tentang alokasi, penskalaan, atau manajemen server. Di satu sisi, ini memungkinkan Anda untuk fokus pada komponen produk pengembangan dan fungsionalitas layanan, tanpa membuang waktu untuk tugas dan administrasi infrastruktur. Tetapi di sisi lain, sebagai suatu peraturan, delegasi memerlukan melemahnya kendali atas situasi.

Artikel ini berfokus pada aspek teknis pengembangan, biaya menggunakan layanan yang terdaftar tidak akan dianalisis.


Fig. 2. Interaksi komponen-komponen dari Asisten Google (Berdasarkan bahan: Beranda Google dan Lokakarya Asisten Google ).

Di dalam tumpukan yang dijelaskan, logika tindakan terlihat seperti ini (Gbr. 2):

  • Pengguna mengakses aplikasi Google Assistant dan memulai percakapan dengan tindakan tertentu.
  • Google Assistant melalui Actions on Google proksi setiap frasa pengguna dalam format teks di Dialogflow, selain itu memberikan informasi tentang pengguna (dengan permintaan awal dan dengan persetujuan pengguna) dan percakapan saat ini .
  • Dialogflow memproses frasa yang diterima, mengekstrak informasi yang diperlukan darinya, dan berdasarkan ML, membuat keputusan tentang jawaban mana yang akan dihasilkan.
  • Dalam beberapa kasus, Dialogflow dapat mendelegasikan pembentukan respons ke server pada Fungsi Firebase, yang, pada gilirannya, dapat menggunakan layanan pihak ketiga untuk mendapatkan informasi yang diperlukan untuk respons tersebut.
  • Setelah jawaban terbentuk, Dialogflow mengembalikannya ke Tindakan di Google, dari tempat masuknya aplikasi Google Assistant.

Ide


Tindakan kami akan menentukan dengan frasa jenis gif apa yang ingin dilihat pengguna, dan kemudian ia akan mencarinya melalui API GIPHY dan mengembalikannya ke pengguna dalam bentuk kartu. Saat menerapkan tindakan, kami akan menganalisis solusi dari tugas-tugas berikut:

  1. Siapkan dan tautkan Tindakan di Google, Fungsi Dialogflow dan Firebase.
  2. Ekstrak kata kunci dari frasa pengguna (Dialogflow).
  3. Scripting Dialog (Dialogflow).
  4. Bekerja dengan konteks dialog (Dialogflow).
  5. Membuat dan menghubungkan webhook untuk menghasilkan respons terhadap frasa pengguna (Dialogflow, Firebase Function).
  6. Tampilkan korsel kartu di antarmuka (Fungsi Firebase).
  7. Mengunduh informasi dari layanan pihak ketiga (Firebase Functions).

Pengaturan awal



Fig. 3. Membuat agen Dialogflow.

Pertama-tama, kita membutuhkan akun Google. Mari kita mulai dengan membuat proyek di Dialogflow, untuk ini, di konsol, klik tombol Buat Agen dan isi bidang yang diperlukan (Gbr. 3):

  • Bahasa default adalah "Rusia - ru".
  • Zona waktu: "(GMT + 3: 00) Eropa / Moskow".
  • Google Cloud Project: GCP baru untuk agen Dialogflow Anda akan dibuat secara otomatis, atau Anda dapat memilih salah satu proyek GCP yang ada, jika ada.

Kemudian klik tombol Buat di sudut kanan atas dan tunggu konsol untuk mengkonfigurasi proyek baru.


Fig. 4. Maksud standar.

Secara default, saat membuat agen Dialogflow, dua maksud dibuat (Gbr. 4):

  • “Default Welcome Intent” - bertanggung jawab untuk menyapa pengguna;
  • “Default Fallback Intent” - memproses frasa yang tidak diketahui yang tidak dapat dialihkan oleh Dialogflow ke maksud lain.

Membuat dialog dalam Dialogflow telah dijelaskan secara rinci dalam artikel di sini , di sini dan di sini , jadi saya tidak akan fokus pada prinsip operasinya.


Fig. 5. Jawaban untuk “Default Welcome Intent”.

Kami akan menambahkan beberapa jawaban selamat datang ke "Intensi Sambutan Default" yang akan membantu pengguna memahami untuk apa tindakan itu dan fungsi apa yang dapat ia lakukan. Di bagian "Responses", pilih tab "Google Assistant" dan di "Saran Kapal" kami akan menulis contoh frasa untuk memberi tahu pengguna bagaimana berkomunikasi dengan tindakan (Gbr. 5).

Tindakan dapat di-debug di Google Assistant baik di ponsel maupun di emulator resmi. Untuk membuka emulator, Anda harus pergi ke bagian "Integrasi", di kartu "Google Asisten", klik tombol "Pengaturan Integrasi" dan klik "Kelola Aplikasi Asisten". Baik di ponsel dan emulator, tindakan dapat dipicu dengan frasa kode "Oke Google, saya ingin berbicara dengan aplikasi pengujian saya".

Skenario dasar: pencarian GIF


Buat Maksud Pencarian baru, yang akan mengekstrak kata kunci dari frasa pengguna dan mengirimkannya melalui server webhook ke Fungsi Firebase. Server, pada gilirannya, menggunakan GIPHY API akan menemukan gif yang sesuai dan mengembalikan hasilnya kepada pengguna dalam bentuk kartu.


Fig. 6. Menambahkan frasa pelatihan.

Untuk mulai dengan, kami akan menambahkan frasa khas untuk pelatihan di bagian Frase Pelatihan (Gbr. 6):

  • "Aku ingin melihat jerapah menari."
  • "Temukan animashki."
  • "Tunjukkan segelnya."
  • Tunjukkan padaku gif.
  • "Temukan aku gajah animasi."
  • "Tampilkan panda gifs."
  • "Gif dengan garis-garis rakun."
  • "Kamu memiliki segel."
  • "Temukan air terjun yang lucu."


Fig. 7. Mengekstrak parameter dari teks.

Untuk frasa tambahan, perhatikan parameter pencarian, yang harus dipilih Dialogflow dari teks. Dalam hal ini, jenis parameter yang paling tepat adalah @sys.any , karena hampir semua konstruk bahasa dapat digunakan sebagai parameter permintaan pencarian. Kami memanggil query parameter ini dan menandainya sesuai kebutuhan (Gbr. 7).


Fig. 8. Daftar pertanyaan utama.

Dalam subbagian “Prompt” kami akan menuliskan pertanyaan klarifikasi yang akan ditanyakan Dialogflow jika Dialogflow tidak dapat mengekstrak kata kunci dari frasa (Gbr. 8).

Selanjutnya, pergi ke bagian "Pemenuhan" di bagian paling bawah halaman (jangan bingung dengan bagian dengan nama yang sama di menu sebelah kiri). klik tombol “Enable Fullfilment”, dan kemudian aktifkan pengaturan “Enable webhook call for this intent”. Ini akan memungkinkan Dialogflow untuk mendelegasikan pembentukan respons Fungsi Firebase ketika mencapai maksudnya.

Sekarang pergi ke tab "Pemenuhan" di menu sebelah kiri dan nyalakan "Inline Editor", di mana kita akan menulis logika untuk "Search Intent" yang baru dibuat. Untuk mencari GIF dengan kata kunci, kami akan menggunakan permintaan https://api.giphy.com/v1/gifs/search , yang mengembalikan daftar objek yang ditemukan dalam format JSON sesuai dengan spesifikasi . Respons yang diterima dari GIPHY akan ditampilkan dalam bentuk Browsing Carousel - sebuah korsel kartu dengan gambar, ketika diklik, sebuah halaman web terbuka. Dalam kasus kami, ketika Anda mengklik kartu, pengguna akan pergi ke halaman layanan GIPHY dengan animasi ini dan daftar yang serupa.

Kode yang mengimplementasikan fungsi yang dijelaskan di atas disajikan di bawah ini.

 'use strict'; const GIPHY_API_KEY = 'API_KEY'; const SEARCH_RESULTS = [ '-,    .', ',   .', ',   !' ]; // Import the Dialogflow module from the Actions on Google client library. const { dialogflow, BrowseCarouselItem, BrowseCarousel, Suggestions, Image } = require('actions-on-google'); // Import the firebase-functions package for deployment. const functions = require('firebase-functions'); // Import the request-promise package for network requests. const request = require('request-promise'); // Instantiate the Dialogflow client. const app = dialogflow({ debug: true }); function getCarouselItems(data) { var carouselItems = []; data.slice(0, 10).forEach(function (gif) { carouselItems.push(new BrowseCarouselItem({ title: gif.title || gif.id, url: gif.url, image: new Image({ url: gif.images.downsized_medium.url, alt: gif.title || gif.id }), })); }); return carouselItems; } function search(conv, query) { // Send the GET request to GIPHY API. return request({ method: 'GET', uri: 'https://api.giphy.com/v1/gifs/search', qs: { 'api_key': GIPHY_API_KEY, 'q': query, 'limit': 10, 'offset': 0, 'lang': 'ru' }, json: true, resolveWithFullResponse: true, }).then(function (responce) { // Handle the API call success. console.log(responce.statusCode + ': ' + responce.statusMessage); console.log(JSON.stringify(responce.body)); // Obtain carousel items from the API call response. var carouselItems = getCarouselItems(responce.body.data); // Validate items count. if (carouselItems.length <= 10 && carouselItems.length >= 2) { conv.data.query = query; conv.data.searchCount = conv.data.searchCount || 0; conv.ask(SEARCH_RESULTS[conv.data.searchCount % SEARCH_RESULTS.length]); conv.data.searchCount++; conv.ask(new BrowseCarousel({ items: carouselItems })); } else { // Show alternative response. conv.ask('      ,   - ?)'); } }).catch(function (error) { // Handle the API call failure. console.log(error); conv.ask(',     .'); }); } // Handle the Dialogflow intent named 'Search Intent'. // The intent collects a parameter named 'query'. app.intent('Search Intent', (conv, { query }) => { return search(conv, query); }); // Set the DialogflowApp object to handle the HTTPS POST request. exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

Ketergantungan
 { "name": "dialogflowFirebaseFulfillment", "description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase", "version": "0.0.1", "private": true, "license": "Apache Version 2.0", "author": "Google Inc.", "engines": { "node": "~6.0" }, "scripts": { "start": "firebase serve --only functions:dialogflowFirebaseFulfillment", "deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment" }, "dependencies": { "actions-on-google": "2.0.0-alpha.4", "firebase-admin": "^4.2.1", "firebase-functions": "^0.5.7", "dialogflow": "^0.1.0", "dialogflow-fulfillment": "0.3.0-beta.3", "request": "^2.81.0", "request-promise": "^4.2.1" } }

Karena pengguna dapat mengakses maksud yang sama beberapa kali, disarankan untuk mengembalikan berbagai jawaban. Untuk melakukan ini, kami menggunakan objek JSON Conversation.data , yang mempertahankan nilainya saat mengakses maksud lagi, dan ketika merujuk ke skrip percakapan lainnya.


Fig. 9. Inisialisasi percakapan (di sebelah kiri), penyempurnaan parameter pencarian dan tampilan lebih lanjut dari hasil (di tengah), tampilan hasil pencarian untuk permintaan baru (di sebelah kanan)

Catatan: untuk bekerja dengan API layanan pihak ketiga melalui Fungsi Firebase, Anda harus mengaktifkan penagihan, jika tidak, ketika mencoba bekerja dengan jaringan, kesalahan akan terjadi:
"Akun penagihan tidak dikonfigurasi. Jaringan eksternal tidak dapat diakses dan kuota sangat terbatas. Konfigurasikan akun penagihan untuk menghapus pembatasan ini. "
Untuk melakukan ini, klik "Akun berbayar" di menu sebelah kiri dan pilih Nyala Api ($ 25 per bulan) atau Nyala Api (bayar sesuai penggunaan) di antara rencana tarif yang diusulkan. Saya memilih opsi terakhir, karena sebagai bagian dari pengembangan aplikasi pengujian, bagi saya sepertinya lebih menguntungkan.

Skenario Lanjut: Pagination


Dalam kebanyakan kasus, untuk permintaan pencarian, GIPHY akan menemukan lebih dari sepuluh GIF secara signifikan, sehingga akan benar untuk memungkinkan pengguna untuk melihat seluruh hasil pencarian, mis. tambahkan pagination.

Di konsol Dialogflow, arahkan kursor ke sel Search Intent. Beberapa tombol akan muncul di sebelah kanan, klik "Tambahkan niat tindak lanjut". Ini akan memungkinkan kami untuk membuat cabang percakapan mengikuti Maksud Pencarian. Di antara elemen daftar drop-down, kami memilih "lebih" - standar pengabaian untuk memulai tampilan informasi tambahan.


Fig. 10. Konteks maksudnya adalah "Maksud Pencarian - lebih."

Mari kita pergi ke maksud yang baru dibuat dan membuat perubahan pada bagian "Konteks". Karena pengguna dapat meminta untuk menampilkan lebih banyak GIF beberapa kali berturut-turut, maksud ini harus dapat disebut secara rekursif. Untuk ini, dalam konteks keluar, perlu untuk mendaftarkan baris yang sama yang ditunjukkan dalam yang masuk (Gbr. 10). Di bagian "Pemenuhan", Anda juga harus mengaktifkan pengaturan "Aktifkan panggilan webhook untuk maksud ini".

Sekarang mari kita kembali ke "Fillfulment" dari menu samping, di mana kita menginisialisasi pawang untuk "Search Intent - more". Kami juga menambahkan parameter offset ke fungsi search , yang akan digunakan untuk paginasi di API GIPHY.

 const SEARCH_RESULTS_MORE = [ '   !', ',    .', ',   .  ,    .' ]; function search(conv, query, offset) { // Send the GET request to GIPHY API. return request({ method: 'GET', uri: 'https://api.giphy.com/v1/gifs/search', qs: { 'api_key': GIPHY_API_KEY, 'q': query, 'limit': 10, 'offset': offset, 'lang': 'ru' }, json: true, resolveWithFullResponse: true, }).then(function (responce) { // Handle the API call success. console.log(responce.statusCode + ': ' + responce.statusMessage); console.log(JSON.stringify(responce.body)); // Obtain carousel items from the API call response. var carouselItems = getCarouselItems(responce.body.data); // Validate items count. if (carouselItems.length <= 10 && carouselItems.length >= 2) { conv.data.query = query; conv.data.offset = responce.body.pagination.count + responce.body.pagination.offset; conv.data.paginationCount = conv.data.paginationCount || 0; conv.data.searchCount = conv.data.searchCount || 0; // Show successful response. if (offset == 0) { conv.ask(SEARCH_RESULTS[conv.data.searchCount % SEARCH_RESULTS.length]); conv.data.searchCount++; } else { conv.ask(SEARCH_RESULTS_MORE[conv.data.paginationCount % SEARCH_RESULTS_MORE.length]); conv.data.paginationCount++; } conv.ask(new BrowseCarousel({ items: carouselItems })); conv.ask(new Suggestions('')); } else { // Show alternative response. conv.ask('      ,   - ?)'); } }).catch(function (error) { // Handle the API call failure. console.log(error); conv.ask(',     .'); }); } // Handle the Dialogflow intent named 'Search Intent - more'. app.intent('Search Intent - more', (conv) => { // Load more gifs from the privious search query return search(conv, conv.data.query, conv.data.offset); });


Fig. 11. Pagination saat mencari gifs.

Hasil


Video aksi disajikan di bawah ini.



Kode proyek dan dump asisten tersedia di Github .

Petunjuk untuk menginstal proyek dan mengimpor dump
  1. Pergi ke konsol Dialogflow dan buat agen baru atau pilih yang sudah ada.
  2. Klik pada ikon pengaturan, pergi ke bagian "Ekspor dan Impor" dan klik pada tombol "Kembalikan dari ZIP". Pilih file ZIP dari direktori root repositori.
  3. Pilih “Pemenuhan” dari menu navigasi kiri.
  4. Aktifkan pengaturan "Editor Inline".
  5. Salin konten file dari direktori functions ke tab yang sesuai di "Pemenuhan".
  6. Masukkan kunci akses API GIPHY Anda di tab index.js .
  7. Buka konsol Firebase dan ubah paket Anda menjadi Flame atau Blaze. Bekerja dengan layanan pihak ketiga melalui jaringan tidak tersedia dengan paket tarif gratis.

Source: https://habr.com/ru/post/id419261/

More articles:


All Articles