Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
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.
Persistencia del carrito de compras
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.
¿Cómo 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.
¿Cómo crear nuestro link?
Tenemos que usar wa.me.
wa es la abreviación de WhatsApp .me.
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:
- Tiene que incluir el código de país.
- Omitir paréntesis, corchetes, guiones.
- Omitir caracteres especiales.
- Sólo usar números.
Ejemplo de prueba
Supongamos que quieres enviar un mensaje a Perú.
El código de Perú es 51.
Supongamos que quieres enviar un mensaje a este número.
Tú puedes escribir tu propio número para hacer pruebas.
Presionas Enter.
Esto nos lleva a esta otra página: api.whatsapp.com.
Al final, el formato se convierte en una URL más extensa.
Podríamos haber escrito esto directamente, pero es mejor usar la versión abreviada.
WhatsApp proporciona una URL corta y luego hace la redirección correspondiente.
Si haces clic en continue to chat, se inicia un chat con la persona correspondiente desde web.
Esto abrirá WhatsApp Web.
Si visitas este link desde un móvil, se abrirá la aplicación de WhatsApp.
¿Cómo crear el link con un mensaje?
El formato es el siguiente:
wa.me/ seguido del número.
Luego, se agrega un parámetro: ?text=
Aquí va el texto que queremos enviar.
Vamos a generar un texto con la información del pedido, para que se envíe por WhatsApp.
El número debe estar en formato internacional:
- Incluir el código del país.
- Sin espacios.
El valor de text debe ser el mensaje que queremos enviar.
Pero el mensaje debe estar encoded.
Ejemplo de mensaje codificado
Un ejemplo:
text= seguido del mensaje:
Estoy interesado en tu carro que está a la venta.
Codificado se ve así:
I'm%20interested%20in%20your%20car%20for%20sale
El espacio se codifica como %20.
¿Cómo codificar el texto?
En JavaScript usamos la función encodeURI.
Por ejemplo:
encodeURI("Hola, este es mi pedido")
Esto reemplaza los espacios por %20.
Este resultado es el que debemos usar como parte del parámetro text.
Prueba completa
Visitamos la URL:
wa.me/ seguido del número.
Luego de ?text= colocamos el texto codificado.
Presionamos Enter.
El mensaje se interpreta adecuadamente por la API de WhatsApp.
En web, veremos la opción de continue to chat.
Esto nos lleva a WhatsApp Web.
En móvil, se abrirá directamente la app de WhatsApp con el chat iniciado.
Damos clic en continue to chat y luego en use WhatsApp Web.
Esto nos abre WhatsApp Web.
El mensaje no se envía automáticamente, pero se escribe en la caja de texto.
Así podemos enviarlo manualmente.
¿Cómo enviar mensajes con saltos de línea?
Para incluir saltos de línea, usamos \n.
La función encodeURI lo convierte en %0A.
Cuando abrimos WhatsApp Web, veremos los saltos de línea en la caja de texto.
Esto es útil para redactar la información del pedido con mejor formato.
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 preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript