domingo, 27 de mayo de 2018

OPERADORES Y EXPRESIONES EN APP INVENTOR 2. PARTE 2

 

OPERADORES Y EXPRESIONES EN APP INVENTOR 2. PARTE 2.

En el anterior post vimos los operadores de matemáticas más sencillos en App Inventor 2, ahora toca ver los operadores lógicos Y(AND), O (OR) que nos devolverá un resultado dependiendo de elemento que le introducimos, en primer lugar veremos el operador lógico Y (And), para ello construiremos una tabla de la verdad, con una serie de variables que convinandolas nos devolverá un resultado.

¿QUE ES UNA TABLA DE LA VERDAD?

Una tabla de verdad o tabla de valores de verdad, es una tabla que muestra el valor de verdad de una proposición compuesta, por cada combinación de valores de verdad que se puede asignar a sus componentes. Los valores posibles son dos verdadero y falso y pueden expresarse como 1 y 0.

 

VARIABLE AVARIABLE BRESULTADO OPERADOR AND
VERDADEROVERDADEROVERDADERO
VERDADEROFALSOFALSO
FALSOVERDADEROFALSO
FALSOFALSOFALSO

 

VARIABLE AVARIABLE BRESULTADO OPERADOR OR
VERDADEROVERDADEROVERDADERO
VERDADEROFALSOVERDADERO
FALSOVERDADEROVERDADERO
FALSOFALSOFALSO

 

TRABAJANDO CON OPERADORES LÓGICOS, BLOQUE Y (AND).

Bien vamos a ver un ejemplo que nos ayudará a entender la función y manejo de estos operadores. Nos valdremos de cuatro variables, y cada una le daremos un valor booleano, cierto o falso. Después al iniciar la pantalla dependiendo de las variables que coloquemos en el operador Y (AND), nos devolverá un resultado CIERTO o FALSO, que mostraremos por la pantalla de nuestro dispositivo, ayudándonos por una etiqueta.

Bien antes de empezar abriremos un nuevo proyecto, al que pondremos un nombre, yo en mi caso le pondré Operadoreslogicos2, pero vosotros le podéis poner el nombre que queráis, seguido nos iremos a la pantalla de diseño donde prepararemos nuestro diseño, para ello esta vez nos valdremos de dos etiquetas, que pondremos una debajo de la otra, para ello como siempre iremos a PALETA → INTERFAZ DE USUARIO → ETIQUETA.
en la primera la que quede más arriba pondremos en sus propiedades → texto EL RESULTADO ES : y en tamaño de letra le pondremos 24 y en la segunda solo cambiaremos en sus propiedades el tamaño de letra que también pondremos en 24. Una vez realizado esto no dirigimos a la pantalla de bloques y inicializamos 4 variables globales, la primera variable le pondremos el nombre de EsDeDia y le asignaremos el valor de true, ya que en el momento en el que escribía este artículo es de día, a la segunda le pondremos de nombre EsDeNoche y le asignamos el valor de false, ya que como he dicho es de día y por lo tanto no es de noche, a la tercera variable le pondremos el nombre EsLaMañana y le asignaremos el valor de true, ya que es de día y por la mañana y a la cuarta y última le pondremos el nombre de EsLaTarde y le asignamos el valor de false ya que es de día y es por la mañana y como ya he dicho, bien debería de quedarnos de la siguiente manera.

Asignación

Ahora arrastraremos el bloque, cuando Screen inicializar ejecutar al lienzo para que en el momento que inicie nuestra aplicación muestre el resultado de nuestras expressiones, y para ello utilizaremos el bloque poner etiqueta2.Texto como y le uniremos el bloque Y (AND) que en sus dos huecos meteremos dos variables, comenzaremos metiendo la variable EsDeDia y EsLTarde, tiene que quedarnos de la siguiente manera.

Asignación

Si ejecutamos nuestra aplicación el resultado será FALSE, ya que el bloque y (AND) evalua las dos expresiones y devuelve TRUE sólo si las dos expresiones son verdaderas, vamos a ver el ejemplo cambiaremos la variable del bloque Y por la variable EsLaMañana y volveremos a ejecutar nuestra aplicación, en este caso el valor devuelto es TRUE ya que las dos expresiones son verdaderas.

Asignación

Probar todas las combinaciones posibles y comparar el resultado con la tabla de la verdad del operador AND que mostré en el principio de este artículo, veréis que los resultados son los mismos.

TRABAJANDO CON OPERADORES LÓGICOS BLOQUE O (OR).

