Grundlagen für die Programmierung von Amazon Echo Show

Dieser Beitrag ist auch verfügbar auf: Englisch

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 nämlich die Limitierung der Informationsvermittlung eines Voice Interfaces mit einem klassischen Display. So wird aus einem No-Interface Device ein neuer Full Service Touchpoint im digitalen Ökosystem, das für uns noch ungeahnte Möglichkeiten mit sich bringt. Wie wir diese neue Komponente, den Screen mit Delegation über den Amazon Endpoint ansprechen können, sehen wir uns im Folgenden genauer an. Reverse Engineering ist hier das Stichwort.

Der Look von Echo Show ist nicht sonderlich aufregend und erinnert in seiner Art an SciFi-Filmen 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.

Aktuell gibt es noch keinen Leitfaden für Developer

Ä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 zwar 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 traditioneller Nutzer des Alexa Skill Kit-Frameworks für Java gucken wir also erstmal in die Röhre. Ein Vermerk in der neusten Framework-Version im 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.

Welche Darstellungsmöglichkeiten bietet Echo Show?

Nun haben wir hier aber ein Echo Show stehen und möchten 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 diesen kann man ein Template übergeben.

Templates sind uns bereits auf den Development-Seiten Amazons begegnet (https://developer.amazon.com). 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 unterschieden sich in ihren Darstellungsmöglichkeiten wie folgt (siehe Abbilung 1):

  • BodyTemplate1
  • Title (optional)
  • Skill icon (provided in developer portal)
  • Rich or Plain text
  • Background image (optional)
  • BodyTemplate2
  • Title (optional)
  • Skill icon (provided by developer portal)
  • Image (optional – can be a rectangle or square)
  • Rich or Plain text
  • Background image (optional)
  • BodyTemplate3
  • Title (optional)
  • Skill icon
  • Image (optional – can be a rectangle or square)
  • Rich or Plain text
  • Background image (optional)
  • BodyTemplate4
  • No title
  • Skill icon
  • One full-screen image (1024 x 600 for background)
  • Rich or Plain text

Abbildung 1: Unterschiede der Templates für Single Content

Wollen wir also Informationen aufs Display des Amazon 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 intuitv gestaltet ist. Kommt der User mit der dargestellten Information nicht zurecht, nützt die sauberste Programmierung nichts. Um erste Hnweise 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 Url´s 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.

Wie definiere ich Content für den Touch Screen?

Das Display des Echo Shows ist ein 7-Zoll Touchdisplay. 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)

Abbildung 2: Überschreibung des Callbacks

Diese Methode des Callbacks 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ähren. Google und Stack Overflow geben weder Links zu Beispielen noch Dokumentationen. 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. 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.

Der Artikel wurde auf Entwickler.de veröffentlicht.

0 Antworten

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.