miércoles, 1 de abril de 2020

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

Diseño calculadora App Inventor 2

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.

Variables globales para calculadora

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.

Árbol de bloques en App Inventor

 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.

Cuando pulsas cualquier botón en App Inventor 2

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

Cuando pulsas cualquier botón y pones condiciones en App Inventor 2

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.

conjunto de bloques para controlar los botones

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.

Bloque que controla a un botón

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.

Bloque controla cualquier botó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.

bloque en App inventor condicionado

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.

domingo, 29 de diciembre de 2019

Editor de fotos en App Inventor

Camara App Inventor

Vamos a utilizar los componentes de cámara y listPicker para crear un editor de fotos en App Inventor. Aprovechando las fiestas navideñas vamos a crear un app en la que podamos tomar una foto y posteriormente editarla y visualizarla. Y más tarde podrás compartirla con tus amigos o familiares.

El diseño del editor de fotos en App Inventor

Nuestra aplicación consta de tres pantallas. La primera contendrá dos botones. el primero abrira la camara y una vez tomada la foto nos dirigirá a la segunda pantalla. El segundo botón nos dirigirá a la tercera pantalla donde podremos ver todas nuestras fotos.

La segunda pantalla consta de una disposición horizontal que quedará situada arriba de la pantalla, y contendrá dos botones. El primer botón, servirá para retroceder, y el segundo para guardar la imagen. Tendremos también una disposición horizontal donde aparecerá nuestra imagen tomada con la cámara del dispositivo, y dentro de este meteremos un sprite. Por último una disposición horizontal con scroll, donde meteremos seis botones, a estos le asociaremos una imagen con transparencia.

La tercera pantalla solo tendrá un componente imagen que mostrara la imagen seleccionada del listpicker.

Programando la aplicación.

Comenzaremos por programar el boton de tomar foto de nuestra primera pantalla. Necesitamos que al pulsar en el, se abra la cámara para poder tomar la foto. después esta instantánea tenemos que utilizarla en la segunda pantalla, es decir, una vez tomada la foto abriremos la segunda pantalla y mandaremos la foto a dicha pantalla.

Al pulsar el botón llamamos a la cámara y mandamos la foto a otra pantalla App Inventor 2

Seguido vamos a programar el botón para abrir la galería y buscar la foto tomada o las fotos que guardamos después de editar. Para ello al pulsar al botón abriremos el selector de galería, y después de seleccionar una imagen abriremos la tercera pantalla y mandaremos la foto a dicha pantalla.

Al pulsar el botón llamamos al selector de foto y mandamos la foto a otra pantalla AI2

Programando la Screen2

Ahora no vamos a dirigir a la pantalla de bloques de nuestra screen 2 y vamos a programarla. Lo primero que vamos hacer es crear dos variables. La primera la llamaremos «NumeroImagen» y la inicializamos a 0. La segunda la llamaremos «Imagen» y la inicializamos con el valor devuelto por la pantalla anterior, en nuestro caso la Screen1. Esto lo haremos utilizando el bloque «Tomar el valor inicial» que se encuentra en bloques –> Integrados –> control.

VAriables globales AI2

Una vez que ya tenemos nuestras variables inicializadas, queremos que ponga de imagen en el fondo del lienzo, la imagen devuelta por la Screen1 y que se encuentra en nuestra variable «Imagen».

Iniciar pantalla AI2

Ahora que tenemos nuestra imagen cargada vamos a proceder a editarla. La manera de hacerlo sigue un proceso bien sencillo. Cada vez que se pulsa unos de los botones de la disposición horizontal con scroll de la parte inferior de la pantalla, se carga la imagen del mismo botón al sprite que ya introdujimos, y a este mismo se le escala a las dimensiones de la imagen del lienzo. De esta manera como la imagen cargada en el sprite es una imagen con transparencia y redimensionada queda bien integrada. Tendrás que hacerlo con cada uno de los botones.

Cuando boton click editor de fotos en app inventor.

Guardando la imagen en el editor de fotos en App Inventor

Ya tenemos una foto y la hemos editado. Ahora solo nos falta guardar y poder volver atrás. ahora si pulsamos en el botón que contiene un icono de guardar, la aplicación nos mostrará una notificación. Esta notificación mostrará al usuario un aviso de que la imagen será guardada. Además utilizaremos la variable anteriormente creada «NumeroImagen» para dar nombre al archivo, y que incrementaremos en uno cada vez que pulsemos en el botón de guardar. De esta manera impedimos que el archivo se sobrescriba con el mismo nombre.