Vamos a ver cómo se trabaja con el bloque O (OR) este bloque evaluará las dos variables que contenga en sus dos huecos y devolverá true si al menos una de ellas es cierta si las dos son falsas devolverá falso, para ello eliminaremos el bloque Y que teníamos anteriormente y en su lugar pondremos el bloque O (OR) ,en este ejemplo utilizaremos en el primer hueco la variable global EsDeDia y La variable global EsDeNoche que pondremos en el segundo hueco.

Asignación

si ejecutamos la aplicación veremos que el resultado es cierto, como ya hemos dicho el bloque O devolvera cierto si al menos uno de los dos es cierto, ahora cambiaremos la variable EsDeDia por EsLaTarde y volvemos a ejecutar nuestra aplicación veremos que nos devolverá false, ya que ninguna de las dos variables son ciertas, y al menos necesitamos una de ella como cierta para que nos devuelva cierto.
También podremos asignar a una variable un resultado de una expresión con los bloques O (OR) y Y(AND) como si de un resultado matemático fuera, para ello crearemos una variable global nueva y le pondremos el nombre de ResultadoBooleano y le asignaremos el valor de false, ahora en el bloque Cuando screen1 inicializar pondremos esta misma variable y le asignaremos el bloque situado en la etiqueta, cambiando sus dos variables por las de EsDeDia y EsLaMañana, ahora al bloque etiqueta 2 le asignaremos la nueva variable. Nos tiene que quedar como la siguiente imagen.

Asignación

Al igual que en las operaciones matemáticas podremos tener más de dos espresiones booleanas incluso combinar bloque O y Y para de esta forma obtener un resultado, dependiendo de cualquier situacion, para ver un ejemplo podríamos obtener un valor true independientemente si es de día y es por la tarde o es de noche y por la mañana, veamos un ejemplo, para ello borraremos todo lo anterior arrastrándolo a la papelera de reciclaje, menos nuestro bloque de etiqueta, ahora arrastraremos un bloque O y lo uniremos al bloque de la etiqueta, seguido situaremos de nuevo un bloque O dentro del primer hueco del anterior y en el segundo hueco arrastraremos nuevamente un bloque O, y los configuraremos de la siguiente manera, EsDeDia O EsLaTarde O EsDeNoche O EsDeMañana, nos tiene que quedar de la siguiente manera.

Asignación

Si ejecutamos la aplicación el resultado que nos devuelve el conjunto de operaciones es true.

OPERADORES DE COMPARACIÓN.

Ahora veremos los operadores de comparación, estos operadores devuelven un valor lógico, verdadero o falso, y nos van a permitir comparar desde una cadena de texto, números, pasando por variables booleanas. Estos son los operadores de comparación en App Inventor: igual, distinto de, mayor que, menor que, mayor o igual a y menor o igual que. Vamos a ver unos cuantos ejemplos. Para ello crearemos 2 nuevas variables a las que llamaremos ComparadorUno y ComparadorDos. Y le asignaremos los siguientes valores en el mismo orden 1 y 5.
Nos tiene que quedar de la siguiente manera.
Asignación

OPERADOR IGUAL.

Ahora borraremos los bloques que acompañan a la etiqueta que nos muestra los resultados y en su lugar pondremos el bloque de igual situado en bloques → integrados → matemáticas. Y en su primer hueco pondremos el ComparadorUno y en el segundo hueco la variable ComparadorDos, nos tiene que quedar de la siguiente manera.
Asignación
Si ejecutamos nuestra aplicación, veremos que el operador compara si son iguales las dos variables, en caso cierto devolverá true en caso contrario devolverá false, en nuestro ejemplo como ComparadorUno vale 1 y ComparadorDos vale 5, no son iguales, por tanto devolverá false.
Asignación

OPERADOR DISTINTO QUE.

Ahora pulsaremos en la flecha situada al lado de el signo igual y seleccionaremos el símbolo distinto que.

Asignación
Y volveremos a ejecutar nuestra aplicación, esta vez el resultado será cierto, ya que ninguna de las dos variables es igual, por lo tanto son distintas y el operador nos devuelve true.

OPERADOR MENOR QUE.

Vamos a ver el bloque de comparador menor que. Para ello pinchamos en la flecha que está a continuación del símbolo y seleccionamos el símbolo menor que.
Asignación
Y volveremos a ejecutar nuestra aplicación, esta vez el resultado será cierto ya que ComparadorUno es menor que ComparadorDos.

OPERADOR MAYOR QUE.

Ahora vamos a ver el comparador de mayor que, para ello haremos como hasta ahora pulsaremos en la flecha situada a la derecha del símbolo y seleccionamos el símbolo mayor que.
Asignación
Y una vez más volveremos a ejecutar nuestra aplicación con vuestro método favorito, esta vez el resultado será falso ya que ComparadorUno es menor que ComparadorDos, y por tanto la condición no será cierta.

OPERADOR MENOR O IGUAL QUE.

Ahora vamos a ver el comparador de menor o igual que, este operador devolverá cierto cuando la primera variable sea menor o incluso igual que la segunda, vamos a ver un ejemplo, pulsaremos en la flecha situada a la derecha del símbolo y seleccionamos el símbolo menor o igual que.

Asignación
Si ejecutamos la aplicación el resultado será verdadero, como sucedía con el comparador menor que, pero también nos devolverá cierto si las dos variables valen lo mismo, podemos hacer la prueba cambiando el valor de alguna de las variables por el de la otra, si ejecutamos veremos qué ahora ninguna de las dos variables es mayor o menor que la otra, pero el valor será cierto, porque son iguales, y como hemos dicho el comparador devolverá cierto si es menor o igual.

OPERADOR MAYOR O IGUAL QUE.

Ahora vamos a ver el comparador de mayor o igual que, este operador devolverá cierto cuando la primera variable sea mayor o incluso igual que la segunda, vamos a ver un ejemplo, pulsaremos en la flecha situada a la derecha del símbolo y seleccionamos el símbolo mayor o igual que.

Asignación
Si ejecutamos la aplicación el resultado será verdadero, ya que ahora mismo las dos variables valen lo mismo, y como sucedía en el ejemplo anterior devuelve cierto, vamos a cambiar el valor de la segunda variable, le daremos el valor de 1 y volvemos a ejecutar la aplicación, el resultado es cierto, ya que el ComparadorUno es mayor que ComparadorDos.

Bueno con esto creo que quedan vistos los operadores lógicos y de comparación, podéis cambiar el valor de las variables cambiarlas por otras, en fin cualquier combinación para ver y comprender mejor su finalidad.

Sin más me despido esperando que este articulo te ayude en tus próximos proyectos un saludo.

https://youtu.be/IqQT_mhXtUQ

miércoles, 9 de mayo de 2018

OPERADORES Y EXPRESIONES EN APP INVENTOR 2. PARTE 1

OPERADORES Y EXPRESIONES EN APP INVENTOR 2

En este artículo vamos a aprender a trabajar con operadores, ya hemos visto alguno por encima en anteriores artículos, pero ahora los veremos con más detalle. Estos son el asignación (=), suma(+), resta (-) multiplicación(*), división(/) y módulo(%).

¿Qué es un operador?
En los lenguajes de programación de computadora, las definiciones de operador y operando son casi las mismas que las de matemáticas. Entonces podemos decir, que un operador es un símbolo matemático que indica que debe ser llevada a cabo una operación específica sobre un cierto número de operandos ya pudieran ser números o variables.

TRABAJANDO CON OPERADORES.

Operador de asignación.

El primer operador que vamos a ver es el de asignación, en App Inventor para asignar un valor a una variable no utilizamos el signo igual para ello App inventor ya nos ofrece el bloque “poner a” de las variable ( no solo está en las variables también en distintas funciones como etiquetas, imágenes, etc) . Este bloque asigna a la variable especificada, el valor que se añada a continuación del bloque. Vamos a ver el ejemplo.
Primero inicializando la variable global con el valor de cero, para ello iremos a bloques→ integrados→ variables y arrastraremos el bloque inicializar global como al lienzo, a esta variable le pondremos el nombre de puntos y le daremos el valor de 0.
Seguido pondremos el bloque cuando Screen1 inicializar ejecutar para ello iremos a bloques→ integrados→ Screen1 y lo arrastraremos al lienzo, seguido y dentro de este bloque pondremos el bloque poner global a, seleccionaremos la variable que declaramos con anterioridad y le daremos el valor de 100, de esta manera estamos asignando un valor, sin utilizar el signo “=”. Crearemos otra variable y a esta la llamaremos maxpuntos y le daremos el valor numérico de 200. Si ahora asignamos a la variable puntos la variable maxpuntos, la variable valdrá 200.
Asignación

Vamos a comprobar que esto es cierto, para ello nos ayudaremos de una etiqueta, iremos a la pantalla de diseño y arrastraremos una etiqueta, para ello iremos a paleta –>interfaz de usuario→ etiqueta. Una vez hecho esto en la pantalla de bloques, iremos a bloques→ integrados → Screen1→ Etiqueta1 y arrastrarnos el bloque poner Etiqueta1.texto como y seguido le asignaremos la variable puntos.

