Beheer je Umbraco website met je stem via Google Home

Sinds 24 oktober is Google Home eindelijk in het Nederlands beschikbaar. Je kan vanaf dan vanuit je eigen huiskamer én in je moedertaal praten met deze slimme speaker. Bij Perplex geloven we dat spraak een steeds belangrijkere rol gaat spelen in ons dagelijks leven. Om ons voor te bereiden op deze (r)evolutie zijn we ruim een jaar geleden begonnen met experimenteren. Wat willen en kunnen we met Google Home? Hoe kunnen we Google Home inzetten in ons dagelijks werk? Kan Google Home ons helpen nóg efficiënter te werken? In dit blog presenteren we onze proof-of-concept-package voor ons favoriete CMS: Umbraco.

Wat doet de package?

Met behulp van onze package en Google Home kan je content in Umbraco bewerken middels spraak. Weg met je toetsenbord, je hebt alleen Google Home en eventueel je telefoon nodig. Je kan spraakgestuurd pagina’s in je Umbraco-installatie toevoegen en bewerken, dus je houdt tijd over om andere dingen te doen!

Demo?

Wil je onze package in actie zien? De ervaring is optimaal als je al in het bezit bent van Google Home. Is de slimme speaker geïnstalleerd? Dan kan je beginnen met praten met onze app. Op dit moment moet je nog in het Engels spreken met onze applicatie, aangezien Google Home pas net in het Nederlands beschikbaar is. In onze applicatie is nog niet alles klaargemaakt voor het Nederlands, maar dit volgt snel!

Helaas is onze app nog niet goedgekeurd door Google en kunnen we hem alleen als bèta-release aanbieden. Om gebruik te maken van de bèta-app moeten we het e-mailadres dat je gebruikt op Google Home toevoegen aan onze lijst met testgebruikers. Neem dus even contact met ons op via jeffrey@perplex.nl

Een korte video om te demonstreren hoe makkelijk het is om voortaan content toe te voegen.

Aan de slag

Autorisatie-stap: Als je met de app aan de slag gaat dien je de eerste keer je te autoriseren voor onze Umbraco website. Als je onze package hebt geïnstalleerd op je eigen website kan je daarmee verbinden, maar anders mag je ook onze testwebsite 'lenen'. We hebben een testomgeving ingericht die je kan gebruiken, die vind je op https://talkto.perplex.eu. Gebruik de inlognaam perplexrocks@perplex.nl en het wachtwoord perplexrocks om te autoriseren via jouw Google Home.

Content bewerken

Als dat is gelukt, kan je aan de slag met het bewerken van content. In de huidige website hebben we drie overzichtspagina’s, namelijk FAQ Items, Nieuws items en Animals. Je kan met Google Home gaan praten om één van deze items toe te voegen.

Speak! 

Zinnen die je bijvoorbeeld tegen Google Home kan zeggen zijn: 

  • ''I want to add a new animal''
  • ''I would like to add a new FAQ''
  • ''Please add a new newsitem to my site''  

Vervolgens maken we een match op basis van de naam van het documenttype. Dit zijn de onderstreepte woorden in de voorbeeldzinnen. De drie voorbeelden zijn allemaal een bestaand documenttype. Vervolgens zal  Google Home door de diverse properties van dit documenttype itereren.

Voor elk van deze properties vraagt Google Home welke waarde je daarin wilt plaatsen, afhankelijk van het datatype van de property.

 

Datatypes

Op dit moment ondersteunt onze implementatie de volgende datatypes:

  • Textstring
  • Image (meer daarover verderop in dit blog)
  • Date time
  • Dropdown list
  • Check box

De node Animal ziet er bijvoorbeeld als volgt uit:

Vragen beantwoorden

De vragen die Google Home achtereenvolgens zal stellen zijn:

  • “What is the animal name?”
  • “What is the natural habitat?”
  • “When is it first seen?”

Zodra deze vragen zijn beantwoord slaat onze app de node op en is de conversatie klaar.

Simulator

De code is zo generiek geschreven dat, als we een ‘Car overview’ toevoegen met een documenttype ‘Car’, deze automatisch ook daaronder toegevoegd kan worden zónder dat je er iets voor hoeft aan te passen in de code. Pretty neat, isn’t it!

Mocht je (nog) geen Google Home hebben, maar je wil wel heel graag met spraak een Umbraco-installatie sturen, dan kan je deze simulator gebruiken. Deze simuleert de Google Home via een chat-interface, maar dit is natuurlijk minder spectaculair.

I want this on my own website!

