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.

Gráficos Excel en App Inventor

Tras el árticulo que lanzamos hace unos meses de cómo usar una hoja de cálculo de Google en App Inventor 2. Muchos de vosotros me han pedido que explique cómo mostrar gráficos de excel en nuestra aplicación.

Para ello nos vamos ayudar de la API de Google Chart, para poder crear gráficos de barras con los datos contenidos en nuestra hoja de Excel.

Para todo esto necesitaremos continuar con la aplicación que construimos en el citado articulo. Verás que con una serie de modificaciones la aplicación podrá mostrar un gráfico de barras.

Que es Google Chart API

Vamos a hablar un poco sobre una herramienta de Google llamada Google Chart API. Esta herramienta permitirá la construcción de gráficos en forma de imágenes en formato PNG. Podremos usar en nuestras aplicaciones de App Inventor usando el componente Web. El uso es sencillo, mediante una llamada http a una url (https://developers.google.com/chart/) y mandando una serie de parámetros se nos devolverá una imagen. Como casi todo lo que desarrollada Google es de uso gratuito pero con ciertas limitaciones. En el caso de Google Chart API inicialmente estaba limitado su uso a 50.000 peticiones por url y día. Pero actualmente este límite ha subido hasta situarse en 250.000. Lo que parece un valor bastante aceptable.

En el siguiente ejemplo podemos ver cómo configurar una dirección web para que nos devuelva un gráfico en forma de tarta.

(https://chart.apis.google.com/chart?cht=p3&chl=A|B&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=Precio&chd=t:20,10,50,45,35)

Pues es esto mismo lo que vamos a utilizar para nuestra aplicación. Recogiendo una serie de datos metidos en una hoja de Excel, crearemos una pantalla que mostrará un gráfico donde represente dichos datos.

https://www.amazon.es/dp/1795711817

Diseñando nuestra aplicación para mostrar gráficos Excel App Inventor 2

Como comentaba al comienzo de este árticulo vamos a modificar la aplicación que construimos en su día para ver el manejo de datos en un Excel.

Si eres nuevo o no realizaste el tutorial te recomiendo encarecidamente que eches un vistazo al tutorial cómo usar una hoja de cálculo de Google en App Inventor 2. Ya que de lo contrario será imposible continuar este tutorial.

La primera modificación que vamos a realizar a la aplicación es añadirle una pantalla más. Vamos a llamarla «NuevaScreen» y dentro le vamos a colocar un componente imagen. De alto y ancho tendrá que ocupar el total de la pantalla de nuestro dispositivo. Para ello seleccionaremos ajustar al contenedor. Necesitaremos el componente no visible Web, que en su propiedad Url copiaremos la dirección que teníamos en el mismo componente de la pantalla 2. Nos va devolver el listado de datos de nuestra hoja Excel en formato CSV, que lo utilizaremos para recopilar datos que mostrará el gráfico. He añadido una etiqueta a la pantalla. Esta etiqueta no es necesaria, simplemente mostrará el resultado de la construcción de la dirección web encargada de mostrar el gráfico.

Por último deberemos añadir un botón más a Screen1 para mas tarde poder acceder a esta nueva pantalla.

Comenzando a programar nuestra aplicación de Gráficos de Excel en App Inventor

Bien, una vez situados en la pantalla de bloques, lo que vamos hacer es copiar todos y cada uno de los componentes de la pantalla 2, ya que utilizaremos la misma lógica para recopilar los datos que más tarde convertiremos en gráficos. Para ello arrastraremos los bloques de la Screen 2 que creamos en nuestro anterior proyecto a la mochila, y seguido copiaremos de la mochila a la nueva pantalla. Debemos descartar los bloques que hacían uso del visor de lista y de aquellos que mostraban o ocultaban la disposición vertical. Además dentro del procedimiento copiado, modificaremos el bloque «por cada elemento de la lista», dejando solo el bloque que añade elementos a la lista ListadoProductos, donde añadiremos el elemento recorrido de la TablaProductos en el índice 4. Quedará de la siguiente manera.

Ahora lo que necesitamos es generar una imagen que muestre los datos que queramos de nuestra lista. Para ello necesitamos construir una dirección web para Google chart api, y pasarle como parámetros los datos seleccionados de nuestra lista. Vamos hacer uso de la etiqueta «etiqueta1» para mostrar en la pantalla del dispositivo los datos a mostrar en la gráfica y que ayudará a su creación. Esta etiqueta no es necesaria, simplemente es una ayuda visual para una mejor comprensión. Podríamos sustituirla perfectamente esta etiqueta por una variable.

Vamos a mostrar un gráfico que recoja la variación del precio de cada producto, y que se mostrará en una gráfica de barras. Podríamos tener una excel a modo de almacén y que mostrará qué cantidad de unidades hay de cada producto. Lo primero que tenemos que hacer es recorrer la lista generada anteriormente «ListadoProductos» y que colocaremos dentro del procedimiento que hemos copiado en nuestra pantalla.

Si pudiéramos ver cada elemento de la lista recorrida veremos que algunos elementos son de texto y otros son de tipo numérico. Nosotros solo necesitamos los de tipo numérico ya que si intentamos generar la gráfica con datos que no son numéricos esta no se generará o se mostrará de una forma errónea. Vamos a solventar esto comprobando que el elemento seleccionado de la lista es un número.

Si recorriendo la lista un elemento es un número generamos un texto separado por comas, y que quedara guardado en la etiqueta1. Este texto contendrá lo que ya tenía guardado, más el elemento recorrido, más una coma. Quedará de la siguiente manera. (Recuerda que le vamos añadiendo datos por cada elemento de la lista no sustituyendo).

Una vez hecho esto crearemos una dirección web que la uniremos al componente imagen, para que muestre la gráfica. Para construir la dirección web uniremos el texto «https://chart.apis.google.com/chart?cht=bvs&chl=A|B&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» con la seleccion del elemento de la lista «ListadoProductos» en el índice uno, más «&chd=t:» seguido de la etiqueta que creamos anteriormente.

Pero aquí nos surge un pequeño problema. La etiqueta que colocamos al final, contiene una coma al final del texto. Esta coma impedirá que se muestre los datos en la gráfica. Si ejecutas la aplicación podrás comprobar que el texto mostrado en la etiqueta contiene esa coma al final, y la gráfica no muestra las barras de datos. Esto lo vamos a solventar quitando la coma final, añadiendo una serie de bloques más, que de lo que se van a encargar es de ayudarnos a eliminarla.

Solo nos queda programar la parte más sencilla. Y es el botón quedará acceso a nuestra nueva pantalla. Es tan sencillo como dirigirnos a la pantalla Screen1, y crear la lógica como los anteriores botones, pero ahora abriendo la pantalla «NuevaScreen».

Bien si pruebas la app verás que muestra un gráfico representando la variación de precios de los productos a modo de barras. Este gráfico puede ser modificado para mostrar un gráfico circular partido en porciones, o incluso variar el color o incluir texto, voy a dejar un PDF para que podáis aprender a generar gráficos para vuestras app.

Descarga el proyecto en formato AIA

Descarga PDF como construir una dirección Web para Google chart API

Editar y eliminar filas en una Excel

Hola y bienvenidos a inventordeaplicaciones en este nuevo artículo vamos a ver como editar y eliminar filas en una Excel. Un tema que muchos usuarios me habéis pedido. Y es que parece ser que el tema de manejar una hoja de cálculo despierta bastante interés entre los usuarios de App inventor. En artículos anteriores vimos cómo crear una App en la que podíamos editar una hoja de cálculo de google e incluso como mostrar gráficos de datos usando esa misma hoja. Pero sois muchos los que me piden que explique cómo editar filas ya creadas y o eliminarlas. Y aunque es un tema muy avanzado, ya que requiere de una cierta programación en java, vamos a ver como se puede implementar en App Inventor usando la Api de Google Sheets.

Modificar el diseño para editar y eliminar filas en una Excel

Vamos a continuar modificando la aplicación que creamos en anteriores artículos para poder editar y eliminar filas en una Excel. Esta vez vamos a crear un nuevo botón en la pantalla principal. Este nos mandara a una nueva pantalla a la que se le ha puesto el nombre de “PantallaEliminar”. Aqui se programara toda la lógica para modificar datos y eliminarlos.

Nuestra nueva pantalla con nombre “PantallaEliminar”  la dotaremos de una disposición vertical donde introduciremos tres campos de texto. Estos a su vez tendrán una etiqueta a modo de descripción. Estos tres campos de texto hacen referencia a los tres campos de nuestra hoja excel. Además añadiremos dos botones uno con el texto eliminar y otro con el texto actualizar. De esta forma introduciendo los datos en los campos de texto. Si estos  estas ya están en la hoja Excel, tendremos la opción de modificar o eliminar de la hoja. Además añadiremos dos componentes no visibles un notificador y un componente Web.

Como siempre al final del artículo podréis descargar el proyecto en formato AIA.

Programando nuestro Script

Vamos a dirigirnos nuestra hoja de cálculo. Pulsaremos en   Formulario –> Modificar  formulario para modificar el formulario que ya teníamos, y de esta manera poder editar y eliminar filas en una Excel. Vamos a crear un nuevo campo al que llamaremos “tarea” y que tendrá un campo de respuesta corta. El formulario se guardará cuando cerremos la ventana.

Ahora en nuestra hoja de cálculo, seleccione Archivo – Compartir. Haga clic en el botón «Avanzado» y cambie el acceso de Privado (que es el predeterminado) a Cualquiera usuario con el enlace. Y cambia el tipo de acceso a «Puede editar» y después guarda .

Ahora selecciona Archivo – Publicar en la web y en la siguiente ventana pulsa en Publicar . Aparece una ventana, pulsa en Aceptar y Cerrar .

El siguiente paso es crear un Script. Selecciona Herramientas → Editor de secuencias de comandos pega el código que podrás descargar de este enlace y pulsa en guardar. Ese código no tienes que entenderlo pero si te interesa puedes leer los comentarios del mismo para saber qué es lo que hace.

Para que nuestro código funcione tenemos que hacer que se ejecute cuando nosotros consultamos la hoja excel desde nuestra app. Para ello el editor de Scripts nos ofrece un disparador de eventos. Este se encargará de llamar a la función y de esta manera conectaremos nuestra app con el código. Pulsa el botón que te muestro en la imagen.

Se abrirá una nueva ventana pulsa en el botón azul de la esquina inferior derecha “Añadir activador” 

En la nueva ventana, en la opción “seleccionar qué función ejecutar”.  Selecciona de la lista desplegable la función «BorrarFila», que corresponde a la función creada en el Script. Si le has cambiado el nombre tendrás que seleccionar el nombre que le has puesto. En la opción selecciona la fuente del  evento, seleccione «De una hoja de cálculo». Y en la opción seleccione un tipo de evento selecciona «al enviarse el formulario» y haga clic en guardar.

Aparecerá una nueva ventana «Se requiere autorización». Pulsa  en «Revisar permisos», Selecciona la cuenta de Google con la que abres la hoja Excel. Aparecerá una ventana nueva con titulo «No se ha verificado la aplicación», haga clic en «Configuración Avanzado»

En la nueva ventana haz clic en » Ir a (NOMBRE DE TU HOJA DE CÁLCULO) (inseguro)» 

En la siguiente pantalla te solicitará permisos, selecciona “Permitir”

Con esto ya tendremos preparado nuestra hoja de cálculo, ahora tendremos que programar nuestra pantalla para que nuestro Script funcione.

https://www.amazon.es/dp/1795711817

Programando nuestra App para editar y eliminar filas en una Excel

Lo primero antes de nada es programar el botón que añadimos a nuestra Screen1 y que habría nuestra nueva pantalla “PantallaEliminar”.

Lo segundo será programar nuestra nueva pantalla, para ello abriremos nuestra nueva pantalla y pulsaremos en bloques. 

Vamos a  crear un procedimiento que yo llamaré “LlamaExcel”. Este se encargará de llamar a nuestra hoja excel, y por tanto, ejecutará la llamada de nuestro script. Este procedimiento contendrá un parámetro que llamaremos “Acción”. Este parámetro lo podemos crear pulsando en la rueda dentada de nuestro procedimiento.

 Lo primero que haremos en este procedimiento es asegurarnos que cada caja de texto contenga información, es decir, que no esten vacias. Para ello utilizaremos un bloque if  y los operadores O (AND) logicos. Si estos estan vacios lo notificaremos al usuario con un mensaje.

Si por el contrario los campos de texto contienen información llamaremos a la dirección web como esta:

 “https://docs.google.com/forms/d/1hHZ9Y7w4YGkxs…zFQbEgCk6Ces/formResponse”.

Esta misma dirección la creamos en anteriores tutoriales para  la pantalla donde introducimos elementos en nuestra hoja excel. 

Seguido haremos una solicitud HTTP POST, donde le pasaremos  a nuestra formulario una lista de nuestros elementos contenidos en cada campo de texto. Por cada campo de texto añadiremos los textos que introdujimos en el primer tutorial de hojas excel eliminando el signo de interrogación y el igual. Pero ahora tenemos un elemento más, a este, le colocaremos la entrada que establecimos en nuestro procedimiento. Quedará de la siguiente manera.

Seguido eliminaremos el texto de los campos de texto. para no volver a utilizar la misma información. Entonces a cada campo de texto le añadiremos un bloque de texto vacío.

Recuerda que nuestro diseño contiene dos botones, es aquí donde entra en escena nuestro parámetro del procedimiento. Si pulsamos en el botón1 llamaremos al procedimiento pasándole el parámetro “BORRAR”. Si por el contrario pulsamos el botón2 el parámetro a pasar será “ACTUALIZAR”.

Bien solo nos queda probar la aplicación y ver cómo podemos editar y eliminar filas en una Excel que ya teníamos editadas.

Sin más me despido una vez más desde Inventor Aplicaciones. Si tienes alguna duda o quieres que tratemos algún tema no dudes en dejarlo en los comentarios un saludo.

Archivo AIA del proyecto

Enlace para descargar el pequeño Script que usaremos en las hojas de cálculo de Google

Calculadora en App Inventor

Hola y bienvenidos un a Inventordeaplicaciones.es. En el artículo de hoy vamos a ver como crear una calculadora completa y funcional en App inventor 2. Crear una calculadora en App Inventor 2 puede ser una tarea sencilla, pero hacerla como la mayoría de las aplicaciones que viene por defecto en el sistema Android puede ser más complicado de lo normal. Vamos a ver como hacerlo con el mínimo de bloques posible.

Diseño de la aplicación de calculadora en App Inventor 2

Tengo que reconocer que este diseño me ha quedado bastante bonito. Y es que quería hacer ver que también con App Inventor se pueden hacer cosas muy interesantes en el diseño de aplicaciones. Me gustaría que descargarás el proyecto de la aplicación y explores e investigues como se ha construido. Lo que quizá se pueda destacar es el uso de una disposición tabular para colocar los botones, y como se han utilizado colores y tipos de letras para los mismos. También se han modificado parámetros de las propiedades Screen1 para hacerla un diseño más elegante visualmente

https://www.amazon.es/dp/1795711817

Programando la aplicación

Lo primero es crear tres variables globales que nos servirán para ir almacenando los valores de nuestras operaciones matemáticas. Necesitaremos una variable para el operando1 otra para el operando2  y por último una variable para el Operador. Todas ellas estarán inicializadas con un cuadro de texto vacío.

Si estos términos no te suenan  o no sabes que quiero decir, no todo el mundo lo tiene que saber o conocer por estos términos, voy a explicarlo. Los operandos son datos que conecta y procesa el operador. El resultado es la respuesta que resulta cuando se completa la operación. Por ejemplo: la expresión 3 + 2, el + es el operador, el 3 y el 2 son los operandos, y el 5 es el resultado.

Una vez creadas nuestras tres variables tenemos que almacenar en ellas cada uno de los datos que le corresponden y mostrarlos en la pantalla del dispositivo. Para ello lo primero que necesitamos es saber que tecla se ha pulsado y qué valor nos devuelve. Podríamos hacerlo de la siguiente manera. Si pulso el botón 1 y este contiene el texto 1, entonces muestro en la etiqueta el 1. Pero si tenemos un gran número de botones en pantalla, sería una tarea tediosa hacerlo con cada uno de ellos, y como ya he explicado al comienzo de este artículo vamos a intentar hacerlo con el menor número de bloques posibles. 

App inventor no da la opción de usar una serie de bloques para cualquier componente donde no se hace referencia a ninguno en concreto, si no que el bloque te devuelve cual se ha pulsado. Vamos a utilizar los bloques cualquier botón, lo podemos encontrar en la pantalla bloques al final del árbol.

 Por consiguiente si sabes cual se ha pulsado puedes saber qué texto contienen y actuar en consecuencia. Vamos a usar el bloque When any Botón.clic, que nos devolverá el botón pulsado, y después meteremos en la etiqueta1 el texto que anteriormente teníamos en la etiqueta más el texto del botón devuelto.

¿Pero qué pasa si pulsamos algún botón de operador?. No queremos que el signo + aparezca entre medias de un número. Lo resolvemos de la siguiente manera, vamos comprobar que el texto del botón pulsado es un número o un punto.

Si el texto del botón es un número o contiene el texto de un punto entonces  meteremos en la etiqueta1 el texto que anteriormente teníamos en la etiqueta más el texto del botón devuelto.

Ahora necesitamos que al pulsar algún operador los números que tengamos en la etiqueta se guarden en la variable Operando1. Y que el operando pulsado se guarde en la variable Operador. Además borraremos el contenido de la etiqueta1, y a la etiqueta resultado le añadimos el operador pulsado. De esta manera ya tendremos parte de nuestra operación matemática un Operando y operador. Repetiremos esta operación con todos los signos de operaciones.

Vamos a necesitar resetear o borrar la operación en curso para ello disponemos de la tecla C. Esta tecla si es pulsada lo unico que ara es borrar los textos de la etiqueta1 y la etiqueta resultado.

Antes de continuar vamos a añadir un bloque más y es que si te has fijado hemos hecho uso de la etiqueta resultado. Esta etiqueta la usamos para añadir los signos de operaciones pero cuando volvamos a escribir un nuevo número tendrá que ser borrada. Te muestro como hacerlo a continuación.

Ahora al pulsar el botón de signo igual meteremos en nuestra variable operando2 el contenido de la etiqueta1. De esta manera, ya tenemos dos números y un Operando para realizar nuestra operación matemática. Comprobaremos que tipo de operando es, y en consecuencia realizaremos la operación matemática correspondiente, mostrando el resultado en la etiqueta1.

Con esto ya tenemos una calculadora construida en app inventor, solo falta que pruebes esta con tu método favorito. Es cierto que es muy sencilla y que contiene ciertos errores, pero eso te dejo a ti lector el mejorar la aplicación y resolver los errores.

Descarga proyecto calculadora en formato AIA para App Inventor.

Sin más me despido. Si tienes alguna duda o proyecto que quieras realizar no dudes en dejarlo en los comentarios. Un saludo.