AlexaDev Tuesday – Alexa Display Template Skill Design and Coding Deep Dive: Introduction

Why an Alexa display template skill design and coding deep dive?

When the Echo Show was first announced one of my earliest skill concepts for it was a Tarot card reader. It seemed like a great fit for the platform, and a type of app that tends to be popular in other formats. I figured that with Amazon’s Display Template tools, building a skill like this would be a cake walk. I couldn’t have been more wrong.

My Visual Tarot skill ended up being the most complex, demanding and at times frustrating development work I’ve done to date, but I finally got the skill shipped and I learned a lot in the process of wrangling it into submission. It seems a shame to let all that hard-won experience go to waste, so I’ve decided to share. As of this writing a display template skill walkthrough like this one hasn’t yet been posted by Amazon or anyone else, so I hope it will be helpful to other Alexa skill devs.


Visual Tarot Single Card


Deep Dive Topics
In the process of designing, coding and testing this skill I definitely pressed the limits of available SDK tools and hit all the major skill development bases. My Visual Tarot code is written in JavaScript bundled with the Alexa SDK for Node, but I think devs working in other languages can still find some useful information in the series. Here are the topics I’ll be covering in this series:

  • Sourcing and formatting content for Alexa display devices
  • GUI flow design / mapping user paths
  • Using Alexa Display Template directives
  • Data set design, manipulation and display
  • Persisting data in-session with session attributes
  • Interaction model design
  • Handling touch select events
  • Handling spoken intent select events
  • Building out AMAZON.PreviousIntent to control ‘go back’ events
  • Test design and gotchas
  • Certification issues for Display Template skills

I will be posting a sanitized version of the full code on Github and will announce it in this post series when it’s up. To be honest, after working on this thing for nearly six months I just need to take a breather before I tackle that task.

In the meantime if you own an Echo Show or Spot you can check out the live skill to get an idea of the types of design and programmatic problems I had to solve in building it, and maybe start thinking about skills of your own you can build based on a similar design. It’s available in all English language regions where the Echo Show has been released. Just ask Alexa to “enable Visual Tarot”, and I’ll see you back here the day after Christmas for part one in the series.


The Series Continues…

Sourcing Alexa Skill Content

A Look At The Visual Tarot Alexa Skill Code

Things That Kill Alexa Skills

Mapping Alexa Skill GUI Flow

Alexa Skill Image Cheatsheet

Alexa Platform Changes

Persisting Data With Session Attributes In Alexa Skills

Using Alexa Display Template Directives