Hola mundo interactivo en android.
En la entrada anterior (ver aquí) se creo un hola mundo, muy al estilo para dispositivos móviles, donde al pulsar un botón, el dispositivo te “habla” con una voz muy “robótica”. Hoy se tratara el tema de solicitarle datos al usuario, obtenerlo y “hacer algo” algo como “que al pulsar el botón diga: “Hola Amia” “. Sería como un hola mundo mejorado.
Para poder hacer esto se debe de ir a la página del appinventor, (accedes a ella desde aquí), se deberá de mostrar una ventana como la que se muestra en la imagen 1. Una vez que se encuentre ahí, hay que ir al menú proyectos opción comenzar un proyecto nuevo. Después de pulsar en esa opción se mostrará una ventana emergente como la que se puede apreciar en la imagen 2.
Después de crear un proyecto nuevo se verá una ventana como la que se muestra en la imagen 3, ese es el lienzo de trabajo (área blanca dentro del móvil), ahora hay que buscar el componente (u objeto) campo de texto este regularmente se encuentra en la columna de la izquierda (vea imagen 3, parte inferior izquierda). Lo selecciona y lo arrastra. Ahora hay que agregar un botón y un componente llamado TextoAVoz (vea imagen 4 y 5).
En las imágenes 4 y 5, se puede observar que, el componente “TextoAVoz” se encuentra en la opción “Medios” se accede a ella, en las opciones de la paleta (opciones de componentes de la columna de la izquierda). Se recomienda se realice un pequeño scroll hacia abajo y pulse sobre la opción “medios” y dentro de ella encontrara el componente “TextoAVoz”. Pulse y arrastre hacia el lienzo. Hasta ahora se debe de tener tres componentes u objetos sobre el lienzo, que son: un campo de texto, un botón y un texto a voz. (vea imagen 6).
Ahora es momento de codificar al estilo scratch (por bloques) para ello hay que realizar un clic en el botón que dice “bloques” se encuentra en la parte superior derecha, debajo de la cuenta con la que se autentico dentro de appinventor. Una vez que se haga clic sobre él, se podrá de ver una ventana, similar a la que se muestra en la imagen 7.
En la sección de bloques, que se encuentra del lado izquierdo (vea la imagen 7) se encontrará todos los tipos de bloques, acciones y eventos que se pueden tener. Se puede observar que también se tiene los componentes que se arrastraron o agregaron (vea imagen 6). Para darle funcionalidad a la interfaz gráfica creada, se debe de hacer lo siguiente:
- Se pulsara sobre el componente “botón” Se mostrara una serie de bloques como los que se tiene en la imagen 8, Realice un clic primario sobre la primera opción (la opción que tiene el clic).
- Pulse ahora sobre el componente “campo de texto”. Se podrá observar unos bloques coo los que se muestra en la imagen 9. Pulse sobre el que dice. “CampodeTexto texto”
- Ahora seleccione el componente “TextoAVoz”. Se mostrará unos bloques como los que se pueden apreciar en la imagen 10. Pulse sobre el que dice: “llamar TextoAVoz hablar”
- Ya solo se hará uso de un bloque que permite concatenar (recuerde que esta opción permite unir dos fraces o textos). Esto permitirá poder indicarle al apk que diga: “hola Amaia”. Para ser esto hay que ir a los bloques integrados y dirigirse hacia la opción que dice “Texto” al pulsar sobre ella debe de mostrarse una ventana como la que se encuentra en la imagen 11. Pulse sobre el bloque que tiene la palabra “Unir”.
- Después de seleccionar el bloque del punto cuatro, debe de pulsar sobre el bloque que esta vació, regularmente es el primero, si su ventana es similar a la que se muestra en la imagen 11 deberá de pulsar sobre el primer bloque.
Si todo va bien se debe de tener la cantidad de bloques que se ven en la imagen 12. Ahora solo sigue ensamblar los bloques se debería de hacer de la siguiente manera:
- El primer bloque será el del botón que cuando se pulse sobre él se ejecute el resto de las instrucciones.
- Después debe de ir el bloque de color morado, el del componente de TextoAVoz, que es el que permitirá que se reproduzca el audio.
- Ahora es turno de unir o concatenar, por lo que el bloque que sigue será el que tiene el nombre de “unir”.
- En el conector de arriba del bloque concatenar, colocará el que tiene el cuadro en blanco y sobre el cuadro escribirá “Hola”
- Por último coloque el bloque del cuadro de texto o CampoDeTexto debajo del bloque en el que se escribió “Hola”.
Si todo ha salido bien debe de tener una unión de bloques similar a la que se muestra en la imagen 13.
Se deja un vídeo de como se creo este “hola mundo interactivo”, que disfruten la recreación de la practica y espero sus comentarios.