In questo tutorial di sviluppo web, vedremo come creare un chatbot di base utilizzando HTML, CSS e JavaScript vanilla. Questo esercizio si concentra sui fondamenti di JS piuttosto che su qualsiasi tipo di intelligenza artificiale (AI). Per rendere il processo più semplice e facile da imparare, non sto utilizzando librerie di terze parti. Costruirò il chatbot da zero concentrandomi sulle basi del linguaggio di programmazione JavaScript.
Questo esercizio ha lo scopo di aiutare i programmatori JavaScript a imparare come funziona un chatbot e come gli sviluppatori web possono creare un chatbot di base utilizzando JavaScript.
Crea un Chatbot in JavaScript
Innanzitutto, inizia creando un file HTML. Creiamo un nome file index.html, contenente il seguente codice:
<!DOCTYPE html> <html> … <div id="main"> <div><input id="input" type="text" placeholder="Write something..." autocomplete="off" autofocus="true"/></div> </div> … </html>
Here, we have created a div with id ‘main’ and inside it we have an input field in which the user can type text and communicate with the bot. This is the basic HTML set-up. We will be adding more functionalities along the way.
Next, we also need to add some layout styling to our webpage. So let us create a CSS file named style.css. Use the following stylesheet code:
#main {
position: fixed;
top: 40%;
right: 200px;
…
.messages {
display: flex;
flex-direction: column;
overflow: scroll;
height: 90%;
width: 100%;
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 10px;
}
…
}
Creazione del file .js
Ora, crea un .js file e quindi imposta alcune funzionalità di base in esso con il seguente codice JavaScript:
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#input").addEventListener("keydown", function(e) {
if (e.code === "Enter") {
console.log("You pressed the enter button!")
}
});
});
Nota che aggiungendo il DOMContentLoaded listener qui si assicura che JavaScript venga caricato solo quando l’HTML ha terminato il rendering. A proposito, è una buona pratica di codifica.
Alcuni utenti trovano un compito noioso fare clic su Inviare pulsante, ancora e ancora, per inviare messaggi tramite un’app di chat. Quindi vogliamo implementare una funzione di messaggistica istantanea in questa app che consentirà all’utente di inviare il messaggio semplicemente premendo il tasto accedere chiave dopo che hanno finito di digitare il messaggio.
E questo potrebbe essere fatto nei seguenti modi:
const inputField = document.getElementById("input")
inputField.addEventListener("keydown", function(e) {
if (e.code === "Enter") {
let input = inputField.value;
inputField.value = "";
output(input);
}
});
Aggiungendo il e.code == ‘Invio’, stiamo dicendo all’ascoltatore di eventi che ci interessa solo il accedere chiave. Abbiamo sostituito il registro della console con alcune istruzioni che eseguono queste azioni:
Assegnazione del valore del campo di input alla variabile locale.
Vogliamo anche cancellare il campo di input del modulo dopo l’invio, quindi impostiamo il valore del campo di input sulla stringa vuota.
Passando il valore di input alla nostra prossima funzione ‘output’
Funzioni JavaScript per chatbot
Nel passaggio successivo, creeremo alcune funzioni JavaScript che creeranno un bot.
Innanzitutto, vogliamo prendere il controllo del testo digitato dall’utente nel campo del modulo di input. Qualunque sia l’utente che digita nel campo di input, vogliamo renderlo un po’ più standard utilizzando le espressioni regolari come nel seguente frammento di codice:
function output()
{
let text = input.toLowerCase().replace(/[^wsd]/gi, "");
…
}
L’espressione regolare sopra rimuoverà tutto tranne parole, cifre e spazi. Vogliamo anche rimuovere tutti i personaggi canaglia e tutto ciò che potrebbe rendere difficili le partite. Quindi si può fare nei seguenti modi:
function output()
{
let text = input.toLowerCase().replace(/[^wsd]/gi, "");
…
text = text
.replace(/ a /g, " ")
.replace(/whats/g, "what is")
.replace(/please /g, "")
.replace(/ please/g, "");
}
Ad esempio se il tipo di utente è ‘cosa sta succedendo’ o ‘cosa sta succedendo’ o ‘cosa sta succedendo’ – invece di contabilizzare queste differenze separatamente, le tratteremmo allo stesso modo.
Ora che abbiamo un’idea di come apparirà l’input dell’utente, creiamo l’insieme delle possibili risposte del bot e dei testi dell’utente.
Programmazione delle risposte dei bot in JavaScript
Il nostro prossimo compito è lavorare sulle risposte del bot in base ai trigger (testo utente). Quindi creerò array di array che includono espressioni e risposte. Per semplicità, li terrò brevi.
const utterances = [
["how are you", "how is life", "how are things"], //0
["hi", "hey", "hello", "good morning", "good afternoon"], //1
["what are you doing", "what is going on", "what is up"], //2
["how old are you"], //3
["who are you", "are you human", "are you bot", "are you human or bot"], //4
…
;
// Possible responses corresponding to triggers
const answers = [
[
"Fine... how are you?",
"Pretty well, how are you?",
"Fantastic, how are you?"
], //0
[
"Hello!", "Hi!", "Hey!", "Hi there!", "Howdy"
], //1
[
"Nothing much",
"About to go to sleep",
"Can you guess?",
"I don't know actually"
], //2
["I am infinite"], //3
["I am just a bot", "I am a bot. What are you?"], //4
…
];
// For any other user input
const alternatives = [
"Go on...",
"Try again",
];
Se noti gli indici di ogni array e come sono allineati, vedrai che il testo dell’utente che corrisponde a un’opzione in espressioni[0] risponderà con un’opzione da risposte[0], e così via. Il alternative array è, ovviamente, per quei valori di input che non corrispondono nel primo array. Questo spiega come funziona un chatbot di base sotto il cofano.
Trigger e risposte di Chatbot
Ora possiamo acquisire familiarità con l’aspetto dei trigger e delle risposte. Il prossimo passo è creare una funzione che confronterà questi array:
function compare(utterancesArray, answersArray, string) {
let item;
for (let x = 0; x < utterancesArray.length; x++) {
for (let y = 0; y < utterancesArray[x].length; y++) {
if (utterancesArray[x][y] === string) {
items = answersArray[x];
item = items[Math.floor(Math.random() * items.length)];
}
}
}
return item;
}
Ora chiamiamo questa funzione dalla funzione originale ‘produzione()’ nel seguente modo:
function output(input) {
let product;
let text = input.toLowerCase().replace(/[^wsd]/gi, "");
text = text
.replace(/ a /g, " ")
.replace(/whats/g, "what is")
.replace(/please /g, "")
.replace(/ please/g, "");
if (compare(utterances, answers, text)) {
product = compare(utterances, answers, text);
}
else {
product = alternatives[Math.floor(Math.random() * alternatives.length)];
}
//update DOM
addChatEntry (input, product);
}
Dopo aver confrontato gli array, il nostro ‘produzione’ la funzione infine chiama il addChatEntry() funzione per rendere la conversazione visualizzata sulla pagina web.
Aggiornamento del DOM
L’ultima cosa che rimane ora è aggiornare il DOM. Quindi dobbiamo creare una funzione addChatEntry():
function addChatEntry(input, product) {
const messagesContainer = document.getElementById("messages");
let userDiv = document.createElement("div");
userDiv.id = "user";
userDiv.className = "user response";
userDiv.innerHTML = `${input}`;
messagesContainer.appendChild(userDiv);
let botDiv = document.createElement("div");
let botText = document.createElement("span");
botDiv.id = "bot";
botDiv.className = "bot response";
botText.innerText = "Typing...";
botDiv.appendChild(botText);
messagesContainer.appendChild(botDiv);
…
setTimeout(() => {
botText.innerText = `${product}`;
}, 2000); }
Questa funzione crea un thread di messaggi sia per il bot che per i campi utente, nella stessa pagina.
Nel impostaTimeout funzione, impostiamo il ritardo di due secondi per dare l’impressione che il bot pensi per qualche secondo e poi risponda quando qualcuno gli parla.
Tutorial sulla programmazione di chatbot
Qui abbiamo creato un chatbot di base utilizzando Javascript. Il nostro obiettivo principale di questo tutorial era comprendere la logica Javascript dietro la creazione di un chatbot.
Costruire un chatbot in tempo reale può essere un compito complicato, ma ne vale la pena. Al giorno d’oggi, ci sono molte società di sviluppo software e piattaforme di chatbot che stanno costruendo e integrando chatbot in diverse applicazioni aziendali. Puoi anche utilizzare un codice pre-scritto per creare chatbot. Sono utili per ottimizzare la comunicazione con il cliente e raggiungere il pubblico di destinazione.
Puoi accedere a tutto il codice sorgente di questa app su my Codepen.
Se hai bisogno di array di espressioni e risposte, sono in quest’altro Codepen.