Interaktives Storytelling: Der Smartspeaker-User entscheidet
In dem kurzen Beispiel-Skill, den ich für den heutigen AdvenTOOLender-Tag entwickelt habe, geht es ums interaktive Storytelling. Normalerweise werden Alexa Fragen und Aufgaben gestellt und sie antwortet. Hier kann sich der Alexa-User zwischen unterschiedlichen Möglichkeiten und demnach Erzählsträngen entscheiden. Wie das dann in der Praxis aussieht, kannst du dir in meinem YouTube-Video anschauen, am Anfang und am Ende hörst du den erstellten Alexa-Skill.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Für welche Themen eignet sich Voiceflow?
Thematisch kannst du mit Alexa alles umsetzen, du bist da nicht eingeschränkt. Das Sinnvollste wäre, wenn du auch eine besitzt, zum Beispiel wie ich in Form des Echo-Dots. Musst du aber auch nicht. Thematisch ungeeignet ist dementsprachend nichts. Falls du nicht mit Spracherkennung und Audios arbeiten willst, macht die Entwicklung eines Alexa-Skills keinen Sinn.
Die Schritt-für-Schritt-Anleitung
1.) Gehe auf die Homepage von Voiceflow. Klicke oben rechts auf „Sign Up“ um dich anzumelden. Entweder erstellst du einen eigenen Voiceflow-Account an oder loggst dich mit deinem Google- oder Facebook-Account ein. Ich habe mein Google-Konto genutzt. Dadurch gelangst du zu einer Umfrage zu deiner Person. Zu den Kosten: Das was wir heute machen, ist komplett kostenlos. Voiceflow hat einen Bezahlplan, der dir weitere Features ermöglicht, die wir aber gar nicht brauchen. Du kannst auch unendlich viele kostenlose Skills entwickeln.
2.) Dann kommst du in den Editor (siehe Foto 1), in dem sich jetzt deine Entwicklung des Alexa-Skills abspielt. Bevor du dort beginnst, solltest du dir auf einem Zettel erste Abläufe notieren (siehe Foto 6). Also: Was soll Alexa erzählen? Was sind die Antwort-Möglichkeiten des Users? Das ist wirklich hilfreich, damit du das Ganze gleich als roten Faden hast.
3.) Kommen wir über den Editor, den du auf Foto 1 siehst. Das Ganze funktioniert nach dem „Drag and Drop“-Prinzip. Du baust also mit den einzelnen Elementen aus der Liste (linken Seite) den Gesprächsablauf zusammen. Dabei gehst du von dem vorgegebenen Home-Modul in der Mitte aus. Ich wollte, dass Alexa zur Begrüßung sagt:
„Herzlich Willkommen! Schön, dass du den AdvenTOOLender kennst. Möchtest du testen, wie dieser Skill funktioniert?“
Ziehe deshalb den Block „Speak“ (linke Seite) neben das Home-Modul. Das sieht dann so aus:
4.) Trage dann den Text, den Alexa sagen soll, in den Speak-Block ein. Entweder hat sich der Speak-Block dafür wie bei mir automatisch geöffnet (siehe Foto 2, rechte Seite). Oder du musst ein Mal auf den Speak-Block klicken. In das Feld „Tell Alexa what to say“ kommt dann dein Text. Du kannst oben, wo nur „Speak“ als Überschrift steht, einen eigenen Titel eintragen. Bei mir ist das „Begrüßung“. Das macht es sehr viel übersichtlicher, wenn du später viele Blöcke hast.
5.) Jetzt hast du schon den Text notiert, allerdings weiß Alexa noch nicht, wann sie das sagen soll. Deshalb müssen wir eine Verbindungslinie ziehen. Klicke dafür im Home-Modul auf den grauen Bereich des „Start“-Feldes und ziehe die dadurch entstehende Linie zum grauen Bereich des Speak-Blocks (linkes Feld). Das sieht dann so aus (Foto 3):
Ja, der Pfeil ist etwas schief, die Verbindung steht aber. Du kannst den Speak-Block (genau wie alle anderen Blöcke) bewegen, in dem du auf ihn klickst und dann mit gedrückter Maustaste ziehst. Dadurch wird auf der Pfeil gerader. Das Tool speichert übrigens automatisch.
6.) Da du mit „Möchtest du testen, wie dieser Skill funktioniert?“ eine Frage gestellt hast, muss der User jetzt antworten können. Deshalb ziehst du einen „Choice“-Block neben deinen Begrüßungs-Speak-Block. Klicke auf ihn und gib die Antwortmöglichkeiten ein (bei mir: „Ja“, „Nein“). Mit „Add Choice“ kannst du weitere Möglichkeiten hinzufügen. Wenn du bei einer Antwortmöglichkeit auf „Enter“ klickst (zum Beispiel hinter der „Ja“-Antwort), kannst du weitere Synonyme hinzufügen. Bei mir würde Alexa auch „Jupp“ und „Joa“ verstehen. Verbinde den Begrüßungs-Block mit dem Choice-Block (Erinnerung: das graue Kästchen verwenden). So sieht das Ganze dann aus:
7.) Ich habe mir für den kleinen AdvenTOOLender-Test-Skill überlegt, dass es so weitergehen soll – das ist der in Schritt 2 angekündigte Ablaufplan:
Ja, das Ganze ist inhaltlich und vom Schwierigkeitsgrad echt einfach gehalten. Aber: Um ein Gefühl dafür zu bekommen, wie Voiceflow funktioniert, finde ich diese Einfachheit gerade super. Natürlich kannst du mit den einzelnen Blöcken noch kreativer werden und auch noch selbst programmieren (z.B. Code-Block). Da das AdvenTOOLender-Beispiel für jeden machbar und nachvollziehbar sein soll, habe ich darauf verzichtet.
8.) Ziehe jetzt drei weitere Speak-Blocks in den Editor. Jeder davon soll dann die Meinung von Alexa zu den Antwortmöglichkeiten „Ja“, „Nein“, „Else“ enthalten. Über „Else“ haben wir noch nicht gesprochen. Das ist ganz wichtig und wird vom Programm ausgeführt, wenn Alexa die Antwort des Users nicht verstanden hat. In den Speak-Block für „Else“ kannst du als Text zum Beispiel eintragen: „Oops, das habe ich nicht verstanden. Bitte antworte mit Ja oder Nein.“
9.) Als nächstes müssen die einzelnen Blocks wieder verbunden werden. Bei dem „Else“-Block sieht das etwas anders aus, da er ja zum Choice-Block zurückführen muss, um ihn neu zu starten. Das sieht dann so aus:
10.) Dann möchten wir, dass Alexa den Vornamen des Users kennt, damit wir ihn immer wieder persönlich ansprechen können. Frage den Nutzer in einem Speak-Block nach seinem Namen. Verbinde diesen mit einem Capture-Block. Klicke dann auf den Capture-Block. Bei „Input Type“ wählst du „FirstName“ aus, da wir den Vornamen nutzen wollen. Bei „Capture Input to“ musst du eine Variable auswählen. Die Vornamen-Variable gibt es aber noch nicht. Deshalb müsst du sie erstellen. Klicke dafür in das „Select Variable“-Feld und gehe dann auf „Create Variable„.
Dann öffnet sich ein weiteres Fenster. Dort kannst du den Namen der Variable erstellen. Ich habe in das „Variable Name„-Feld geschrieben: „user_firstname“. Klicke dann auf Enter. Jetzt gehst du nochmal auf deinen Capture-Block. Dort kannst du jetzt bei „Capture Input to“ den Namen deiner neuen Variable auswählen (siehe Foto 8).
11.) Füge nach dem Capture-Block einen weiteren Speak-Block ein. Ab sofort kennst du den Namen des Alexa-Users und kannst ihn ansprechen. Und zwar, in dem du in dem Textfeld des Speak-Blocks beispielsweise folgendes schreibst: „Okay, {user_firstname}! Du hast einen tollen Namen.“ Schreibe den Namen deiner Variable also in geschweifte Klammern. Darin hat Alexa nämlich den Namen des Nutzers abgespeichert. Du kannst ihn dann an unterschiedlichen Stellen immer wieder so mit dieser Art Klammern nutzen.
12.) Ich habe den Skill dann mit weiteren Speak- und Choice-Blöcken gebaut (siehe Foto 9). Wie oben erklärt, gibt es noch ganz, ganz viele weitere Möglichkeiten und Optionen bei den Blöcken. Um die soll es heute aber nicht gehen. Probiere dich da gerne aus, wenn du sie testen möchtest und schreibe mir in die Kommentare, wenn du willst, dass ich in einem weiteren Artikel/Video zeige, wie zum Beispiel die Programmier-Blöcke funktionieren.
13.) Jetzt musst du noch ein paar Einstellungen treffen, was beispielsweise den Namen des Skills angeht, auf den Alexa reagiert. Außerdem ist die Sprache ein wichtiges Thema (dazu gleich eine kleine Story). Bisher hast du immer im „Canvas“ gearbeitet (siehe oben links), um die ganzen Blöcke anzuordnen. Klicke jetzt auf „Publish„. Keine Sorge, dadurch veröffentlichst du den Skill noch nicht. Dort gibt es sechs verschiedene Punkte, in denen du auch das Logo für den Skill, eine Beschreibung und so weiter einstellen kannst. Das kannst du später alles machen. Wichtig jetzt: die beiden Punkte „Skill Invocation“ und „Locales“.
Klicke zuerst auf „Skill Invocation“. Hier stellst du den Namen ein, auf den Alexa reagieren soll, um deinen Skill zu starten. Wie du im Video vielleicht schon gesehen hast, ist das bei mir „Meine Geschichte“. Außerdem stehen dort zwei Sätze, auf die Alexa ebenfalls reagiert. Es reicht aber zu sagen: „Alexa, meine Geschichte“. Dann beginnt der Skill direkt.
Darunter befindet sich die Kategorie „Locales„. Dort musst du die Sprache deines Alexa Skills einstellen. Die ist standardmäßig auf „English (US)“ eingestellt, stelle sie auf German (DE) oder eben der Sprache deines Skills. Hier die angekündigte Story: Wenn du die Texte in deinen Blocks auf Deutsch schreibst und English (US) noch eingestellt ist, hat Alexa einen ganz krassen Akzent. Das klingt teilweise super unverständlich und nicht gut für einen deutschen Skill. Ich wusste nicht, wo man das ändern kann. Deshalb habe ich in der Voiceflow-Community nachgefragt, die mir direkt diese Info gegeben hat, wo ich das umstellen kann. Sie haben eine Facebook-Gruppe – ich habe die Community da als sehr hilfsbereit erlebt und kann dir nur empfehlen, der Gruppe beizutreten. Da bekommst du Hilfe und Inspirationen.
14.) Teste als nächstes deinen Skill. Ich habe das zwischendurch immer mal gemacht, wollte aber, dass du schon alle wichtigen Einstellungen und Co. getroffen hast. Einfach, damit du nicht verwundert bist oder denkst, dass etwas nicht stimmt. Also: Du kannst auch vorher testen, so funktioniert es:
Unabhängig davon, ob du mit oder ohne Alexa testen willst, musst du im „Canvas“-Bereich (da, wo du die Blocks platziert hast), auf den Button „Upload to Alexa“ klicken. Dann musst du dich mit deinem Amazon-Konto anmelden und dich als Alexa-Developer registrieren (Developer Sign Up). Das ist kostenlos und kommt beim ersten Mal einfach alles direkt nacheinander. Es ist sinnvoll, dass die E-Mailadresse des Amazon-Kontos, das du angibst, die ist, mit der deine Alexa angemeldet ist, falls du mit Alexa testen willst. Du musst auch dein Unternehmen angeben. Da habe ich meine Namen, also Johanna Daher, eingetragen. Ich arbeite damit ja nicht für ein Unternehmen, sondern es ist mein Projekt. Sobald du fertig angemeldet bist, klicke erneut auf „Upload to Alexa“. Dann kannst du zwischen diesen Optionen wählen:
- Du willst mit Alexa testen: Durch den „Upload to Alexa“ wird der Skill wirklich direkt mit deinem Amazon-Account und somit mit deiner Alexa verknüpfst. Wenn du beispielsweise Zuhause den Echo-Dot hast, weißt du, dass du auf dem Smartphone eine Amazon-Alexa-App besitzt. Klicke dort oben links aufs Menü > Skills und Spiele > Ihre Skills. Da steht dann wie viele Skills aktiviert und aktualisiert sind. Swipe dort nach links, bis dort „Entwickler“ steht. In meinem Fall habe ich da nur einen Skill – eben den, den wir gerade erstellt haben. Klicke auf „Entwickler“, um deine Skill zu sehen. Jetzt weißt du, dass er da ist. Ich kann dann einfach „Alexa, meine Geschichte“ sagen, da ich das ja oben bei „Skill Invocation“ eingestellt habe. Bei dir kann das je nach eingetragenen Infos variieren. Jetzt kannst du deinen Skill mit Alexa durchsprechen.
- Du willst ohne Alexa testen: Dann erscheint nach dem „Upload to Alexa“ unter dem Button die Alexa developer console. Klicke darauf. Dann wird ein neuer Tab in deinem Browser geöffnet (siehe Foto 12). Hier kommt es zu dem Problem aus meiner Story: Die Konsole kann nur Englisch. Deshalb wird dein Text auch mit komischem Akzent vorgelesen und du gegebenenfalls nicht gut verstanden. Das passiert in der Konsole auch, obwohl du die richtigen Spracheinstellungen getroffen hast. Aber keine Sorge: Das ist auf deinem Alexa-Skill dann anders. Klicke dort auf Alexa Simulator. Halte dann das Mikrofon gedrückt und sage deine Skill Invocation, zum Beispiel „Alexa, meine Geschichte“ oder was bei dir steht. Lasse los, sobald du fertig gesprochen hast. Schaue dann, wie der Alexa Simulator reagiert. In der Konsole könntest du auch noch Programmieren und andere Dinge tun, wie du anhand der einzelnen Reiter siehst. Das spielt aber für das heutige Tutorial keine Rolle.
Solltest du nach dem Testing weitere Änderungen vorgenommen haben, klicke erneut auf „Upload to Alexa“, um sowohl die Entwickler-Konsole, als gegebenenfalls auch deine Alexa upzudaten.
15.) Unter „Publish“ hättest du jetzt auch die Möglichkeit deinen Skill wirklich zu veröffentlichen und für andere zugänglich zu machen. Jetzt musst du Logo, Beschreibung und Co. hinzufügen. Der letzte Punkt des Publishing-Vorgangs ist dann der Klick auf den Button „Submit for Review“.