Asignación

Si ejecutamos nuestro programa con nuestro método favorito veremos que el valor es 100, esto sucede porque el operador de asignación de la variable evalúa lo que tiene a su derecha, es decir, obtiene el valor del dato de su derecha y lo asigna al de la izquierda. Si llegado a este punto te estás preguntando cuál es la función del signo igual(=) en App Inventor, es sencillo, la de comparación, si necesitáramos saber si las dos variables son iguales en algún momento del programa utilizamos el signo de igual, veremos un ejemplo más adelante, ahora continuaremos con operadores más simples.

Operador de suma.

Para hacer sumas, App Inventor nos ofrece el bloque suma. para hacer uso de él nos dirigiremos a bloque → integrados → matemáticas y arrastraremos el bloque que contiene el signo de suma, que colocaremos en lugar de tomar la global maxpuntos, justo a continuación del bloque poner global puntos a, también podremos obtener el bloque pulsando con el botón izquierdo del ratón en cualquier parte del lienzo y escribiendo el signo más. La variable global puntos la inicializamos a 45 y seguido le añadimos en sus huecos dos bloques con valores numéricos, yo por ejemplo pondre 2 + 7, y antes d loe ejecutar añadiremos un tercer valor a la suma, para ello pulsaremos la rueda dentada situada en la esquina superior izquierda del bloque, veremos que podremos añadir tantos huecos nuevos como queramos, yo solo añadiré una más al que daré el valor de 10.
Asignación

Si ejecutamos nuestra aplicación el resultado de la operación será 19. Tambien podriamos hacer de la siguiente manera, en este caso sustituiremos el primer operador de la suma 2, por la variable puntos, entonces, ¿Cuál será el resultado de la expresión?, muy fácil, si al inicializar puntos le asignamos el valor de 45, y después le asignamos el valor de puntos → (puntos 45) + 7 + 10 entonces el resultado será 62.
Asignación

Ahora haremos una copia del bloque, pulsaremos con el botón derecho del ratón sobre el bloque poner global puntos y daremos a duplicar, el conjunto de bloques duplicados lo arrastraremos justo debajo del anterior y volveremos a ejecutar la aplicación, ahora el valor que nos devuelve es 79, esto sucede porque la variable puntos ya no vale 45 si no que en la anterior operación guardo el valor de 62, y (puntos 62) + 7+ 10 devuelve 79.
Asignación

Operador de resta.

Para hacer restas, App Inventor nos ofrece el bloque restas. para hacer uso de él primero borraremos los bloques de suma del ejemplo anterior y seguido nos dirigiremos a bloque → integrados → matemáticas y arrastraremos el bloque de restas que situaremos a continuación de la variable global puntos, también podremos obtener el bloque pulsando con el botón izquierdo del ratón en cualquier parte del lienzo y escribiendo el signo menos. Seguido le añadimos en sus huecos dos bloques con valores numéricos 10 y 7, y la variable global puntos la inicializamos a 45. Si nos fijamos bien en este caso el bloque de resta no ofrece la rueda dentada para añadir más huecos a la resta, pero no por ello podremos hacer restas con más de dos operandos, la solución es sencilla, meteremos el bloque de resta en el primer hueco de otro bloque de resta, y en el hueco libre meteremos la variable puntos, entonces, ¿Cuál será el resultado de la expresión?, muy fácil, si al inicializar puntos le asignamos el valor de 45, y después le asignamos el valor de puntos → (10 – 7) – (puntos 45) entonces el resultado será -42, primero se hará la resta contenida en el primer bloque y el resultado se le restará la variable. Ahora haremos una copia del bloque, pulsaremos con el botón derecho del ratón sobre el bloque poner global puntos y daremos a duplicar, el conjunto de bloques duplicados lo arrastraremos justo debajo del anterior y volveremos a ejecutar la aplicación, ahora el valor que nos devuelve es 45, esto sucede porque la variable puntos ya no vale -42 si no que en la anterior operación guardo el valor de -42, y (10 – 7) – (puntos -42) devuelve 45.
Asignación

Operador de multiplicación.

