Hoe u uw webapplicatie bestuurt met een geïntegreerde AI Chatbot - DeLaatbusiness

Hoe u uw webapplicatie bestuurt met een geïntegreerde AI Chatbot

6 min


122
6 gratis internet marketing ebooks, klik hier voor download

Conversatie-interfaces winnen aan populariteit, vooral voor transacties met schijnbaar ondoorzichtige backend-systemen. We kunnen bijvoorbeeld een chatbot inzetten om een ​​klant door een probleemoplossingsproces te leiden en een ticket maken als ze verdere hulp nodig hebben; allemaal zonder dat de klant het ticketcreatieproces hoeft te kennen. Dit zorgt voor een meer intuïtieve ervaring voor uw klant, waardoor de klanttevredenheid toeneemt, terwijl ook de efficiëntie wordt verbeterd door werknemers te bevrijden van de classificatie en routing van tickets.

Conversational AI kan dit out of the box aan, maar wat als uw gebruikers willen kunnen communiceren met uw front-end applicatie? Het kan bijvoorbeeld handig zijn voor uw gebruiker om naar een bepaalde pagina op uw website te navigeren zonder de exacte link te hoeven vinden. Of laat uw gebruiker een complex filter op een lijst met producten toepassen zonder in menu’s te hoeven klikken. Hoewel onze webchat kan worden ingebed in elke website, heeft deze niet de contextuele kennis van de gebruikersinterface die nodig is voor dit soort interacties. Om aan te tonen hoe we dit contextuele bewustzijn kunnen bereiken, zullen we een eenvoudige kaartapplicatie maken met een ingebedde bot die de mogelijkheid heeft om de kaart te verplaatsen en in of uit te zoomen:

Deze eenvoudige interactie wordt mogelijk gemaakt door een “ongebruikelijke” manier te definiëren om berichten naar de chat UI te verzenden, waardoor de kaartapplicatie het bericht kan onderscheppen, het kan ontleden en de kaart kan verplaatsen, alles voordat het laatste bericht aan de gebruiker wordt getoond.

Middelen

Pre-requisites

  • Allereerst moet u vertrouwd zijn met het bouwen van een eenvoudige bot met SAP Conversational AI. Als je niet bekend bent met het platform, ga dan naar deze tutorial om te leren hoe je een hilarische grappenbot kunt bouwen.
  • U moet ook onze Webchat-component ergens kunnen hosten dat u beheert. Onze GitHub heeft alle informatie om u op weg te helpen.
  • Er wordt ook verwacht dat u op zijn minst bekend bent met JavaScript en de basisprincipes van front-end webontwikkeling.

Tutorial

Om te beginnen moeten we de interface voor onze bot definiëren om opdrachten en berichten naar onze frontend te kunnen verzenden. Dit wordt bereikt door een stringed JSON-object te verzenden in plaats van de normale berichtenreeks die we doorgaans naar de gebruiker sturen. Onze aangepaste webchat zal dit JSON-object kunnen begrijpen, de gedefinieerde actie kunnen ondernemen en uiteindelijk een “bericht” aan de gebruiker kunnen tonen.

Dit kan vrij eenvoudig worden bereikt; we sturen een object met een actie van “verplaatsen” of “zoomen” en vervolgens een bericht dat we aan de gebruiker kunnen tonen. Merk op dat we dit json-object als een string zullen doorgeven, en het is onze veronderstelling dat de toepassing het zal parseren en alleen de waarde van “bericht” aan de gebruiker zal tonen.

{ 
"action": "move" || "zoom", 
"message": "Dit wordt aan de gebruiker getoond" 
}

Als ons actietype ‘verplaatsen’ is, heeft de kaart coördinaten nodig om naar te navigeren. Dus zullen we de coördinaten van een locatie opnemen in ons json-object. Als alternatief, als onze actie zoom is, moeten we weten of we moeten in- of uitzoomen. Hiervoor zullen we een richting opnemen die wordt weergegeven als een 1 voor in of een -1 voor uit. Als dit is gedefinieerd, zijn hier enkele voorbeelden van hoe onze json-objecten eruit zouden kunnen zien:

