Nuestra primera instrucción en App Inventor 2.

 

Hola, empezamos nuestro curso con con una sencilla instrucción que mostrará el mensaje  “hola mundo” en la pantalla de nuestro dispositivo móvil.

Una vez abierto App Inventor 2 en la pantalla de nuestro navegador, crearemos un nuevo proyecto, para ello haremos como siempre, pulsaremos en la pestaña de Proyectos y pulsaremos en Comenzar un proyecto nuevo…,

le daremos el nombre que queráis, yo en mi caso le daré Lección1, no olvides que el nombre del proyecto no puede contener caracteres extraños, seleccionamos nuestro nuevo proyecto y en el diseñador nos dirigiremos a Paleta -> Disposición y arrastramos el componente DisposicionVertical dentro de nuestra pantalla Screen1

manteniendo seleccionado este componente, nos dirigiremos a las propiedades situadas a la derecha de la pantalla de nuestro ordenador y y tanto el Alto como el Ancho seleccionaremos la opción, Ajustar al contenedor, esto hará que la disposición vertical siempre ocupe el total del alto y ancho de la pantalla del dispositivo, independientemente de cuál sea su tamaño.

Si eres nuevo en App Inventor 2 y lo tienes configurado en Inglés, te resulta difícil seguir este tutorial, no te preocupes es tan fácil como pulsar en la pestaña superior derecha donde pone Inglés, y seleccionar tu idioma de entre la lista de idiomas disponibles.

Dada esta pequeña explicación para que nadie tenga problemas seguimos con este primer capítulo de esta serie que te enseñará a programar en App Inventor 2. Sin salir de las propiedades de nuestra Disposición Vertical, pondremos tanto la DispHorizontal como la DispVertical en el centro 3,

con eso haremos que todo lo que metamos dentro de esta, este justamente centrada en la pantalla. Una vez hecho esto nos dirigiremos a paleta → Interfaz de usuario y arrastraremos el componente etiqueta al interior de nuestra Screen1

esta etiqueta nos servirá para mostrar los resultados de la codificación que hagamos, ahora y en adelante en este curso. Ahora en las propiedades de la etiqueta pondremos el tamaño de letra en 30 y  el tipo de letra elegiremos Serif, en el cuadro de texto pondremos “Hola Mundo” y en posición del texto lo dejaremos en el centro, las demás propiedades las dejaremos las que vienen por defecto

ahora haremos una comprobación en un dispositivo real, esto servirá para ver que todo funciona correctamente, yo elegiré mi método favorito que es conectarlo con Ai companion vosotros podéis elegir el que mas os guste.

Una vez visto que todo funciona correctamente iremos a la pantalla de bloques y tendremos a nuestra izquierda justo debajo de  bloques → integrados el nombre de nuestra primera pantalla Screen1, si pulsamos, se desplegaran una serie de bloques y escogeremos cuando Screen1 inicializar ejecutar,

ahora en bloque pulsaremos en la etiqueta1 y seleccionaremos el bloque poner etiqueta1 texto como que situaremos justo debajo de el anterior componente de la pantalla,

ahora en bloques integrados seleccionaremos texto, y de los bloques desplegados arrastraremos el bloque entrecomillado que no contiene texto “ ”,

y lo situaremos a continuación de bloque anterior, escribiendo dentro “Hola Android”, ahora elegimos nuestro método favorito para conectar con nuestro dispositivo android y esta vez veremos como en el centro de la pantalla aparece otro texto diferente “Hola Android” con esto vemos que los bloque anteriores están haciendo su trabajo y han cambiado el texto.

llegados a este punto pasaremos a explicar como comentar nuestros programas, esto es especialmente importante cuando nuestros programas son demasiados grandes y los compartimos con terceras personas, esto se hace de una manera muy sencilla, pulsaremos con el botón derecho del ratón sobre el bloque que queremos comentar y del desplegable de opciones que muestra, escogeremos añadir comentario.

Veremos que saldrá en la esquina superior izquierda del bloque un circulo azul con un signo de interrogación dentro.

Si pulsamos en el veremos qué se abrirá un globo en el que podremos escribir dentro el texto que queramos, bien para explicar la función de ese bloque, o para hacer un comentario a modo de ayuda, yo en mi caso voy a poner el siguiente texto explicando la función del bloque, “Al iniciar la pantalla cambio el texto”,  una vez escrito, si vuelvo a pulsar en el signo de interrogación, el globo quedará oculto.

Cuando nuestros programas crezcan en dificultad y utilicemos una gran cantidad de datos, tendremos a nuestra disposición una herramienta de depuración, que aunque muy básica nos facilitara a la hora de encontrar errores en la ejecución, si pulsamos con el botón derecho del ratón sobre algún bloque, al abrirse las opciones en la parte inferior podemos ver la opción “Do It”  traducido significa “hazlo o ejecuta”, si pulsamos en esta opción estando el programa en ejecución, tanto en el emulador como en el dispositivo, se nos devolverá el resultado de la expresión. Esta parte la trataremos en más profundidad en siguientes entregas de este curso.

Bien con esto se termina esta primera lección, en la siguiente veremos cómo definir una variable y tipos de variables.

VACIAR MOCHILA EN APP INVENTOR 2

COMO USAR LA MOCHILA EN APP INVENTOR 2.

Una de las preguntas con las que más frecuentemente me encuentro, es cómo podemos vaciar la mochila de App Inventor 2. La mochila para los que no sepan usarla, sirve para copiar y pegar bloques entre distintas pantallas y diferentes proyectos, a si, si tenemos un conjunto de bloques que queremos repetir en otra pantalla de nuestro proyecto, o llevarlos a otro proyecto distinto, solo tendríamos que hacer uso de esta herramienta.

La mochila se encuentra en la esquina superior derecha y es muy fácil de usar, solo tenemos que arrastrar el bloque o conjunto de bloques dentro de esta, después, iremos a la pantalla o al proyecto en el que queramos poner los bloques anteriormente introducidos en la mochila y pulsaremos en la misma para desplegar un listado de bloques que podemos volver a arrastrar dentro del área de trabajo.

Existe otra forma de hacer esto, si pulsamos con el botón derecho del ratón sobre un bloque se  desplegará una serie de opciones, dónde podremos encontrar la opción Add to Backpack o (añadir a la mochila), el bloque en el que pulsamos y los bloques que estén junto a él pasarán a la mochila. Si en vez de pulsar con el botón derecho del ratón en un bloque, pulsamos en una parte vacía de nuestro espacio de trabajo, se desplegará otras opciones, y si pulsamos en copy all blocks to Backpack (copiar todos los bloques a la mochila), se pasarán todos los bloques que contenga el espacio de trabajo, y no sólo uno como en el anterior caso.

Una curiosidad es que si cierras sesión  y vuelves a iniciar sesión en App Inventor 2, la mochila seguirá conteniendo los bloques. Si deseas borrarlos de la mochila, solo tendrás que pulsar con el botón derecho del ratón en el espacio de trabajo de nuestro proyecto, y pulsar en la opción Empty Backpack (vaciar mochila).

Además del uso de la mochila podemos hacer uso de una combinación de teclas en App Inventor 2. Si seleccionamos con el botón izquierda de nuestro ratón un bloque, y seguido hacemos uso de la combinación de teclas Ctrl + C y Ctrl + V veremos qué ocurre exactamente igual que si fuera un texto, lo copiaremos y pegaremos. También se puede utilizar Ctrl + X, para borrar o cortar el bloque, este método solo sirve, o puede ser utilizado en la pantalla actual de trabajo, y no sirve para pasar un bloque o conjuntos de bloques de un pantalla a otra o de un proyecto a otro.

Espero que sea de mucha utilidad para ti, ya que será una manera muy rápida de copiar y pegar bloques en nuestro proyecto.

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».

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, 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 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.

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

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

