sábado, 1 de agosto de 2020

Como crear una App Libro

App Libro en App Inventor

Bueno hace ya algún tiempo un suscriptor del canal de Youtube me preguntaba como podría hacer para abrir un archivo de texto en App inventor. De esta manera lo que el quería poder crear una app libro. Bien la solución es sencilla, o mejor dicho, soluciones, porque vamos a ver tres soluciones distintas.

Diseño de la App

Para esta aplicación el diseño va a ser de lo mas sencillo. Tendremos nuestra pantalla principal con tres botones, cada uno de estos botones abrirá una nueva ventana. Cada una de estas ventanas nos ofrecerá un texto para poder leer, pero la diferencia esta en que cada una conseguirá el texto de una manera distinta. En la pantalla pantalla 2, que sera nuestro primer método, abriremos el archivo de texto desde la memoria del teléfono. Nos ayudaremos de un componente no visible archivo y por supuesto cargaremos nuestro archivo de txt en medios. Pondremos una etiqueta dentro de una disposición vertical con scroll.

En la pantalla 3 utilizaremos al igual que en la anterior pantalla un scrooll vertical, una etiqueta y un componente no visible web. De esta manera conseguiremos mostrar el texto desde un archivo alojado en un sitio web. En realidad utilizaremos el archivo desde Google drive, donde tendremos que descargar un complemento.

En la última pantalla utilizaremos el último de nuestros métodos. Al igual que ya hicimos en la anterior pantalla constara de una disposición vertical con scrooll y dos componentes no visibles. un componente web y un componente archivo. De esta manera descargaremos el archivo alojado en Google drive a la memoria del teléfono para visualizarlo.

Programando la Aplicación

Como ya comentaba al principio del articulo, la aplicación contendrá una pantalla principal con varios botones que darán acceso a las demás pantallas para poder crear una app libro. Pues queda claro que el proceso de programación sera sencillo, Al pulsar un botón abriremos la pantalla correspondiente.

Ahora vamos ha programar la segunda pantalla y primer método. Este es el método mas sencillo de todos, simplemente tendremos que leer el archivo dentro de la memoria del teléfono al abrir la pantalla. Después simplemente mostrar el texto leído en la etiqueta TxtLibro.

Bueno ahora que ya tenemos nuestro primer método vamos con el segundo. El resultado en nuestro teléfono sera el mismo pero sera diferente internamente, ya que el archivo sera leído de Internet y no de la memoria interna. Para lograr esto vamos a leer el archivo desde Google drive.

Los archivos de Google drive se pueden compartir con cualquier usuario. Si un usuario quiere descargar el archivo se abrirá una ventana de Google drive con el contenido que se va a descargar. Pero esta forma no nos servirá, necesitamos un enlace de descarga directa. Para esto último vamos a instalar un complemento en Google drive. Vamos al archivo que queremos compartir, pulsamos con el botón derecho del ratón y seguido en Abrir con –> Conectar en más aplicaciones en el cuadro de búsqueda buscaremos el complemento Download link Generator.

Una vez instalado el complemento solo tendremos que volver a pulsar con el botón derecho del ratón en el archivo que queremos que tenga descarga directa. Se abrirá una nueva ventana en el navegador que contendrá el enlace para descarga directa. Simplemente copia este enlace.

Ahora al iniciar nuestra Screen 3 pondremos la url copiada como web a abrir. Seguido la abriremos y cuando nuestro complemento web no visible obtenga texto, solo tendremos que poner en nuestra etiqueta TxtLibro el contenido de dicho texto. Con esto ya tendremos el texto de nuestro libro, pero esta vez desde Internet.

El último método sera una copia del segundo, pero esta vez guardaremos el archivo en la memoria del teléfono. Una vez que obtengamos el texto del componente Web lo guardaremos en la memoria del dispositivo con el componente file. Después solo tendremos que abrir el archivo guardado y mostrarlo en la etiqueta.

Bueno con este articulo hemos visto como poder crear una app libro o consultar textos. Lo mejor es que tenemos un método que nos asegura, en cierta manera, que el texto este alojado en Internet. De esta forma el texto podría modificarse sin tener que actualizar la App, o simplemente que fuera imposible copiarlo para difundirlo fuera de la aplicación.

