lunes, 30 de abril de 2018

LISTAS EN APP INVENTOR 2. PARTE 2

LISTAS EN APP INVENTOR 2. PARTE 2

Hola, bienvenido lector, el artículo que nos ocupa hoy es la continuación del anterior post en el que vimos cómo crear y manejar listas en App Inventor 2, si recordamos, nos ayudamos de una etiqueta que nos mostraba los distintos índices, ayudados por un botón, ahora lo que haremos es dar al usuario la posibilidad de añadir elementos a la lista ayudados de un botón, y mostrarlos de la misma manera. Para ello necesitaremos una serie de objetos nuevos como una caja de texto y un nuevo botón, el primero lo utilizaremos para que nuestro usuario meta la información necesaria en forma de texto y el segundo será para confirmar que la información quede insertada en la lista. Bien pues sin más comenzaremos abriendo el proyecto anterior ejemplo listas y pulsaremos el botón de diseñador situado arriba a la izquierda de nuestra pantalla, una vez situados en la pantalla de diseño, iremos a paleta –> interfaz de usuario y arrastrarnos el componente CampodeTexto dentro de nuestro diseño y lo colocaremos justo debajo de nuestro botón el que ya utilizamos en el anterior tutorial, y en sus propiedades Pista añadiremos el siguiente texto, “Añade una fruta a la lista”. Seguido nos dirigimos nuevamente paleta –> interfaz de usuario y esta vez arrastramos a nuestro diseño un botón que colocaremos justo debajo del CampoDeTexto, y que en su propiedades pondremos el texto Añadir. Hasta aquí ya tenemos nuestro diseño, y que a tenido que quedar algo parecido a lo siguiente.

variable local

Ahora comenzaremos con la lógica, para ello pulsamos como siempre en el botón Bloques que se encuentra situado en la esquina superior derecha y que nos abrirá nuestro editor de bloques.
Lo primero que tenemos que hacer es hacer que cuando el usuario pulse el nuevo botón nuestro programa introduzca el contenido de nuestro CampoDeTexto al final de nuestra lista, pero antes tenemos que asegurarnos que el contenido de nuestro CampoDeTexto no está vacío. Vamos a ver cómo hacer esto en unos sencillos pasos, nos dirigimos como siempre a bloques → Screen1 → Boton2 y arrastramos a nuestro lienzo el bloque cuando Boton2 clic ejecutar seguido nos iremos a bloques → integrado → control y arrastramos el bloque si entonces justo debajo del bloque anterior, ahora en bloques → integrado → texto arrastraremos seguido del bloque  si entonces el bloque comparar texto y lo configuraremos de la siguiente manera en el primer hueco meteremos el que nos devuelve el texto contenido en el CampoDeTexto para ello iremos a bloques → integrado → Screen1 → TextBox1 y arrastraremos a ese hueco el bloque CampoDeTexto.Texto. Seguido pulsaremos en la flecha situada en el centro del bloque de comparación de texto, y seleccionaremos el signo, mayor que.

variable local

Por último en el hueco que queda meteremos un texto vacío, y para ello iremos a bloques → integrado → texto y arrastraremos el bloque entrecomillado. Esto lo que hará es comprobar que el contenido de la CajaDeTexto no esté vacío. Una vez hecho la siguiente comprobación vamos a introducir el elemento al final de la lista, siempre que la condición anterior sea cierta, para ello vamos a bloques → integrado → listas y arrastramos el bloque añadir el elemento a la lista lista item y lo situamos a continuación del entonces del si, y lo configuramos de la siguiente manera, a continuación de lista colocaremos nuestra variable global frutas y a continuación de item colocaremos el bloque CajaDeTexto.Texto. Ahora seguido borraremos el contenido del TextBox1, para evitar que se introduzca elementos repetidos, para ello como siempre iremos a bloques → integrado → Screen1 → CajaDeTexto y arrastraremos el bloque poner CajaDeTexto.texto como y lo situaremos justo debajo del conjunto de bloques anterior, ahora seguido de este bloque colocaremos un bloque de texto vacío, al final tiene que quedar algo igual a esto.

variable local

Ahora nuestro usuario ya puede introducir elementos al final de nuestra lista, pero nos surge un problema, desconocemos qué cantidad de elementos meterá, y por consiguiente desconocemos el valor máximo de la variable que controla la posición de los índices de la lista, pero no nos preocupemos App Inventor nos da un bloque con el que sabremos la longitud total de la lista en todo momento, y por consiguiente lo utilizaremos para saber el cual sera el ultimo indice de la lista, primero lo que haremos es eliminar el cuatro que utilizábamos para saber cuando llegábamos al final de nuestra lista.

