Conectando con otras aplicaciones

En este capítulo vamos a aprender a usar AppInventor para enviar correo electrónico, navegar por internet y usar la cámara de nuestro dispositivo.

 Introducción

Para arrancar otras aplicaciones (actividades) desde AppInventor usamos el componente ActivityStarter. Primero definimos una serie de parámetros para identificar la aplicación que queremos arrancar así como otros parámetros dependiendo de cada caso.
Vamos a hacer unos ejemplos muy sencillos para que veas cómo puedes incorporarlos a tus propios programas:

 Enviando correo electrónico desde AppInventor

Comienza un proyecto nuevo desde el Diseñador y llámalo: "emails".
Añade un componente HorizontalArragement y pon dentro una etiqueta y un componente textbox.
Cambia el texto de la etiqueta por "email:".
Cambia el nombre del componente del textbox por "email_destino"
Añade otro componente HorizontalArragement y pon dentro otra etiqueta y otro componente textbox.
Cambia el texto de la etiqueta por "asunto:" y cambia el nombre del componente textbox por "email_asunto".
Añade una etiqueta más debajo de todo lo anterior y cambia el texto por "Texto del mensaje".
Añade un componente textbox más y cambia su nombre a "email_mensaje".
En las propiedades del componente pantalla (screen) prueba a desactivar la propiedad scrollable para ver si se ve mejor en tu dispositivo.
10 Añade un botón al final de todo y cambia su texto por "enviar".
11 Añade por último el componente ActivityStarter y en su propiedad action añade el siguiente texto exactamente: "android.intent.action.VIEW".
12 Cambia ahora al Editor de bloques.
13 Vamos a crear tres variables que necesitamos para llamar al componente ActivityStarter.
14 A la primera variable llámala "codigo_destino" y pégala un bloque de texto que contenga exactamente lo siguiente: "mailto:".
15 A la segunda variable llámala "codigo_asunto" y pégala otro bloque de texto que contenga: "?subject="
16 A la última variable llámala "codigo_mensaje" y añade el texto: "&body=".
Estas variables con estos textos son necesarios para que tu dispositivo Android comprenda qué queremos hacer.
17 Coge el evento del botón Button1.Click y añade dentro el bloque "set ActivityStarter1.DataUri".
18 Con este bloque preparamos los parámetros que necesitamos para llamar más tarde al componente ActivityStarter.
19 Crea un bloque de texto join y pégalo al anterior bloque. Ahora vete añadiendo los siguientes bloques al componente join que acabamos de pegar en este orden: (recuerda como se hacia para que fuesen más de dos cadenas… Botón azul…)
20 "global codigo_destino", "email_destino.Text", "global codigo_asunto", "email_asunto.Text", "codigo_mensaje", "email_mensaje.Text"
21 Finalmente añade el bloque procedimiento "call ActivityStarter1.StartActivity" también dentro del evento .Click pero después del último bloque ActivityStarter.DataUri.
Si todo funciona correctamente Android te preguntará cómo quieres enviar el mensaje. Si tienes configurado el cliente de correo electrónico de tu dispositivo te preguntará si quieres usarlo o si por el contrario prefieres usar tu cuenta de Gmail. En cualquiera de los dos casos, Android creará un mensaje de correo electrónico usando los campos que has introducido en tu aplicación y lo enviará correctamente.
¿Cómo funciona?
Para arrancar aplicaciones desde AppInventor, como acabamos de hacer con el correo electrónico, primero tenemos que preparar algunas variables para pasárselas al programa al que llamamos y que sepa qué queremos hacer. En nuestro caso el primer parámetro (codigo_destino=mailto:) indica a Android que lo que queremos hacer es enviar un email. En los dos siguientes parámetros indicamos el asunto del mensaje (codigo_asunto=?subject=) y el texto del email (codigo_mensaje=&body=). Finalmente componemos una cadena de texto juntando esta información y se la pasamos al componente ActivityStarter para que Android la use y entienda lo que queremos.
Haz la prueba de escribir tú mismo la cadena de texto dentro de la barra del navegador Chrome de tu dispositivo, por ejemplo, escribe "mailto:antonio@gmail.com?subject=hola amigo&body=mi mensaje"
¿Qué ocurre?
22 Recuerda también que en este caso tienes que cambiar la propiedad action del componente ActivityViewer a "android.intent.action.VIEW" para que funcione.

 Haciendo fotos y videos

