{"id":27,"date":"2025-10-24T18:31:32","date_gmt":"2025-10-24T18:31:32","guid":{"rendered":"https:\/\/pulki.es\/blog\/?p=27"},"modified":"2025-10-24T18:31:32","modified_gmt":"2025-10-24T18:31:32","slug":"desarrollando-un-asistente-virtual-con-whatsapp-y-openai-parte-1","status":"publish","type":"post","link":"https:\/\/pulki.es\/blog\/index.php\/2025\/10\/24\/desarrollando-un-asistente-virtual-con-whatsapp-y-openai-parte-1\/","title":{"rendered":"Desarrollando un asistente virtual con WhatsApp y OpenAI (Parte 1)"},"content":{"rendered":"\n

En las entradas previas, hemos mostrado c\u00f3mo conectarnos a la API de OpenAI, hacer preguntas, recibir respuestas, sin contexto y con contexto. Naturalmente, con este conocimiento, podemos construir un Asistente Virtual (de aqu\u00ed en adelante, AV) en cualquier plataforma, lenguaje o sistema de mensajer\u00eda. Puesto que WhatsApp es el servicio de mensajer\u00eda m\u00e1s com\u00fan, ilustraremos c\u00f3mo podemos integrar ambas tecnolog\u00edas para obtener un AV completamente funcional.<\/p>\n\n\n\n

Este tema ser\u00e1 cubierto en una serie de entradas, cuya primera edici\u00f3n, es decir, esta publicaci\u00f3n, estar\u00e1 dedicada a explicar c\u00f3mo obtener las API Keys necesarias para utilizar la API de WhatsApp (administrada por Meta). La siguiente entrada tendr\u00e1 como objetivo enviar mensajes a un n\u00famero de WhatsApp usando la API, y la \u00faltima: c\u00f3mo integrar ambos conceptos junto con la API de OpenAI para construir un AV completamente funcional.<\/p>\n\n\n\n

Obteniendo Api Key de WhatsApp, Clave secreta de la aplicaci\u00f3n, e identificador del n\u00famero de tel\u00e9fono…<\/strong><\/p>\n\n\n\n

Los cuatro objetos listados en el t\u00edtulo ser\u00e1n necesarios para usar la API. Para tenerlos, primero que todo, debes tener una cuenta de Facebook; idealmente, una cuenta antigua. En mi caso, puesto que no ten\u00eda, tuve que crear una y el proceso de verificaci\u00f3n fue extremadamente engorroso.<\/p>\n\n\n\n

    <\/ol>\n\n\n\n

    Con la cuenta de Facebook en mano, ir a developers<\/em><\/a>, y cliquear en empezar (esquina superior derecha, como en la imagen).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Luego, tienes que seguir con el proceso de registro llenando todos los campos de un formulario similar a este:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Una vez creada tu cuenta, tendr\u00e1s acceso al dashboard<\/em> de desarrollador, cuya vista es:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    En tu caso, ninguna aplicaci\u00f3n deber\u00eda aparecer (yo ya ten\u00eda creada la m\u00eda); por tanto, debes crear una. Para hacerlo, solo debes cliquear el bot\u00f3n verde \u201cCrear aplicaci\u00f3n\u201d. Cuando lo haces, ver\u00e1s un men\u00fa de este tipo:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    En esta etapa, la parte m\u00e1s importante es \u201cCasos de uso\u201d. En esta secci\u00f3n, recomiendo elegir la opci\u00f3n \u201cOtro\u201d porque es m\u00e1s intuitiva.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Luego, ver\u00e1s un men\u00fa similar a este:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    En ese men\u00fa, debes cliquear en el bot\u00f3n \u201cconfigurar\u201d de la secci\u00f3n \u201cWhatsApp\u201d. Una vez ah\u00ed, ver\u00e1s lo siguiente:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Para obtener el identificador de acceso (tambi\u00e9n conocida como la API Key de WhatsApp), vamos a \u201cConfiguraci\u00f3n de la API\u201d y generas un nuevo identificador de acceso, como se muestra en la siguiente imagen:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Adem\u00e1s de esa clave, tambi\u00e9n necesitar\u00e1s la clave secreta de la aplicaci\u00f3n. Aquella la puedes obtener cliqueando \u201cConfiguraci\u00f3n de la aplicaci\u00f3n\u201d y luego \u201cInformaci\u00f3n b\u00e1sica\u201d, para finalmente presionar el bot\u00f3n \u201cMostrar\u201d, como se muestra en la siguiente imagen:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Con estos pasos, obtuvimos la API Key de WhatsApp (o identificador de acceso), y la clave secreta de la aplicaci\u00f3n. <\/p>\n\n\n\n

    Obteniendo el identificador de verificaci\u00f3n<\/strong><\/p>\n\n\n\n

      <\/ol>\n\n\n\n
        <\/ol>\n\n\n\n

        El identificador de verificaci\u00f3n puede ser definido por nosotros y se explicita de la siguiente forma: En primer lugar, debemos a\u00f1adir una URL de devoluci\u00f3n de llamada. En nuestro caso, ser\u00e1 un archivo webhook.php que estar\u00e1 en nuestro servidor.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Luego, inventamos una clave y la escribimos en el input text<\/em> llamado \u00abIdentificador de verificaci\u00f3n\u00bb. <\/p>\n\n\n\n

        A este fin, necesitamos que el archivo webhook.php est\u00e9 en nuestro servidor y cumpla con la respuesta que Meta espera. En pocas palabras, al pulsar el bot\u00f3n verde \u201cVerificar y guardar\u201d, Meta env\u00eda una solicitud (request) a nuestro archivo con la clave que definimos y espera una respuesta HTTP 200. Esta l\u00f3gica est\u00e1 implementada en PHP en el bloque de c\u00f3digo siguiente:<\/p>\n\n\n\n

        \nif ($_SERVER['REQUEST_METHOD'] === 'GET') {\n$mode = $_GET['hub.mode'] ?? $_GET['hub_mode'] ?? '';\n$token = $_GET['hub.verify_token'] ?? $_GET['hub_verify_token'] ?? '';\n$challenge = $_GET['hub.challenge'] ?? $_GET['hub_challenge'] ?? '';\n\nif ($mode === 'subscribe' && $VERIFY_TOKEN !== '' && hash_equals($VERIFY_TOKEN, (string)$token)) {\nheader('Content-Type: text\/plain; charset=utf-8');\nhttp_response_code(200);\necho $challenge; \/\/ deveulve EXACTAMENTE lo que env\u00eda Meta\nexit;\n}\nhttp_response_code(403);\necho 'Verification failed';\nexit;\n}<\/code><\/pre>\n\n\n\n
        En palabras, el c\u00f3digo anterior captura los par\u00e1metros GET, hub.mode<\/em>, hub.verify_token<\/em> y hub.challenge<\/em> de la solicitud de Meta. Si hub.mode<\/em> es subscribe y el token recibido coincide con nuestro VERIFY_TOKEN<\/em> (el que definimos nosotros), debemos responder con HTTP 200 y devolver exactamente el valor de hub.challenge<\/em> en el cuerpo de la respuesta (texto plano).<\/p>\n\n\n\n
        A medida que nuestro c\u00f3digo est\u00e9 en producci\u00f3n, estamos listos para cliquear el bot\u00f3n \u201cVerificar y guardar\u201d. Cuando lo presionamos, Meta hace el request<\/em> a nuestro webhook.php<\/em> y valida que nuestro identificador es el correcto.<\/p>\n\n\n\n
        Como comprobaci\u00f3n adicional de seguridad, es recomendable agregar a nuestro webhook.php el siguiente fragmento de c\u00f3digo<\/p>\n\n\n\n
        if ($APP_SECRET && $headerSig) {\n\n$expected = 'sha256=' . hash_hmac('sha256', $raw, $APP_SECRET);\n   if (!hash_equals($expected, $headerSig)) {\n     logit('Invalid signature. header=' . $headerSig . ' expected=' . $expected);\n     http_response_code(403);\n     json_out(['error' => 'Invalid signature']);\n     exit;\n}\n}<\/code><\/pre>\n\n\n\n
        En este bloque, $APP_SECRET es la clave secreta de la aplicaci\u00f3n (que obtuvimos anteriormente). El objetivo de este c\u00f3digo se puede resumir en dos puntos, primero, confirma que el emisor del request<\/em> es Meta, y segundo, asegura que el body no fue modificado en tr\u00e1nsito. <\/p>\n\n\n\n
        Configuraciones finales…<\/em><\/strong><\/p>\n\n\n\n
        Finalmente, en \u00abConfiguraci\u00f3n\u00bb debemos activar messages<\/em>, como se muestra en la imagen.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Adem\u00e1s, debemos a\u00f1adir un n\u00famero de tel\u00e9fono en el dropdown list<\/em> con la leyenda \u00abSelecciona un n\u00famero de tel\u00e9fono de destinatario\u00bb, como se muestra en la siguiente imagen:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Por \u00faltimo, es imprescindible guardar el \u00abIdentificador del n\u00famero de tel\u00e9fono\u00bb que sale en la imagen anterior.<\/p>\n\n\n\n
        Resumen<\/strong><\/p>\n\n\n\n
        Para enviar y recibir mensajes con la API de WhatsApp, el desarrollador debe tener cuatro c\u00f3digos:<\/p>\n\n\n\n
          \n
        1. Identificador del n\u00famero de tel\u00e9fono<\/strong>: Nos servir\u00e1 como n\u00famero de prueba para enviar y recibir mensajes. <\/li>\n\n\n\n
        2. Identificador de verificaci\u00f3n<\/strong>: Es \u00fatil para registrar nuestro webhook.<\/li>\n\n\n\n
        3. API Key de WhatsApp<\/strong>: nos permitir\u00e1, entre otras cosas, enviar mensajes.<\/li>\n\n\n\n
        4. Clave secreta de la aplicaci\u00f3n<\/strong>: es fundamental para validar el mensaje.<\/li>\n<\/ol>\n\n\n\n
          Posteriormente, en la siguiente entrada, usaremos estos cuatro elementos para enviar un mensaje, condicionado a haber recibido uno antes.<\/p>\n\n\n\n
          Jos\u00e9 Miguel Mu\u00f1oz Urra \u2013\u00a0jmunozu@pulki.es<\/a><\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          En las entradas previas, hemos mostrado c\u00f3mo conectarnos a la API de OpenAI, hacer preguntas, recibir respuestas, sin contexto y con contexto. Naturalmente, con este conocimiento, podemos construir un Asistente Virtual (de aqu\u00ed en adelante, AV) en cualquier plataforma, lenguaje o sistema de mensajer\u00eda. Puesto que WhatsApp es el servicio de mensajer\u00eda m\u00e1s com\u00fan, ilustraremos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":1,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/posts\/27\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pulki.es\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}