martes, 19 de febrero de 2019

FIREBASEDB EN APP INVENTOR 2

¿Qué es FirebaseDB?

FirebaseDB te proporciona una base de datos en la nube para tus aplicaciones de App Inventor y admite el intercambio de datos entre usuarios simultáneamente. Cuando se cambian los datos en tu FirebaseDB , todas las aplicaciones reciben alertas de los datos actualizados.

En este momento, FirebaseDB es una función experimental con limitaciones, aún no puede configurar su propia cuenta personal de FirebaseDB, sino que debe usar una única FirebaseDB ejecutada por MIT como una «cuenta compartida». El uso compartido está limitado a todos los usuarios de una sola aplicación y no está disponible entre diferentes aplicaciones.

La interfaz de programación para FirebaseDB es casi la misma que la utilizada para TinyWebDB . TinyWebDB es una base de datos simple basada en la nube: para usar, debe configurar TinyWebDB en su propio servidor o en los servidores de Google. Con sus datos almacenados en la «nube», sus datos pueden ser compartidos entre muchas aplicaciones. Para la demostración de FirebaseDB, no necesita configurar su propio servidor, ni necesita usar TinyWebDB:

Una aplicación de ejemplo

vamos a crear una aplicación simple que almacene y recupere un valor de texto desde FirebaseDB. Al igual que con TinyDB o TinyWebDB ,vamos a utilizar un campo de texto donde introduciremos el valor a buscar, por ejemplo, un valor a buscar podría ser el nombre de una persona y el resultado podría ser el número de teléfono de esa persona.

La aplicación funciona ingresando un nombre y un valor en cada uno de los campos de texto. Los valores ingresados se guardaran en la base de datos FirebaseDB “en la nube”.

Después de que se haya guardado los valores, podremos recuperarlos ingresando el nombre con el que se guardó  y presionando Recuperar valor. Los datos correspondientes al nombre se recuperan de FirebaseDB y se muestran en el campo Valor, de la pantalla.

Si la aplicación se ejecuta simultáneamente en otros dispositivos, cualquier actualización de datos realizada en los otros dispositivos hará que todos los dispositivos reciban una notificación de cambio de datos. Cuando se cambian los datos en FirebaseDB, los nuevos datos se muestran en todos los dispositivos.

Vista del diseño

Se utiliza una combinación de disposiciones verticales y horizontales para organizar tanto los botones como las cajas de texto y etiquetas.

Necesitaremos dos botones a los que introduciremos los textos de Almacenar valor y Recuperar valor. Utilizaremos dos etiquetas una para el nombre y otra para el valor o número de teléfono y dos cajas de texto justo al lado de cada etiqueta.

Arrastre el componente FirebaseDB desde la sección Experimental de la paleta de interfaz de usuario.


Programando la aplicación

El botón  btnGuardarValor lee el valor numérico insertados en los cuadros de texto en la pantalla y luego los guarda en FirebaseDB . Ve a bloques → screen1 → FirebaseDB1 y arrastra el bloque GuardarValor de FirebaseDB al visor de bloques.

Obtener el valor guardado es muy fácil, utilizaremos el bloque ObtenerValor de FirebaseDB y tendremos que darle el valor de la etiqueta. A diferencia de TinyDB (pero similar a TinyWebDB ), el valor no se lee instantáneamente, sino que, una vez que los datos están leídos, se llama al evento ObtenerValor. Donde estarán los datos  recogidos de nuestra aplicación, y los datos se se mostraran nuevamente en el cuadro de texto Valor, en la pantalla.

Una característica única de FirebaseDB es la capacidad de la base de datos para alertar a las aplicaciones de que se han cambiado los datos dentro de la base de datos. Esta alerta provocó que ocurriera un evento DataChanged , y que entrega la etiqueta y el valor que se actualizaron en la aplicación.

FirebaseDB es experimental e incompleto, está sujeto a cambios y no debes confiar que te funcione  siempre. Sin embargo, puedes usarlo para aprender y experimentar.

Descargar el código AIA

Descargar: EjemploFirebaseDB.aia

domingo, 23 de diciembre de 2018

FUSION TABLES CONTROL EN APP INVENTOR 2 (PARTE3)

En el anterior artículo terminamos un apequeña App en la que podíamos probar  la visualización y guardado de datos en nuestra tabla de fusion tables . Si todo fue bien pudiste ver el resultado, y ver como en la pagina de fusion tables ese mismo dato se contemplaba, pues bien, ahora vamos a crear con lo que ya sabemos una App a la que aplicaremos todo lo aprendido.

DISEÑANDO LA APP

Como venimos haciendo ya varios artículos, el objetivo de estos tutoriales no es la de mostrar y enseñar a crear el diseño de la aplicación, si no el uso de ciertos componentes no visibles del entorno de App Inventor, no obstante soy consciente de que este tutorial no tendría un buen fin si no se diera una visión del diseño de la app, y por ello se explicara que necesitamos, pero también quiero aclarar que cada texto, cuadro de texto, e incluso botones pueden ser colocados en diferentes posiciones para poder crear la App con nuestro propio estilo.

Bien lo primero que necesitamos es borrar de la Screen1 todo componente que anteriormente pusimos tanto del Diseñador como de los bloques.

Seguido necesitaremos para esta nueva App una disposición vertical donde meteremos una etiqueta y dos botones, además de añadir el componente no visible de Fusion Tables.

A la etiqueta de texto le cambiaremos el nombre, le pondremos TituloApp, marcaremos la casilla de negrita  y le pondremos el tamaño de letra en 24, y en la propiedad de texto le pondremos CONTROL ALUMNADO.

Para el botón1 le cambiaremos el nombre, le pondremos BtnAñadeAlumno, el tamaño de letra en 24 y el texto que contendrá el botón AÑADIR ALUMNO. Para nuestro segundo botón le daremos de nombre BtnConsultaAlumno,  en sus propiedades el tamaño de letra en 24 y el texto que mostrará este  segundo botón sera CONSULTA ALUMNO.

Crearemos una segunda pantalla a la que daremos el nombre de CrearAlumno,  recuerda que la única pantalla a la que no sele puede cambiar el nombre es la primera, es decir a la Screen1.

Necesitaremos una DisposicioVertical, donde meteremos dentro una etiqueta que la usaremos como descripción, y una campo de texto que la utilizaremos para introducir los campos requeridos, necesitaremos repetir la operación, tantas veces como columnas agregamos a nuestra tabla, y cada etiqueta mostrará el nombre de cada columna de nuestra tabla, seguido y dentro de nuestra disposición vertical meteremos una DisposicionHorizontal donde introduciremos un botón al que añadiremos el texto  AÑADIR ALUMNO.

También añadiremos dos componentes no visibles, el primero será el componente FusionTables, y el segundo un notificador, su uso lo veremos a lo largo de este tutorial.

Crearemos una segunda tercera pantalla a  la que daremos el nombre de ConsultaAlumno,  en esta nueva pantalla necesitaremos agregar lo mismo que en la pantalla anterior una DisposicioVertical, donde meteremos dentro una etiqueta, que la usaremos como descripción, y un campo de texto que lo utilizaremos para introducir los campos requeridos, necesitaremos repetir la operación, tantas veces como columnas agregamos a nuestra tabla, y cada etiqueta mostrará el nombre de cada columna de nuestra tabla. Seguido y dentro de nuestra disposición vertical meteremos una DisposicionHorizontal donde introduciremos un botón al que añadiremos el texto  AÑADIR ALUMNO. Ahora añadiremos una segunda DisposicioVertical  está fuera de la anterior, en la que meteremos una serie de DisposicionHorizontal cada una con dos etiquetas, esta primera etiqueta mostrará el nombre de nuestra columna y la segunda la dejaremos como está, y por supuesto realizaremos esta acción por cada una de las columnas de nuestra tabla. También añadiremos una última  DisposicionHorizontal  a la que meteremos un botón. El objetivo de esta nueva  DisposicioVertical   y todo su contenido es la de mostrar el resultado de nuestra consulta una vez pulsemos nuestro botón, por tanto necesitaremos que no esté visible, y para ello desmarcamos la opción de visible,

más tarde mediante programación haremos que se muestre, también por supuesto que tendremos que arrastrar el componente no visible de fusion tables.  Nos tiene que quedar de la siguiente manera.

PROGRAMANDO LOS BLOQUES DE NUESTRA APP

Comenzaremos programando nuestra app por la pantalla Screen1, que nos servirá de pantalla home, es decir volveremos a ella después que salgamos de las demás pantallas, y utilizaremos cada uno de sus botones para acceder a dichas pantallas, para ello necesitaremos que pulsando el botón correspondiente abra la nueva pantalla..

Comenzaremos creando la lógica del primer botón, arrastramos el bloque Cuando BtnAñadeAlumno. Clic ejecuta, al que le añadiremos el bloque Abrir otra pantalla Nombre de la pantalla y le encajaremos un bloque de texto vacío en el que escribiremos el nombre de la pantalla que utilizaremos para añadir alumnos, en mi caso su nombre es CrearAlumno.

Ahora programaremos el segundo botón BtnConsultaAlumno, de la misma manera que el anterior, pero esta vez en el campo de texto que utilizamos para abrir la pantalla pondremos el nombre que le dimos a la pantalla que utilizamos para hacer consultas, en mi caso ConsultaAlumno.

