En el anterior post vimos como crear una fusion tables, como dar permisos para que cualquier usuario pudiera ver nuestra tabla, y mediante la consola creamos unas credenciales para que desde nuestra aplicación cualquier usuario pudiera modificar nuestra tabla, para ello descargamos un archivo cuya extensión era p12.
Vamos a continuar entonces agregando el archivo a nuestra aplicación.
CREANDO LA APLICACIÓN
Lo primero que haremos es ir a la página de App Inventor y crearemos un nuevo proyecto al que llamaremos “FusionT”.
Antes de empezar con la aplicación de ejemplo tenemos que hacer unos pequeños pasos que dejamos por hacer en el anterior tutorial y para ello construiremos una pequeña aplicación que luego borraremos y que solamente nos ayudará a ver que lo estamos haciendo bien.
abre la consola de desarrolladores https://console.developers.google.com/cloud-resource-manager
se abrirá la página de desarrolladores con el proyecto que creamos, pulsamos sobre el
Se cargará una nueva que tendrá un menú al lado izquierdo, donde pulsaremos en la opción Cuentas de servicio, donde nos mostrará un correo electrónico y una clave id las anotaras o copiaremos en una hoja de texto, para utilizarlo más tarde.
Ahora en app inventor arrastraremos al visor, una etiqueta y dos botones y en Paleta –> almacenamiento arrastraremos el componente no visible Fusiontables. no importa como queden ya que más tarde los borraremos, es simplemente para probar que todo los pasos anteriores están bien.
Bien ahora subiremos el archivo con extensión P12 que creamos en el anterior post, para ello nos dirigimos a medios y pulsamos en el botón subir archivo… buscamos la ubicación que le dimos al guardar y pulsamos en abrir.
Ahora tendremos que configurar nuestro componente Fusiontables para ello lo seleccionamos en el menú componentes y en sus propiedades KeyFile seleccionamos el archivo anteriormente subido
Siguiendo con las propiedades pulsamos en ServiceAccountEmail y introducimos el correo electrónico anteriormente copiado.
Ahora abrimos nuestra fusion tables, recuerda que puedes abrirla desde Google Drive Vamos a File / Share…
y en Invitar a personas, escribimos la dirección de correo que hemos guardado anteriormente, pulsamos en el lápiz que está situado justo a la derecha y marcamos Puede editar, seguido pulsaremos en el botón Enviar.
Volvemos a App Inventor y pulsamos en el botón de bloques, vamos a usar nuestro primer botón para obtener todas las filas de nuestra tabla, y así comprobamos que tenemos acceso a la misma.
Pulsamos en botón1 y arrastramos el bloque Cuando botón1.click ejecutar a nuestro visor, seguido pulsamos en el componente Fusiontables y unimos al bloque anterior el bloque llamar fusiontables1.GetRows tableId Columns.
Bien el primer componente que necesita este segundo bloque es el ID de nuestra tabla, para ello situaremos dentro de este, un componente de texto vacío y dentro introduciremos el ID que se encuentra en nuestra página de fusion tables, justo en File → About This Table, y se nos abrirá una nueva ventana donde Podremos ver nuestro ID, lo copiamos y pegamos en nuestro bloque de texto vacío.
Ahora necesitamos el nombre de la columna que queremos visualizar, pero nosotros escribiremos un asterisco “*”, de esta manera nos mostrará todas las columnas.
Ahora necesitamos que la información recogida por el anterior bloque lo muestre en pantalla utilizando nuestra etiqueta de texto, para ello tenemos un bloque en el componente FusionTables que es Cuando FusionTables1 ResultadoObtenido ejecutar que nos devuelve el resultado, lo arrastramos al visor y le unimos el bloque poner etiqueta1.Texto como y le añadimos la variable resultado del bloque anterior, tal como te muestro en la imagen.
Si ejecutamos nuestra aplicación y pulsamos en el botón tras unos segundo y si todo a ido bien veremos que se nos muestra todas las columnas de la tabla con su contenido.
Bien ahora utilizaremos el segundo botón para insertar datos en nuestra tabla, y de esta manera veremos si podemos hacer modificaciones en la misma.
Pulsamos en botón2 y arrastramos el bloque Cuando botón2.click ejecutar a nuestro visor, seguido pulsamos en el componente Fusiontables y unimos al bloque anterior el bloque llamar fusiontables.insertrow tableId, columns, value
Bien el primer componente que necesita este segundo bloque es el ID de nuestra tabla, para ello situaremos dentro de este, un componente de texto vacío y dentro introduciremos el ID que anteriormente copiamos para el primer botón.
Seguido en columns, pondremos en un bloque de texto la columna de nuestra tabla que queramos modificar, en este ejemplo yo usare la primera columna, “Alumno”, y seguido en value, uniremos también un bloque de texto vacío que contenga el texto que queramos insertar, como la columna hace referencia al nombre de un alumno yo pondré un nombre propio como Pedro, tú puedes poner el que quieras.
Ahora si probamos nuestra aplicación y pulsamos el segundo botón y nuevamente pulsamos el primero, veremos que los datos que nos muestra contienen el nombre de Pedro en la posición que ocupa la primera columna.
Podemos abrir nuestra tabla desde la página de fusiontables y ver cómo cambian los datos que modifiquemos en tiempo real, si no te funciona es porque te falta o no has hecho bien alguno de los pasos anteriores, te recomiendo que vuelvas a revisar todo desde el principio, ya que es vital para poder seguir el siguiente post en el que construiremos la aplicación de ejemplo.
Nos gustaría tu participación en este blog, si tienes alguna pregunta o comentario que hacer, por favor quiero que lo hagas.
Además que compartas esta publicación en tus redes sociales y no dejes de comentar.
Un saludo.
No hay comentarios:
Publicar un comentario