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.