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».
uc?export=view&id=1zJXrQ9Z9U4DBFT NCOL6 f4YS AdduNT - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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, uc?export=view&id=1xaKjoL9tmFgIu3caOpoAVFphH6lvKL21 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2 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 uc?export=view&id=1fjb1Ztlvjqu6YV37HsRMJFWqqqiaaBE3 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2 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. uc?export=view&id=1 h9h GJwg8XknVIZmB440xsHQOJW09Y4 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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

uc?export=view&id=16rvunkwWTTJ3QuwYTEfAFvTIZiro95S2 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
, y dentro de el meteremos abrir otra pantalla Nombre de la pantalla que está situado dentro de Bloques > Control.
uc?export=view&id=16ks9 0ZNeecX1jET7K8OpQoehOu459Px - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

Ahora tenemos que poner el nombre de esa pantalla que tenemos que abrir, para ello nos dirigimos a Bloques > Texto y seleccionamos el bloque (“ “)
uc?export=view&id=1byVpdVZ9Wv uSyKf ypt00Rl0DtYAR9n - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
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.
uc?export=view&id=1ENd0JzDqQRymJZH3tvQoU3TjYN1KaHOd - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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.
uc?export=view&id=1DTklqPKH7LnjOGTMYkVgpdq1XLdPr17N - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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
uc?export=view&id=1dVXmbZ2JGyN8DTK6CbdU39cdGm75WKct - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

Ahora seleccionamos, TextoAVoz1 y de los bloques desplegados seleccionamos el bloque llamar textoAVoz1.Hablar
uc?export=view&id=1N im4NyLOcVttjaJcDhDOXht9lHlV y9 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
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.
uc?export=view&id=1nklISroxqMVoQPuRA5U9LDYXgxC7y aT - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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.uc?export=view&id=1X2Kev8l 8HFYFp2HFnf4nspf5lZsMbjP - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
Seguido seleccionamos el Bloque ReconocimientoDeVoz y el bloque de color morado llamar ReconocimientoDeVoz. ObtenerTexto , uc?export=view&id=14 1SUj2D4quJuPzpazMBh3uaEFHqTtwl - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
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
uc?export=view&id=16JFrwlZpxvwL jzZBlvBHTux6qai15lg - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
Después seleccionar y encajar dentro del bloque anterior, el bloque poner CampoDeTexto1.Texto
uc?export=view&id=10vdCCx97FAHNJ4TWPMJTAbYxXg Qi7VG - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
del componente CampoDeTexto1, y dentro de este mismo, el bloque ReconocimientoDeVoz1.Resultado. que se encuentra dentro de ReconocimientoDeVoz1.
uc?export=view&id=1OZt7Kc0k35UfG4AHKzpG lj TYJNXL H - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
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
uc?export=view&id=1UiTaKXZkx7t0O9NlpZIx G5V0unDcYt6 - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
y lo metemos dentro del Visor, seguido seleccionamos el bloque CampoDeTexto1.Texto como
uc?export=view&id=10vdCCx97FAHNJ4TWPMJTAbYxXg Qi7VG - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2
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 “ ” .
uc?export=view&id=1byVpdVZ9Wv uSyKf ypt00Rl0DtYAR9n - CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2

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.

3 comentarios en «CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 2»

  1. Muy interesante ! Me da gusto que compartas tus conocimientos.
    Muy bien explicado y de mucha utilidad en este proceso de aprender MIT INVENTOR.
    Gracias y muchas Felicidades !

    Responder

Deja un comentario

error: Content is protected !!