Notificación con botón de guardar y cancelar editor de fotos en app inventor.

Si el usuario en la notificación pulsa la opción de «Guardar», guardaremos el archivo y mostraremos una notificación de que este se ha guardado.

Mostrar alerta AI2

Si el usuario pulsa el botón de retroceso que colocamos en la parte superior de la pantalla volverá a la Screen1.

Abrir otra pantalla AI2

Programando la Screen3.

Ya casi hemos terminado solo falta programar la Screen3. Esta pantalla solo mostraba la imagen seleccionada en la Screen1, y lo haremos recogiendo el valor devuelto al abrir la pantalla. Una vez que pulses el botón de retroceso del teléfono, este volvera atras.

Botón atrás en App inventor.

Bueno ahora si podremos probar nuestra aplicación y crear bonitas imagenes de navidad para compartir con nuestras familias o amigos.

¿Te ha gustado el post? Entonces, suscríbete para recibir post como este. Y si quieres comentar algo acerca del articulo o quieres que toquemos algo de tu interés en futuros artículos, no dudes en dejar un comentario. También puedes dejar un comentario en las redes sociales y compartirlo.

Descarga el proyecto en formato AIA

sábado, 30 de noviembre de 2019

Inteligencia Artificial en App Inventor.

Referencia a Inteligencia Artificial

En este articulo veras como crear una sencilla AI (Inteligencia Artificial) en App Inventor. Nos introduciremos de una forma muy básica en los fundamentos de la inteligencia artificial. Verás como haciendo uso de los componentes no visibles TextoAVoz y ReconocimientoDeVoz, tu app es capaz de contestar a tus preguntas. Repasamos un poco de historia de la Inteligencia Artificial y la pondremos en práctica en su forma más básica.

Un poco de historia de la Inteligencia Artificial.

Es a Alan Turing a quien se considera padre de la inteligencia artificial (dando, de hecho, nombre al test que determina la calidad de las IA). En 1936, este visionario diseñó una máquina capaz de implementar cualquier cálculo que hubiera sido formalmente definido, pilar esencial para que un dispositivo pueda adaptarse a distintos escenarios y “razonamientos”.

En 1997, IBM demostró que un sistema informático era capaz de vencer al ajedrez al campeón del mundo Gari Kaspárov. Se llamaba Deep Blue y sirvió para que la industria tecnológica y la sociedad cobrara conciencia de las posibilidades de las IA.

Pero si hay un ejemplo de inteligencia, ese es IBM Watson. En 2011, Watson ganó el popular concurso televisivo Jeopardy! frente a los dos máximos campeones de este programa, en el que se realizan preguntas de conocimiento de todo tipo. Watson tuvo que ser capaz de entender las preguntas, a lo que ayudaron sus 200 millones de páginas de código contenido en su sistema. Realizó jugadas inteligentes y también tuvo que valorar el riesgo cuando apostó una cantidad en la ronda final.

Este último ejemplo lo utilizaremos para nuestro cometido. Crearemos una aplicación en App Inventor que sea capaz de entender nuestro lenguaje y a la vez sea capaz de darnos una respuesta coherente, creando una sencilla Inteligencia Artificial.

Diseñando la aplicación de Inteligencia Artificial

Tu app estará diseñada por una sola pantalla. Esta pantalla contendrá un botón con la imagen de un micrófono, que nos servirá para que cuando sea pulsado podamos hablar al dispositivo. También contendrá una etiqueta de texto donde se mostrará lo que has hablado. Más abajo, tendrás una serie de disposiciones verticales que contendrán un lienzo y un sprite. Este sprite hará de boca para nuestra inteligencia artificial de app inventor.

Introduciremos en nuestra app una serie de componentes no visibles, como el componente de reconocimiento de voz, texto a voz y por último un temporizador.

Pulsa para descargar el archivo AIA.

Programando nuestra Inteligencia Artificial en App Inventor.

Una vez abierta la pantalla de bloques de app inventor, tendremos que hacer un pequeño ajuste en el sprite. Para que se vea bien en distintas pantallas o distintos dispositivos, vamos a indicarle que cuando inicie la pantalla centre la X e Y de nuestro sprite en el centro de nuestra disposición vertical. Para ello vamos a decirle que la coordenada X del sprite la coloque a la mitad del ancho de la disposición vertical, menos la mitad del ancho del sprite. Haremos lo mismo con la Y del sprite. coloca los bloques de la siguiente manera.

Inicia pantalla en app inventor para cuadrar en el centro un Sprite

Necesitamos que nuestra aplicación sea capaz de escuchar lo que le dictamos, y para ello vamos a utilizar nuestro botón y el componente no visible de reconocimiento de voz. Cuando presionemos el botón haremos una llamada al componente reconocimiento de voz para convertir en texto lo escuchado y cuando soltemos el botón este se detendrá. Colocaremos los bloques de la siguiente manera.

Botones de aplicación en AI2 de presionar y soltar.

Una vez obtengamos el texto, lo mostraremos en la etiqueta que situamos debajo del micrófono. Seguido lo que haremos es mirar si dentro de su contenido está la palabra «hola». Si el texto contiene la palabra «hola», el sistema interpretará que es un saludo y llamaremos al componente no visible texto a voz para devolver el saludo.

Después de obtener texto en una aplicación de app inventor 2

Ya podemos interactuar saludando a nuestra inteligencia artificial. Pero vamos a dotarla de más complejidad. Ahora quiero que interprete un saludo que contiene una pregunta, tal como «Hola, ¿cómo estás?» o Hola, ¿que tal?. Para ello haremos lo mismo que en el ejemplo anterior, pero esta vez en la comprobación del bloque if, nos ayudaremos de los bloques lógicos «Y» o «O» con las palabras clave que se pueden encontrar en las frases anteriores.

bloques lógicos "Y" o "O" con las palabras clave que se pueden encontrar en una frase AI2

Vamos a darle una vuelta de tuerca más, y lo que haremos ahora es que a una misma pregunta, pueda contestar de diferente manera. Para ello vamos a crear una variable local a la que llamaremos «Aleatorio», y que inicializamos con un número aleatorio entre 1 y 100, es decir cada vez que obtengamos texto de nuestra voz, la variable contendrá un valor distinto siempre dentro de este rango.

Variable local inicializada con número aleatorio App inventor 2

Una vez definida y inicializada nuestra variable, la utilizaremos para decirle a nuestra app que si el valor de esta es menor de 50 nos dé una contestación. O si por el contrario es mayor de 50, pueda darnos otra diferente. Fijate el abanico de posibilidades que nos abres esta última opción.

Resultado aleatorio en App Inventor 2

Bien con esto podemos generar tantas contestaciones a preguntas como deseemos, solo tenemos que seguir el patrón anterior. Si en el texto de la pregunta formulada, se encuentran ciertas palabras, contestaremos de forma aleatoria.

Animando nuestra IA.

Ahora veremos otro ejemplo. En este al final de cada mensaje hablado de nuestra inteligencia artificial, pondremos nuestro temporizador como cierto, para más adelante animar nuestro sprite. Podemos ver el ejemplo en la siguiente imagen.

Resultado aleatorio en AI2

Antes de continuar vamos a animar a nuestra inteligencia artificial. En los bloques anteriores hicimos que cada vez que hablara la inteligencia artificiial se pusiera como cierto el temporizador, pues bien vamos a utilizar dicho temporizador para animar.

Lo único que tenemos que hacer es comprobar que el temporizador ha llegado al final de la cuenta, si esto es así pondremos el alto del sprite con un número aleatorio entre 1 y 100. Seguido comprobaremos que ha dejado de hablar. En este momento pondremos la activación del temporizador a falso, y el alto del sprite en 25. De esta manera conseguiremos el efecto de una boca hablando. Puedes ver los bloques en la siguiente imagen.

Animación sprite con temporizador en App Inventor.

He creado unas cuantas situaciones más, dando una respuesta a mi propio nombre cuando el programa me lo pida, o preguntando a la inteligencia artificial qué sexo tiene. Como ves puedes generar contestaciones a casi cualquier pregunta.

Respuestas de una IA en app inventor

Más preguntas para tu inteligencia artificial en App Inventor 2.

También podemos hacer uso de otros bloques que no sean de texto para generar una contestación lógica, como son los bloques de reloj. Si añadimos un componente no visible Reloj a nuestro programa, (aprende más sobre utilización de la hora y fecha en App Inventor) y utilizas los bloques del mismo para generar contestaciones, puedes preguntarle cosas como el día de la semana que es hoy, o la hora actual. Puedes ver el siguiente ejemplo.

