Aplicación "Enviar a WhatsApp" en App Inventor
Esta aplicación tendrá una caja de texto donde el usuario escribirá su mensaje y un botón que, al ser presionado, enviará ese mensaje a WhatsApp.
1. Componentes Necesarios
(Diseñador - Designer)
Abre tu proyecto en App Inventor y arrastra los siguientes componentes a
tu pantalla (Screen1):
- Interfaz
de Usuario (User Interface):
- TextBox
(Caja de Texto):
- Arrastra
uno desde la paleta "User Interface".
- Cambia
su nombre a MessageTextBox
(opcional, pero buena práctica).
- Puedes
establecer su propiedad Hint (Pista) a "Escribe
tu mensaje aquí..." para guiar al usuario.
- Asegúrate
de que MultiLine esté marcado si quieres que el usuario
pueda escribir mensajes largos con saltos de línea.
- Button
(Botón):
- Arrastra
uno desde la paleta "User Interface".
- Cambia
su nombre a SendButton
(opcional).
- Establece
su propiedad Text a "Enviar a
WhatsApp".
- Conectividad
(Connectivity):
- ActivityStarter:
- Este
es un componente no visible. Lo encontrarás en la paleta
"Connectivity".
- Arrastra
uno a tu pantalla. Aparecerá en la sección "Non-visible
components" debajo del visor de la pantalla.
- Cambia
su nombre a WhatsAppStarter
(opcional).
2. Configuración de Propiedades
en el Diseñador
Selecciona el componente WhatsAppStarter (el ActivityStarter) y
configura las siguientes propiedades en el panel de propiedades a la derecha:
- Action:
Deja este campo vacío. No necesitamos una acción explícita aquí, ya
que usaremos DataUri.
- DataUri:
Aquí es donde construiremos la URL de WhatsApp. Por ahora, déjalo vacío,
lo llenaremos con bloques.
- Package:
Deja este campo vacío.
- Class:
Deja este campo vacío.
3. Lógica con Bloques (Editor de
Bloques - Blocks Editor)
Ahora, ve al "Blocks Editor" (Botón "Blocks" en la
esquina superior derecha de la interfaz de App Inventor).
Necesitaremos los siguientes bloques:
- Cuando
el botón sea presionado:
- Busca
el componente SendButton en la paleta de bloques a
la izquierda.
- Arrastra
el bloque when SendButton.Click do al
área de trabajo. Este bloque es el evento que se dispara cuando el
usuario toca el botón.
- Construir
la URL de WhatsApp:
- Dentro
del bloque when SendButton.Click do,
vamos a establecer la propiedad DataUri de nuestro WhatsAppStarter.
- Busca
el componente WhatsAppStarter en la pal paleta de
bloques.
- Arrastra
el bloque set WhatsAppStarter.DataUri to y
conéctalo dentro del bloque when SendButton.Click do.
- Unir
el mensaje a la URL:
- Necesitamos
unir el prefijo de la URL de WhatsApp con el texto de la caja de texto.
- Desde
la paleta Text, arrastra el bloque join
(unir). Conéctalo al set WhatsAppStarter.DataUri to.
- El
bloque join tiene dos entradas por defecto. Haz clic en
el engranaje azul del bloque join y añade una entrada más
para tener tres (o más si quieres añadir un número fijo).
- Primera
parte de la URL (fija):
- Desde
la paleta Text, arrastra un bloque de
texto vacío (el que tiene comillas "").
- Escribe
https://api.whatsapp.com/send?text=
dentro de este bloque de texto. Conéctalo a la primera entrada del
bloque join.
- Nota:
Si quieres enviar a un número específico, la URL sería https://wa.me/NUMERODETELEFONO?text=.
Reemplaza NUMERODETELEFONO
con el número de teléfono con código de país (ej. 521234567890
para México, sin el + ni guiones). Si usas wa.me,
no necesitas el api.whatsapp.com/send.
Para este ejemplo, usaremos api.whatsapp.com/send
que permite al usuario elegir el contacto.
- El
texto del mensaje:
- Busca
el componente MessageTextBox
en la paleta de bloques.
- Arrastra
el bloque MessageTextBox.Text y
conéctalo a la segunda entrada del bloque join.
Este bloque obtendrá el texto que el usuario escribió.
- Iniciar
la actividad:
- Una
vez que la DataUri está configurada, le
decimos al ActivityStarter que inicie la actividad.
- Busca
el componente WhatsAppStarter en la paleta de bloques.
- Arrastra
el bloque call WhatsAppStarter.StartActivity y
conéctalo debajo del bloque set WhatsAppStarter.DataUri to
dentro del when SendButton.Click do.
Resumen del Bloque when
SendButton.Click do:
when SendButton.Click do
set WhatsAppStarter.DataUri to
join
"https://api.whatsapp.com/send?text="
MessageTextBox.Text
call
WhatsAppStarter.StartActivity
(Imagina
los bloques visuales de App Inventor con esta estructura)
4. Consideraciones Adicionales
- WhatsApp
Instalado: Esta aplicación asume que el usuario tiene
WhatsApp instalado en su dispositivo. Si no lo tiene, el comportamiento
puede variar (podría abrir el navegador a la página de descarga de
WhatsApp o simplemente no hacer nada).
- Codificación
de URL: App Inventor internamente maneja la
codificación de URL para el texto que se pasa a DataUri,
por lo que no necesitas un bloque encodeURIComponent
explícito como en JavaScript.
- Permisos: App
Inventor maneja los permisos necesarios para iniciar actividades externas
automáticamente, por lo que no necesitas configurar nada adicional para
ello.
- Mensajes
de Error: Para una aplicación más robusta, podrías
añadir una comprobación para ver si la caja de texto está vacía antes de
intentar enviar el mensaje, y mostrar una notificación al usuario si lo
está (usando el componente Notifier).
Comentarios
Publicar un comentario