variable local

y lo sustituiremos por el bloque que nos devuelva la longitud de la lista, para ello iremos a bloques → integrado → listas y arrastraremos al hueco el siguiente bloque, longitud de la lista lista, y que le pasaremos como parámetro una lista, y para ello utilizaremos la variable donde guardamos nuestra lista, nos quedará de la siguiente manera.

variable local

Ahora si ejecutamos nuestra aplicación con nuestro método favorito, veremos que en primer lugar, si pulsamos el botón “Índice + 1” para pasar de índice, seguirá funcionando igual, pero si en el cuadro de texto metemos una nueva fruta por ejemplo “Melón”, y pulsamos al botón de añadir, al pasar por la lista de nuevo, la lista contendrá la nueva fruta.

Bueno con esto creo dar por terminado el tema de listas, creo que con lo aprendido podreis por vosotros mismos intentar investigar y utilizar todos los bloques de las listas, para mejorar la app que ya hemos realizado. Para el próximo post estoy preparando el tema de operadores y expresiones en App Inventor 2, que sin duda llegados a este punto es de vital importancia.

Bueno sin mas, como siempre desearos que sea de utilidad lo aprendido, y hasta la próxima.
Un saludo.

domingo, 22 de abril de 2018

LISTAS EN APP INVENTOR 2. PARTE 1

¿QUE ES UNA LISTA?

Hoy nos toca hablar de las listas en App Inventor 2, es una herramienta muy potente que nos puede ayudar a  almacenar datos, como números de teléfono, nombres, puntuaciones, etc.

Con las listas podemos manejar estructuras de datos dentro de elementos, y se suelen utilizar en muchos lenguajes de programación, pero por contra tengo que decir que es un elemento complejo de entender y de utilizar, pero que una vez comprendido y asimilado podremos dotar a nuestra aplicación de una estructura de datos, que nos será de gran ayuda.

Vamos a ver un ejemplo de cómo se crea una lista en App Inventor 2, para ello crearemos un nuevo proyecto al que llamaremos EjemploListas,  una vez creado y con el proyecto abierto nos dirigimos a la pantalla de bloques, seguido arrastraremos un bloque para inicializar una variable global, a la que pondremos el nombre de Frutas, para ello iremos a bloques → integrados → variables y arrastramos al lienzo el bloque Inicializar global como

variable local

esta vez como dato le asignaremos una lista vacía, a la que más tarde rellenaremos los campos para ello nos dirigimos a bloques → integrados → listas y encajaremos en el bloque anterior el bloque crear una lista vacía.

variable local

Bien, ya tenemos creada nuestra lista ahora solo tendremos que introducir los datos en ella, para ello pulsaremos con el botón izquierdo del ratón en la rueda dentada de color azul situada en la esquina superior izquierda de nuestro bloque, y arrastraremos al interior tres elementos más,
variable local
con lo que hará un total de cuatro y a cada uno de ellos le asignaremos un bloque de texto con los siguientes nombres en orden Fresa, Manzana, Pera y Melocotón. Cada uno ocupará un índice.

variable local

¿QUE ES UN ÍNDICE?

Cada elemento en una lista tiene un índice. En App Inventor 2 a diferencia de otros lenguajes de programación, el primer elemento de una lista tiene el índice 1. En nuestra lista, Fresa tiene el índice 1, Manzana tiene el índice 2, Pera tiene el índice 3 y Melocotón tiene el índice 4.

Esto quiere decir que se puede hacer referencia a un elemento específico dentro de nuestra lista si sabemos qué índice tiene y el nombre de la lista que lo contiene. En nuestro caso el nombre de nuestra lista sería el nombre de la variable que lo contiene, Frutas, y el índice sería cada elemento de la lista.

UN EJEMPLO SENCILLO

Bien, ahora que ya hemos creado nuestra lista y tenemos alguna noción de que es un índice dentro de nuestra lista, vamos hacer una pequeña aplicación que recorra todo los elementos de nuestra lista. Lo primero antes de todo será crear nuestro layout para nuestro proyecto, donde tendremos una etiqueta que utilizaremos para mostrar cada uno de los nombres de nuestra lista,  para ello pulsaremos en el botón DISEÑADOR y en paleta → Interfaz de usuario arrastraremos el componente etiqueta dentro de nuestro layout, en sus propiedades cambiaremos el texto por “Lista de frutas”, seguido arrastraremos el botón que situaremos justo debajo de la etiqueta y que en sus propiedades cambiaremos el nombre por el de Índice +1, nos debe de quedar algo parecido a esto.

