A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Templates / Listado de elementos

17/25
Recursos

Vamos a mostrarle al usuario respuestas de verdad. Cuando nuestros usuarios quieran pedir una pizza, debemos mostrarle el listado de pizzas para puedan escoger alguna de estas.

Aportes 13

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥榤essage={鈥渁ttachment鈥:{鈥渢ype鈥:鈥渧ideo鈥, 鈥減ayload鈥:{鈥渋s_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);
}