Skip to content
Sample multi-modal skill.
JavaScript
Branch: master
Clone or download

README.md

Skill Sample Nodejs Space Explorer

Alexa Presentation Language (APL) gives developers the ability to create rich, engaging and unique visual experiences for users. This skill is meant to be an example of how to use the language, the capabilities of APL, and how to think about and develop true, multi-modal experiences for Alexa-enabled devices with a screen.

APL 1.1 Release Updates

With the release of APL 1.1, Space Explorer includes updates to demonstrate new features, including:

  • Video
  • Animations
  • Alexa Vector Graphics (AVG)
  • Alexa Responsive Layouts

Animations

The new animation package allows you to apply the same animation framework across all pages. This drastically reduces the amount of code written, allows parameterization of custom animations, and maintains a consistent feel across the skill. See soft-stagger.json for the code behind how this is achieved.

AVG

Because of the dynamic nature of APL responses, vector graphics for the atmosphere data on larger screens are served with a new graphics package. See atmosphere-graphics.json for an example of an AVG package.

Alexa Responsive Layouts

Alexa Responsive Layouts are pre-made layouts built by Amazon to work across all device categories and viewport sizes. Including these simplifies the code and conditional statements throughout the skill. It also alleviates the need to update the skill every time a new device comes online. Visit the Alexa Design Guide's Responsive Components section for more information and usage.

Quicklinks

Design Tenets

Be Voice-Forward, but not Voice-Only

  • Anything a user can touch should have a voice counterpart. However, everything said in voice does not need a touch input.
  • What Alexa says should be relevant to what she shows and vice versa.
  • Users will likely alternate between looking at a device and looking away throughout the experience. Be sure the voice flow and screen flow are comprehensive on their own and complimentary together. Screens should provide additional context when Alexa is speaking.

Honor User Modality

If a user speaks to Alexa, then Alexa should respond with voice. If a user touches the screen, then Alexa should not respond with voice.

Emphasize Patterns & Consistency

Adherence to common patterns will reduce cognitive overhead for users.

Development Tenents

Reusability

Don't create new layouts for each new page. Reuse where possible and make components as flexible as possible.

Logical Structure

Don't make the code unnecessarily complex, but break things up where it makes sense for reusability.

Voice Navigation (Supported Utterances)

Exploring

Visit any planet in the Solar System by saying:

  • Alexa, take me to Mars.
  • Alexa, go to Venus.
  • Alexa, show me Neptune.

Throughout the skill, you can return to your previous destination by saying:

  • Alexa, go back.

Learning

Once you've arrived at a planet, you can learn more about it by saying:

  • Alexa, number one.
  • Alexa, tell me about it.
  • Alexa, how big is it?
  • Alexa, how far away is it?
  • Alexa, what's in its atmosphere?
  • Alexa, how many moons does it have?

Astronomy Pictures

You can view a random image from NASA's Astronomy Picture of the Day archives by saying:

  • Alexa, show me a random image.
  • Alexa, show me a space image.

If you're curious about it, say:

  • Alexa, tell me about it.

Learn more

Curious about other things in our solar system? Try saying:

  • Alexa, tell me about the Kuiper Belt.
  • Alexa, how much bigger is Uranus than Neptune?
  • Alexa, tell me about Saturn's rings.
  • Alexa, what happened to Pluto?

Views

Space Explorer uses a number of page templates to create engaging experiences for users. The goal is to reuse and be flexible, rather than create new layouts for each viewport class.

A single page template exists for each primary view within the skill. Layouts were authored with Large Landscape Hubs as the starting point, then responsive breakpoints were added for larger and smaller devices (Extra Large TV, Medium Landscape Hub, Small Round Hub). When the layout for a particular device varied significantly, an alternative device-specific template was authored, such as the Solar System View on a Small Round Hub.

Solar System View

Solar System View

Horizontal Image List View

Horizontal Image List View

Planet Details

Planet Details View

Transcript View

Transcript View

Size

Size View

Distance

Distance View

Atmosphere

Atmosphere View

Data

The data for this skill is self-contained for training purposes. This was done to ensure you could easily view, edit, and test our sample skill without any issues or added complexity from API keys. We recommend finding or creating an API for data when building skills for distribution in the Skills Store.

Documentation

Technical Documentation

https://developer.amazon.com/docs/alexa-presentation-language/apl-overview.html

License

This library is licensed under the Amazon Software License.

You can’t perform that action at this time.