Ahora tenemos que poner el nombre de esa pantalla que tenemos que abrir, para ello nos dirigimos a Bloques > Texto y seleccionamos el bloque (“ “)

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.

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.

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

Ahora seleccionamos, TextoAVoz1 y de los bloques desplegados seleccionamos el bloque llamar textoAVoz1.Hablar

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.

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.
Seguido seleccionamos el Bloque ReconocimientoDeVoz y el bloque de color morado llamar ReconocimientoDeVoz. ObtenerTexto ,
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

Después seleccionar y encajar dentro del bloque anterior, el bloque poner CampoDeTexto1.Texto

del componente CampoDeTexto1, y dentro de este mismo, el bloque ReconocimientoDeVoz1.Resultado. que se encuentra dentro de ReconocimientoDeVoz1.

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

y lo metemos dentro del Visor, seguido seleccionamos el bloque CampoDeTexto1.Texto como

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 “ ” .

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.

CREAR NUESTRA PRIMERA APLICACIÓN. PARTE 1

EL DISEÑO EN APP INVENTOR.

Lo primero antes de nada,  será descargar los archivos que contiene todo el material multimedia para seguir este tutorial. Después comenzaremos a construir nuestra aplicación comenzando por el diseño de la misma, para eso iremos a PROYECTOS > COMENZAR UN PROYECTO NUEVO, y le daremos el nombre que queramos, en mi caso yo le daré el nombre de LEEME_TEXTO.

Una vez hecho esto, tendremos en el visor, nuestra pantalla vacía, a la que vamos a poner un logotipo con el nombre de nuestra aplicación a modo de pantalla de presentación. Para ello iremos a MEDIOS > SUBIR ARCHIVO,

y nos saldrá una ventana emergente a la que pulsaremos en el botón SELECCIONAR ARCHIVO,

una vez hecho esto se nos abrirá el explorador  y seleccionaremos los archivos BOCA.png y icono.png  que anteriormente descomprimimos en nuestro ordendor, una vez seleccionado pulsaremos el botón aceptar de la ventana emergente. Ahora en MEDIOS se podrá visualizar el texto del archivo subido.

Una vez subida la imagen nos dirigiremos a PALETA  y pulsaremos en DISPOSICIÓN, seguido arrastraremos el componente DISPOSICIONVERTICAL dentro de Screen1.

 

Inmediatamente veremos un cuadro gris en la equina superior izquierda del Screen1 del visor.

 

Si lo seleccionamos, a nuestra derecha en PROPIEDADES tendremos una serie de opciones, nosotros modificaremos tanto el ancho como el alto que le pondremos como: ajustar al contenedor.

Ahora toca colocar la imagen anteriormente descargada dentro del componente DISPOSICIONVERTICAL  para ello en PALETA > INTERFAZ DE USUARIO arrastraremos el componente imagen a la DISPOSICIÓNVERTICAL, al hacerlo veremos como en el árbol jerárquico de COMPONENTES la imagen esta dentro de la DISPOSICIONVERTICAL

esto hará que cualquier modificación en la DISPOSICIONVERTICAL afecte a la imagen o cualquier componente dentro del mismo, esto es muy útil si queremos que nuestra aplicación se adapte a cualquier tamaño de pantalla, ya que al marcar ajustar al contenedor la DISPOSICIONVERTICAL tomará el ancho y al alto del dispositivo que está ejecutando nuestra aplicación. Seguido pulsaremos en el componente IMAGEN y en PROPIEDADAES  modificaremos tanto el ancho como el alto que le pondremos como ajustar al contenedor, y en foto seleccionaremos el archivo BOCA.png.

Ahora agregaremos un componente no visible, que será un reloj, que controlará el tiempo en el que permanecerá la pantalla de presentación abierta, para ello iremos a PALETA > SENSORES y arrastraremos el componente reloj dentro de Screen1.

Inmediatamente veremos que el componente no aparece dentro de la misma si no abajo, esto es porque es un componente que no es visto por el usuario, pero que si tendrá interacción con el mismo.

En sus propiedades desmarcamos Temporizadorhabilitado y pondremos en IntervaloDelTemporizador 5000.

Bien con esto ya tendremos nuestra pantalla de presentación y ahora nos toca crear la pantalla donde el usuario, pulsando los correspondientes botones, interactúe con la aplicación.

Crearemos una nueva pantalla, para ello pulsaremos en la barra superior añadir ventana.

Se abrirá una ventana emergente en la que nos pedirá que introduzcas el nombre, yo le pondré pantalla PRINCIPAL, vosotros le podéis poner el nombre que queráis.

Seguido iremos a PALETA, disposición y arrastrarnos el componente DISPOSICIONVERTICAL dentro de la nueva pantalla que hemos creado. En las propiedades el alto le daremos el 50% y el ancho le pondremos ajustar al contenedor, esto hará que independientemente del tamaño de la pantalla del dispositivo, siempre ocupe la mitad del alto, y el ancho total de la pantalla.

Ahora iremos de nuevo a paleta, disposición y arrastrarnos el componente DISPOSICIONHORIZONTAL a la pantalla del visor, justo debajo de la DISPOSICIONVERTICAL que colocamos anteriormente, en sus propiedades le pondremos el alto en automático, esto ara que se ajuste automáticamente al alto de lo que metamos dentro y en ancho le pondremos ajustar al contenedor.

Ahora arrastrarnos del panel paleta interfaz de usuario una etiqueta dentro de la DISPOSIVIONVERTICAL y en las propiedades seleccionamos el cuadro de la opción negrita, el tamaño de letra a 30, el tipo de letra sans serif, marcamos el cuadro de HasMagirns, el alto lo ponemos como automático, el ancho seleccionamos ajustar al contenedor, el texto le cambiamos el que viene por defecto como LEEME TEXTO, o el nombre que quieras y ponemos la posición del texto en el centro con el color en negro.

Seguido arrastramos el componente campo de texto situado en paleta, interface de usuario a la DISPOSICIONVERTICAL justo debajo de la etiqueta. En sus propiedades tanto el ancho como el alto seleccionaremos ajustar al contenedor y en pista pondremos un texto que describa al usuario la acción que tiene que hacer, yo pondré el texto»Introduzca un texto».

Ahora comenzaremos con la DISPOSICIONHORZONTAL que anteriormente colocamos en nuestra segunda pantalla, iremos a paleta, interface de usuario y arrastrarnos tres botones a esta DISPOSICIONHORIZONTAL, un al lado del otro quedando como muestra la imagen.

Entrando en las propiedades de cada uno colocaremos el alto en automático y el ancho en ajustar al contenedor, al poner la propiedad ancho ajustada al contenedor  todos los botones se re-dimensionaran  quedando dentro del ancho de la DISPOSICIONHORIZONTAL. En el botón situado más a la izquierda, en el campo texto le pondremos «ESCRIBIR» en el del centro «DICTAR POR VOZ» y en el que queda más a la derecha «LEER», y en los tres el tamaño de letra le dejaremos en 10.

Vamos a agregar dos componentes no visibles, que será, TextoAVoz y ReconocimientoDeVoz, que controlará dos aspectos importantes como son la escritura por voz y convertir el texto en audio, y permanecerán en la pantalla de Principal, para ello, iremos a PALETA > MEDIOS y arrastraremos el componente TextoAVoz y ReconocimientoDeVoz dentro de la pantalla con nombre Principal. Inmediatamente veremos que los componentes aparecen abajo.

Ahora que ya tenemos Todos los elementos dentro de nuestras pantallas pasaremos a hacer la comprobación que nuestro dispositivo móvil para ello iremos a la pestaña conectar y seleccionaremos la opción que más se ajuste a nuestras necesidades, ya sabes que son tres las opciones de conexión AI COMPANION Emulador o Usb.

Con esto hemos terminado en el siguiente capítulo programaremos la lógica de nuestra aplicación para que al pulsar un botón nuestro dispositivo  haga la acción qué  queramos.