Respuestas de una IA utilizando bloques que no son de texto.

Con este articulo nos hemos introducido de una manera básica pero interesante al mundo de la inteligencia artificial. Viendo como podemos simular de una manera sencilla una inteligencia en nuestra aplicación.

Si tienes algun comentario que hacerme acerca del articulo, si crees que podemos hablar de algo relacionado con el mundo de App Inventor, no dudes dejarlo en los comentarios. Un saludo y hasta la próxima inventor.

Vector de Microfono creado por alvaro_cabrera – www.freepik.es


sábado, 2 de noviembre de 2019

Hojas de cálculo en App Inventor

Este tutorial está motivado por el anuncio por parte de Google del cierre de Fusión Tablets.

Sois muchos los usuarios que estáis preguntando qué alternativas tenemos al usar App Inventor 2. Este tutorial muestra una alternativa, que no la única, al uso de Fusión Tablets, utilizando una hojas de cálculo de Google en App Inventor 2.

En este ejemplo crearemos una aplicación en la que podremos ver en forma de lista los datos de nuestras hojas de cálculo. En la que podremos modificar desde el mismo App Inventor.

Nuestro ejemplo será de un almacén de ropa y complementos, donde los datos estarán registrados en una tabla excel de hojas de cálculo de Google. Desde la App podremos consultar datos de esa misma tabla y tambien añadir al final de la misma nuevos productos.

Diseño de la App, para modificar hojas de cálculo

El diseño de nuestra app consta de tres pantallas, la principal, que mostrará al usuario un par de botones. El primero con el texto “Ver producto” dará acceso a la segunda pantalla, el segundo botón con el texto “ Añadir producto”  dará acceso a la tercera pantalla.

La segunda pantalla mostrará un ListWiev que contendrá todos los datos de nuestra hoja de cálculo de Google en App Inventor 2. Al pulsar cualquiera de los registros, podremos ver un resumen más detallado del producto seleccionado. La tercera pantalla, tendremos la opción de añadir productos. Rellenando los campos requeridos podremos añadir más productos a nuestra hoja de cálculo de Google. Para todo esto nos ayudaremos de el componente no visible Web.

Cómo usar una hoja de cálculo de Google en App Inventor 2- Pntalla 1
Cómo usar una hoja de cálculo de Google en App Inventor 2 - componentes pantalla 1
Cómo usar una hoja de cálculo de Google en App Inventor 2 - Pantalla 2
Cómo usar una hoja de cálculo de Google en App Inventor 2 - Componentes pantalla 2
Cómo usar una hoja de cálculo de Google en App Inventor 2 - Pantalla 3
Cómo usar una hoja de cálculo de Google en App Inventor 2 - Componentes pantalla 3

Como siempre, podréis descargar el diseño de la aplicación al final de estas líneas. Con el fin de que solo estés centrado en seguir los pasos de este tutorial con más claridad. Posteriormente recomiendo que se estudie el diseño para mejoras o la comprensión del mismo.

descarga proyecto AIA

Creando una hoja excel para App Inventor 2

Lo que vamos hacer es crear una nueva hoja de cálculo de Google, para ello nos dirigimos a la siguiente dirección: https://www.google.es/intl/es/sheets/about/.  Ingresa con tu cuenta de gmail, y una vez en la página ponle nombre a la hoja, pero no modifiques ninguna celda de la misma. En la barra de herramientas superior pulsa en Herramientas → crear formulario, se abrirá una nueva página donde podrás crear nuevas preguntas a modo de formulario. Las utilizarás más adelante en este tutorial para añadir artículos a tu hoja de cálculo.

Una vez situado en esta página el proceso para crear pregunta es sencillo modifica el título de la pregunta como muestro en la imagen 

Cómo usar una hoja de cálculo de Google en App Inventor 2 - Título cuestionario

en mi caso le pondré Id para hacer referencia a un código identificador de cada uno de  mis productos, seguido pulsa donde dice selección múltiple 

Cómo usar una hoja de cálculo de Google en App Inventor 2 - Selección múltiple

y de las opciones que salen selecciona respuesta corta.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - Respuesta corta