variable local
El aspecto estético de momento lo dejamos en este tutorial a un lado, pero siéntete libre de mejorarlo, como ejemplo, podrias poner tanto el texto como el botón centrados en la pantalla.

Dicho esto, sigamos, pulsaremos el botón de bloques y daremos comienzo a la programación de la lógica de la app, lo que trataremos de hacer es que al pulsar el botón, incrementaremos una variable que servirá para recorrer todos los elementos de la lista, y llegados al final de la lista volveremos al principio. La etiqueta mostrará en todo momento el valor del índice indicado con el valor de la variable, bien manos a la obra.

Utilizaremos una nueva variable global que utilizaremos como contador, para ello iremos a bloques → integrados → variables y arrastramos al lienzo el bloque Inicializar global como, esta vez como dato le asignaremos el valor numérico de 1 y como nombre le pondremos IndiceFrutas,

variable local
Bien, ahora crearemos un evento al pulsar el botón, para ello iremos a bloques → Screen1 → Boton1 y arrastraremos el bloque cuando boton 1 clic ejecutar. Ahora dentro de este bloque pondremos todo cuanto queremos que suceda al pulsar el botón, en primer lugar necesitamos actualizar el texto de nuestra etiqueta con el valor actual del índice de nuestra lista, para ello iremos a bloques → Screen1 → Etiqueta1 y la encajaremos justo debajo del bloque anterior, seguido iremos a bloques → integrados → Listas y arrastraremos el bloque seleccionar elemento de la lista índice y lo colocaremos a continuación del anterior. Ahora como elemento de la lista necesitamos el nombre de la misma, que en este caso es la variable frutas, para ello iremos a bloques → integrados → variables y arrastrará al bloque anterior tomar, y pulsando en el desplegable seleccionaremos global frutas. Ahora como índice necesitamos el valor de la variable creada para tal fin, para ello arrastraremos el mismo bloque que anteriormente utilizamos, pero esta vez en el desplegable seleccionaremos global IndiceFrutas,   nos tiene que quedar como la imagen.

variable local
Bien ahora necesitamos incrementar la variable que utilizamos de contador para que al pulsar esta incremente su valor en 1, para ello iremos a bloques → integrados → variables y encajaremos justo debajo de los anteriores bloques el bloque poner a, y seguido en bloques → integrados → matemáticas el bloque de sumas, en este mismo bloque, en su primer hueco introduciremos la misma variable y en el segundo meteremos un 1.

variable local

Bien ya casi lo tenemos si ejecutamos nuestra aplicación veremos que funciona, hasta llegar al último índice, que al pulsar de nuevo nos mostrará un mensaje de error ya que intenta mostrar un índice que no existe (el número 5), para evitar esto necesitamos decirle que si nuestra variable índice frutas es mayor de 4, que la vuelva a poner a 1, para ello utilizaremos un bloque condicional “si” que trataremos en siguientes tutoriales, y que por ahora solo debes saber que controlara que nuestra variable nunca valga más de 4.

Para ello iremos a bloques → integrados → control y arrastramos el bloque Si entonces justo debajo de los anteriores, ahora iremos a bloques → integrados → matemáticas arrastraremos el bloque en el que tiene un signo “=” y pulsando en la flechita seleccionaremos el comparador de mayor que “>”, en su primer hueco pondremos la variable IndiceFrutas y en el segundo el valor de 4, más abajo en el hueco donde dice “entonces” que es la parte que ejecutara si es cierta la condición de más arriba, daremos el valor de uno a nuestra variable.

variable local

Bien ahora solo nos queda ejecutar nuestra aplicación con nuestro método favorito y ver que a la hora de pulsar el botón, recorrera la lista de frutas, volviendo al principio una vez llegado al final.

Bien esto es todo, en siguientes entregas veremos más ejemplos del uso de listas, ir practicando y no olvides comentar cualquier duda al respecto, espero que sea de gran ayuda.

Hasta la próxima.

domingo, 15 de abril de 2018

VARIABLES LOCALES EN APP INVENTOR 2

Variables locales en App Inventor 2.

Las variables locales a diferencia de las variables globales en App Inventor 2, sólo son accesibles en la parte a ejecutar del bloque, es decir no se podrán consultar o darles valor fuera del mismo bloque o función. Vamos a ver un ejemplo, para ello abriremos en nuestro navegador App Inventor, después en mis proyectos seleccionaremos el proyecto que creamos para tratar el tema de las variables globales, en mi caso “leccion1”, seguido pulsaremos en bloques y una vez situados en esta pantalla nos iremos a bloques → integrados → variables y seleccionaremos el bloque “inicializar local como en”