Para hacer multiplicaciones, App Inventor nos ofrece el bloque multiplicar. para hacer uso de primero borraremos los bloques de suma del ejemplo anterior y seguido nos dirigiremos a bloque → integrados → matemáticas y arrastraremos el bloque que contiene el signo de multiplicación (*), que colocaremos a continuación del bloque poner global puntos a, justo a continuación del bloque poner global puntos a, también podremos obtener el bloque pulsando con el botón izquierdo del ratón en cualquier parte del lienzo y escribiendo el signo *. Seguido le añadimos en sus huecos dos bloques con valores numéricos, yo por ejemplo pondre 2 * 7, y antes de ejecutar añadiremos un tercer valor a la multiplicación, para ello pulsaremos la rueda dentada situada en la esquina superior izquierda del bloque, veremos que podremos añadir tantos huecos nuevos como queramos, yo solo añadiré una más al que daré el valor de 10, si ejecutamos nuestra aplicación el resultado de la operación será 140. Tambien podriamos hacer de la siguiente manera, en este caso sustituiremos el primer operador de la multiplicación 2, por la variable puntos, entonces, ¿Cuál será el resultado de la expresión?, muy fácil, si al inicializar puntos le asignamos el valor de 45, y después le asignamos el valor de puntos → (puntos 45) * 7 * 10 entonces el resultado será 3150. Ahora haremos una copia del bloque, pulsaremos con el botón derecho del ratón sobre el bloque poner global puntos y daremos a duplicar, el conjunto de bloques duplicados lo arrastraremos justo debajo del anterior y volveremos a ejecutar la aplicación, ahora el valor que nos devuelve es 220500, esto sucede porque la variable puntos ya no vale 45 si no que en la anterior operación guardo el valor de 3150, y (puntos 3150) * 7* 10 devuelve 220500.
Asignación

Operador de división.

Para hacer división, App Inventor nos ofrece el bloque división (/). para hacer uso de primero borraremos los bloques de multiplicación del ejemplo anterior y seguido nos dirigiremos a bloque → integrados → matemáticas y arrastraremos el bloque que contiene el signo de división(/), que colocaremos a continuación del bloque poner global puntos a, también podremos obtener el bloque pulsando con el botón izquierdo del ratón en cualquier parte del lienzo y escribiendo el signo división. Seguido le añadimos en sus huecos dos bloques con valores numéricos, yo por ejemplo pondre 10 / 7, si ejecutamos nuestra aplicación el resultado de la operación será 1.42857.
Si nos fijamos bien en este caso el bloque de división no ofrece la rueda dentada para añadir más huecos a la división, pero no por ello podremos hacer divisiones con más de dos operandos, la solución es sencilla, meteremos el bloque de división en el primer hueco de otro bloque de división, y en el hueco libre meteremos la variable puntos, entonces, ¿Cuál será el resultado de la expresión?, muy fácil, si al inicializar puntos le asignamos el valor de 45, y después le asignamos el valor de puntos → (10 / 7) / (puntos 45) entonces el resultado será 0.03175, primero se hará la división contenida en el primer bloque y el resultado se le dividirá la variable. Ahora haremos una copia del bloque, pulsaremos con el botón derecho del ratón sobre el bloque poner global puntos y daremos a duplicar, el conjunto de bloques duplicados lo arrastraremos justo debajo del anterior y volveremos a ejecutar la aplicación, ahora el valor que nos devuelve es 45, esto sucede porque la variable puntos ya no vale 45 si no que en la anterior operación guardo el valor de 0.03175, y (10 / 7) / (puntos 0.03175) devuelve 45.
Asignación

Operador de modulo.

En informática, la operación de módulo obtiene el resto de la división de un número por otro.
si tenemos dos números positivos, a y b, a módulo b nos dará el resto de la división entre ellos. Por ejemplo, la expresión «5 módulo de 2» se evaluaría a 1 porque 5 dividido por 2 da un cociente de 2 y un resto de 1.
Para hacer módulos, App Inventor nos ofrece el bloque modulo de. para hacer uso de él nos dirigiremos a bloque → integrados → matemáticas y arrastraremos el bloque que contiene modulo de, que colocaremos en lugar de tomar la global maxpuntos, justo a continuación del bloque poner global puntos a, también podremos obtener el bloque pulsando con el botón izquierdo del ratón en cualquier parte del lienzo y escribiendo módulo de. Seguido le añadimos en sus huecos dos bloques con valores numéricos, yo por ejemplo pondre 10 / 7, si ejecutamos nuestra aplicación el resultado de la operación será 3.
Asignación

Bueno creo que con esto queda claro algunas operaciones matemáticas sencillas, App Inventor 2 dispone de muchas más, con las que podréis practicar y en un siguiente artículo veremos la segunda parte donde extenderemos más este artículo.

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

https://youtu.be/sHd28Tt63XU

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

 

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