Comienza un nuevo proyecto y llámalo: "camara".
Desde el Diseñador añade un componente HorizontalArragement y mete dentro dos botones.
Al primero llámalo "foto" y al segundo "video".
Añade también un componente imagen y hazlo invisible.
Añade un componente VideoPlayer y hazlo invisible también.
Por último añade un componente Camera y un componente CamCorder. Ambos los encontrarás en Media.
Vamos a hacer un pequeño ejemplo de cómo hacer fotos y videos con AppInventor. Abre el Editor de Bloques.
Coge el evento button1.Click y dentro coloca el bloque "call Camara1.TakePicture".
Ahora coge el evento button2.Click y mete dentro el bloque "call CamCorder.RecordVideo".
10 Recuerda que en muchos casos cuando llamamos a un procedimiento dentro de AppInventor, por ejemplo, para hacer una foto (Camera1.TakePicture) cuando la foto se haya tomado se activará un evento para avisarnos. En el caso de la cámara de fotos el evento se llama "when Camera1.AfterPicture" (después de la foto). En el caso de la cámara de video el evento se llama "when Camcorder.AfterRecording" (después de la grabación).
11 Coge ambos eventos y ponlos en tu programa.
12 Vamos a empezar por el de la cámara de fotos (AfterPicture) Este evento nos devuelve en el campo image la dirección y nombre donde Android ha guardado la foto que acabamos de hacer. Podemos pasar este bloque directamente a un componente imagen para que nos muestre la foto en la pantalla usando el bloque "set image1.Picture" y pasándole el bloque value image. Hazlo ahora.
14 Además vamos a ocultar el reproductor de video por si estuviese visible usando el bloque "set VideoPlayer.Visible=false".
15 Finalmente activamos la imagen "set image1.Visible=true". Siempre dentro del evento .AfterPicture. Hacemos esto para aprovechar el espacio en la pantalla.
16 Vamos con el reproductor de video. Al igual que en el caso anterior, el evento AfterRecording nos informa a través del parámetro clip del nombre del video que acabamos de grabar. Así que únicamente tendremos que decirle a nuestro componente reproductor de video (videoPlayer) que use este archivo para reproducirlo usando el bloque "set VideoPlayer.Source" y pasándole el bloque value clip. Hazlo ahora.
17 Al igual que antes pero a la inversa, vamos a ocultar la imagen por si estuviese activa con "set imagen1.Visible=false" y activamos el reproductor de video con "set VidePlayer.Visible=true".
18 Y por último activamos el reproductor para que nos muestre el video que hemos grabado usando el procedimiento "call VideoPlayer.Start".
En algunos casos puede que el video no se reproduzca automáticamente y aparezca una ventana negra. Pulsando sobre ella aparecerán los controles del reproductor para que le demos al play y comience el video.
19 Tanto para la imagen tomada con la foto como para el video, podemos jugar con el tamaño y posición para hacer que aparezcan en la posición y tamaño que queramos. Además el componente VideoPlayer te permite avanzar en el video a la posición que quieras o ponerlo en pausa.

 Navegando por internet con el visor Web

Crea un nuevo proyecto y llámalo: "web".
Desde el diseñador añade un componente HorizontalArragement y mete dentro primero un textbox y luego dos botones.
Al textbox llámalo url, al primer botón llámalo abrir y cambia el texto por "Ir" y al segundo botón llámalo volver y cambia el texto del botón por "Volver".
Por último añade el componente WebViewer
Abre el Editor de bloques y coge los eventos .Click de ambos botones.
En el evento del botón abrir vamos a abrir la página web que escribamos en el textbox url. Coge el procedimiento "call WebViewer.GotoUrl" y ponlo dentro.
Este procedimiento espera que le pasemos el texto con la dirección url de la página web que queremos abrir. Es decir, espera un texto que empiece por "http://" así que para no tener que escribirlo cada vez, vamos a crear una cadena de texto text/join para evitar esto.
Primero crea el bloque text join. Para el primer valor crea un bloque de texto y escribe "http://". Para el segundo usamos el texto que ha metido el usuario en el campo url.Text.
Ahora pega el bloque completo a procedimiento "call WebViewer.GoToUrl".
10 Para el botón de volver pon el evento volver.Click el procedimiento "call WebViewer.GoBack".
11 Ahora prueba a meter en tu aplicación la dirección de tu página web favorita.
¿Funciona?