miércoles, 24 de octubre de 2018

COMPONENTE FILE (ARCHIVO) EN APP INVENTOR 2

¿QUE ES EL COMPONENTE ARCHIVO?

Es un componente no visible que sirve para recuperar o guardar archivos de texto plano en el dispositivo, se puede escribir archivos en el directorio privado de la aplicación, donde no podrá ser accedido por ninguna otra aplicación del dispositivo. Pero si la dirección del archivo comienza con una barra invertida (/), el archivo se guardará en la tarjeta de memoria.

¿UN EJEMPLO SENCILLO?

Bien en nuestro ejemplo crearemos una simple aplicación donde podremos anotar  lo que queramos a modo de notas, podremos guardarlo y más tarde recuperarlo, para si queremos modificarlo,  para ello lo que haremos es crear el layout donde utilizaremos un VerticalScrollArrangement,  en donde introduciremos una Etiqueta y una DisposiciónHorizontal, dentro de esta disposición horizontal pondremos tres botones, uno para cargar el texto, otro para guardarlo, y por último un botón para poder editar texto, en un CampoDeTexto. Por último y no menos importante necesitaremos dos componentes no visibles, un Notificador,  que nos avisara si se ha guardado correctamente nuestro archivo o si se ha cargado sin ningún problema, y un componente File.

Como el objetivo de este tutorial es el de ver el uso del componente File, el diseño vamos a dejarlo en un segundo plano, mostraré las capturas de como me ha quedado a mi y mas abajo podreis descargar el proyecto.

LA LÓGICA DE NUESTRO EJEMPLO

Lo primero que vamos a necesitar es una variable global que contendrá un cuadro de texto vacío, a la que daremos el nombre de Texto.

Ahora lo que necesitamos es pasar lo que escribamos en nuestro campo de texto a nuestra etiqueta, indiferentemente si ya teníamos algo escrito o no, usando nuestro botón  BTNponertxt, para ello necesitamos hacer que cuando el usuario pulse el botón, ponga la etiqueta TextNota con el resultado de unir el texto que contenga TextNota (si lo tuviera), con el de la caja de texto. Tiene que quedar de la siguiente manera.

Bien, el siguiente paso podría ser guardar el texto en un archivo dentro de nuestro dispositivo, para asegurarnos de que la próxima vez que abramos la aplicación podamos recuperarlo. para ello necesitamos que al pulsar nuestro botón BTNGuardar la variable global Texto obtenga el texto de nuestra etiqueta TextNota, y seguido guardar la variable en un fichero con el nombre de txtNota.txt. quedará de la siguiente manera.

Vamo a necesitar saber si se a guardado correctamente, para ello necesitamos el bloque cuando Archivo1.AfterFileSaved que nos indicará si el contenido de un archivo a sido escrito, y si es cierto llamaremos al nuestro componente notificador, que mostrará un cuadro de diálogo mostrando un mensaje, que será el resultado de unir dos textos. En primer lugar será tomar el nombreDeArchivo y lo uniremos con un bloque de texto vacío que en su interior pondremos el texto “Se guardó con éxito.” en el título pondremos el texto “Aviso” y en textoEnBotón “Aceptar”. Tiene que quedar de la siguiente manera.

Bien ya hemos creado un texto, con ayuda de un botón lo guardamos y ahora solo nos falta cargar el texto guardado. Para ello cuando pulsemos nuestro botón BTNCargar.Clic llamaremos a nuestro componente llamar Archivo.LeerDesde y en nombreDeArchivo pondremos un bloque de texto con el nombre del archivo con el que se guardó. Quedará de la siguiente manera

Igual que cuando guardamos nuestro archivo, mostramos un cuadro de diálogo para decirle al usuario que todo estaba correcto, ahora haremos lo propio utilizando el bloque cuando Archivo1.ObtuvoTexto que llamara si es cierto al bloque llamar Notificador1.MostrarDiálogoMensaje, en donde el mensaje pondremos el texto “Se cargó con éxito” en título el texto “Aviso” y en el textoEnBotón “Aceptar”. Por último pondremos el texto de nuestra etiqueta TextNota con el valor de nuestra variable local texto, quedando de la siguiente manera.