Nou dat komt mooi uit, want we hebben een Umbraco-package gemaakt waarmee je een voice-app kan toevoegen aan je website zonder een letter te programmeren.

  • Download de package van Our Umbraco
  • Installeer de package in je Umbraco-website
  • Je kan nu toegang krijgen tot de nieuwe sectie ‘Google Home’. Hier kan je alle gelinkte accounts zien, zodra iemand zich authenticeert. Op dit moment staat er nog niemand in, maar op een later moment kan je hier de diverse gebruikers en hun tokens zien. Daar zou je gebruikers eventueel de toegang kunnen ontzeggen.
  • Vervolgens kan je beginnen met praten met je app door de conversatie met je Google Home te starten middels "Ok Google, I want to talk to my Umbraco website". Voorwaarde is dat de website waarmee je wilt gaan praten toegankelijk is via het internet. Ben je dus lokaal aan het ontwikkelen (localhost, of een ander interne domeinnaam), dan kan er niet verbonden worden door de Google Home en zal het niet werken.
Perplex - Jeffrey Schoemaker

Achtergrond

Twee jaar geleden ben ik tijdens de Umbraco Retreat in het weekend voor CodeGarden bezig geweest om Umbraco zo toegankelijk mogelijk te maken. Het idee was dat je enkel via het gebruik van je toetsenbord Umbraco moet kunnen beheren. De ideële gedachte hierachter was dat ook visueelbeperkte mensen hun eigen website moeten kunnen onderhouden, zonder hier teveel moeite voor te moeten doen. #inclusiveness

Maar nadat we enkele tests hadden gedaan, kwam ik achter de denkfout die ik had gemaakt. Waarom dwingen we mensen om een computer en andere hulpmiddelen, zoals toetsenborden, te gebruiken en waarom kunnen ze niet gewoon tegen hun website praten? Op die manier kan namelijk (bijna) iedereen zijn website onderhouden; het enige wat je moet kunnen, is weten wat je kan doen binnen je website en vervolgens simpelweg spreken.

Daarnaast is het ook voor alle content editors eigenlijk veel makkelijk om te praten tegen hun website, aangezien ik nog altijd sneller praat, dan dat ik typ. Uiteraard is de spraaktechnologie op dit moment nog niet geperfectioneerd en voelen de conversaties misschien nog wat houterig aan, maar dat is een kwestie van tijd, toch?

Helemaal mee eens. Wil je nog meer demo’en?

Jazeker, want doordat Umbraco eigenlijk volledig beheerd kan worden via services konden we dit proof-of-concept ‘eenvoudig’ bouwen (lees: een stagiair heeft hier een half jaar aan gewerkt, onder begeleiding van twee Umbraco MVP’s. Maar we wilden nog een stapje verder gaan. Want tekst is leuk en vrij eenvoudig, maar een webpagina/content zonder afbeelding is ook maar saai. Maar hoe ga je een afbeelding toevoegen door middel van spraak?

Nou, ‘simpel’... Dit doen we door de spraakopdracht door te geven aan Google Image Search, vervolgens het eerste resultaat op te vragen en als media-item op te slaan in Media library. Zo kunnen we met spraak ook afbeeldingen toevoegen!

Technologie

Om onze spraak om te zetten naar commando’s waar Umbraco mee om kan gaan, hebben we een stuk software nodig dat de gesproken tekst classificeert en omzet naar uitvoerbare acties. Om dit te bereiken gebruiken we DialogFlow (voorheen heette dit api.ai en dit is eigendom van Google). In DialogFlow hebben we verschillende zinnen geconfigureerd om ervoor te zorgen dat we met je kunnen converseren. DialogFlow roept een webhook aan op onze webserver, de zogenaamde Perplex Gateway. Deze bekijkt naar welke Umbraco-website dit moet worden gedistribueerd. Dit is tijdens de autorisatie-stap gebeurd en toen hebben we in deze gateway opgeslagen welk token correspondeert met welke website. Doordat het token steeds door Google Home wordt meegestuurd weten we welke Umbraco-website uiteindelijk moet worden aangesproken.

Schematisch ziet dit er als volgt uit:

De Perplex Gateway is dusdanig generiek opgezet, waardoor het overweg kan met elke structuur in de diverse Umbraco-websites.

En nu...

Ga ermee aan de slag! Begin met onze app te praten via Google Home met de zin "Ok Google, I want to talk to my Umbraco website" (je moet je dus nog wel even als bèta-tester registreren door een e-mail te sturen naar jeffrey@perplex.nl) of gebruik de door Google aangeboden simulator. Het resultaat van jouw spraakopdrachten is vervolgens terug te vinden op de Umbraco-website (https://talkto.perplex.eu/umbraco/. Inloggen kan met ‘perplexrocks@perplex.nl’ en het wachtwoord ‘perplexrocks’).

Deze blogpost en onze package zijn als proof-of-concept bedoeld en zijn niet zozeer om direct je website al mee te gaan beheren, maar het is wél mogelijk. De package zal af en toe worden doorontwikkeld, maar het is een vrij tijdsintensieve bezigheid. Mocht je ons willen helpen de package te verbeteren of heb je een visuele beperking en wil je gebruik maken van onze package, neem dan vooral contact op met ons. Mogelijk kunnen we iets voor elkaar betekenen!

Lees ook

Beheer je Umbraco website met je stem via Google Home