Dependiendo del nombre que le pongamos a la pregunta, automáticamente el formulario nos detecta si la respuesta tiene que ser un nombre o un número. Si queremos que todo sea texto tendremos que cambiar las opciones que aparecen más abajo.

Para añadir más preguntas, pulsa en el signo más de la pequeña barra lateral. Yo en mi ejemplo voy a añadir dos más, una es el nombre del artículo y otro para el precio.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - insertar preguntas formulario

Si volvemos a nuestra hoja de cálculo, podrás observar que se han creado cuatro columnas y que estas coinciden con el nombre de cada pregunta creada anteriormente en el formulario, “Id, articulo y precio”, menos la primera que contiene el nombre de marca temporal, que contendrá la fecha y hora de la última  modificación de la pregunta.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - excel con marca temporal

bien de momento dejamos esto, sin cerrar ninguna ventana de de nuestro navegador ya que más adelante necesitaremos volver para consultar una serie de datos. 

Programando las pantallas para App Inventor y hojas de cálculo de google

Lo primero que vamos hacer es programar los botones de nuestra primera pantalla. Al pulsar el primero “Ver producto” nos mandara a la segunda pantalla y si pulsamos el segundo “ Añadir producto” nos mandara a la tercera pantalla. 

Cómo usar una hoja de cálculo de Google en App Inventor 2 - botón1  y botón2 screen1

Ahora vas a programar la pantalla2, antes tenemos que recoger de nuestra excel un dato que nos servirá para mostrar la tabla en nuestra aplicación. Dirígete a tu hoja de cálculo  para conseguir el enlace. Para compartir, toca el botón de la parte superior derecha de la pantalla . En la ventana que se abre pulsa en copiar enlace para compartir. Copiala en una nueva ventana de tu navegador y sustituye la parte remarcada en rojo de la imagen por el siguiente texto, “export?format=csv”.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - enlace para compartir

la nueva dirección quedará de la siguiente manera.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - enlace para compartir modificado

esto lo que hará es convertir tu hoja de cálculo en un archivo en formato csv.

Dirígete a App inventor, pulsa en el botón diseñador de la pantalla 2 y selecciona el componente no visible Web. Introduce la dirección web anteriormente copiada y modificada en la casilla de Url.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - dirección web

Pulsa el botón de bloques, y vamos a comenzar a programar la pantalla2. En primer lugar vamos a necesitar dos variables globales que inicializará como una lista vacía, a la primera la llamamos TablaProductos y la segunda ListaProductos.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - variables globales Pantalla 2

Seguido le vas a decir que cuando inicie la pantalla haga una llamada HTTP utilizando la dirección web con la que configuraste tu componente no visible web. Para ello te ayudaras del bloque llamar web1.Obtener, quedará de la siguiente manera.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - cuando inicia pantalla 2

La llamada devolverá un texto que obtendrás con el bloque cuando Web1. ObtuvoTexto. De las cuatro variables que te ofrece este bloque escoge contenidoDerespuesta que contendrá nuestra hoja de cálculo en formato CSV. Esta variable se la asignamos a la variable global TablaProductos ayudándote con el bloque Lista desde tabla CSV texto, quedará de la siguiente manera.

Pulsa para saber más sobre las listas en App Inventor 2

Cómo usar una hoja de cálculo de Google en App Inventor 2 - Obtener texto de la consulta web

Ahora va ser necesario construir un procedimiento que construirá una lista descartando los elementos que no vamos a necesitar. Como la fecha en la que se creó y el código Id que le hemos asignado. Entonces por cada elemento de la lista TablaProductos que creamos anteriormente, añadiremos a la lista ListadoProductos los índices que nos interesan, la descripción el artículo y su precio. Por tanto escogeremos el índice 3 y 4 para construir la nueva lista, quedando de la siguiente manera.

Cómo usar una hoja de cálculo de Google en App Inventor 2 - Procedimiento pantalla 2

Este procedimiento lo vamos a llamar cada vez que obtengamos el texto de la llamada a la web. Por tanto lo colocaremos en el bloque que anteriormente utilizamos, y añadiendo a nuestro visor de listas, el contenido de nuestra variable global ListadoProductos. Quedando dela siguiente manera.

 obtener texto en la respuesta web

Antes de ver los resultados de nuestra aplicación vamos a otorgarle una nueva funcionalidad. Vamos hacer que cuando el usuario pulse un elemento de nuestra lista, la pantalla muestre una pequeña descripción del elemento seleccionado. Ya que el diseño de la aplicación consta de dos disposiciones, una a la vista del usuario y otra oculta al mismo, vamos a cambiar entre ellas después de la selección. y al texto que contiene la segunda disposición vertical, le asignaremos un elemento de ListadoProductos, cuyo índice será el elemento seleccionado en el visor de listas. Quedará de la siguiente manera.

 Después de la selección del listview

Una vez en esta segunda disposición vertical, para que el usuario sea capaz de volver a la anterior. Cuando pulse al botón le vuelva a mostrar la disposición vertical que contenía nuestra lista de elementos. Tiene que quedar de la siguiente manera.

pulsando el botón 1 pantalla 2

Si ejecutas la aplicación verás que la segunda pantalla muestra un registro que coincide con la primera fila de datos de tu hoja de cálculo. En este caso sería el nombre de cada columna nombre, id y precio.

“Por favor abstente de modificar manualmente la hoja de cálculo, ya que alteraría los resultados de este tutorial”

Ahora vamos a programar la tercera pantalla de nuestra aplicación. Esta pantalla tiene unas cajas de texto donde el usuario introducirá los datos, y al pulsar el botón, éstos se insertarán en nuestra hoja de cálculo. Para ello nos valdremos de nuestro formulario, es decir, cuando pulsemos el botón se mandará a la dirección web del formulario los registros de las cajas de texto. Para conseguir esto tendremos que mandar desde nuestra aplicación una serie de datos a la página web, y para ello necesitamos construir la dirección web donde se mandaran con los datos requeridos. Nos dirigimos a nuestro formulario de la hoja de cálculo y pulsamos en “Más” y del desplegable seleccionamos “Obtener enlace previamente rellenado”.

 Obtener enlace rellenado en formulario

Se abrirá una nueva ventana con nuestro formulario donde copiaremos la dirección web sustituyendo la parte final ”prefill” por “formResponse”. Quedando de la siguiente manera: https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse. Vamos a copiarlo en un lugar para mas tarde poder usarlo.

Ahora necesitamos un par de datos más, y para ello tendremos que rellenar previamente nuestro formulario, antes de solicitar el enlace que nos hace falta, no importa que introduzcas en las respuestas, como te muestro en la siguiente imagen yo voy a poner letras para conseguir el enlace.

 respuestas rellenas y generación de enlace

Pulsamos en generar enlace y lo copiamos en el portapapeles. Ahora abre una nueva pestaña en el navegador y inserta en la barra de direcciones el enlace copiado, en mi caso es este:

https://docs.google.com/forms/d/e/1FAIpQLSfaFDSRO64zTwVI3lucHETEWvYygO3CGNdMMfjMhuYoSHiTsw/viewform?usp=pp_url&entry.510338503=a&entry.1148147912=b&entry.1297137201=c

Ahora con el enlace que tenemos vamos a construir una dirección web que insertará los datos de cada una de las cajas de texto. 

En primer lugar necesitamos descomponer la dirección web que te muestro arriba. Para ello cuando pulsemos el botón1, haremos una llamada a una dirección web que será, la dirección web que copiamos y modificamos. «https://docs.google.com/forms/d/1MkqNfCk9RfG2KyC4hdxn8tiQmiFqsjCUfTlXUqqooMI/formResponse«.

 Añade «&entry.510338503=a» sustituiremos la “a” por el contenido de la caja de texto1.

Seguido añade «&entry.1148147912=b» sustituiremos la “b” por el contenido de la caja de texto2.

Y por último «&entry.1297137201=c» sustituiremos la “c” por el contenido de la caja de texto3.

Sustituye el carácter “ampersand &” de la primera entrada por un signo de interrogación. Y codificaremos el texto de todas las entradas por si se insertan caracteres especiales.

Quedará de la siguiente manera

pulsando botón para generar dirección web

Una vez construida nuestra dirección web solo tendremos que llamarla y esta insertará una nueva línea en nuestra hoja de cálculo

ir a la dirección web pantalla 3

Bien ahora solo tienes que ejecutar la aplicación que has construido en este artículo y si todo ha ido bien funcionara a la perfección.

Si quieres que hablemos de algún asunto en concreto, o te has quedado atascado en algún desarrollo. No olvides dejarlo en los comentarios. Sin más me despido hasta el próximo tutorial. Un saludo

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