Templates / Listado de elementos

Me parece que las respuestas del API de messenger cambiaron un poco… no se porque pero la estructura que me llega cuando hay un mensaje predefinido es la siguiente:

{ sender: { id: '2172468672772909' },
  recipient: { id: '2214898308795050' },
  timestamp: 1539969741977,
  message: 
   { quick_reply: { payload: 'EVENT_PAYLOAD' },
     mid: 'S_SyzjGHICJBjOdEuDa5hQdYu5tmiC0A1nt-Gisst1coBH_TeueJS2JX5xP8ev3lcWhprNPhKh07MRid8VXbbQ',
     seq: 497563,
     text: 'Quieres un evento?' } }

Como pueden ver el payload no llega en el objeto general, a mi me llega en el objeto del mensaje…
Eso hace que el código de la clase no llegue a manejar las tarjetas de las pizzas.

Para arreglarlo modifique la función handleEvent:

const handleEvent = (senderId, event) => {
	 if(event.message){
	 	if(event.message.quick_reply){
	 		handlePostback(senderId, event.message.quick_reply.payload)
	 	}else{
			handleMessage(senderId, event.message)
	 	}
	}else if(event.postback){
		handlePostback(senderId, event.postback.payload)
	}
}

Tener en cuenta que en las ultimas versiones por ejemplo v5.0 de graph.facebook no llega el parametro event.postback… ahora llega como event.message.quick_reply.payload

Actualice la funcion handleEvent y me funciono

function handleEvent(senderId, event){
    if(event.message && event.message.quick_reply) {
        handlePostback(senderId, event.message.quick_reply.payload)
    }else if(event.message){
        handleMessage(senderId, event.message)
    }
}

¿Porque razón no se despliega el template?
Ya tengo todo como el profesor lo tiene

aCTUaLIZEN aMIGOS:

function handleEvent(senderId, event){
console.log(event)
if(event.postback) {
handlePostback(senderId, event.postback.payload)
}else if(event.message && event.message.quick_reply) {
handlePostback(senderId, event.message.quick_reply.payload)
}else if(event.message){
handleMessage(senderId, event.message)
}
}

curl
-F ‘message={“attachment”:{“type”:“video”, “payload”:{“is_reusable”:true}}}’
-F ‘[email protected]/Users/martintellez/Documents/videol.mp4;type=video/mp4’
“https://graph.facebook.com/v2.6/me/message_attachments?access_token=<<TOKEN>>”

Este código funciona para subir los videos directos a facebook para que te de in id de attachment funciona mejor así no tienes que hacer llamadas a elementos de páginas externas

El flujo que va a seguir el usuario es muy importante 🤔

Para los que no ven el error en su código y no se muestras las imágenes de Pizzas como en este ejemplo, fíjense si el tiempo de la url, generado por ngrok a expirado , sino vuelvan a introducir ngrock.exe http <numero_puerto>, y no se olviden de actualizar esa url en la configuracion del messenger también en la sección de webhook

No me corren los mensajes, ya revise los permisos y esta bien, cambie por el ejemplo de la pagina de facebook, modifique la url y no responde con la lista de elementos siguiente a la generica,