variable local

que arrastraremos y encajaremos a continuación del bloque “cuando screen1 inicializar ejecutar”,

Cuando inicio pantalla

en el cuadro donde ahora nos pone nombre, le pondremos el nombre que queramos que tenga nuestra variable local, en mi caso yo le pondré el nombre de “MiVariableLocal”.

Cuando inicio pantalla

Ahora toca inicializarla con un valor tal como hicimos en el anterior artículo, en el que hablamos de las variables globales, y que podíamos inicializarlas con números enteros (INT), cadenas de texto (String) o con valores booleanos (True o false). En mi caso y a modo de ejemplo, lo iniciare con un valor entero, para ello iremos a bloques → integrados → matemáticas y escogeremos el cuadro que contiene en su interior un cero,

Cuando inicio pantalla

lo arrastramos y colocamos en el bloque “inicializar variable local”, justo a continuación del como, y le daré el valor de 242, vosotros podéis darle el valor que queráis.
Cuando inicio pantalla
Una vez inicializada la variable local, solamente nos falta utilizarla, y para ello utilizaremos el bloque “poner etiqueta1.Texto como”
que ya teníamos del anterior ejemplo y que arrastraremos al interior del bloque de la variable local, pues bien, si pulsamos dentro del cuadro de la variable que acompaña dicha etiqueta para seleccionar una variable, veremos que entre las variables globales ya declaradas se encuentra nuestra variable local y que podremos utilizar solamente dentro de este bloque.
Cuando inicio pantalla
Si quisiéramos utilizarlo fuera del mismo nos sería imposible y para ello podemos hacer la prueba, arrastra el bloque de la etiqueta fuera del bloque de la variable local y veras que es imposible seleccionarla porque entre el listado de variables que nos muestra el desplegable no se encuentra nuestra variable local.

También decir que una variable local se puede declarar con el mismo nombre de una variable global y ejecutar nuestra aplicación sin ningún problema.

Si nos fijamos en el bloque que declara variables locales en su esquina superior izquierda podremos observar que nos encontramos con una rueda dentada de color azul si pulsamos nos dará la opción de declarar más de una variable local arrastrando el bloque nombre dentro del bloque nombres locales.
Cuando inicio pantalla

Bueno con esto queda explicado el tratamiento de variable s locales en App Inventor 2. Cómo siempre esperando que sea de vuestra ayuda este artículo.
Un saludo.

jueves, 15 de marzo de 2018

VARIABLES Y DEPURACIÓN

VARIABLES Y DEPURACIÓN

Bienvenido querido lector, en esta segunda entrega de este magnífico curso que te enseñará a programar en App Inventor, tocaremos el tema de las variables, no te asustes es muy sencillo y verás como después de está lección serás capaz de entender cómo funcionan las variables y como usarlas, te advierto que es un tema muy importante en programación así que adelante.

 

Bien, una vez abierto la página de App Inventor nos iremos directamente al proyecto que abrimos en la primera lección, en mi caso abriré el proyecto “lección1” y pulsaremos en la pestaña de bloques, en la que se nos abrirá nuestro proyecto con los bloques que teníamos anteriormente y que mostraban un mensaje en la pantalla de nuestro dispositivo, y que veremos que es muy útil para las siguientes elecciones.

 

Bien comencemos, nos iremos a bloques –> integrados y seleccionaremos variables, de los bloques que saldrán al lado derecho seleccionaremos variable global.

variable global

Decir que este tipo de variables una vez declaradas son accesibles desde cualquier punto del programa. Existen varios tipos de variables se puede inicializar una variable con un número entero, con números decimales, con string (con una cadena de texto) y se pueden inicializar variables boleana, que su valor sería cierto o falso.

Bien en este primer caso lo primero que haremos es cambiar el nombre de la variable y pondremos saludo. Después iniciamos la variable con un tipo String, para ello iremos a paleta integrados seleccionaremos texto y añadiremos a continuación el cuadro de texto vacío que está entrecomillado, no pondremos nada, lo dejaremos vacío.
inicializa variable global

Ahora declararemos otra variable de tipo numérico, para ello iremos a bloques -> integrados -> variables y escogeremos el bloque inicializar global, y le pondremos a esta variable el nombre de números. Después nos dirigiremos a paleta -> integrados -> matemáticas y seleccionaremos el bloque que contiene un cero lo encajaremos a continuación del bloque anterior.
inicializa variable global

