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

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.

FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE1)

¿QUÉ ES FUSION TABLES?

Fusion tables es un componente no visible que se comunica con Google Fusion Tables de Google. Fusion Tables te permite guardar, visualizar, editar, borrar y ver tablas de datos en tu aplicación, y por supuesto todos estos datos estarán alojados en internet. Con esto podremos hacer que cualquier usuario que tenga la misma aplicación y una conexión a internet haga modificaciones en la misma tabla o pueda consultar cualquier dato que esta contenga, y lo mejor de todo es que estos datos no solo los vamos a poder ver a modo de texto, también los vamos a poder representar en nuestra aplicación a modo de gráficas o mapas, si estos últimos son coordenadas geográficas.

CREACIÓN DE UNA FUSION TABLES

Lo primero que necesitarás es una cuenta de Gmail, para iniciar sesión. Seguramente ya tengas una, ya que para poder utilizar App Inventor es indispensable.

Abre sesión con tu cuenta de correo en google drive y pulsa en el botón de nuevo, situado a la izquierda de la página.

Una vez pulsado el botón de nuevo, muévete a Más . Si no ves una opción de Google Fusion Tables, como te muestro en la siguiente imagen, selecciona Conectar más aplicaciones y desplázate por la página de los servicios de Google para encontrar el servicio de Fusion Tables o escribe fusion tables en el rectángulo de búsqueda y conectalo a su Google Drive.

Ahora desde google drive pulsamos de nuevo en  “nuevo” para crear una fusion tables,  muévete a más y pulsa en Tablas dinámicas de google, tal como te muestro en la siguiente imagen.

Se nos abrirá una ventana en la que nos dará varias opciones, nosotros pulsaremos en  Create empty table para crear una nueva tabla vacía,

Seguido pulsaremos en NEW TABLE y a nuestra tabla le daremos el nombre de “Alumnos”, ya que en este tutorial crearemos una tabla de alumnos de una clase en la que se nos mostrará, su nombre, edad, lugar de nacimiento, fecha de nacimiento y nota de examen de matemáticas.

Se nos abrirá una nueva página donde podremos ponerle el nombre a nuestra tabla, en este ejemplo solo modificaremos este campo pero vosotros despues podreis variar los demas campos para experimentar.  Una vez terminado pulsaremos en salvar, y nos devolverá automáticamente a la pantalla de edición.

Ahora tendremos que cambiar el nombre de cada columna y crear una nueva, para ello situando el ratón en cada uno de los textos descriptivos de cada columna podremos ver que nos sale una flecha, si pulsamos sobre ella nos desplegara una serie de opcione, pulsa en Change…

Se nos abrirá una nueva pantalla donde editaremos el nombre de la columna y el tipo de dato, para las demás columnas será necesario cambiar el formato.

una vez hecho todos los cambios pulsaremos en el botón Save que nos devolverá a la pantalla inicial. Tendremos que hacer esto para cada una de las columnas además de añadir una nueva que usaremos para las notas, para ello haz clic en Edit> Change columns se abrirá una nueva página donde podremos pulsar en New y después en Column .

Pondremos en nombre Notas, le daremos tipo numérico y de formato decimal, quedará como en la siguiente imagen.

Después salvamos y nos devolverá automáticamente a la pantalla de edición donde podrás observar los cambios en nuestra tabla. Tiene que quedar como en la siguiente imagen.

Ahora necesitamos que nuestra tabla pueda ser vista desde cualquier terminal que tenga nuestra aplicación, y para eso tenemos que hacerla pública, ya que por defecto está configurada como privada. Para ello pulsaremos en Tools > Publish…

Se nos abrirá una ventana nueva en la que se nos dirá que

Esta tabla es privada y no será visible. Cambiar visibilidad. Pulsaremos en Change visibility

Se nos abrirá una nueva ventana en la que nos mostrará quién tiene acceso a la tabla y seguramente que la tengas como privada, pulsaremos en cambiar, esto permitirá que cualquier usuario pueda ver la tabla.

