alfa
1.0.0
Alpha adalah bot, atau lebih tepatnya basis untuk membuat chatbot berbasis web Anda sendiri. Kami memulai proyek ini karena menurut kami chatbot bisa sangat membantu dan menyenangkan, namun keadaan saat ini membuat sebagian besar chatbot terbatas pada platform perpesanan yang sudah ada seperti Facebook, dan itu tidak masalah, namun bagaimana jika Anda ingin bot Anda berada di tempat lain di webnya ?
Anda dapat membuat bot Anda sendiri dan menentukan gaya dan aturan visual Anda sendiri serta memiliki kontrol tak terbatas untuk penyesuaian dan logika . Berbagai solusi telah ada, namun solusi tersebut mungkin terbatas, mahal, dan sulit diterapkan.
Di sinilah Alpha berguna. Pustaka ini dirancang untuk memungkinkan Anda membuat bot sendiri dengan cara yang sangat sederhana. Anda hanya perlu:
Unduh
Masukkan pohon Tanya Jawab Anda sendiri
Masukkan warna dan gambar Anda sendiri
Alpha menangani keseluruhan rendering UI dan penanganan status aplikasi . Anda tidak benar-benar perlu mengetahui React (atau Javascript dalam hal ini). Namun, jika Anda mengetahui cara menggunakan React dan Redux, Anda dapat menyesuaikan lebih lanjut rendering aplikasi bot, dan bahkan menghubungkannya ke back-end atau mesin AI pilihan Anda.
Instalasi
Menyesuaikan Dialog
Membuat Rekomendasi
Menyesuaikan UI
Menyesuaikan aplikasi React
Mengirim Email (TBD)
Menghubungkan ke Back-End (TBD) mana pun
Menghubungkan ke Mesin AI (TBD)
Alpha dibuat untuk berjalan di Docker . Namun Anda dapat menjalankannya secara lokal selama Anda memiliki NodeJS serta npm atau benang (lebih disukai!) di sistem Anda.
Untuk menginstal dan menjalankan di komputer Anda, jalankan saja perintah berikut di terminal Anda. Anda harus menginstal Docker (Lihat di bawah untuk instruksi tanpa buruh pelabuhan):
Kloning repo ini: git clone https://github.com/IcaliaLabs/alpha.git
Arahkan ke direktori: cd alpha
Instal dependensi: docker-compose run --rm alpha yarn install
Kemudian Anda dapat mengangkat server: docker-compose up alpha
Itu saja! Anda akan melihat bot demo aktif dan berjalan di browser Anda jika Anda membuka localhost:3000 * di browser Anda.
Beberapa poin penting saat menjalankan mode pengembangan:
Aplikasi bot akan mengaktifkan Hot Reloading , sehingga Anda dapat merasakan manfaat Webpack + React.
Redux DevTools diaktifkan secara default sehingga Anda dapat memeriksa tindakan/perubahan status aplikasi secara real-time.
Waktu antara setiap pesan bot diatur ke 0 . Hal ini untuk meminimalkan rasa frustrasi pengembang ketika mereka mengulangi alur percakapan berulang kali, namun Anda dapat mengubah perilaku ini jika diinginkan di app/containers/BotContainer/sagas.js .
Heroku: Jalankan saja git push heroku master . Bot ini siap untuk Heroku!
Lokal dengan Docker: Jika Anda bisa mengkompilasi gambar untuk melihat bagaimana perilakunya pada produksi, kami juga membuat build. Jalankan saja:
docker-compose up release
Ini akan membangun image dan mengangkat server produksi.
Jika Anda ingin menginstal dan menjalankan tanpa Docker, Anda harus menginstal semua dependensi langsung di direktori Anda:
Untuk Pengembangan:
Kloning repo ini: git clone https://github.com/IcaliaLabs/alpha.git
Arahkan ke direktori: cd alpha
Jalankan npm install atau yarn install untuk menginstal dependensi
Jalankan npm start untuk menjalankan server
Kunjungi localhost:3000 di browser Anda
Untuk Produksi:
Repo ini sudah siap untuk Heroku, lakukan saja git push heroku master
Jika karena alasan tertentu Anda mengubah skrip package.json Anda, pastikan untuk mempertimbangkan langkah-langkah ini sebelum menerapkan ke server produksi.
Untuk AWS Anda dapat mengikuti langkah-langkah yang sama yang tercantum di sini
Untuk Azure/Softlayer/server lain Anda harus melakukan ssh ke server, menarik repo, menginstal dependensi menggunakan yarn dan kemudian melakukan npm run build untuk membuat folder ./build . Akhirnya Anda dapat memulai server menggunakan start:prod . Atau jalankan saja start:production dan itu akan menjalankan langkah-langkah ini bersama-sama secara berurutan, ditambah pengujian.
Semua logika di balik apa yang dikatakan bot, termasuk logika Tanya Jawab ada di dalam BotMind yang ada di app/BotMind/ . Kami menyebut setiap bot atau masukan pengguna sebagai Gelembung karena keduanya dirender seperti itu di UI obrolan.
Untuk menyesuaikan dialog, Anda hanya perlu memahami dan mengedit app/BotMind/_initialBubble.js dan app/BotMind/BotMindFlows/index.js .
File utama untuk BotMind adalah BotMind.js , tetapi file ini hanya bertindak sebagai kolektor dan pengekspor fungsi yang ada di _initialBubble.js , _nextBubble.js , dan _recommendationBubbles.js . Ketiga file ini pada gilirannya menjalankan logikanya berdasarkan pohon Tanya Jawab yang ada di dalam app/BotMind/BotMindFlows/ .
Di sini Anda dapat mengatur pada titik mana di pohon percakapan bot Anda dimulai ketika diinisialisasi atau ketika pengguna memilih untuk memulai kembali percakapan.
File ini berisi logika gelembung atau dialog mana yang harus dilompati bot berdasarkan pesan terakhir dari bot atau dari pengguna. Anda tidak benar-benar perlu mengubah file ini, kecuali Anda ingin menggali penyesuaian yang lebih baik. Lanjutkan dengan risiko Anda sendiri.
File ini menjalankan logika pemilihan jalur ketika shouldEstimateRecommendation: true diteruskan dalam gelembung dialog. File ini bertindak berdasarkan poin yang dikumpulkan oleh Sistem Tas selama percakapan. Anda tidak benar-benar perlu mengubah file ini, kecuali Anda ingin menggali penyesuaian yang lebih baik. Lanjutkan dengan risiko Anda sendiri.
BotMindFlows aktif di app/BotMind/BotMindFlows/ . Secara default di sini Anda hanya akan menemukan file index.js , tetapi jika pohon percakapan Anda mulai menjadi terlalu besar, Anda dapat membuat file sendiri dan menggunakan index.js untuk menggabungkannya menggunakan operator spread seperti ini.
import greetings from './conversation1';
import designSprint from './conversation2';
import designSprintQuestions from './conversation3';
const questions = {
...conversation1,
...conversation2,
...conversation3,
}
export default questions; Setiap kali BotMind menganalisis ke mana harus pergi (di dalam _nextBubble.js ) ia mengharapkan untuk menemukan hash pertanyaan di dalam app/BotMind/BotMindFlows/index.js . Pertanyaan terdiri dari... Anda dapat menebaknya, hash pertanyaan-jawaban individual. Di sini Anda bisa mulai meletakkan logika dan alur percakapan. Misalnya dalam demo kami, Anda akan menemukan yang berikut:
const question = {start:{botPrompt: "Halo Manusia, nama saya Alpha, saya adalah chatbot yang hebat",answers: [{nextId: "myPurpose"}] },myPurpose:{botPrompt: "Tujuan saya adalah menjadi chatbot sederhana yang memandu pengguna dan mampu mengambil keputusan dan membuat rekomendasi.",jawaban: [{nextId: "yourName"}]},yourName:{botPrompt: "Jadi, Siapa nama Anda?",input: textField(),answers: [ {answer: common_greetings,nextId: "greetings_notAName", }, {answer : common_greetings_negative,catchName: true,nextId: "asYouCanSee", },],},
...}ekspor pertanyaan default;Setiap hash pertanyaan harus memiliki ID uniknya sendiri . Kami menyarankan Anda membuat ID ini sejelas mungkin , meskipun itu berarti menulis lebih banyak lagi, karena seiring dengan berkembangnya perpustakaan percakapan bot Anda, mengingat ID mana yang melakukan hal yang dapat menyusahkan A. Setiap hash pertanyaan akan memakan waktu pilihan berikut:
botPrompt ([String] diperlukan): Pesan dari bot
jawaban ([Array] diperlukan): Respons berbeda yang mungkin dimiliki bot berdasarkan jawaban pengguna. Array terdiri dari hash, masing-masing mewakili kemungkinan hasil alur percakapan. Hash di dalam [ jawaban ] mengambil opsi berikut:
nextId ([String] diperlukan) : Menentukan ID dialog mana yang akan dinavigasi oleh bot jika jawaban ini terpenuhi. Pada pesan terakhir dari bot Anda atau sebelum Anda melompat untuk memperkirakan rekomendasi ( lihat di bawah ) , maka Anda harus meneruskan null .
jawaban ([String | RegEx]) : Jawaban pengguna yang akan memicu hash ini. Jika Anda menggunakan selectField atau tagsField untuk menentukan jawaban bagi pengguna, Anda boleh menggunakan string, jika tidak, Anda mungkin ingin menggunakan RegEx (lihat contoh).
sumToBags ([Array]) : di sini Anda dapat mulai menambahkan poin ke BagSystem untuk membuat kontrol aliran lebih lanjut dan/atau mengeluarkan rekomendasi jika itu adalah tujuan bot Anda. sumToBags biasanya akan terlihat seperti ini: sumToBags:[{name: "recommendation1", points: 1}, {name: "recommendation2", points: 3}]
catchName ([Boolean]) : Akan memberi sinyal pada React untuk menyimpan nama pengguna dari pesan pengguna ke dalam status aplikasi.
catchCompanyName ([Boolean]) : Sama seperti di atas tetapi untuk nama perusahaan.
catchMail ([Boolean]) : Sama seperti di atas tetapi untuk alamat email.
catchPhone ([Boolean]) : Sama seperti di atas tetapi untuk nomor telepon.
mustEstimateRecommendation ([Boolean]) : Akan memberi sinyal kepada BotMind untuk memutus aliran reguler dan menganalisis Tas Rekomendasi untuk memajukan percakapan (lihat contoh).
finishConversation ([Boolean]) : Akan memberi sinyal pada bot untuk menyelesaikan percakapan pada dialog berikutnya. Ketika ini terjadi, input pengguna akan dinonaktifkan dan bot akan "offline" hingga pengguna memilih "Restart".
CATATAN – jika botPrompt Anda untuk bagian dialog ini tidak mengharapkan konsekuensi, Anda cukup meneruskan nextId seperti ini :
answers: [
{
nextId: "hello"
}
] input ([Objek]) : Ini menentukan jenis input apa yang tersedia bagi pengguna selama botPrompt ini (bidang teks, tag, pilih, dinonaktifkan, dll.). Secara default, input adalah bidang teks yang dinonaktifkan. Kami menyarankan Anda menggunakan pembantu StateFormatter yang disertakan di awal file index.js .
type ([String]) : Jenis pesan apa yang dikirimkan bot ("teks", "media", "tautan", atau "transformedText").
varName ([String]) : Jika Anda memilih "transformedText" sebagai tipe input, Anda dapat menulis @varName di botPrompt , yang akan merujuk ke opsi ini. Ketika bot merender pesan, ia akan mencari variabel yang disimpan dalam status React ( lihat di bawah ) dan mengganti @varName dengan nilai variabel tersebut.
Seperti disebutkan di atas, Anda dapat memilih untuk menyimpan beberapa nilai dalam status React, dan kemudian menghitung reaksi/aliran/rekomendasi berdasarkan nilai-nilai ini. Kami menyebutnya Sistem Tas.
Konsep dari sistem tas adalah kita telah menentukan terlebih dahulu beberapa " tas " yang dapat kita isi dengan " poin " seiring berjalannya percakapan. Terakhir, ketika Anda memutuskan untuk memanggil shouldEstimateRecommendation: true pada salah satu hash pertanyaan-jawaban Anda, _recommendationBubbles.js akan dipanggil untuk bertindak untuk memutuskan apa yang akan ditampilkan selanjutnya berdasarkan berapa banyak poin yang telah dikumpulkan setiap tas.
Langkah pertama adalah menentukan tas yang akan Anda gunakan di /app/BotMind/recommendationBags.js . Jika Anda tidak menentukan tas ini, bot akan berfungsi, tetapi tidak tahu apa yang harus dilakukan saat Anda memanggil addToBags atau shouldEstimateRecommendation . Tasnya terlihat seperti ini:
const recommendationBags = [
{
name: "redWine",
defaultValue: 0,
goToBubbleId: "redWine_start",
},
{
name: "whiteWine",
defaultValue: 0,
goToBubbleId: "whiteWine_start",
},
{
name: "roseWine",
defaultValue: 0,
goToBubbleId: "roseWine_start",
},
]
export default recommendationBags; Setelah itu Anda dapat menentukan kapan harus menambahkan menggunakan addToBags dalam alur tanya jawab, misalnya:
question1:{
botPrompt: "Which of these are you having?",
input: selectField(["Red Meat", "Sea Food", "Chicken", "Pasta"]),
answers: [
...
{
answer: "Red Meat",
nextId: "question2",
sumToBags:[{name: "redWine", points: 4}, {name: "roseWine", points: 1}]
},
...
]
} Dan bila Anda sudah siap, panggil saja shouldEstimateRecommendation seperti ini:
question2:{
botPrompt: "What will you serve for dessert?",
input: selectField(["Chocolate", ...]),
answers: [
...
{
answer: "Chocolate",
shouldEstimateRecommendation: true,
nextId: null,
sumToBags:[{name: "redWine", points: 3}, {name: "whiteWine", points: 1}, {name: "roseWine", points: 2}]
},
...
]
}, Dalam contoh ini _recommendationBubbles.js akan dipanggil, sehingga gelembung bot berikutnya mungkin adalah yang ada di redWine_start .
Kami telah mengambil kebebasan untuk menentukan UI terlebih dahulu untuk menghemat waktu Anda.
Sebagian besar gaya Bot diatur oleh satu file, /app/customization/styleVariables.js , di sini Anda dapat mengubah hampir semua warna yang digunakan untuk semua elemen, serta latar belakang UI.
Jika Anda ingin membuat perubahan lebih lanjut pada UI, Anda dapat langsung menggali file stylesheet . Terdapat file global di /app/global-styles.js dan beberapa komponen atau container memiliki file styledComponents.js sendiri di foldernya masing-masing untuk komponen modular tertentu. File-file ini menggunakan Styled-Components , perpustakaan yang cukup mengagumkan untuk React/ES6 (yang secara resmi dianggap sebagai bantuan praktik terbaik). File-file ini menggunakan literal template yang diberi tag Javascript untuk menginterpolasi var JS dengan CSS, tapi jangan panik , ini dapat diperlakukan seperti CSS/SCSS biasa.
CATATAN - Tujuan kami adalah untuk secara bertahap bermigrasi ke 100% independen, komponen bergaya modular seperti yang ditemukan di /app/components/UserInput/styledComponents.js dan membuang hampir semua kode di /app/global-styles.js
Jika keinginan penyesuaian Anda tidak terpenuhi hanya dengan mengutak-atik CSS koponen, Anda dapat menyesuaikan hampir semua hal lainnya sesuai keinginan Anda, namun setelah itu Anda harus berurusan dengan sisi React (+Redux) dari aplikasi ( lihat di bawah ).
Seluruh sisi React dari Alpha telah difaktorkan ulang dengan menggunakan repo mengagumkan ini sebagai basis. Memanfaatkan praktik terbaik React yang paling mapan, yaitu penggunaan:
reduks
JS yang tidak dapat diubah
Pilih kembali
Redux-Saga
Komponen Bergaya
Jika Anda ingin mengutak-atik sisi React dari Alpha, sebaiknya Anda melihat dokumen ini terlebih dahulu.
Kami yakin Anda ingin mengirim email otomatis ke pemilik Bot dan pengguna akhir dengan rekap percakapan mereka atau semacamnya, dan kami sedang berupaya untuk menawarkan solusi agnostik paling fleksibel dan back-end yang' akan memungkinkan untuk hanya "Plug & Play".
Saat ini pilihan terbaik Anda adalah menghubungkannya ke server Node atau Express (atau Rails 5.1.x) dan memanfaatkan solusi mailer mereka sendiri. Anda dapat melihat file /app/BotMind/BotMailer.js yang kami gunakan untuk implementasi berbasis Rails, tetapi sampai sekarang kami telah menghapus semua logika kirim-Email dari /app/containers/BotContainer/sagas.js , jadi kamu harus menulis sagamu sendiri.
Bot ini didasarkan pada React + Webpack saja, artinya Anda dapat menghubungkannya dengan kerangka kerja apa pun, back-end, dll., selama bot ini berfungsi dengan Webpack.
Saat ini Bot dapat terhubung dengan lancar dengan API apa pun, tetapi Anda harus menuliskan pembuat tindakan dan kisah Anda sendiri untuk mendapatkan perilaku yang Anda inginkan.
Kami akan menambahkan dokumentasi di sini saat kami mengadaptasi bot ini untuk implementasi yang berbeda.
Sama seperti di atas, kami bermaksud mengizinkan bot ini terhubung ke Mesin Kecerdasan Buatan lainnya seperti Api.ai dan Watson milik IBM untuk meningkatkan interaksi. Ini adalah salah satu tugas utama kami.