Bien, si ahora ejecutamos la aplicación con nuestro método favorito, podremos escribir en la caja de texto, pulsando el botón de añadir texto copiarlo a nuestra etiqueta, guardar el texto y volverlo a cargar pulsando en los respectivos botones.

Aquí tienes el enlace del proyecto de ejemplo en formato AIA para App Inventor.

Ejemplo App Inventor

Bueno, sin mas me despido esperando que este post te sea de utilidad, tanto si estás empezando como si estas atascado en algún proyecto.

No olvides dejar algún comentario y no dejes de compartirlo.

Un saludo.


domingo, 7 de octubre de 2018

CAMBIO DE PANTALLA Y PASO DE DATOS CON TINYDB

Hola bienvenidos una vez más a inventordeaplicaciones.es, en esta nueva serie de post vamos a ver cómo manejar los datos en App Inventor 2.

A medida que nuestras aplicaciones crezcan en tamaño nos será de gran utilidad saber guardar datos, tanto para guardarlos de manera local en un dispositivo, como en la nube, para ello App Inventor ofrece distintas herramientas y nosotros veremos cómo se manejan en una serie de tutoriales que contendrá ejemplos prácticos, que una vez realizados obtendrás los conocimientos suficientes para crear aplicaciones que manejan todo tipo de datos. Empezaremos por los más sencillos, y terminando por los más avanzados. Bueno sin mas empecemos.

CAMBIO DE PANTALLA Y RECUPERACIÓN DE DATOS

En este primer ejemplo crearemos una aplicación con dos pantallas, en la primera, se nos pedirá que ingresemos nuestro nombre y edad, y pulsando un botón, abriremos la segunda pantalla, en la que recuperaremos los datos de la primera para construir una frase de bienvenida, para conseguir esto, necesitaremos guardar el valor de nuestras variables para más tarde utilizarlas, para ello utilizaremos el componente TinyDB.

QUE ES EL COMPONENTE TinyDB

TinyDB es un componente no visible que puede almacenar datos.

Las aplicaciones creadas con App Inventor se inicializan cada vez que se ejecutan, es decir, si inicializamos una variable con algún valor y salimos de la aplicación, el valor de esa variable se borrara, y no estará la próxima vez que se ejecutemos la aplicación.

TinyDB es por así decirlo un  almacén de datos persistente para la aplicación, de esta manera los datos estarán disponibles cada vez que se abra la aplicación.

Un ejemplo puede ser un juego que guarda las puntuaciones más altas cada vez que se juega.

Los datos se almacenan en etiquetas. Para almacenar datos, se debe de especificar la etiqueta que corresponde a ese dato dándole así una identificación, por ejemplo, continuando con el ejemplo del juego, la puntuación podría ser “2548” puntos, que la guardaremos en TinyDB con una etiqueta llamada “Puntuación”, de esta manera cada vez que queramos acceder a ese dato solo tendremos que referirnos al nombre con que se guardó, en este caso “Puntuación”.

Solamente existe una base de datos para la aplicación. Aunque se utilicen distintos componentes TinyDB en una aplicación, todas ellas serán el mismo almacén. A si en el ejemplo que veremos más adelante, cada pantalla tendrá un componente TinyDB, pero todo lo que guardemos estará ubicado en el mismo almacén. Se deben utilizar distintas etiquetas  para guardar diferentes datos, y no usar diferentes almacenes. TinyDB es única para cada aplicación, es decir no la podremos utilizar para pasar datos a otras aplicaciones instaladas en el mismo dispositivo, pero si la podremos utilizar para pasar datos entre las distintas pantallas de la misma aplicación.

CREANDO EL DISEÑO DE NUESTRAS PANTALLAS

Para nuestro ejemplo necesitamos dos pantallas, en la primera pantalla se le preguntará al usuario su nombre y edad, para ello utilizaremos dos etiquetas, dos cajas de campo de texto, un botón que te servirá para guardar los datos introducidos y cargar la segunda pantalla, y un componente no visible TinyDB.  La segunda pantalla mostrará un mensaje de bienvenida utilizando el nombre que anteriormente introdujo el usuario, más abajo mostrará si el usuario es mayor de edad o no lo es, para ello utilizaremos los datos de edad que introdujo, para esta segunda pantalla sólo utilizaremos dos etiquetas, en la primera pondremos el texto  “¡BIENVENIDO”, y en la segunda etiqueta la dejaremos vacía, más adelante la rellenaremos usando nuestro programa. Nos tiene que quedar de la siguiente manera.

