Consideraciones:

Este documento incluye algunas recomendaciones para desarrolladores, que surgen de la experiencia desarrollando WhatsApp flows dinámicos en Botmaker. Es importante aclarar que no busca reemplazar la documentación publicada por meta, es en todo caso información complementaria. 

META, documentación oficial:

• https://developers.facebook.com/docs/whatsapp/flows 

TIPS:

1. Comenzar con algo simple y básico y, luego avanzar en la complejidad.
2. Iniciar con una plantilla en blanco o un “Flow Template”: (ver: https://developers.facebook.com/docs/whatsapp/flows/templates) Desde ahí mismo permite modificar los ejemplos, testearlos y copiar la estructura (JSON). También, sirve para testear otros flow, solo debes reemplazar el json completo del ejemplo con el tuyo, luego dale a “run” y selecciona cada una de las screen para validar su estructura.
3. Revisar los componentes y etiquetas que están disponibles, es importante ajustar la cantidad de caracteres, etc. (ver:  https://developers.facebook.com/docs/whatsapp/flows/reference/flowjson/components) Es importante saber que algunos componentes, por ejemplo los radio buttons, cambian su visualización al cambiar la plataforma iOs o Android. 
4. Puede resultar amigable diseñar la estructura del flow utilizando Playground y luego exportarlo a la plataforma de Botmaker utilizando el botón de Copy Flow JSON: https://developers.facebook.com/docs/whatsapp/flows/playground
5. Para añadir imágenes, una práctica útil es ir a playground y seleccionar “Anadir contenido/ Contenido multimedia/ Imagen”, desde ahí puedes subir una imagen y luego copiar el base64 desde el JSON. Sirve para visualizar rápido el tamaño y evitar que sea muy pequeña o muy grande y que la relación de aspecto de la imagen sea la que esperabas. 
6. Actualmente, los únicos componentes que permiten el uso de listas dinámicas son "CheckboxGroup", "RadioButtonsGroup" y "Dropdown". En este sentido, es importante saber que el flow debe tener definida la estructura y tipo de datos que va a recibir y deben coincidir con los que la CA de tipo flow le va a enviar. La llamada a la CA ocurre cuando existe un “data_exchage” y puede ocurrir al presionar el botón del footer pero también está disponible “on-select-action”.
7. Revisar siempre que "routing_model" no tenga errores o faltantes en las rutas de cada screen.
8. Revisar que "data_channel_uri" sea la que corresponde a la CA de tipo FLOW, que sea el endpoint correspondiente.
9. Flow response: trae los datos definidos en el flow, si previamente fueron creadas las variables en la plataforma, se “rellenarán” con los datos del flow. 

Ejemplo: Se comparte un ejemplo que en la primera screen envía un texto, lo envía al endpoint y lo devuelve en mayúscula a la segunda screen:

JSON FLOW

```

{

    "data_api_version": "3.0",

    "data_channel_uri": "https://functions.botmaker.com/whatsapp-flows/TuBusinessID/WabaID/dinamic",

    "routing_model": {

        "SHARE": ["RESPONSE"],

        "RESPONSE": []

    },

    "screens": [{

        "layout": {

            "children": [{

                "children": [{

                    "text": "Aquí puedes escribir tu nombre:",

                    "type": "TextSubheading"

                }, {

                    "name": "comment_text",

                    "label": "",

                    "type": "TextArea",

                    "required": true,

                    "helper-text": "Tus nombres y apellidos"

                }, {

                    "label": "Continuar",

                    "on-click-action": {

                        "payload": {

                            "comment_text": "${form.comment_text}"

                        },

                        "name": "data_exchange"

                    },

                    "type": "Footer"

                }],

                "name": "form",

                "type": "Form"

            }],

            "type": "SingleColumnLayout"

        },

        "data": {

            "comment_text": {

                "type": "string",

                "__example__": "Example"

            }

        },

        "id": "SHARE",

        "terminal": false,

        "title": "Share Name"

    }, {

        "layout": {

            "children": [{

                "children": [{

                    "text": "Antes de continuar revisa que tomamos correctamente tu nombre:",

                    "type": "TextCaption"

                }, {

                    "text": "${data.comment_text}",

                    "type": "TextSubheading"

                }, {

                    "label": "Finalizar",

                    "on-click-action": {

                        "payload": {

                            "comment_text": "${data.comment_text}"

                        },

                        "name": "complete"

                    },

                    "type": "Footer"

                }],

                "name": "form",

                "type": "Form"

            }],

            "type": "SingleColumnLayout"

        },

        "data": {

            "comment_text": {

                "type": "string",

                "__example__": "Example"

            }

        },

        "id": "RESPONSE",

        "terminal": true,

        "title": "Confirmation"

    }],

    "version": "2.1"

}

``` 

CA de tipo FLOW ENDPOINT  “dinamic”

```

const FIRST_SCREEN = screen === 'SHARE';

bmconsole.log(JSON.stringify(data));

if (FIRST_SCREEN) {

  flow.data = {

    comment_text: data.comment_text.toLocaleUpperCase(),

  };

  flow.nextScreen = 'RESPONSE';

  flow.send(); // remember to always call flow.send()

}

```

Recuerda visitar nuestro Centro de Ayuda para mayor información