Review and introduction

In Lab 3, you designed, implemented, and linked APL screens to the skill’s back-end code:

  • You loaded static visual content as informational screens into the LaunchRequestHandler (Welcome screen), HelpIntentHandler (Help screen), and custom handlers (Win, Draw, and Lose screens) by using the AlexaHeadline.
  • You also learned that to safely render an APL document on any Alexa-enabled device a render directive must be responded only when the device supports APL.

You did these by applying the Alexa.Presentation.APL.RenderDocument directive. The key is to add a handlerInput.responseBuilder.addDirective statement that creates a RenderDirective for an APL document with a data source.

Introduction

In Labs 4 and 5, you'll create the visual user experience for the Tic-Tac-Toe skill that performs the following tasks:

  • Displays a background image of an empty board.
  • Places the marker of each player as an image (displaying X or O) when they make their move.
  • Updates the board if the user changes their marker (from cross to circle or the other way around).
  • Displays an empty board when the game ends, enabling users to start a new game.

The video below highlights this user experience. Observe the user interaction with the skill and the placement of the markers on the board.

Note: In future courses, you will connect the information screens, and implement a delay mechanism after the user’s move by adding animations. These are out of scope in Labs 4 and 5.

The key challenge with implementing the previous user experience is that you don’t know which device your skill runs against. Alexa-enabled devices with screens come in various shapes and sizes. This presents a key challenge for developers to support each of the different viewports. Luckily, APL provides you with the essential tools to design and build responsive APL documents.

For example, the same user experience on a round screen (Echo Spot device) looks like this screenshot:

img

Managing the placement of the marker images per row requires that you understand viewport profiles and design responsive components and layouts. In Lab 4 you will focus on the basics of viewport profiles and responsiveness. In Lab 5 you will focus on the how to achieve full responsiveness for all the board images and their placement on the board through APL documents and back-end code.