const templateTest = (senderId) => {
  const messageData = {
    "recipient":{
      "id": senderId
    }, 
    "message": {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "list",
          "top_element_style": "compact",
          "elements": [
            {
              "title": "Classic T-Shirt Collection",
              "subtitle": "See all our colors",
              "image_url": "https://peterssendreceiveapp.ngrok.io/img/collection.png",          
              "buttons": [
                {
                  "title": "View",
                  "type": "web_url",
                  "url": "https://peterssendreceiveapp.ngrok.io/collection",
                  "messenger_extensions": true,
                  "webview_height_ratio": "tall",
                  "fallback_url": "https://peterssendreceiveapp.ngrok.io/"            
                }
              ]
            },
            {
              "title": "Classic White T-Shirt",
              "subtitle": "See all our colors",
              "default_action": {
                "type": "web_url",
                "url": "https://peterssendreceiveapp.ngrok.io/view?item=100",
                "messenger_extensions": false,
                "webview_height_ratio": "tall"
              }
            },
            {
              "title": "Classic Blue T-Shirt",
              "image_url": "https://peterssendreceiveapp.ngrok.io/img/blue-t-shirt.png",
              "subtitle": "100% Cotton, 200% Comfortable",
              "default_action": {
                "type": "web_url",
                "url": "https://peterssendreceiveapp.ngrok.io/view?item=101",
                "messenger_extensions": true,
                "webview_height_ratio": "tall",
                "fallback_url": "https://peterssendreceiveapp.ngrok.io/"
              },
              "buttons": [
                {
                  "title": "Shop Now",
                  "type": "web_url",
                  "url": "https://peterssendreceiveapp.ngrok.io/shop?item=101",
                  "messenger_extensions": true,
                  "webview_height_ratio": "tall",
                  "fallback_url": "https://peterssendreceiveapp.ngrok.io/"            
                }
              ]        
            }
          ],
           "buttons": [
            {
              "title": "View More",
              "type": "postback",
              "payload": "payload"            
            }
          ]  
        }
      }
    }
  };
  callSendApi(messageData)
}```

TODO BIEN HASTA AQUI!!

Hola comununidad, la verdad nunca suelo colocar el codigo de esta manera, pero tengo un problema y ya llevo casi 2 dias sin poder hacer nada. si alguien ve algun error puede decirme. voy a seguir avanzando las clases ya que no me quiero quedar toda la vida aca.

El listado de elemento no me funciona no se que estoy haciendo mal 😦

 function  handlePostback(senderId, payload){
             console.log(payload)
              switch (payload){
                case "GET_STARTED_PUGPIZZA":
                console.log(payload)
                break;
                case  "FUCK_PAYLOAD":
                showServices(senderId);
                break;
              }
              
          }

//servicios  y descripciones.  //no funiona 
    function showServices(senderId){
        const messageData = {
            "recipient":{
                "id": senderId
            },
            "message":{
                "attachment":{
                    "type":"template",
                    "payload" :{
                        "template_type": "generic",
                        "elements": [
                            {
                                "title": "Desarrollo web ",
                                "subtitle": "Desarrollo web y creacion marcas ",
                                "image_url": "https://mockraw.com/wp-content/uploads/2018/12/MK15.jpg",
                                "buttons":[
                                    {
                                        "type": "postback",
                                        "title": "elegir plan web",
                                        "payload": "FUCK_PAYLOAD",
                                        
                                    }
                                ]

                            }
                        ]
                    }
                }
            }
        }
        callsendApi(messageData)
    }

Porque en google chrome no se ven bien los template tipo generic, pero en firefox se ven bien centrados los textos de los botones?

No me aparece el menú. Ya revise el código y me parece tenerlo bien. ¿Podría alguien ayudarme?

function defaultMessage(senderId){
    const messageData = {
        "recipient": {
            "id": senderId
        },
        "message": {
            "text": "Hola soy un bot de messenger y te invito a utilizar nuestro menu",
            "quick_replies":[
                {
                    "content_type": "text",
                    "title": "Conocenos",
                    "payload": "SERVICIOS_PAYLOAD",
                },
                {
                    "content_type": "text",
                    "title": "Acerca de",
                    "payload": "ABOUT_PAYLOAD",
                }
            ]
        }
    }
    senderActions(senderId);
    callSendApi(messageData);
}

function handlePostback(senderId, payload){
    console.log(payload)
    switch (payload){
        case "GET_STARTED_CHATBOTMARIADELAESPERANZA":
            console.log(payload);
        break;
        case "SERVICIOS_PAYLOAD":
            showServicios(senderId);
        break;
    }
}

function showServicios(senderId){
    const messageData = {
        "recipient": {
            "id": senderId
        },
        "message": {
            "attachment": {
                "type": "template",
                "payload": {
                    "template_type": "generic",
                    "elements": [
                        {
                            "title": "Preprimaria",
                            "subtitle": "blablabla",
                            "image_url": "https://www.facebook.com/colegiomariadelaesperanza/photos/a.232940890241905/1110950415774277/?type=3&theater",
                            "buttons": [
                                {
                                    "type": "postback",
                                    "title": "Elegir Preprimaria",
                                    "payload": "PREPRIMARIA_PAYLOAD",
                                }
                            ]
                        },
                        {
                            "title": "Primaria",
                            "subtitle": "blablabla",
                            "image_url": "https://www.facebook.com/colegiomariadelaesperanza/photos/a.232940890241905/1098016553734330/?type=3&theater",
                            "buttons": [
                                {
                                    "type": "postback",
                                    "title": "Elegir Primaria",
                                    "payload": "PRIMARIA_PAYLOAD",
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }
    callSendApi(messageData);
}