En el siguiente paso marcaremos como público en la Web, y pulsaremos en el botón de guardar.

Bien ya quien descargue nuestra aplicación podrá ver nuestra tabla pero no podrá hacer modificaciones, para hacer modificaciones desde la aplicacion tendra que tener credenciales y quizá esta es la parte más complicada para usuarios que no tienen mucha experiencia en App Inventor 2 y Fusion tables, asi que intentare ser lo más claro posible y explicar bien todo los pasos.

DANDO CREDENCIALES A NUESTRA FUSION TABLES

Lo primero que tenemos que hacer es abrir la página de consola de Apis de Google https://console.developers.google.com/cloud-resource-manager

Intenta abrir esta página con la misma cuenta de correo con la que creaste la tabla.

Una vez en la página pulsaremos en Crear proyecto,

En la siguiente ventana le daremos al proyecto el nombre de alumnos

y anotamos el ID del proyecto, y seguido pulsaremos en CREAR.

Pulsaremos en el menú de navegación situado al lado izquierdo de la página,

pasaremos el ratón por las opciones desplegadas, hasta llegar a APIs y servicios y seguido pulsaremos en Panel de control

Una vez estemos en nuestro panel de control pulsaremos en HABILITAR APIS Y SERVICIOS

Dentro del recuadro de búsqueda escribimos Fusion tables e inmediatamente nos filtra de todos los servicios el que nos ocupa en este tutorial.

Pulsamos sobre el resultado y en la nueva página que se abrirá pulsaremos en el botón de color azul que pone HABILITAR

Ahora nos toca darle las credenciales necesarias para ello pulsaremos en el botón de credenciales que se ha creado en la nueva página.

Pulsamos en el botón de crear credenciales y del desplegable en Ayúdame a elegir

Se nos cargará una página donde deberemos seleccionar las siguientes opciones. Donde nos pregunta ¿Qué API estás utilizando? seleccionaremos de la lista  Fusion Tables API.

Seguido cargará una serie de preguntas en relación con la opción elegida anteriormente.

Donde nos dice que ¿Desde dónde llamarás a la API? seleccionamos del desplegable Servidor web y a la pregunta de ¿A qué tipo de datos accederás? seleccionamos Datos de aplicación, nos cargara la siguiente pregunta ¿Tienes pensado utilizar esta API en App Engine o en Compute Engine? a la que contestaremos No, no estoy usando Engines, y seguido pulsaremos el botón azul ¿Qué credenciales necesito?

Inmediatamente cargara una pagina en la que nos pedirá el nombre de cuenta de servicio, pondremos alumnos y en tipo de clave marcamos P12, seguido pulsamos en Continuar.

Nos descargara a nuestro ordenador un archivo, en mi caso el archivo es alumnos-9f352648ef8f.p12, no tiene que ser el mismo en vuestro caso.

tenemos que tener y guardar en un sitio seguro y localizable nuestro archivo ya que será vital para poder seguir este tutorial y poder utilizar la fusion tables.

También comentar que la tabla que creamos en el principio de este tutorial se encuentra guardada en Google Drive por si queremos en todo momento abrirla o editarla.

Sin más me despido esperando que este tutorial te sea de gran ayuda y si te ha gustado compartelo en tus redes sociales favoritas, si tienes dudas o crees que algo no está bien o simplemente se puede mejorar escribelo en los comentarios.

COMPONENTE FILE (ARCHIVO) EN APP INVENTOR 2

¿QUE ES EL COMPONENTE ARCHIVO?

Es un componente no visible que sirve para recuperar o guardar archivos de texto plano en el dispositivo, se puede escribir archivos en el directorio privado de la aplicación, donde no podrá ser accedido por ninguna otra aplicación del dispositivo. Pero si la dirección del archivo comienza con una barra invertida (/), el archivo se guardará en la tarjeta de memoria.

¿UN EJEMPLO SENCILLO?

Bien en nuestro ejemplo crearemos una simple aplicación donde podremos anotar  lo que queramos a modo de notas, podremos guardarlo y más tarde recuperarlo, para si queremos modificarlo,  para ello lo que haremos es crear el layout donde utilizaremos un VerticalScrollArrangement,  en donde introduciremos una Etiqueta y una DisposiciónHorizontal, dentro de esta disposición horizontal pondremos tres botones, uno para cargar el texto, otro para guardarlo, y por último un botón para poder editar texto, en un CampoDeTexto. Por último y no menos importante necesitaremos dos componentes no visibles, un Notificador,  que nos avisara si se ha guardado correctamente nuestro archivo o si se ha cargado sin ningún problema, y un componente File.

Como el objetivo de este tutorial es el de ver el uso del componente File, el diseño vamos a dejarlo en un segundo plano, mostraré las capturas de como me ha quedado a mi y mas abajo podreis descargar el proyecto.

LA LÓGICA DE NUESTRO EJEMPLO

Lo primero que vamos a necesitar es una variable global que contendrá un cuadro de texto vacío, a la que daremos el nombre de Texto.

Ahora lo que necesitamos es pasar lo que escribamos en nuestro campo de texto a nuestra etiqueta, indiferentemente si ya teníamos algo escrito o no, usando nuestro botón  BTNponertxt, para ello necesitamos hacer que cuando el usuario pulse el botón, ponga la etiqueta TextNota con el resultado de unir el texto que contenga TextNota (si lo tuviera), con el de la caja de texto. Tiene que quedar de la siguiente manera.

Bien, el siguiente paso podría ser guardar el texto en un archivo dentro de nuestro dispositivo, para asegurarnos de que la próxima vez que abramos la aplicación podamos recuperarlo. para ello necesitamos que al pulsar nuestro botón BTNGuardar la variable global Texto obtenga el texto de nuestra etiqueta TextNota, y seguido guardar la variable en un fichero con el nombre de txtNota.txt. quedará de la siguiente manera.

Vamo a necesitar saber si se a guardado correctamente, para ello necesitamos el bloque cuando Archivo1.AfterFileSaved que nos indicará si el contenido de un archivo a sido escrito, y si es cierto llamaremos al nuestro componente notificador, que mostrará un cuadro de diálogo mostrando un mensaje, que será el resultado de unir dos textos. En primer lugar será tomar el nombreDeArchivo y lo uniremos con un bloque de texto vacío que en su interior pondremos el texto “Se guardó con éxito.” en el título pondremos el texto “Aviso” y en textoEnBotón “Aceptar”. Tiene que quedar de la siguiente manera.

Bien ya hemos creado un texto, con ayuda de un botón lo guardamos y ahora solo nos falta cargar el texto guardado. Para ello cuando pulsemos nuestro botón BTNCargar.Clic llamaremos a nuestro componente llamar Archivo.LeerDesde y en nombreDeArchivo pondremos un bloque de texto con el nombre del archivo con el que se guardó. Quedará de la siguiente manera

Igual que cuando guardamos nuestro archivo, mostramos un cuadro de diálogo para decirle al usuario que todo estaba correcto, ahora haremos lo propio utilizando el bloque cuando Archivo1.ObtuvoTexto que llamara si es cierto al bloque llamar Notificador1.MostrarDiálogoMensaje, en donde el mensaje pondremos el texto “Se cargó con éxito” en título el texto “Aviso” y en el textoEnBotón “Aceptar”. Por último pondremos el texto de nuestra etiqueta TextNota con el valor de nuestra variable local texto, quedando de la siguiente manera.

Bien, si ahora ejecutamos la aplicación con nuestro método favorito, podremos escribir en la caja de texto, pulsando el botón de añadir texto copiarlo a nuestra etiqueta, guardar el texto y volverlo a cargar pulsando en los respectivos botones.

Aquí tienes el enlace del proyecto de ejemplo en formato AIA para App Inventor.

Ejemplo App Inventor

Bueno, sin mas me despido esperando que este post te sea de utilidad, tanto si estás empezando como si estas atascado en algún proyecto.

No olvides dejar algún comentario y no dejes de compartirlo.

Un saludo.