Como el propósito de este post es ver la utilización del componente TinyDB no nos centraremos mucho en el diseño, mas adelante podras descargar el archivo del proyecto para que veas como yo he estructurado el diseño de los componentes.

CREANDO LA LÓGICA DEL PROGRAMA

Bien lo que necesitamos es que cuando el usuario introduzca en los campos de texto el nombre, edad y pulsemos el botón, guarde la información y cargue otra pantalla, pero antes tenemos que asegurarnos de que el los campos de texto no están vacíos, además de una buena práctica en programación, nuestra aplicación no sería muy funcional, a esto añadiremos un mensaje al usuario avisando que tiene que rellenar toda la información.

Lo primero inicializamos las variables globales, la primera la llamarás nombre y a la segunda edad, ambas contendrán un bloque de texto vacío.

Seguido arrastramos el bloque Cuando BTNGC.Clic al visor e introduciremos dentro un bloque condicional SI. Este bloque lo utilizaremos para para comprobar si las cajas de texto están vacías, para ellos introduciremos dentro el bloque de lógica ”O” y dentro del mismo en el primer hueco colocaremos un bloque de texto está vacío que devolverá cierto si la longitud del texto es 0, y a este le uniremos CTNombre.texto. Para el segundo hueco del bloque introduciremos la misma combinación de bloques, cambiando el bloque CTNombre.texto por el de CTEdad.texto.

Volviendo al bloque SI a continuación del entonces colocaremos el bloque Llamar notificador1.Mostrar Alerta de nuestro componente no visible notificador, al que en su hueco aviso pondremos el siguiente texto, “POR FAVOR RELLENE TODOS LOS CAMPOS”.  Tiene que quedar de la siguiente manera.

De esta manera si el usuario pulsa el botón y falta rellenar algún campo o los dos, mostraremos el aviso, y la aplicación no cambiará de pantalla.

Una vez comprobado que el usuario a cumplimentado la información, vamos a pulsar en la rueda dentada del bloque if, y le vamos a añadir el bloque si no, dónde pondremos las variables anteriormente inicializadas con el valor de las cajas de texto, utilizaremos dos bloques poner global donde uniremos los contenidos de la caja de texto. Quedará de la siguiente manera.

Ahora colocaremos justo debajo un bloque Llamar TinyDB. guardar valor , y en el hueco correspondiente a etiqueta pondremos el texto “NOMBRE” este será el nombre con el que guardaremos nuestro dato contenido en la caja de texto, para más tarde recuperarlo. Ahora en el hueco correspondiente aValorAGuardar pondremos el dato a guardar que será nuestra variable global nombre. Seguido colocaremos otro bloque Llamar TinyDB. guardar valor pero esta vez en etiqueta pondremos “EDAD” y en ValorAGuardar pondremos la variable global edad.

Quedará de la siguiente manera.

Solo nos falta una última cosa ahora que tenemos los datos guardados, y es abrir nuestra segunda pantalla, para ello colocaremos un bloque Abrir otra pantalla nombre de la pantalla, al que le uniremos el nombre de nuestra segunda pantalla, en este caso Screen2. Todo quedará de la siguiente manera.

Ahora sin salir de la pantalla de bloques seleccionaremos nuestra segunda pantalla, en esta segunda pantalla recuperaremos los datos guardados en la primera pantalla, y construiremos una frase con ellos.

lo primero que vamos a hacer es crear dos variables globales iguales a las de la primera pantalla y le daremos el mismo nombre.

Ahora utilizaremos el bloque cuando Screen2 inicialize para una vez iniciada esta pantalla, poder recuperar los datos sin que el usuario tenga que hacer nada. Ahora daremos valor a nuestras variables globales utilizando para ello los bloques llamar TinyDB.ObtenerValor que en su hueco etiqueta utilizaremos el nombre de la etiqueta con el de la guardamos respetando las mayúsculas y minúsculas, si no la hacemos dará error. Para el campo Valor SiEtiquetaNoExiste podemos poner ERROR, una vez unido todos los bloques nos tiene que quedar de la siguiente manera.

una vez recuperado nuestros datos utilizaremos estos para crear nuestro mensaje, para ello nos ayudaremos del bloque poner etiqueta1.texto al que añadiremos un bloque de texto unir. Necesitaremos añadir el texto que ya tenía la etiqueta1, los valores guardados en la pantalla Screen1,  para ello utilizaremos el bloque etiqueta1.Texto, más un espacio, utilizando el bloque de texto entrecomillado vacío, más el valor que se ha guardado en la variable nombre, y por último añadiremos un bloque de texto con el símbolo cerrado de exclamación.

Una vez unidos todos los bloques nos tiene que quedar de la siguiente manera.

Ahora vamos a comprobar que el dato guardados en la variable edad sea menor de 18, si esto fuera cierto mostraremos el siguiente mensaje “Lo sentimos eres menor de edad” en caso contrario mostraremos este otro “Genial eres mayor de edad”.

Para hacer esta comprobación utilizaremos el bloque condicional SI, utilizaremos también los datos contenido en nuestra variable edad, para ello utilizaremos el bloque tomar global edad, un bloque matemático de comparación menor que < y el bloque matemático vacío que en su interior pondremos 18. Por último, pulsando la rueda dentada superior izquierda del bloque  SI, le añadiremos el bloque SI NO. Dónde en caso contrario a lo anterior pondremos el texto “genial eres mayor de edad” para ello utilizaremos el bloque poner etiquetas2.como y un bloque de texto que contengan en  el interior el texto antes mencionados. Unidos quedarán de la siguiente manera.

Solamente nos queda ejecutar nuestra aplicación con nuestro método favorito, pero antes nos aseguramos de estar en la Screen1 de lo contrario nuestra aplicación comenzará a ejecutarse desde Screen2, y no obtendremos los resultados deseados.

bueno creo haber explicado bastante bien los bloques TinyDB, siéntete libre de hacer cualquier tipo de comentario o duda que quieras resolver, y si te ha gustado compártelo.

DESCARGA  EL PROYECTO DE EJEMPLO

domingo, 30 de septiembre de 2018

PROCEDIMIENTOS EN APP INVENTOR 2 (PARTE 2)

Hola, el artículo que vamos a tratar es la continuación o segunda parte de los procedimientos en App Inventor 2. Si recuerdas vimos que era un procedimiento, cómo se declaraba, y como podíamos declarar parámetros dentro de los mismos. Pues bien, ahora vamos a ver cómo usar un procedimiento para que nos devuelva un resultado.

UN PROCEDIMIENTO QUE DEVUELVA EL IVA

Lo primero que haremos es abrir App Inventor, y seleccionaremos el proyecto anteriormente guardado como Procedimientos, si tu le llamaste de otra manera, es lo mismo, abre el proyecto con el nombre que lo guardaste.

Ve a la pantalla de diseño y arrastra dos nuevas etiquetas al visor, la primera etiqueta, le pondrás el tamaño de letra en 24 y el texto “El precio con iva es:”, en la segunda cámbiale el tamaño de letra en 24, y la casilla de texto esta vez déjala vacía, esta etiqueta nos mostrará el resultado de nuestro procedimiento.

Ahora dirígete a la pantalla de bloques, y arrastra un nuevo procedimiento que devuelve un resultado, el bloque es este:

Le vamos a cambiar el nombre por el de CalculoPVP, ya que en nuestro ejemplo lo que hará este procedimiento es devolver el precio de venta al público, pasando en sus parámetros el precio y  el IVA. (En España el IVA es impuesto sobre el valor añadido o de impuesto sobre el valor agregado, si no resides en España sigue el ejemplo tal cual, solo es para demostrar la funcionalidad de estos bloques o bien puedes adaptarlo al impuesto de tu país). Para ello, pulsamos en la rueda dentada de la esquina superior izquierda del bloque, y le añadiremos dos nuevos parámetros, que como ya hemos dicho, le pondremos el nombre de Precio e IVA. Ahora en el interior del bloque procedimiento, haremos nuestro calculo, que será la multiplicación del precio por el iva, para ello arrastraremos el bloque matemático multiplicación, y dentro añadiremos nuestros parámetros Precio e IVA, si te das cuenta estos parámetros se comportan como variables locales.

Tiene que quedar de la siguiente manera.

Bien, ahora solo te queda un paso más, y es mostrar el resultado del cálculo en nuestra etiqueta, para ello en nuestro bloque, Cuando Screen1.Inicializa añadiremos el bloque Poner etiqueta5.Texto como, y a este mismo le añadirás nuestro bloque llamar a calculoPVP, que en su parámetro Precio, pondremos 10, y para su parámetro IVA le pondremos 1.21. Tiene que quedar de la siguiente manera.

Ahora solo tienes que ejecutar la aplicación con el método que tu prefieras, y el resultado tiene que ser este.

Seguro que te has dado cuenta de que el resultado es 12.1 cuando tenía que ser 12.10, eso pasa porque el resultado solo muestra un decimal, pero como a ti te gusta hacer las cosas bien, vamos arreglarlo. Para ello nos vamos a los bloques de matemáticas y arrastramos el bloque dar formato decimal al número y lo arrastramos entre nuestra etiqueta y nuestro procedimiento, en el hueco decimales pondremos el bloque numérico 2, quedando de la siguiente manera.

de esta manera el resultado mostrará el número de decimales correcto, vamos a comprobarlo ejecutando nuestra aplicación.

Bien, llegados al final de este post, solo me queda despedirme y desear que lo que aquí ves, te sea de gran utilidad para tus proyecto. Me gustaría tu participación en este blog, si tienes alguna pregunta o comentario que hacer, por favor quiero que lo hagas. Además que compartas esta publicación en tus redes sociales y no dejes de comentar.

https://youtu.be/8_4COB_rFOI

domingo, 23 de septiembre de 2018

PROCEDIMIENTOS EN APP INVENTOR 2 (Parte 1)


¿QUE ES UN PROCEDIMIENTO?

Los Procedimientos son un elemento muy utilizado en la programación. Empaquetan y ‘aíslan’ del resto del programa, una parte de código que realiza alguna tarea específica. Son por tanto un conjunto de instrucciones que ejecutan una tarea determinada y que hemos encapsulado  para que nos sea muy sencillo de manipular y reutilizar. De esta manera no hace falta escribir una y otra vez el código, solo con llamar al procedimiento estaremos invocando a una parte del código, sin tener que copiar o manejar gran cantidad de bloques, simplificado a si la tarea de programar y consiguiendo un código más limpio.

UN EJEMPLO SENCILLO

Lo vemos con un ejemplo muy simple, un procedimiento que llamaremos “saludo”, que nos da una idea del funcionamiento general.

Para ello como siempre abriremos App Inventor y nos dirigiremos a nuestra pantalla de diseño, a la que arrastraremos una etiqueta, le cambiaremos el tamaño de letra a 24 y la casilla de texto la dejaremos vacía. Bien una vez hecho esto, nos dirigimos a la pantalla de bloques y en  pantalla arrastraremos nuestro bloque procedimiento, al que le cambiaremos el nombre que viene por defecto y le llamaremos saludo, seguido le uniremos el bloque poner etiqueta1.texto como, al que le añadiremos el siguiente texto “ Hola, este es el resultado del procedimiento saludo” y seguido uniremos también el bloque poner etiqueta1.colorDeTexto como al que le añadiremos el color rojo, tiene que quedar de la siguiente manera.

Bien ahora solo nos falta llamar al procedimiento, para ello utilizaremos el bloque cuando screen1.inicializa y dentro añadiremos el bloque “llamar Saludo”. Este bloque se ha generado automaticamente cuando hemos creado el procedimiento, y está situado en bloques → integrados → procedimientos. Tiene que quedar de la siguiente manera.

Bien ahora ejecutaremos la aplicación con nuestro método favorito, teniendo como resultado la siguiente imagen.

PROCEDIMIENTO CON PARÁMETROS

Los procedimientos en App Inventor se les puede añadir parámetros, para ello los bloques procedimientos contienen en su esquina superior izquierda una rueda dentada con la que podremos añadir tantos como necesitemos.

Como ejemplo del uso de parámetros vamos a crear un procedimiento muy simple, que nos dará un resultado dependiendo del valor que le pasemos en el parámetro. En este caso calculará el volumen de una esfera según el valor del radio (R). La fórmula de dicho volumen es: 4/3 * π  * R3.

Antes de comenzar añadiremos dos nuevas etiquetas a nuestro diseño, etiqueta2 y etiqueta, a la primera le cambiaremos el tamaño de letra a 24, y pondremos de texto “EL RESULTADO DEL CÁLCULO ES:”. A etiqueta3, le pondremos el tamaño de letra en 24, y la casilla de texto la dejaremos vacía.

Ahora solo nos queda programar la lógica de nuestra aplicación.  

Para ello crearemos una variable global a la que nombraremos como VolumenEsfera y que tendrá el valor de cero, y un nuevo procedimiento  al que le daremos el nombre de CálculoEsfera, y pulsando en la rueda dentada añadiremos un parámetro al que daremos el nombre de R2.

Seguido crearemos la fórmula matemática de nuestro ejemplo 4/3 * 3,14  * R2*R2*R2, donde R2 es nuestro nuevo parámetro, que sacaremos situando el cursor encima de dicho parámetro, y arrastrándolo a la posición que queramos dentro del código.

o bien arrastrando un bloque tomar variable, y seleccionando nuestro parámetro. Toda esta fórmula la asignaremos a nuestra variable global VolumenEsfera, que a su vez colocaremos dentro de nuestro bloque de procedimiento. Tiene que quedarnos de la siguiente manera.

Antes de continuar quiero aclarar que en App Inventor los parámetros definidos dentro de los procedimientos, son denominadas variables locales, y no pueden ser accedidas desde el exterior del procedimiento.  

Esta es una práctica muy recomendable que debemos seguir para que no entren en conflicto con otras variables del mismo nombre que puedan existir en el resto del programa, incluyendo las que pueden estar dentro de otros procedimientos que también hayamos definido en dicho programa.

Bien dada la explicación pasaremos a colocar dentro de nuestro procedimiento un bloque poner etiqueta3.como al que le añadiremos un bloque tomar variable, en el que escogeremos nuestra variable global VolumenEsfera, de esta manera nuestra etiqueta3 mostrará el cálculo del procedimiento, y quedará de la siguiente manera.

Lo siguiente y último por hacer es llamar a nuestro procedimiento, para ello nos dirigimos a bloques → integrados → procedimientos y escogeremos el bloque que se ha creado automáticamente al crear nuestro procedimiento y que situaremos en el bloque cuando Screen1.inicializa para que lo llame nada más arrancar nuestra aplicación, solo nos queda una última cosa, dar valor al parámetro que creamos en el procedimiento “R2”, aquí dejo que pongas el valor que tú quieras, yo para este ejemplo le pondré 1. Tiene que quedar de la siguiente manera.

Si  ejecutamos nuestra aplicación veremos el resultado del cálculo, podemos variar el valor de R2 para ver distintos resultados.


Bueno sin más me despido esperando que este artículo te sea de ayuda en tus futuros proyectos, no dudes en comentar cualquier duda. Un saludo.

https://youtu.be/d6rDGbTnbfc

martes, 18 de septiembre de 2018

BLOQUE BREAK EN APP INVENTOR

BLOQUE BREAK EN APP INVENTOR

Hola y bienvenido una vez más a una nueva entrega del curso que te enseñará a programar en App Inventor, hoy veremos los nuevos bloques break, y digo nuevos, por que hasta hace poco el MIT no los a introducido en nuestra herramienta favorita, veremos su uso, que es muy fácil, y las posibilidades que nos brinda, sin más empecemos.

¿QUE ES UN BLOQUE BREAK?

La instrucción break se utiliza con las instrucciones de bucle foreach y while.

En los bucles, la instrucción break finaliza la ejecución de la instrucción, foreach o while más próxima. El control pasa a la instrucción que hay a continuación de la instrucción finalizada, si hay alguna.

UN EJEMPLO DE BREAK

Bien vamos a ver un pequeño ejemplo de cómo usar este bloque en App Inventor, no te preocupes es muy sencillo.

Lo primero es dirigirnos a App Inventor y abrir un nuevo proyecto, yo le pondré el nombre de BREAK pero le puedes dar el nombre que quieras. Una vez abierto nuestro proyecto en la ventana de diseño arrastraremos dos etiquetas, y en las dos pondremos el tamaño de letra en 24, y la casilla de texto vacía tal como muestra la imagen.