Seguido inicializamos una variable de tipo booleana, para ello haremos como en las anteriores ocasiones,  iremos a bloques -> integrados -> variables y seleccionamos el bloque inicializar global como, le llamaremos boleana, ahora en bloques -> integrados -> lógica le asignaremos el valor de cierto a continuación del bloque que añadimos.
inicializa variable global
Veremos que este último bloque que hemos añadido tiene una flechita hacia abajo en su interior, si pulsamos dentro saldrá un desplegable  con las múltiples opciones que podemos poner, ya tenemos seleccionado cierto, pero también podríamos haberlo puesto como falso.

inicializa variable global
Una vez inicializadas estas variables vamos a colocarles un valor, para ello iremos a bloques -> integrados -> variables y escogeremos esta vez el bloque poner variable a, qué situaremos en el interior del bloque cuándo Scream 1 inicializa, que pusimos en el anterior lección.
inicializa variable global
Esta vez en el interior de este bloque tendremos una flechita, si pulsamos en la flechita se nos desplegará listado de variables disponibles inicializadas anteriormente, escogeremos en este caso la variable global saludo.

inicializa variable global
Después nos iremos a bloques -> integrados -> texto y seleccionaremos el cuadro vacío entrecomillado que pondremos a continuación del bloque anterior y escribiremos dentro “Hola mundo Android”, en este momento le estamos diciendo al programa que está variable vale eso, es decir esta variable contendrá el texto “Hola Mundo Android”.

En el bloque de texto que tiene puesto a continuación de poner etiqueta cómo, seleccionaremos y arrastraremos a la papelera de reciclaje, seguido iremos a paleta integrados seleccionaremos variable y escogeremos el bloque tomar variable, que arrastraremos junto al bloque de la etiqueta y le haremos encajar.
inicializa variable global
Seguido pinchamos en la flechita que tiene dentro este bloque y seleccionaremos dentro de las listas la variable saludo.
inicializa variable global
Si ejecutamos nuestra aplicación con nuestro método favorito veremos que el texto que contiene la etiqueta ha cambiado y que ahora mostrará el texto que le hemos guardado en la variable. Ves que potencial tiene esto, veremos más ejemplos.

Ahora lo que haremos es cambiar el bloque poner variable saludo a y lo cambiaremos por poner variable números a para introducir su valor iremos a paleta -> integrados -> matemáticas y seleccionaremos el bloque que contiene un cero dentro, lo arrastraremos a continuación del bloque anterior y le pondremos el valor de 565 como ejemplo.
inicializa variable global

En el bloque que usamos junto a la etiqueta de texto le cambiaremos la variable que cogemos saludo por la variable números.

Ahora ejecutamos nuestra aplicación y veremos que en vez de salir un saludo saldrá el valor numérico que le hemos metido en la variable.

Ahora haremos otra vez lo mismo, seleccionaremos tomar variable números y la cambiaremos por tomar variable booleana, en el  lugar de número entero pondremos el valor de falso para ello iremos a paleta-> integrados -> lógica y arrastraremos el bloque falso.
inicializa variable global
Bien ahora llegado a este punto probaremos nuestro programa en nuestro dispositivo, veremos qué en la pantalla en vez de salir el número, saldrá la palabra falso, que es el valor que tiene esta variable.

Muchas veces o en la mayoría de ocasiones, cuando nuestro programa crezcan en complejidad necesitaremos saber qué valor tienen ciertas variables, que no  mostraremos por pantalla, pero que si necesitamos saber su valor, para ello tenemos una opción de depuración que nos ofrece App Inventor y es muy sencilla, mientras que esté ejecutando la aplicación en nuestro dispositivo o emulador, con el botón derecho del ratón pinchamos en la variable en la que queremos obtener su valor, del desplegable seleccionaremos la opción “do it”(Haz o ejecuta).
inicializa variable global
se desplegará un globo y nos mostrará el resultado de la variable, si está variable está dentro de una operación matemática o es equivalente a una operación matemática nos dará el resultado final.

inicializa variable global

 

jueves, 1 de febrero de 2018

NUESTRA PRIMERA INSTRUCCIÓN EN APP INVENTOR 2

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
Disposicionvertical

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.

Propiedades Disposicionvertical

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.

IdiomaAppInventor2

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,

Propiedades

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
Etiqueta
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
PropiedadesEtiqueta
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,
Screen1Inicializa
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 “ ”,
Bloquetexto
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.
AñadirComentario
Veremos que saldrá en la esquina superior izquierda del bloque un circulo azul con un signo de interrogación dentro.
CirculoAzul

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

jueves, 11 de enero de 2018

VACIAR MOCHILA EN APP INVENTOR 2

COMO USAR LA MOCHILA EN APP INVENTOR 2.

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

martes, 2 de enero de 2018

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.

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...