Con esto ya tenemos programada nuestra pantalla inicial, ahora vamos a ver como programar para insertar nuevos datos en nuestra tabla desde la pantalla CrearAlumno.

Para ello seleccionamos esa pantalla y pulsamos en el botón de bloques.

Cuando se pulse el botón1 de esta segunda pantalla, necesitamos verificar que cada campo de texto donde introducimos los datos contiene algún texto, ya que de lo contrario introduciremos nuevo alumnado con falta de datos, para ello necesitamos el bloque Cuando Botón1.Clic Ejecutar , dentro de este mismo bloque utilizaremos un bloque condicional Si, donde comprobaremos que cada campo no está vacío, ayudándonos del bloque lógico NO, y el bloque de texto está vacío, al que uniremos el contenido de la caja de texto, esta operación la repetimos tantas veces como campos de texto tenemos, y cada uno estará unido al anterior por un bloque lógico O quedando de la siguiente manera.

Si los campos de texto no están vacíos, insertamos cada valor de los campos en nuestra tabla, para ello necesitamos el bloque de FusionTables Llamar Fusióntables1.InsertRow y en su campo tableId pondremos el id de nuestra tabla, en su campo columns añadiremos el nombre de las columnas de nuestra tabla separado por comas, y por último en su campo values insertamos el valor de cada uno de nuestro campos de texto, presta mucha atención a este paso ya que cada uno de ellos tiene que estar escrito dentro de un entrecomillado simple y separado por comas.

Una vez hecho esto borraremos el contenido de los campos de texto, para evitar duplicar contenido y seguido cargaremos otra vez la pantalla Screen1.

Pero claro, nos puede dar el caso que falte algún campo de texto por rellenar, o incluso que ninguno esté lleno, en este caso utilizaremos nuestro notificador para alertar de esto al usuario, para ello pulsamos en la rueda dentada del Si condicional y arrastraremos el bloque si no dentro

Se abrirá un nuevo hueco, y en este mismo pondremos el bloque Llamar notificador1.MostrarAlerta Aviso, donde pondremos el texto “Rellenar todos los campos”

Pero se nos da otro caso, suponiendo que hemos llegado por error a esta pantalla, y no queremos añadir ningún alumno, y queremos volver a la pantalla de home, al pulsar el botón de retroceso de nuestro dispositivo, tenemos que poder volver a nuestra pantalla de inicio y no salir directamente de la aplicación.

Para ello utilizaremos el botón Cuando CrearAlumno.BotónAtrás ejecutar y dentro pondremos el bloque de Abrir otra pantalla Nombre de la pantalla poniendo el nombre de Screen1, de esta manera volveremos sin tener que insertar obligatoriamente ningún dato.

Con esto terminamos la programación de la pantalla CrearAlumno, ahora vamos a comenzar a programar la pantalla ConsultaAlumno donde podremos consultar los datos que hayamos guardado en la anterior pantalla.

Comenzaremos abriendo la pantalla de ConsultaAlumno y pulsaremos en el botón de bloques.

Lo primero que necesitamos es que al pulsar el botón1 nuestra aplicación haga la consulta a la tabla, buscando el contenido de nuestra consulta, ya sea por el nombre del alumno o por su nota final de matemáticas, para ello utilizaremos el bloque Cuando Botón1.Clic  ejecutar y dentro le añadiremos un bloque condicional Si, que comprobara si el campo de texto o caja de texto del nombre está vacía, y para ello nos ayudaremos de un bloque lógico NO, seguido de un bloque de texto está vacío, y por último el bloque CtxNombre.Texto, quedando dela siguiente manera.

Esto lo que hará es comprobar que si la caja de texto no está vacía, ejecutemos la consulta, y para hacer la consulta utilizaremos el bloque llamar fusiontables1.GetRowWithConditions, que en su hueco tableId pondremos el id de nuestra tabla, en su hueco columns pondremos una lista con el nombre de las columnas de nuestra tabla, separado por comas y por último pondremos la condición que será unir el texto Alumno=’contenido del campo de texto’, recuerda introducir el contenido del campo de texto dentro de las comillas simples, quedando de la siguiente manera.

Ahora vamos a pulsar en la rueda dentada del Si condicional y vamos a unir el bloque si no, si

y haremos las misma operación anterior, pero esta vez mirando que no esté el campo de texto de número de alumno vacío, y la condición de la consulta de fusiontables sea NumeroAlumno=’contenido del campo de texto CtxtNuemeroalumno’, esta operación tendremos que repetirla por cada columna de nuestra tabla, de esta manera podremos hacer la consulta por cualquier campo, tendrá que quedar de la siguiente manera.

«Tengo que decir que esta no es la manera mas optima de hacer la consulta, pero nuestro objetivo es familiarizarnos con el uso de fusion tables.»

Ahora lo que vamos hacer es que cuando nuestra tabla nos devuelve el resultado ocultaremos la DisposiciónVertical1 que estamos visualizando ahora, y con ello ocultaremos también todos los campos de texto, etiquetas y botones que contenga dentro, y activaremos la DisposiciónVertical2 que dejamos oculta en el diseño.

Para ello utilizaremos el bloque Cuando FusionTables. ResultadoObtenido Ejecutar y le uniremos el bloque poner Disposicionvertical1.Visible como al que uniremos el bloque falso, para el bloque poner Disposicionvertical2.Visible le añadiremos cierto,  quedara de la siguiente manera.

Ahora tenemos un pequeño inconveniente, el resultado que nos devuelve nuestra Fusión Tables forma una sola línea de texto separado por comas, y nosotros queremos coger cada valor de la tabla y añadirlo a un campo de texto, para conseguir esto vamos a introducir o convertir el texto en una lista, descomponiendo el texto en espacios y borrando las comas, para ello lo primero que necesitamos es crear una variable global que contenga una lista vacía, a la que llamaremos SegmentoTxt.

Seguido utilizamos esta misma variable a la que le añadiremos el bloque de texto dividir por espacios, y seguido le uniremos recortar texto en, que en su campo texto añadiremos el bloque Resultado de nuestra consulta y en su hueco En, pondremos un bloque de texto con lo que queremos eliminar de nuestro texto, que en nuestro caso son las comas, tendrá que quedar de la siguiente manera.

Ya tenemos nuestro texto descompuesto y guardado en una lista, ahora solo tendremos que añadir cada texto de la lista a nuestras etiquetas, para ello utilizaremos el bloque Poner etiqueta7.texto como que esta dentro de la DisposicionVertical2 y le añadiremos un bloque de listas seleccionar un elemento de la lista donde en el hueco lista pondremos o tomaremos la variable Segmentotxt, y en el índice pondremos el número 6, te estarás preguntando por qué 6 y no otro, bien la razón es que al descomponer el texto, cada palabra que lo formaba ahora ocupa una posición en la lista, para la posición 1 tenemos Alumno para la posición 2 tenemos Númerodealumno, a si hasta llegar al final de los nombres de las columnas, donde el nombre de Notas será la posición 5, por tanto si seguimos la cuenta, el primer valor de la columna Alumno será el 6, lo puedes ver mejor en este gráfico que te muestro.

Y realizaremos la misma operación por cada etiqueta que pusimos, dándole el número de índice de la lista que le corresponde, tiene que quedarnos de la siguiente manera.

Ahora solo nos queda programar el  botón2 para que cuando pulsemos visualicemos la anterior disposición vertical donde teníamos las cajas de texto, y así poder hacer una nueva consulta, para ello arrastraremos el bloque cuando botón2.Click ejecutar y dentro de este lo que haremos es poner DisposiciónVertical2.visible como  falso y poner DisposiciónVertical1.visible como  cierto.  Quedará de la siguiente manera.

Pero al igual que hicimos con la pantalla de crear alumnos, si queremos volver a la pantalla principal ya sea por error o simplemente que queremos volver, haremos que al pulsar el botón de retroceso de nuestro teléfono volvamos para atrás, para ello arrastraremos el bloque Cuando ConsultaAlumno BotonAtras ejecutar y al que encajaremos el bloque abrir otra pantalla nombre de la pantalla y dentro meteremos un bloque de texto donde pondremos el nombre de nuestra pantalla de inicio, quedará de la siguiente manera.

Bien ahora es el momento de ejecutar nuestra aplicación y ver cómo todo funciona correctamente, veréis que si introducimos los datos en la pantalla de crear alumno y pulsamos el botón de crear alumno, en nuestra página de fusion tables al actualizarla podemos ver los cambios, y si consultamos desde nuestra aplicación también podremos verlo, podremos hacer la consulta por nombre o por fecha de nacimiento etc…

Una apreciación importante es que cuando hagamos la consulta tenemos que poner el dato, ya sea el nombre la nota o la fecha de nacimiento de la misma manera con la que lo guardamos en la base de datos, respetando las mayúsculas y acentos, de lo contrario no encontrará nada y nos mandara un mensaje de error, hos dejo en vuestras manos solucionar ese asunto ya que no me quiero extender mucho que ya es bastante largo este artículo.

Enlace de descarga del proyecto de fusiontables

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


sábado, 8 de diciembre de 2018

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.


sábado, 17 de noviembre de 2018

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.


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