Einführung in die Programmierung des Echo Show: Templates, Callbacks und Touchscreen-Events

Amazon Echo Show – Grundlagen der Skill-Entwicklung
Kommentare

Amazons Echo Show ist nicht nur ein Alexa-Lautsprecher mit integriertem Touchscreen. Auch für Videochats und als Intercom lässt sich Echos große Schwester einsetzen. Wie sich diese neue Komponente, der Screen mit Delegation über den Amazon Endpoint, ansprechen lässt, sehen wir uns im Folgenden genauer an.

Seit Dezember letzten Jahres beschäftigen wir uns bei hmmh als Leadagentur für Connected Commerce besonders mit Voice Interfaces. Ob mit Google Home, Amazon Echo oder einem der vielen anderen sprechenden Produkte. Das neue Echo Show ist ein Hardware gewordenes Learning von Amazon, das auf die Probleme und Hürden aller Voice Interfaces eingeht: die Informationsvermittlung. Echo Show kompensiert die Limitierung der Informationsvermittlung eines Voice Interfaces durch ein klassischen Display. So wird aus einem No-Interface Device ein neuer Full Service Touchpoint im digitalen Ökosystem, der für uns noch ungeahnte Möglichkeiten mit sich bringt.

Der Look von Echo Show ist nicht sonderlich aufregend und erinnert an SciFi-Filme aus den 70ern. Vorne eine schräge Fläche, im Mittelpunkt ein Display, darüber die Kamera, darunter das Lautsprechergitter. Trotzdem wirkt das Gerät im Wohnzimmer nicht deplatziert. Unser Echo Show mussten wir über eine amerikanische Adresse beziehen, da es in Deutschland noch nicht erhältlich ist. Ein Erscheinungsdatum für den deutschen Markt hat Amazon bisher noch nicht genannt.

Skill-Entwicklung fürs Echo Show: noch kein Leitfaden für Developer verfügbar

Ähnlich spartanisch sieht es mit den Informationen für Developer und die Entwicklung von Skills auf dem Echo Show aus. Der Developer-Bereich Amazons liefert Auskunft darüber, wie die JSON-Kommunikation zwischen Skill und Endpoint aussehen muss, damit man die neue Funktionalität ansprechen kann. Parameter werden beschrieben, Templates gezeigt und Callbacks erklärt. Aber eben alles nur auf Basis der Kommunikationsprotokolle und nicht als Leitfaden. Sind wir traditionelle Nutzer des Alexa Skill Kit Frameworks für Java, gucken wir also erstmal in die Röhre. Ein Vermerk in der neusten Framework-Version auf Github verrät uns zwar, dass die Version 1.4 für Echo Show vorbereitet wurde, allerdings gibt es dazu weder Dokumentationen noch Code-Beispiele.

Lesen Sie auch das How-to „Alexa Skill: Die ersten Schritte

Welche Darstellungsmöglichkeiten bietet Echo Show?

Aber wenn man schon mal ein Echo Show zur Verfügung hat, dann möchte man dafür auch einen Skill entwickeln. Also Augen zu und hinein in den Framework-Code, der beim letzten Release commited wurde. Zuerst müssen wir uns fragen, was wir eigentlich erwarten. Echo Show kann auf vielfältige Weise Informationen abbilden. Es muss also eine Möglichkeit geben, Informationen zu layouten und diese dann irgendwie als Response an den Alexa-Endpoint zu übermitteln. Schauen wir uns das Response-Objekt an, sehen wir, dass sich hier zum letzten Release so gut wie nichts geändert hat. Die einzige Stelle, an der wir ansatzweise dynamische Daten übergeben könnten, sind die sogenannten Direktiven. Suchen wir ein wenig im Framework, finden wir die RenderTemplateDirective und genau dieser kann man ein Template übergeben.

Templates sind uns bereits auf den Development-Seiten Amazons begegnet (https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/docs/display-interface-reference#display-template-reference). Zurzeit gibt es insgesamt sechs feste Templates: Zwei zur Darstellung von Content Lists und vier zur Darstellung von Single Content. Die beiden Templates für Content Lists unterscheiden sich darin, dass das eine für horizontale, das andere für vertikale Listen gedacht ist. Die vier Templates für Single Content unterscheiden sich in ihren Darstellungsmöglichkeiten wie folgt:

Tabelle 1: Unterschiede der Templates für Single Content

Wollen wir also Informationen aufs Display des Echo Show bekommen, müssen wir uns erst einmal darüber im Klaren sein, welches Template zur gewünschten Information passt. Ein Creative Conceptioner muss hier genau planen, damit die User Experience erwartungskonform und vor allem intuitiv gestaltet ist. Kommt der User mit der dargestellten Information nicht zurecht, nützt die sauberste Programmierung nichts. Um erste Hinweise und Feedback zu erhalten, eignen sich qualitative Nutzerbefragungen besonders gut.

Wie erstelle ich Bilder- und Textinhalte?

Technisch gesehen instanziieren wir einfach eines der Templates, das wir unter com.amazon.speech.speechlet.interfaces.display.template finden. Für entsprechende Properties wie Title, Icon, Background usw. gibt es jeweils Getter und Setter. Für Bilder gibt es eine Image– und eine ImageInstance-Klasse. Bilder werden in Form von URLs zum entsprechenden Imagesource übergeben. Text-Content kann als Plain- oder Richtext übergeben werden. Bei letzterem gibt es die Möglichkeiten, einige Markup-Tags für die Formatierung zu benutzen, die wir auch von HTML kennen. So gibt es <br/>,<b>,<i>,<u> und <font size=“n“>. Hier sind ebenfalls unterschiedliche Bereiche für Content innerhalb des Text Contents zu finden. Haben wir nun Bilder und Texte definiert und in die Properties des entsprechenden Templates eingetragen, ist der nächste Schritt, dieses Template an die RenderTemplateDirective-Instanz zu übergeben. Unsere neue Direktive tragen wir nur noch in die Liste von Direktiven ein und übergeben diese dem Response-Objekt. Wenn wir den Skill jetzt aufrufen, ist der neu erstellte Content zu sehen.

Lesen Sie auch den Lessons-Learned-Artikel „Alexa Best Practices

Wie komme ich an die Callbacks zu Touchscreen-Events heran?

Das Display des Echo Shows ist ein 7-Zoll-Touchscreendisplay. So ist es auch möglich, Elemente einer Content List oder Single Content auszuwählen. Dazu hat jedes Single Content Template und jedes Element eines List Templates einen sogenannten Token. Aus der Sicht des Frameworks ist dieser Token eine Property vom Typ „String“ und dient beim Callback zur Identifikation des gedrückten Elements. Schauen wir uns an, wie wir bisher Skills entwickelt haben, stellen wir fest, dass wir den Callback nur zu einem erkannten Intent bekommen. Also nur, wenn der Nutzer etwas gesagt hat. Das ist zwar für das Voice Interface ausreichend, nicht aber für das Display. Das SpeechletV2- Interface unterstützt jedoch ausschließlich Voice Callbacks.

Schauen wir uns aber den SpeechletRequestDispatcher im Framework genauer an, sehen wir, dass der Dispatcher auf ganz unterschiedliche Requests reagieren kann. So gibt es AudioPlayerRequest, PlaybackController, SystemRequests, aber auch DisplayRequests. Wird ein DisplayRequest erkannt, versucht der Dispatcher vom Interface Display die Methode onElementSelected aufzurufen. Was wir also tun müssen, um dieses Callback zu bekommen, ist, nicht nur das SpeechletV2 in unserer Speechlet-Klasse zu implementieren, sondern auch das Display-Interface. Haben wir dies getan, können wir mit folgender Methode überschreiben:
public SpeechletResponseonElementSelected(SpeechletRequestEnvelope<ElementSelectedRequest> requestEnvelope)

Diese Callbackmethode wird nun immer dann aufgerufen, wenn auf dem Display ein Element selektiert wird. Wird der Callback aufgerufen, können wir uns aus dem requestEnvelope über requestEnvelope.getRequest().getToken() den Token, also den Bezeichner des Elements, welches gedrückt wurde, zurückgeben lassen und entsprechend reagieren. Bei der Wahl des Bezeichners sind wir völlig frei.

Die Response auf ein ElementSelectedRequest ist eine normale SpeechletResponse. Wir können also sowohl Sprache als auch ein weiteres Display Template zurückgeben. Daher ist es auch möglich, die von Mobile Devices gängigen Master/Detail-Views zu implementieren. Genau für diese Mechanismen ist der Backbutton gedacht, der standardmäßig für jedes Template aktiviert werden kann. Die Implementierung der Funktionalität bei einem „go back“ liegt allerdings beim Entwickler.

Fazit

Zurzeit ist es für Java-Entwickler eher schwierig, sich dem Thema Echo Show zu nähern. Google und Stack Overflow spucken weder Links zu Beispielen noch Dokumentationen aus. Außer den wenigen Informationen direkt von Amazon ist bisher nicht viel zu finden. Will man seine Zeit nicht mit der Analyse des Frameworks verbringen, ist man gezwungen zu warten, bis die Entwicklerszene oder Amazon weitere Informationen liefern. Reverse Engineering ist hier das Stichwort. Hat sich einem die Erweiterung des Frameworks jedoch erschlossen, macht die Entwicklung von Skills für Echo Show einen stimmigen und durchdachten Eindruck.

Negativ aufgefallen sind eher Kleinigkeiten. So funktioniert das Preloading von Bildern in Content Lists eher schlecht als recht. Es ist nicht sehr schön anzusehen, dass Bilder von Listenelementen erst peu à peu erscheinen. Hier muss man bei der Konzeption von Skills zukünftig also auch auf die Zugriffszeit von Content Servern achten oder darauf hoffen, dass Amazon entsprechende Mechanismen verbessert. Generell bleibt abzuwarten, was sich Amazon an Erweiterungen einfallen lassen wird.

Was Entwickler zukünftig aus der Kombination von Voice Interfaces und Touch Screens herausholen werden, ist sehr interessant. Eine enge Zusammenarbeit zwischen Konzeption, Kreation und Entwicklung scheint hier unerlässlich zu sein. Insgesamt wird Amazon Echo Show sicherlich wieder große Veränderungen in den Markt bringen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -