CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

LA PROGRAMACIÓN EN APP INVENTOR.

Bien, siguiendo con la creación de nuestra primera aplicación en App Inventor 2, nos meteremos de lleno en lo que sería la programación o lógica, para ello en la barra superior, pulsaremos en Bloques. Inmediatamente se nos cambiara la forma en que veremos la pantalla de edición, y que podremos dividir en tres partes, «1 Visor», «2 Bloques» y «3 Medios».
Bloques

Dentro de bloques tendremos a modo de explorador una lista desplegable de las funciones, separadas por colores, de esta manera las funciones de control se encuentran agrupadas en el cuadro de color naranja, las de lógica, en verde, etc.

En este mismo árbol, abajo de los integrados, podemos ver que también tendremos el nombre de la pantalla en la que estemos en ese momento, si pulsamos sobre esta, podremos observar que se desplegará un montón de bloques con los que podremos manejar nuestra pantalla. Al igual que con la pantalla, ocurre lo mismo con los componentes que metiéramos en la misma, a si si tuviéramos una disposicionvertical o un botón, también aparecen en esta zona, y si pulsaremos sobre ellos, se desplegará los bloques correspondientes.
En el visor tendremos un lienzo en blanco, donde podrás poner todos los bloques. En la esquina superior derecha de la misma, una mochila,y en la esquina inferior derecha unos botones para hacer zoom, de estos dos últimos objetos del visor hablamos en anteriores capítulos de este tutorial, y por último en medios, podremos ver todos los archivos multimedia que tenemos subido para nuestra aplicación, por supuesto que también podremos subir nuevos archivos desde esta pantalla, pulsando en el botón Subir archivos.

Comenzamos entonces con la programación, para ello iremos a la barra superior y nos aseguramos que tenemos la pantalla de presentación (SCREEN1) seleccionada, ya que será está la que programaremos en primer lugar.
Despues en Bloques seleccionaremos Screen1 para que se despliegue la lista de bloques y arrastraremos al lienzo CuandoScreen1.inizializar, CuandoScreen1.inizializar esto hará que todo lo que metamos dentro de este bloque se ejecute cuando arranque la pantalla, o en este caso la aplicación, ya que es la primera pantalla que muestra.

Seguido pulsaremos en Reloj, dentro de Bloques y de la lista que desplegara seleccionaremos PonerReloj1.TemporizadorHabilitado como PonerReloj1.TemporizadorHabilitado y lo arrastraremos dentro del bloque anterior haciéndolo encajar como una ficha de puzzle en su interior.

Ahora en Bloques, seleccionaremos Lógica, y buscaremos el bloque cierto, que posicionaremos justo al lado del bloque anterior. cierto

Todo este conjunto de bloques que acabamos de crear hará que cuando se inicie la pantalla comience a contar el reloj.

Volvemos a Bloques > reloj y arrastramos al lienzo el siguiente bloque Cuando reloj1.temporizador

cierto
, y dentro de el meteremos abrir otra pantalla Nombre de la pantalla que está situado dentro de Bloques > Control.
AbrirPantalla

Ahora tenemos que poner el nombre de esa pantalla que tenemos que abrir, para ello nos dirigimos a Bloques > Texto y seleccionamos el bloque (“ “)
TextoVacio
que situaremos a continuación del anterior, haciéndolo encajar. Este bloque tiene la peculiaridad de que podremos escribir dentro de él, poniendo el nombre de la pantalla que vamos abrir una vez el Reloj termine de contar el tiempo, y como ya le pusimos nombre a esa pantalla, solo tendremos que volver a escribir ese mismo nombre dentro del bloque.
TextoVacio

Llegado a este punto, damos por concluido la programación de la pantalla de presentación y vamos a programar la pantalla principal, para ello nos dirigiremos a la barra superior y seleccionamos principal.
Principal

Cómo lo que queremos es que la aplicación lea en voz alta todo el texto que contenga dentro del campo de texto, vamos a programar en primer lugar el botón3, que es en el que pusimos el texto de leer. Para ello nos dirigiremos a bloques > botón3, si eres buen observador te habrás dado cuenta que está dentro de la DisposicionHorizontal1. Y en su lista de bloques seleccionamos cuando Botón3.clic
Botón3.Clic

Ahora seleccionamos, TextoAVoz1 y de los bloques desplegados seleccionamos el bloque llamar textoAVoz1.Hablar
TextoAVoz
y lo hacemos encajar con el bloque que anteriormente colocamos en el visor.

Si te das cuenta, solo nos hace falta un nuevo bloque, y este es sin duda el que contenga el texto que quieres que hable nuestra aplicación cuando pulsemos en el botón de leer. Para hacer esto en bloques CampoDeTexto1 seleccionaremos y haremos encajar con el bloque anterior el bloque CampoDeTexto1.Texto.
CampoDeTexto1

Estas impaciente por saber si funciona, adelante, ve a la pantalla de conectar, selecciona tu método favorito y verás que después de unos segundos la pantalla de presentación de nuestra aplicación desaparece, mostrando nuestro campo de texto y los tres botones, si escribes algo en el campo de texto y después pulsas en leer nuestra aplicación leerá sin ningún problema.
Qué es asombroso ehh!!, Bueno seguimos con la programación de nuestra App, en esta ocasión vamos a programar el botón2, en el que escribimos dictar por Voz.
Bien como anteriormente hicimos nos dirigiremos a Bloques > Botón2 y seleccionamos el bloque cuando Botón2.clic.Botón2.Click
Seguido seleccionamos el Bloque ReconocimientoDeVoz y el bloque de color morado llamar ReconocimientoDeVoz. ObtenerTexto , Botón2.Click
pero solo con esto, nuestra aplicación no mostrará el texto en pantalla, por así decirlo solo codifica el sonido en texto, para mostrar el texto en el campo de texto y después poder hacer que nuestra aplicación lo lea, tendremos que ir a bloques, pulsar en ReconocimientoDeVoz1 y seleccionar el bloque cuando ReconocimientoDeTexto1.DespuesDeObtenerTexto
DespuesDeObtenerTexto
Después seleccionar y encajar dentro del bloque anterior, el bloque poner CampoDeTexto1.Texto
CampoDeTexto1.Texto
del componente CampoDeTexto1, y dentro de este mismo, el bloque ReconocimientoDeVoz1.Resultado. que se encuentra dentro de ReconocimientoDeVoz1.
CampoDeTexto1.Texto
Ahora, sí probamos nuestra aplicación, si funcionará.

Nos queda un último botón, y no por ello el menos importante, este botón limpiara la pantalla de cualquier texto que se encuentre en ella, y podremos escribir dentro de la misma. Para ello en Bloques > Botón1 seleccionamos el bloque cuando Botón1.Clic
CampoDeTexto1.Texto
y lo metemos dentro del Visor, seguido seleccionamos el bloque CampoDeTexto1.Texto como
CampoDeTexto1.Texto
que está dentro de Bloques > CampoDeTexto1 y por último dentro de Bloques > Integrados > Texto seleccionamos el bloque que está vacío, y solo contiene dos comilla “ ” .
CampoDeTexto1.Texto

Esto hará que cuando pulsemos el botón1, todo el texto se borre, dándonos la oportunidad de volver a escribir.

Bueno, ahora si vamos a la aplicación, y la conectamos con nuestro método preferido a nuestro dispositivo, veremos que todos los botones tienen su funcionalidad.
Si pulsamos en escribir, podremos rellenar el campo de texto con nuestro teclado al pulsar en el.
Si pulsamos en leer texto, después de haber escrito, una voz nos dirá exactamente lo que hayamos escrito.
Y por último, si le damos a dictar por voz, nos saldrá un micrófono en en pantalla que al hablar, mostrará lo hablado en el campo de texto.
Bueno, espero que con esta sencilla aplicación, podáis ver todo el potencial que tiene App Inventor. En cuestión de unos minutos habéis creado una aplicación, que es capaz de leer un texto, escribir por voz, con una codificación bastante sencilla.

Os dejo unos enlaces en donde podéis descargaros la aplicación, y el código fuente de de la misma, para que podáis probar.

Si te ha gustado compartelo
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Deja un comentario

error: Content is protected !!