APL

Alexa Présentation Langage : pour afficher du texte et des images sur les périphériques vidéos Alexa.

New APL Audio : https://tinyurl.com/aplaudioref

Suivre le tuto : https://github.com/alexa/skill-sample-nodejs-first-apl-skill/blob/master/modules/quick-start.adoc

A tester : Avec API : https://github.com/alexa-labs/skill-workshop-smart-city

Autres exemples : https://github.com/alexa-labs

The best place to write APL is the Start from scratch section of the APL authoring tool.

https://blog.rocketinsights.com/alexa-presentation-language-tutorial-getting-started/

En résumé :

1. créez votre skill (https://developer.amazon.com/alexa/console) des exemples sont ici (https://github.com/alexa/) en choisissant le modèle Custom / Alexa-Hosted (Node.js)
2. ajoutez dans votre skill l’interface APL puis save and build
3. créez votre écran en JSON grâce à the authoring tool.
4. créez l’index.js soit en recopiant un existant soit à partir du json de l’onglet build et à l’utilitaire
5. dans l’onglet code, créez un répertoire documents et dans documents créez launchDocument.json et incorporez votre écran en collant le json dans le fichier.
6. Ajouter dans le code index.js , dans LaunchRequestHandler.handle() avant que la réponse soit envoyée :

   if (Alexa.getSupportedInterfaces(handlerInput.requestEnvelope)['Alexa.Presentation.APL']) {
       // Create Render Directive.
   }

   This « if » statement is going to check if the APL interface is sent in the request envelope. Only then, do we want to add the response. Now, let’s add the response.

1. Underneath the // Create Render Directive comment, add:

   handlerInput.responseBuilder.addDirective({
       type: 'Alexa.Presentation.APL.RenderDocument',
       document: launchDocument,
       datasources: {
          text: {
              type: 'object',
              start: "Welcome",
              middle: "to",
              end: "Cake Walk!"
          }
      }
   });

Attention pour le datasource, reprendre la structure de l’onglet « Data JSON » de l’authoring tool et encadrez le code par :

datasources:{

… Code récupéré de l’onglet …

}

Et dans le Code récupéré de l’onglet enlevez les  »  » de chaque entête de paragraphe, par exemple :

Le code 

« bodyTemplate1Data »: {
« type »: « object »,
« objectId »: « bt1Sample »,
« backgroundImage »: {
« contentDescription »: null,
« smallSourceUrl »: null,
« largeSourceUrl »: null,
« sources »: [
{
« url »:

Devient :

datasources:{
bodyTemplate1Data: {
type: « object »,
objectId: « bt1Sample »,
backgroundImage: {
contentDescription: null,
smallSourceUrl: null,
largeSourceUrl: null,
sources: [
{
url: »https:\\xxx »

Attention : Gérez le comportement de la skill en fonction de la taille de l’écran avec la clause when :

« when »: « ${viewport.shape == ’round’} »,

Références :

https://github.com/alexa/skill-sample-nodejs-first-apl-skill/blob/master/modules/module2.adoc

https://www.freecodecamp.org/news/how-to-use-alexa-presentation-language-in-your-skill-3c49961825c5/

https://developer.amazon.com/fr/docs/alexa-presentation-language/apl-support-for-your-skill.html

https://developer.amazon.com/fr/docs/alexa-presentation-language/apl-authoring-tool.html