Bueno me despido con unas merecidas vacaciones de verano, y como siempre si te ha gustado compártelo, si tienes alguna duda házmelo saber. Y si quieres recibir en tu correo electrónico artículos como este, no te olvides suscribirte al blog de inventordeaplicaciones.es, y obtendrás un magnifico regalo.

martes, 30 de junio de 2020

Diccionarios en App Inventor 2

Hola y bienvenidos una vez a Inventordeaplicaciones.es en este articulo veremos como utilizar y usar diccionarios en App Inventor 2. La actualización de febrero de 2020 de MIT App Inventor ( nb181c / nb182 ) agregó un tipo de datos de diccionario (diccionario). Este tipo de bloques nos permitirán manejar datos utilizando pares de claves con valores asociados.

Para ver el uso de los diccionarios crearemos una sencilla agenda que guardara contactos. Guardaremos el nombre del contacto su número de teléfono y correo electrónico. También podremos eliminar contactos ya creados y consultarlos. Por supuesto todos estos contactos quedaran guardados en la agenda de una forma permanente.

Diseño para el uso de diccionarios en App Inventor 2.

El diseño de nuestra aplicación consta de cuatro pantallas. Una pantalla principal desde donde podremos acceder a las otras y en las que podremos añadir, eliminar y consultar los datos introducidos. Nos ayudaremos de un componente no visible TinyDB para que nuestros datos sean persistentes y de un componente notificador que usaremos para mandar mensajes al usuario. Como siempre podrás descargar el proyecto AIA desde el enlace.

Descarga el proyecto en formato AIA

Programando un diccionario en App Inventor 2

Comenzaremos programando la pantalla principal que será la encargada de dar acceso a las demás pantallas. Simplemente tendremos que hacer que al pulsar uno de los botones abramos la pantalla correspondiente.

Seguido comenzaremos programando nuestra segunda pantalla. Esta pantalla será la encargada de añadir usuarios a nuestra agenda usando como palabra clave o «Key» el nombre del usuario. Primero crearemos una variable global a la que llamaremos diccionario y que estará inicializada con un campo de texto vacío. Esta variable servirá para manejar nuestro diccionario.

A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que el diccionario que construimos está vacío. Solo introducimos campos de texto vacíos.

Seguido tendremos que conseguir que guardar los datos introducidos en nuestro diccionario. Pero antes nos tendremos que asegurar que todos los campos de texto este rellenados al pulsar el botón de añadir. De lo contrario notificaremos al usuario que tiene que rellenar todos los campos de texto.

Si están rellenos todos los campos de texto, tendremos que comprobar que el nombre no está ya en el diccionario. De lo contrario notificaremos al usuario que el nombre ya existe en el diccionario.

Si tenemos todos los campos de texto rellenados, y el nombre no existe en el diccionario, entonces añadimos al diccionario el nuevo usuario. Como key utilizaremos el nombre del usuario, y como valores asociados, el teléfono y correo electrónico. Una vez añadido al diccionario borraremos los campos de texto para evitar repetir la operación, y guardaremos el diccionario en la memoria del teléfono, utilizando el componente TinyDB. Por último abriremos la pantalla principal.

Programando la pantalla eliminar del diccionario

Ahora que ya somos capaces de guardar datos en nuestro diccionario, vamos a ver cómo eliminarlos. Comenzaremos programando la pantalla 3. Crearemos una variable global a la que llamaremos diccionario y que estará inicializada con un campo de texto vacío. Esta variable servirá para manejar nuestro diccionario como ya pasaba en la pantalla 2.

A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que es exactamente el mismo procedimiento que en la pantalla 2.

Ahora tenemos que comprobar que cuando el usuario pulsa el botón de eliminar el nombre introducido en el campo de texto está contenido en el diccionario. Si el nombre no existe se lo notificaremos al usuario.

Si el nombre está en el diccionario procederemos a eliminarlo. Seguido lo guardaremos en la memoria del teléfono, utilizando el componente TinyDB y volveremos a la pantalla 1.

También tenemos un botón para volver directamente a la pantalla 1 si el usuario a llegado a esta pantalla por error. El funcionamiento de este botón es simple, al pulsar abriremos la pantalla 1.

Programando la pantalla ver/consultar diccionario

En esta última pantalla vamos a ver cómo podemos realizar consultas a nuestro diccionario, introduciendo solo el Key o nombre a consultar. Para esto necesitaremos dos variables globales, una contendrá una lista vacía y la otra contendrá un campo de texto vacío.


A la hora de iniciar la pantalla comprobaremos que en TinyDb contiene datos. Añadiremos el diccionario contenido en la TinyDB a nuestra variable diccionario. Si es la primera vez y no contiene ningún dato construiremos un diccionario que será añadido a nuestra variable global, en el campo valorSiEtiquetaNoExixte. fijate que es exactamente el mismo procedimiento que en la pantalla 2 y pantalla 2.

Cuando pulsemos el botón 1 tendremos que comprobar que el campo de texto no está vacío, de lo contrario mostraremos una notificación al usuario avisando que el campo está vacío.

Si por el contrario el campo de texto no está vacío, comprobaremos que el nombre introducido en el campo de texto es «Key» en el diccionario. Si no esta en el diccionario se mostrará una notificación al usuario advirtiéndole que no existe.

Si el nombre introducido está en el diccionario, construiremos una lista con los valores obtenidos de la «Key».

Seguido pondremos en la etiqueta TxtResNombre con la unión del texto Nombre más el texto del campo CdtNombre. En la etiqueta TxtResTeléfono seleccionaremos de nuestra lista, creada anteriormente, el índice 2. Y para la etiqueta TxtResCorreo seleccionaremos de nuestra lista, creada anteriormente, el índice 1. Por último dejaremos el campo de texto vacío utilizando un cuadro de texto.

Por último como ya sucedía con las anteriores pantallas, programaremos el botón que nos devolverá a la pantalla principal.

Final del tutotorial

Bueno con esto terminamos esta pequeña aplicación que muestra un uso básico de los diccionarios. Sin duda como todo se podría mejorar y hacer un uso mas extendido de los bloques contenidos para el uso de diccionarios pero creo que para iniciarse y entender su uso está bien.

Si te ha gustado y quieres que hagamos mas artículos como este o tienes alguna duda que quieras resolver, no dudes en dejarlo en los comentarios. Un saludo.

domingo, 14 de junio de 2020

Juego con App Inventor 2.

Hola y bienvenidos una vez más a inventordeaplicaciones.es. En este nuevo articulo veremos como podemos crear juego con App Inventor 2. Nuestra herramienta favorita dispone de una serie de opciones para interactuar y mover por pantalla sprites. Aunque muy básicas con un poco de trabajo podremos crear juegos bastante entretenidos. Si te estas preguntando porque ahora un articulo sobre como crear videojuegos, tengo que decirte que es la mejor manera de aprender técnicas de programación de una manera lúdica y divertida.

Diseño de la aplicación para juego con App Inventor 2

Para el diseño de nuestra aplicación se ha utilizado un lienzo, quince sprites, uno para la nave protagonista, cuatro para los disparos de nuestra nave, nueve para los meteoros que utilizaremos como enemigos y no para la explosión. Este último le desmarcamos la casilla de visible. También hemos añadido una serie de componentes no visibles que ayudarán a programar el comportamiento de nuestro juego.

Tenemos un sensor de orientación, con el que moveremos a nuestro protagonista de un lado a otro de la pantalla, girando nuestro dispositivo. Un componente reloj al que hemos llamado BuclePrincipal y será el encargado de mover todos y cada unos de nuestros sprites en pantalla a cada ciclo de reloj. Otro componente no visible reloj, este último se encargará de animar las explosión al colisionar nuestro disparo con los meteoros. Y por último dos componentes no visibles de sonido, uno lo utilizaremos para el sonido de nuestro disparo y otro para el sonido de la explosión.

Descarga el proyecto en formato AIA.

Ajustar el lienzo para juego con App Inventor 2.

Antes de comenzar a crear nuestro juego con App inventor 2 vamos hacer unos pequeños ajustes en nuestro lienzo. Para que los meteoros o explosiones puedan superar los límites de la pantalla de nuestro dispositivo. Debemos de crear nuestro lienzo más ancho y alto que la pantalla de nuestro dispositivo. Para ellos debemos de ajustar las siguientes propiedades de nuestra pantalla y lienzo.

En la propiedad DispHorizontal y DispVertical de nuestra Screen1 debemos de poner la opción del desplegable en centro. Con esto conseguiremos que nuestro lienzo se expanda más allá de los límites de la pantalla desde el centro de la misma y no desde la esquina superior izquierda.