{"action": "move",   
"location": {   
"lat": -8.3405389,   
"Ing": 115.0919509   
"message": "Going to Bali, Indonesia!"  
}    {"action": "zoom" 
  "direction": 1,   
"message": "Inzoomen!" 
}

Met dat in gedachten kunnen we beginnen met het bouwen van onze bot. Zoals altijd zullen we beginnen met het definiëren van de intenties die onze gebruiker zou kunnen zeggen. In dit geval hebben we een zoom- en verplaatsingskaart.

Merk op dat we de zinnen in @zoom moeten taggen met de entiteit ‘direction’, maar ‘location’ wordt automatisch herkend in @ move-map. Gelukkig voor ons komt de locatie-gouden entiteit met de lengte- en breedtegraad uit de doos, dus we kunnen deze gemakkelijk doorgeven aan de voorkant. Om de 1 of -1 te krijgen die onze zoomrichting vertegenwoordigt, zullen we aangepaste verrijkingen gebruiken. We voegen de toetsen “naam” en “richting” toe met de volgende waarden. Wijs vervolgens de juiste entiteitswaarden toe aan hun respectieve sleutelwaarden.

Nu we onze intentie voor de verplaatsingskaart kunnen herkennen, hebben we gewoon een vaardigheid nodig die wordt geactiveerd als onze intentie wordt gematcht:

En vereist een locatie:

En stuurt ten slotte een bericht terug met de front-end waarheen te gaan:

De zoomvaardigheid kan op vrijwel dezelfde manier worden geïmplementeerd; Ik moedig je aan om het zelf te proberen!

Nu onze bot klaar is, moeten we de webchat lokaal hosten, zodat we deze kunnen aanpassen om onze “ongewone” antwoorden te begrijpen. Als je niet bekend bent met het zelfhostingproces , bekijk dan deze github .

Eindelijk is het tijd om onze webapplicatie te bouwen. We beginnen met het opnemen van een containerdiv voor onze kaart, het script dat we zullen schrijven om de kaartinteracties (map_controls.js) af te handelen, het benodigde script zoals beschreven in deze tutorial van Google en de scripttag die verwijst naar onze lokaal gehoste bot. Het zou er ongeveer zo uit moeten zien:

Om onze eenvoudige applicatie te voltooien, zullen we onze kaartinitialisatie en zoom / verplaatsingsmethoden implementeren:

functie initMap () { 
window.map = new google.maps.Map (document.getElementById ('map'), {// OPTIONS 
center: {lat: -34.397, lng: 150.644}, 
zoom: 8, 
zoomControl: false, 
streetViewControl: false, 
mapTypeControl: false, 
rotateControl: false, 
scaleControl: false, 
fullscreenControl: false 
}); 
} const zoom = (richting) => {window.map.setZoom (window.map.getZoom () + richting); 
} const setCenter = (lat, lng) => { 
window.map.setCenter ({lat: lat, lng: lng}); 
}

Zodra we de chatbot met succes aan onze applicatie hebben toegevoegd, kunnen we hem vragen om te bewegen of in / uit te zoomen, maar hij zal nog steeds die lelijke json-reeks aan ons weergeven. Om dat op te lossen, voegen we de volgende code toe aan Webchat / src / containers / Chat / index.js. Hiermee wordt in het vensterobject gezocht naar een functie met de naam applicationParse en wordt deze aangeroepen als deze bestaat.

const getApplicationParse = messages => { 
return new Promise ( 
olve => { if (! window.webchatMethods ||! window.webchatMethods.applicationParse) {returnolve 
() 
} 
// zodat we het bericht in alle gevallen verwerken 
setTimeout (oplossen , MAX_GET_MEMORY_TIME) 
probeer {const applicationParseResponse = window.webchatMethods.applicationParse (berichten) 
if (! ApplicationParseResponse) { 
return solve ( ) 
} 
if (applicationParseResponse.then && type of applicationParseResponse.then === 'function') { 
// de functie terug a Promise 
applicationParseResponse 
.then (applicationParse => 
solve ( )) .catch (err => { 
console.error (FAILED_TO_GET_MEMORY)
console.error (err) 
solve ()}) 
} else { 
olve () 
}} catch (err) 
{console.error (FAILED_TO_GET_MEMORY) 
console.error (err) 
solve () 
} 
}) 
}

Nu zullen we getApplicationParse aanroepen vóór de aanroep van setState in componentWillReceiveProps. Dit zorgt ervoor dat onze applicatie de kans krijgt om de reactie van de bot te parseren voordat er iets naar de gebruiker wordt teruggestuurd.

componentWillReceiveProps (nextProps) { 
const {berichten, show} = nextProps if (berichten! == this.state.messages) {getApplicationParse (berichten) 
this.setState ({berichten}, () => { 
const {getLastMessage} = dit. props 
if (getLastMessage) { 
getLastMessage (berichten [messages.length - 1]) 
} 
}) 
} 
if (show && show! == this.props.show &&! this.props.sendMessagePromise &&! this._isPolling) {this. doMessagesPolling () 
} 
}

Ten slotte moeten we applicationParse implementeren en opnemen in het vensterobject van map_controls.js. Hier zullen we onze berichten doorlopen en als het een geldig actiecommando van de bot is, de actie ondernemen en alleen het bericht terugsturen naar de gebruiker.

window.webchatMethods = { 
applicationParse: (messages) => { 
messages.map (message => { 
probeer { 
var obj = JSON.parse (message.attachment.content); 
console.log (obj); 
if (obj! == undefined && 
obj.action == 'zoom' && 
typeof obj.direction === "number") { 
message.attachment.content = obj.message.toString (); zoom (obj.direction); 
} anders if (obj! == undefined && 
obj.action == 'verplaatsen' && 
typeof obj.location.lat === "number" && 
typeof obj.location.lng === "number") { 
message.attachment.content = obj.message. toString (); setCenter (obj.location.lat, obj.location.lng); 
} 
} catch (err) {
// Ongeldige JSON - behandel het als een normaal bericht en geef het terug aan de gebruikersinterface zoals is 
} 
bericht 
}) 
berichten terugzenden; 
} 
}

Je kunt nu je bot vragen om de kaart te verplaatsen of in te zoomen en hij zal een bericht verzenden dat de applicatie kan interpreteren en ernaar handelen. Met deze tool in uw gereedschapsriem, kunt u nu een chatbot integreren in al uw webapplicaties en gebruikers een leuke en intuïtieve manier bieden om te communiceren met de gebruikersinterface!


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format