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.
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
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.
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 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.
- 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.
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.
Adherence to common patterns will reduce cognitive overhead for users.
Don't create new layouts for each new page. Reuse where possible and make components as flexible as possible.
Don't make the code unnecessarily complex, but break things up where it makes sense for reusability.
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.
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?
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.
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?
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.
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.
https://developer.amazon.com/docs/alexa-presentation-language/apl-overview.html
This library is licensed under the Amazon Software License.