Ahora nos dirigimos a la pantalla de bloques, y con nuestra etiqueta1 haremos un bucle While, para ello usaremos una variable global, a la que llamaremos contador, y que inicializamos a 0, Despues usaremos el bloque “cuando Screen1.Inicializa, donde meteremos nuestro bloque While, de esta forma al arrancar la aplicación iniciara el bucle. Ahora en el bucle While, le pondremos la condición de que se repita siempre que la variable contador sea menor que diez, y dentro del bucle, y a modo de interacción sumaremos 1 a la variable contador, y añadiremos a la etiqueta texto el valor de la variable contador. Tiene que quedarnos de la siguiente manera.

Ahora  con nuestra etiqueta2 haremos un bucle For each que pondremos a continuación dentro del bloque “Cuando screen1. Inicializar” justo debajo del bucle while, para ello en primer lugar crearemos una segunda variable global, a la que llamaremos contador 2, ahora en el bucle for each pondremos en desde, el valor de 1, en hasta el valor de 10, y en incrementos de,  el valor de 1, seguido y dentro del bucle, y a modo de interacción sumaremos 1 a la variable contador2, y añadiremos a la etiqueta2 el valor de la variable contador2. Todo tiene que quedar de la siguiente manera.

Bien ahora usaremos el bloque break para interrumpir los bucles en algún punto de la interacción, para eso nos ayudaremos del bloque if, que cuando su condición sea cierta llamara al bloque break, podemos poner como condición que la variable contador y contador2 se igual o mayor a 5, nuestro nuevo bloque break está  situado en bloques → integrados → control→ break quedará de la siguiente manera.

Pues bien, ahora si ejecutamos nuestra pequeña aplicación, veremos que el texto que muestra en pantalla solo mostrará lo números del 1 al 5. Lo que sucede es que cada bloque if que hemos colocado en sus correspondientes bucles, comprueban si su condición es cierta, es decir, que la variable asignada a cada uno sea mayor o igual a 5, en el momento que se cumple llama al bloque break, que lo que hace es terminar de manera inmediata el bucle.

Ahora su uso y posibilidades se hace casi infinitas, ya que es posible llamarle en cualquier situación, al detectar el giro del teléfono, al pulsar un botón, etc …

Bueno sin más me despido esperando que este artículo te sea de ayuda en tus futuros proyectos, no dudes en comentar cualquier duda. Un saludo.

https://youtu.be/8bRRYGjo9tk

martes, 10 de julio de 2018

BUCLES WHILE EN APP INVENTOR 2.

BUCLES (WHILE) EN APP INVENTOR 2.

¿QUE ES UN BUCLE MIENTRAS (WHILE)?.

Esta instrucción o bloque nos permite ejecutar unos bloques continuamente a modo de bucle, siempre que la condición lógica que se le asigne a dicho bloque, sea cierta.
Lo mejor es verlo como siempre con un ejemplo y lo entenderemos mejor.

PROGRAMACIÓN DEL BLOQUE MIENTRAS (WHILE).

Lo primero antes de nada será crear nuestro proyecto, yo en mi caso le he llamado BucleWhile, vosotros como siempre le podéis poner el nombre que más os guste.
Seguido diseñaremos nuestro layout, del que solo nos bastará con una etiqueta, para ello arrastraremos una etiqueta al diseño y en sus propiedades le cambiaremos el tamaño de letra, que le pondremos 20, en la propiedad ancho, le pondremos ajustar al contenedor y en la posición del texto escogeremos centro, también cambiaremos el texto que viene por defecto y le pondremos para nuestro ejemplo un «0».

Asignación

Bien ahora nos dirigimos a la pantalla de bloques y crearemos una variable global con el nombre «contador» y el valor 1, para ello iremos a bloque → integrados → variables → inicializar global que arrastraremos a nuestro diseño, y al que encajaremos el bloque con el valor de 1, para ello iremos a bloques → integrados → matemáticas → y arrastraremos el bloque que contiene un cero en su interior. Bien ya tenemos creada nuestra variable ahora necesitamos un desencadenante que hará que nuestro pequeño programa comience a ejecutarse y ese será la inicialización de la pantalla de nuestra aplicación, para ello iremos a bloques → integrados → Screen1 y arrastramos el bloque cuando Screen1 inicialize, Ahora dentro del bloque encajaremos el bloque mientras para ello iremos a bloques → integrados → control → mientras comprobar. nos tiene que quedar de la siguiente manera.

Asignación

Este bloque como comentamos al principio del artículo comprobaba una condición lógica, si la condición es cierta, repite el contenido del interior de dicho bloque, nosotros lo que haremos con nuestra variable es comprobar que sea menor o igual a 10, y siempre que sea menor añadiremos un texto, que en nuestro caso sera el numero de vueltas o interacciones en el bucle, de esta manera nos tendra que quedar el siguiente texto: 0,1,2,3,4,etc… hasta llegar al 10, una vez llegado al diez, finalizamos el bucle añadiendo al texto el comentario “finalizó el bucle”, es más sencillo de lo que parece así que manos a la obra.

Lo primero iremos a bloques → integrados → matemáticas y arrastraremos el bloque de comparación igual, que situaremos justo al lado del bloque mientras, pulsaremos en la flecha pequeña situada al lado del signo igual y seleccionaremos la comparación igual o menor que, dentro de su primer hueco vacío tomaremos nuestra variable y en el segundo hueco pondremos el bloque matemático 10, nos tiene que quedar de la siguiente manera.

Asignación

Ahora debajo del bloque mientras, pondremos el bloque etiqueta1.texto como, para ello iremos a bloques → integrados → Screen1 → etiqueta1 al que le uniremos texto con el bloque unir situado en bloques → integrados → texto y que le añadiremos un hueco más pulsando en la rueda dentada situada en la parte superior derecha de dicho bloque, quedando tres posiciones para unir texto, en la primera empezando por la parte superior pondremos la etiqueta etiqueta.texto, que será el texto que tenga en ese momento la etiqueta, seguido en la segunda posición, pondremos un bloque de texto con una coma y en la tercera posición, la de más abajo, pondremos el bloque tomar global contador que añadirá al texto el valor de nuestra variable en ese momento, ahora más abajo añadiremos a nuestra variable global contador el valor de uno, que se sumará por cada interacción en el bucle, tiene que quedarnos de la siguiente manera.

Asignación

Vamos hacer un alto y comentar que es lo que tenemos por ahora, lo primero que comprobamos en el código es si nuestra variable es igual o mayor que diez, como es la primera vez que la ejecutamos su valor será 1, ya que al inicio la inicializamos a 1, por tanto nos devolverá cierto y entraremos dentro del bloque, en el que tenemos la etiqueta1 al que le añadimos el texto que ya teníamos, en este caso 0, si recordáis en las propiedades de diseño le pusimos el texto 0, y también le añadimos el valor de nuestra variable que es 1, quedando el texto de la siguiente manera “0,1” ahora volverá a comprobar en el bloque mientras, si la variable contador es igual o mayor de 10 y como 1 es menor que 10, volvemos a entrar siguiendo los pasos anteriores, pero esta vez, el texto mostrado será “0,1,2” a si sucesivamente hasta que la variable contador sea igual o mayor de diez, que llegados a ese caso el texto será el siguiente “0,1,2,3,4,5,6,7,8,9,10” y saldremos del bucle creado por el bloque mientras.

Bien, ahora pondremos justo debajo del bloque mientras el bloque poner etiqueta1 como a la que añadiremos el texto “ya termino el bucle” nos quedará como la siguiente imagen.

Asignación

Si ejecutamos nuestra aplicación con nuestro método favorito veremos que en la pantalla de nuestro dispositivo mostrará la secuencia de número s del 0 al 10 que es las veces que se ejecutará el bucle y el texto se terminó el bucle que se añadirá una vez que salgamos de dicho bucle es decir cuando la condición del bucle sea falsa.

Asignación

Con esto queda visto y explicado el bucle mientras o en inglés While, podéis practicar y ejecutar modificando el número de de veces que interacciona el bucle.
Sin más me despido esperando que este post te ayude en tus próximos proyectos un saludo.

https://youtu.be/Yw_aRspZURg

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