APL

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

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

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

Articles récents
Commentaires récents
fatima dans Bienvenue !
AdminDroid dans Bienvenue !
fatima dans Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :