¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

WhatsApp API

Veamos cómo usar la API de WhatsApp para enviar la información de nuestro pedido a través de mensajes.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Ahora la información de nuestro carrito de compras persiste. Sin embargo, sólo lo podemos ver nosotros. Cada usuario verá su propio carrito de compras. ¿De qué manera podemos enviar esta información al dueño de la tienda? ¿De qué manera nuestros clientes pueden hacernos llegar sus pedidos? Para esto podemos usar nosotros la API de WhatsApp. En realidad, no es tanto así una API, sino es más bien una URL. Es un link que WhatsApp nos permite crear para enviar mensajes a un número determinado con un texto determinado. ¿De qué manera podemos crear nuestro link? Tenemos que usar “wa.me”. “Wa” es la abreviación de WhatsApp “.me” y luego vamos a escribir el número al cual queremos que se envíe el mensaje. Si “number” es un número de teléfono en formato internacional. O sea que tiene que incluir el código de país. Sin embargo, tenemos que omitir los paréntesis, corchetes, guiones. Tenemos que omitir caracteres especiales y simplemente enviar números. Hagamos una prueba. Supongamos que quieres enviar un mensaje a Perú. El código de Perú es 51. Y supongamos que quieres enviar un mensaje a este número. Tú puedes escribir tu propio número para hacer pruebas. Presionas Enter. Esto nos va a llevar a esta otra página “api.whatsapp.com”. Al final, el formato se convierte en una URL más extensa. Podríamos también nosotros haber escrito esto directamente, pero es mejor usar la versión abreviada. Aprovechando que WhatsApp nos proporciona de una URL corta, luego WhatsApp para la redirección correspondiente. Si yo le doy clic a “continue to chat”, me va a iniciar un chat con la persona correspondiente porque estoy desde web. A esto abrirá WhatsApp web. Sin embargo, si es que visito este link desde un móvil, se abrirá la aplicación de WhatsApp en el celular. ¿De qué manera podemos crear nuestro link con un mensaje? El formato es el siguiente “wa.me/”. Aquí ponemos el número, como ya hemos visto, y luego tenemos que agregar un parámetro. Ponemos un “?text=” y aquí tiene que ir el texto que queremos enviar. Nosotros vamos a generar un texto con la información del pedido para que esta información se envíe por WhatsApp. Como ya hemos visto, esto de aquí tiene que ser un número en formato internacional, o sea, incluyendo el código del país, pero sin espacios y esta parte de aquí el valor de “text” tiene que ser el mensaje que queremos enviar, pero el mensaje tiene que estar “encoded”, tiene que estar codificado. Aquí hay un ejemplo “text=” y se pone aquí este mensaje dice: “estoy interesado en tu carro que está a la venta” / “I´mm%20interested%20in%20your%20car%20for%20sale”. Solo que el espacio cuando se codifica se convierte en un “%20”. Por eso es que este es el texto que se quiere enviar. Pero está encoded ¿De qué manera podemos nosotros codificar el texto? En JavaScript nosotros tenemos una función llamada “encodedURI”. Aquí podemos escribir un texto por ejemplo “Hola, este es mi pedido”. Automáticamente esta función se va a encargar de codificar la cadena que le estamos pasando. Entonces esto nos va a generar este resultado que como vemos ha reemplazado los espacios por un “%20”. Entonces, esto es lo que nosotros tendríamos que usar como parte de este parámetro text. Hagamos entonces una prueba. Vamos a visitar esta URL “wa.me/” un número y luego de “text” vamos a poner el texto codificado. El texto “encouded” le damos enter y como vemos, el mensaje se interpreta adecuadamente por parte de la API de WhatsApp. En web, nosotros vamos a ver esta opción de “continue to chat” que nos va a llevar a WhatsApp web. En móvil, Como ya comentamos esto automáticamente estaría abriendo el chat con la persona correspondiente en la aplicación de WhatsApp. Le vamos a dar “continue to chat” y le vamos a dar clic y “use WhatsApp web” con propósitos demostrativos. Y aquí está, esto nos abre WhatsApp web y no envía el mensaje, pero sí que lo escribe en la caja de texto para que nosotros podamos enviar este mensaje. Entonces, esto es lo que vamos a implementar. ¿De qué manera nosotros podemos enviar un mensaje que incluya saltos de línea? En ese caso, lo que podemos hacer es usar “\n”. Este “\n” automáticamente será convertido por la función “encodedURI” en este carácter “%0A” y si nosotros usamos esto cuando lleguemos a WhatsApp web vamos a ver que efectivamente en esta caja de texto se está imprimiendo el salto de línea. Entonces esto va a ser bastante útil para que cuando redactamos la información del pedido podamos incluir tantos saltos de línea como necesitemos.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos























































































































119

WhatsApp API





Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: