FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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

m0 QFJWWMGm4RAeZnu5DgSSMIcpIeaXnn9oSKQysI58lgrdHQmHdwBx2iLbyCW99xK8DfmjqN0k 4aP4w3FOzFaWqqJmEjd6LefJYxF9gHE4dMyiQBowz3HLdtwrCmeNDcnN NbN - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

OwOBQZ81xDV8KD 2A6eR K73pTMaUKYzxCw kPz7T5xMZhhUPBXj6 VBTHjwcIXF2Ykm7pe xFqp75aQ19Xd 8pnNGEv0cpGc6vlyVBHcS dKurvjV82GTxQ64ZfG5vlqD0HJmaG - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

WtGp7Xoxb2etDvycdlohJimuGyJdyTpdjeQr2RarSJcrRcOHuwdq3Mlp3P91NQ ajylO5A2NTbMJWaIpPisEvSJbFBnwfZtnAunjCmPungd41XsRG3VNzT9elqIBRhsSqr KXsHg - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)
3nsQkYxn9 i2EYdROFNr7VgIEUVTW9Qvh4IoGE5XzAixAnJUc5WhmtwMUMUcKO6WMVCqXEOYVPVvGjK WZiM8VlDAw 2HZVeJpwumLDfo3mg626QAF2LNtQ pdAmgSwhvXqAAZHb - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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

zpT6935g zqvCjRH90kpYcQB6gw3TbpbzHx4QNbYfkaHUSaa0rkeDtWsvvlrWH8rfmyhWWPARZR9HMLTxi9PkenlAujkep0TPCr Sfwgt5XWBFQY9bfQNi5DDrKmWV4Gx10pSiNs - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

Siguiendo con las propiedades pulsamos en ServiceAccountEmail  y introducimos el correo electrónico anteriormente copiado.

0ywUF78417WGSvBbjivf24G1ZXk9ApnjnzEK8jl z83c10goKg8QS4 Ky 9xFVUORDykgCcDV cdvagSEbrTt88GTDZAJkm7g4VuWrWu 5R34P2tVVI1b5hj78Azvqy7BFiyKZqm - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

Ahora abrimos nuestra fusion tables, recuerda que puedes abrirla desde Google Drive Vamos a File / Share…

V6cXYor0dASiHR0hZto1Sx7khmR  xqt3 PUQJZFTmOBIQcdUyGJYJ1k2MyCHkzj VexVdNsYBsemNw7m6s6sdMv0pZpUk9zBgixigYCjmojURSRHyMVA1h JLRsmDjB0dKopSO1 - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

9DsB4FY0AE1UAp8B92xzvzCDAOkfTVubowMLlUdO wpFso6ukIGSblTotiziNfutAIlKG3r lPdGXbuVudKoYhl8 12jIF6gJ2VwVAEZqD95U0DGjmbF7gnhabHWQhAwq5SIlnZ1 - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

FTxuM  FMwgi95TvSpKxNPWh6yNkGcOWUQSo5biG1dD9z2xR910gEdkxKvMo8b U3KsJV0RH2EAnjlXeuNqK2SiaL2H5aVH SpnKHn1wfOKf FKksg3Twosyegv ozqXH0lxEl O - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

ssKtEGWj2b7r SoxRx0sg09OXW911MsolhkfF9mfzAIJX6FIqqLBYlc5ZslxmqoZH AGOPqOAIxnBC2qdhPw ZHouLrTwqHr s20aGj5eM3tAOqHL869sqmU01DUXt0WADkxYdJ4 - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)
4PBj Cf70eTPwjTzZY0aein5Mbm3r3O76FUCr3izxhmvpPy79QuETVQCuqm8sqbRCLRJwi2bDUmPq8HaIM6y9kJp 5khpyQskgyI698dvtl7WfwAKU2nC0rxRGYEl637gtrzj2UG - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

Ahora necesitamos el nombre de la columna que queremos visualizar, pero nosotros escribiremos un asterisco “*”,  de esta manera nos mostrará todas las columnas.

YjXUh2D j8NKzc57nKZLEGQUqajlSFFukOlXEjrIbIgg7ASj7jM2B832sBvUl BkD4H6MwYipZX WjtxrWAAEYHzG iPswtbxQFm6BUgxqT6eOwzFfO3AiCum3HnfXo8av3Hjec1 - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

5VjoluhSHev0gV UPwaHr69z1u57LwcweFHmUfhGqibkk3SU7yTTM6ozIutsFjRKwCuxI FBmgKSiAXPDfoIWoxsadm7WhF BZsFQe16 f3QCwu699JfFzW7QEVnUdKjirUqqG9o - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

wqUqCSfPEQhhcyG7ULNvnXL0zPWK  mzsXw2QL4QTQ6g I2o6scn0ecTdR9ac8jV4cP4hUYZMspEfkHNcAi5qQVVCYjA7h8 nKFK11hFMT9FqUXSGCCW9s9H dwhXBcHxNCxBzCj - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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

3T4MzPk 78lBdYG8 lFIiql wSntjiKuTFmQbYHc8qIKB23dE5HuL5iyw 3W8Rbeo5IybdxMt52FwiwMVUkF780A2Dw2ca2l15 rjxOFgj4oyWuRHQQ0NuCWZtCpbZkayZjBMlbR - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

PwV56CB Qnx3 xw5CN F5i8gEwFRutuSREibm6uBanHBBfr4hy GhEVq8lwND nZUKwREH0VPsTh xbnWNdpWEIokr9UaKU2y7hTjeAVMt3q3kIXNiydLW7qxPEd D0KHkM  z0X - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.

uz8vSN4jUlg4K5BZ5BxmXpdentSFmwhR2q79Xf36i O2eIEPNQswoevmDdlzpQQDAwO2R7Oz5yFxXK4TRaisUXsOOMc8XwvV1GNac4CbanPgigGmNvArdewAckbW8gK9g1YyGYfa - FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE2)

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.


Deja un comentario

error: Content is protected !!