Foto: Amazon | Die Grundlagen für die Programmierung von Amazon Echo Show

Fundamentals for programming Amazon Echo Show

As a lead agency for Connected Commerce, we have been heavily involved in voice interfaces – whether it's Google Home, Amazon Echo or one of the many other voice products available – since December of last year. The new Echo Show is a result from Amazon’s learnings, designed to overcome the problems and obstacles faced by all voice interfaces when it comes to communicating information. Echo Show compensates for the limitations of communicating information via a voice Interface with a classic display. A no-interface device is thus transformed into a full service touchpoint in the digital ecosystem, opening up hitherto undreamt-of possibilities. In this article we will examine how we can approach this new component, the screen with delegation via the Amazon endpoint. Reverse engineering is the key.

Echo Show does not look particularly exciting, and reminds you of something from a 1970s sci-fi movie. At the front the surface is sloped, with the display at the center, a camera at the top and the speaker grille at the bottom. The device won't look out of place in your living room. We had to use an address in the United States to buy our Echo Show, as it is not yet available in Germany. Amazon has yet to announce a release date for the German market.

Currently no developer guidelines

Also lacking is information for developers and the development of skills on Echo Show. However, the Amazon Developer Portal provides information on how JSON communication between the skill and endpoint must look for the new functionality. Parameters are described, templates are shown and callbacks are explained. However, all of this information exists solely in the form of communication protocols and not as guidelines. As traditional users of the Alexa Skills Kit framework for Java, we feel left out in the cold. A note in the latest framework version in GitHub tells us that Version 1.4 was prepared for Echo Show, but there are neither documents nor code examples available.

What display options does Echo Show offer?

We have an Echo Show, and we want to develop a skill for it. So, let's take a deep breath and dive into the framework code, which was committed in the last release. We must begin by asking ourselves what our actual expectations are. Echo Show can present information in a variety of ways. It must therefore be possible to transmit information on layouts and send this as a response to the Alexa endpoint. If we take a look at the response object, we see that virtually nothing has changed since the last release. The only point at which we could transmit dynamic data are the so-called directives. If we search a little in the framework, we will find the RenderTemplateDirective instance, and it is here where we can transfer a template.
We already have access to templates on the Amazon Developer pages. At present there are six fixed templates: two for displaying content lists and four for displaying single content. The difference between the two content list templates is that one is intended for horizontal lists, while the other is for vertical lists. The four templates for single content differ in their display options as follows (see Fig. 1):

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 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 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 komme ich an die Callbacks zu Touch Screen-Events heran?

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)

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 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.

Dieser Artikel wurde auf entwickler.de veröffentlicht.

Mehr aus dem Web: