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:

  1. 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.
  2. 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.
  3. 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ó.
  4. 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).

 

Esta actividad es solo para 2do Año, Sección B


Nota importante: deben ir haciendo esta aplicación en sus plataformas de App Inventor; esto debe estar listo el dia viernes, 09 de Junio de 2025.

Comentarios

Entradas populares de este blog

INTERFAZ DE USUARIO

Glosario de App Inventor

¿Qué es App Inventor?