Gonzalo Rementeria

09 Whatsapp en canvas app

09 Whatsapp + canvas app

Hola a todos.

En este artículo os voy a resumir y aportar el código sobre como integrar WhatsApp en una canvas app. Lo primero de todo voy a aclarar que es esto. Y no es más que un link automático para abrir nuestro WhatsApp con un mensaje ya predefinido para ser mandado a un número concreto.

 

Por tanto lo primero que hace falta es probarlo en un móvil con WhatsApp instalado. Por ello si tenemos una app responsive y no queremos que se use esa funcionalidad en la versión web, pero sí que se use en la versión móvil, podemos controlar la visibilidad por ejemplo con este código.

				
					If(
    IsMatch( Host.Version; "Android"; MatchOptions.Contains ) Or
    IsMatch( Host.Version; "Ios"; MatchOptions.Contains  );
    true;
    false 
)
				
			

Aquí tenemos el código básico para abrir el Whatsapp desde el movil.

El cual determina que, si se está usando la app en un dispositivo Android o Ios muestre el icono, y si no es así, no lo muestre.

¿Cómo abrimos nuestro WhatsApp desde una canvas app? Fácil, pegamos este código donde queramos usarlo. En un botón, icono, imagen, etc.

Y ya está. Eso es todo. No obstante, voy a mostrar algunos ejemplos y daros algunas ideas. Además, por último al final de la entrada, dejo el link de un video donde lo explican en detalle, por si tenéis tiempo y os queda alguna duda.

CÓDIGO BÁSICO PARA ABRIR WHATSAPP

				
					With(
    {
        mensaje:"hola";
        numero:txtNumber.Text
    };
    Launch($"whatsapp://send?text={mensaje}&phone=+{numero}")
)
				
			

Un ejemplo de como se vería

CANVAS APP

WHATSAPP

Aqui un código más complejo donde concateno una serie de elementos para formar el mensaje.

				
					Clear(colComanda);;
Clear(colPostres);;
With(
    {
        galeryPlatos: Table({plato:"arroz a la cubana";precio:"10€";Observaciones:""};{plato:"filete de ternera con patatas fritas";precio:"12€";Observaciones:""};{plato:"croquetas de jamón";precio:"8€";Observaciones:""});
        galeryPostres:  Table({plato:"helados varios";precio:"3€";cantidad:"20"};{plato:"sorbete de limón";precio:"5€";cantidad:"40"};{plato:"natillas caseras";precio:"4€";cantidad:"20"})
    };
    ForAll(
        galeryPlatos As _platos;
        Collect(
            colComanda;
            {
                platos: Concatenate(
"
Plato: ";
                    _platos.plato;
"
Precio:";_platos.precio;
               
"
Observaciones: ";
                    _platos.Observaciones
                )
            }
        )
    );;
    ForAll(
        galeryPostres As _postres;
        Collect(
            colPostres;
            {
                postres: Concatenate(
                    "Postre: ";
                    _postres.plato;
"
Cantidad: ";
                   _postres.cantidad;
" unidades
"
                )
            }
        )
    );;
    With(
        {
            mensaje1: "Buenos días. Estos son los pedidos para hoy.

*PRIMER TURNO*:
";
            mensaje2: Concat(
                colComanda;
                platos;
"
"
            );
            mensaje3: "
            
*POSTRES DEL DÍA*
";
            mensaje4: Concat(
                colPostres;
                postres;
"
"
            );
            mensaje5: "Un saludo"
        };
        Launch($"whatsapp://send?text={mensaje1 & mensaje2 & mensaje3 & mensaje4 & mensaje5}&phone=+"&txtNumber.Text)
    )
);;

				
			

Puntos importantes.

Hace falta un número de móvil. Que podremos sacarlo de un listado, tenerlo directamente en el código, etc. En este ejemplo lo insertamos mediante un input text.

Hace falta un mensaje. Nuevamente las opciones son las mismas. En este caso el mensaje lo hemos formado concatenando diversos elementos de una colección.

Un detalle más que puede seros útiles, podemos poner los saltos de línea fijándolos en el código pulsando enter o bien podemos poner este código “%0A%0A”.

Espero que os haya sido de utilidad.

Para más información os recomiendo este video.

Un saludo.