En la propiedad de Alto y Ancho de nuestro lienzo la cambiaremos por Ajustar al contenedor del la opción del desplegable. Esto ajusta los límites de nuestro lienzo al ancho y alto de la pantalla. Más adelante programáticamente superaremos esos límites.

Programando el movimiento de la nave de nuestro Juego con App Inventor 2

Antes de comenzar a programar los movimientos de nuestra nave vamos a hacer unos pequeños ajustes en el lienzo. Recuerda que este tiene que poder superar los límites de la pantalla de nuestro juego con app inventor 2. Para ello vamos a crear un procedimiento al que llamaremos ConfiguraciónFondo, donde le diremos que tiene que ser 100 puntos más ancho y alto que la pantalla. Por último lo llamaremos al abrir la Screen1.

Una vez que hemos configurado correctamente el ancho y el alto de nuestro lienzo con la pantalla de nuestro dispositivo vamos a mostrar en pantalla nuestra nave. Necesitamos que el centro de nuestra nave se muestre en el centro de la pantalla. Para consegir esto tendremos que hacer un pequeño calculo matematico. Dividiremos el ancho del lienzo entre dos para sacar su centro y le restamos el ancho del gráfico de la nave dividido entre 2. Con esto conseguiremos que el centro del gráfico se muestra en el centro de la pantalla. Para la altura bastará con restar al alto de la pantalla el alto de la nave dividido entre dos. Con esto último no solo se mostrará el gráfico en el centro de la lienzo sino también en la parte inferior del lienzo de nuestro Juegos con App Inventor 2.

Bien ahora necesitamos que nuestra nave pueda moverse a los lados de la pantalla para poder esquivar a los destructivos meteoritos. Vamos ayudarnos de nuestro componente no visible sensor de orientación. Lo que conseguiremos con esto es que cuando nuestro teléfono se incline en uno de sus lados nuestra nave se deslice hacia el lado más inclinado. Si el valor de inclinación es mayor de cero el gráfico se inclinara a la derecha. Por el contrario es menor de cero el gráfico se inclinara a la izquierda.

Programando el disparo

En nuestro juego con App inventor 2 nuestra nave ya puede esquivar los destructivos meteoritos. Pero eso no bastara, tendremos que poder disparar potentes cañones de plasma que destruirán cada unos de esos meteoros. Para ello cuando pulsemos la pantalla de nuestro dispositivo llamaremos a uno de los cuatro gráficos del disparo nos valdremos de una variable para ir llamando uno a uno a cada uno de los disparos esta variable la llamaremos NumeroDisparos y estará inicializada a 1. Seguido crearemos otra variable global que contendrá una lista con todos los gráficos de los disparos. A esta lista le daremos el nombre de NombreDisparos .

Cada uno de los cuatro sprites tiene que tener la opción de visible desactivada en las propiedades de su componente en la pantalla de diseño. Si no fuera así se mostrarán al iniciar nuestro juego. Vamos a crear un procedimiento al que llamaremos cada vez que pulsemos la pantalla. Le daremos e l nombre de LlamadaDisparo. Se encargará de asignar al componente sprite una serie de opciones para inicializarlo antes de mostrarlo en pantalla. Como la imagen que mostrará, la X e Y en la que se aparecerá, decirle que queda habilitado y que sea visible.

Fijate que no utilizas un componente Sprite en concreto sino que estamos utilizando bloques genericos. Donde el componente esta controlado por la variable Ngrafico. Si observas podrás ver que la X esta situado en el centro del gráfico de la nave y su Y 15 puntos por encima.

Una vez que levantemos el dedo de la pantalla comprobaremos que nuestra nave sigue habilitada. Si esto es cierto reproduciremos el sonido del láser y llamaremos al procedimiento LlamadaDisparo. Asignaremos a su variable NGrafico el elemento de la lista NombresDisparos que su índice quedará asignado por la variable NumeroDisparo. Recuerda que esta variable estaba iniciada a 1 pero nosotros queremos que se incremente en uno cada vez que levantemos el dedo de la pantalla y que cuando llegue al máximo de cuatro vuelva a valer uno. De esta manera dará la sensación de tener disparos infinitos.

Todo esto por sí solo no hará nada, necesitamos que el disparo avance por la pantalla. Para ello nos ayudamos de nuestro componente reloj BuclePrincipal. Cambiaremos sus propiedades y dejaremos activadas las casillas de TemporizadorSiempreSeDispara y TemporizadorHabilitado para la opción IntervaloDelTemporizador lo dejaremos en 10.

Cada vez que nuestro reloj llegue a 10 milésimas incrementaremos la Y de cada uno de los disparos ayudándonos de un bucle for. Cuando la Y de cada uno de ellos esté por encima del borde superior de la pantalla entonces lo deshabilitamos y dejará de ser visible.

Programando al enemigo

Lo primero que tendremos que programar será un procedimiento que se encargará de posicionar nuestros meteoros al inicio de la partida. Necesitaremos una lista como la de los disparos pero en esta no solo pondremos cada uno de los gráficos sino que también asignaremos a cada índice un número aleatorio entre 1 y 4 para variar la velocidad de caída para cada meteorito.

Dentro de nuestro procedimiento nos ayudaremos de un bucle for. Este posiciona la X y la Y en la parte superior de la pantalla y dará un tamaño aleatorio gracias a la variable TamañoMeteoro que se inicializará con un valor aleatorio entre 1 y 100.

Este procedimiento lo colocaremos en el bloque al iniciar la pantalla. Al igual que ocurría con el procedimiento del disparo solo servirá para inicializar cada gráfico en una posición de la pantalla y un tamaño, pero por si solo no hará nada más. Lo que necesitamos es introducir código dentro de nuestro temporizador que hará que nuestros meteoros rote sobre sí mismos y bajen por la pantalla. Nos ayudaremos de un bucle for para recorrer cada uno de los nueve gráficos. Haremos que cada gráfico rote sobre sí mismo. Que bajen por pantalla incrementando la Y. Cuando lleguen al final de la pantalla, estos vuelvan a arriba del todo asignándole un número aleatorio en su posición X.

Los últimos retoques

Bien si ejecutamos nuestro juego veremos que podemos manejar nuestra nave podemos disparar y ver bajar a los meteoros por pantalla. Pero ya te habrás dado cuenta de que los disparos no afectan a los enemigos y eso es precisamente lo que vamos hacer ahora. Antes de nada vamos a crear una nueva lista a la que llamaremos MeteorosColisión y que utilizaremos para guardar el nombre de cada uno de los Sprites de meteoros.

Vamos a crear un procedimiento que se encargará de mostrar una explosión en pantalla. En la X e Y donde se producirá el impacto de nuestro disparo con el meteoro. Este procedimiento simplemente mostrará un gráfico de un tamaño en la X e Y que pasara en sus parámetros.

También colocaremos en nuestro temporizador que utilizamos de bucle una condición para nuestra explosión. Si el ancho es menor de 50 incrementamos en 10. Pero si este es igual o mayor de 50 lo volveremos a colocar a su posición inicial además de hacerle invisible.

Ahora por cada uno de los disparos comprobaremos que el Sprite contra el que colisionó el disparo1 está en la lista MeteorosColisión que es la lista que utilizamos para guardar el nombre de cada uno de los Sprites. Si está en la lista reproduciremos el sonido de explosión, llamaremos al proceso explosión, deshabilitamos el disparo, haremos que este no se muestre en pantalla y incrementaremos en 5 una nueva variable que utilizaremos para la puntuación, y que daremos el nombre de Puntuación.

Seguido limpiaremos el lienzo para volver a escribir en él la puntuación. Colocaremos la Y del meteoro contra el que a impactado el disparo en cero. Es decir lo subiremos arriba. Esto último que hacemos con el disparo1 tenemos que hacerlo con los tres disparos restantes.

Por último programaremos la destrucción de nuestra nave si un meteoro consigue colisionar con ella. Para ello en el temporizador que utilizamos de bucle comprobaremos por cada meteoro si colisiona con nuestra nave. Si esto último es cierto nuestro componente nave dejará de ser visible y quedará deshabilitado. Pararemos el temporizador que usamos de bucle y pintaremos en el centro de la pantalla el texto GAME OVER.

Bueno con esto terminamos nuestro pequeño juego con App inventor 2. Sin duda es una buena manera de aprender el uso de listas, procedimientos y el manejo de componentes genéricos en app inventor. Disfrutar de vuestro juego descansando el dedo entre partida y partida. Y por supuesto si te ha gustado y quieres que hagamos mas articulos como este no dudes en dejarlo en los comentarios.

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