App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

_________________________________________________

130.- Fusion tables (I).

p130_fusion_tables.aia

- Google Fusion Table es una forma de tener Bases de Datos en Internet mediante Google.

- Con App Inventor podemos guardar, visualizar, editar, borrar... datos de FusionTable.

- Para utilizar Fusion Table necesitamos una cuenta ligada a Google, te puede servir la misma que tienes de gmail para App inventor.

- Entramos en: https://support.google.com/fusiontables/answer/2571232 o bien pones en el buscador de Google: google fusion tables

- Vamos a CREAR UNA FUSION TABLE

- Pulsamos en Create empty table

- Pulsamos en New Table para crear una tabla que llamaremos: personas como indico en las figuras de abajo...

_______________________________

- Pulsando en Edit, podemos Añadir o Editar una FILA (ROW) de la tabla.

- Mediante Edit podemos modificar, eliminar... los nombres de las COLUMNAS.

- Si pulsamos en File y luego en About this table, observaremos el código de Identificación de la tabla (Id)

Este código es importante porque lo debemos poner en nuestro programa para Identificar a la tabla: 1uq_xJZG...

No confundir el Identificador de tabla con la KeyAPI (ClaveAPI) que será de otro número que debemos obtener para que nuestra tabla pueda ser utilizada en internet. Más adelante veremos cómo obtener la KeyAPI .

- IMPORTANTE:

Podemos volver a ver nuestra tabla desde Google Drive

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

- Obtención Credenciales.

- Ya tenemos nuestra base de datos que podemos consultar y editar desde directamente desde internet.

- Ahora debemos realizar un proceso para poner consultar y editar la tabla desde nuestra aplicación.

- Para eso es necesario realizar un proceso para obtener credenciales.

- Lo podemos ver en:

130C_fusion_table_credenciales.htm
________________________________________
________________________________________
________________________________________
________________________________________

1.- Vamos a empezar por lo fácil. Agregar fila.

- Vamos a añadir desde nuestra aplicación realizada con App inventor, una nueva fila (ROW) a la tabla de nuestra base de datos.

- Diseño.

- En Almacenamiento, sacamos un Fusiontables a la pantalla.

- También agregamos una Etiqueta y un Botón.

- A la Etiqueta le ponemos en Ancho y en Alto: Ajustar al contenedor.

Pulsamos en Screen1 para obtener sus Propiedades y marcamos Enrollable

________________________________________________________________

- Bloques.

Creamos una variable llamada Idtabla y ponemos el código del Identificador de la tabla.

________________________________________________________________

- Comentarios.

- Cuando pulsamos el Botón de Enviar, Insertamos la fila (ROW) en nuestra tabla.
Para ello debemos poner el Identificador de la tabla: 1uq_xJZ...., lo he puesto mediante una variable de texto.
(NO confundir el Identificador de la tabla con la ClaveAPI)

- En el bloque de InsertRow, debemos poner las columnas de la tabla, separadas por coma (respetar mayúsculas)
y los valores que queremos insertar en esas columnas, estos valores han de ir separados por coma y entre comilla 'simple'.

Nombre, Edad, Ciudad
'Carlos', '55', 'Jerez'

Si vamos a la web que contiene la Fusion table y actualizamos, observaremos que se ha añadido una nueva fila (Row)

_____________________________
_____________________________
________________________________________________________________

2.- Vamos a introducir los datos en las filas mediante CamposDeTexto.

- Diseño.

- Para ello vamos a agregar a nuestra aplicación, tres DisposiciónHorizontal y dentro de cada una, una Etiqueta y un CampoDeTexto como indica la figura:

________________________________________________________________

- Bloques.

________________________________________________________________

- Comentarios.

Es decir:

'CampoDeTexto1','CampoDeTexto2','CampoDeTexto3'

_____________________________
_____________________________
________________________________________________________________

3.- Vamos a ver toda la tabla.

- Para ello vamos a agregar en el Diseño un nuevo Botón2, le pondremos de Texto: Ver tabla.

- Y añadimos estos Bloques...

- En la Etiqueta1, saldrá toda la tabla.

El Resultado de la consulta se obtiene en formato CSV, puede ser convertido a lista mediante los bloques "lista desde tabla csv" o "lista desde fila csv"

_____________________________
_____________________________
________________________________________________________________

4.- Vamos a consultar un valor de la tabla.
Obtener Filas mediante Condiciones.

- Para ello vamos a agregar en el Diseño un nuevo Botón3, le pondremos de Texto: Buscar por Nombre.

- Y añadimos el Bloque del Botón3...

- Cuando escribamos un dato de Nombre en el CampoDeTexto1, y pulsemos el Botón3, se mostrará en la Etiqueta1, todas las Filas que contienen ese Nombre.

- El Nombre hay que escribirlo respetando las mayúsculas y minúsculas.

- Fíjate la síntaxis:

'Nombre='CampoDeTexto1'

- Eso sería, obtener aquellas filas con Nombre, Edad y Ciudad en donde el Nombre coincida con lo que esté en el CampoDeTexto1.

_____________________________
_____________________________
________________________________________________________________

5.- Otra manera de comunicarse con la tabla, mediante petición y consulta (query).

- Podemos utilizar comandos petición de consultas para comunicarnos con la tabla. Estos comando los podemos estudiar en https://developers.google.com/chart/interactive/docs/querylanguage

https://developers.google.com/fusiontables/docs/v1/sql-reference#deleteRow

- Vamos a insertar una fila con Nombre, Edad y Ciudad mediante estos comandos. Es lo mismo que hemos visto en el apartado 2, pero ahora vamos a insertar utilizando los comandos típicos de base de datos.

- Para ello vamos a agregar en el Diseño un nuevo Botón4, le pondremos de Texto: Enviar consulta (query).

- Y añadimos el Bloque del Botón4...

INSERT INTO  Idtabla (Nombre, Edad, Ciudad)  VALUES('CampoDeTexto1','CampoDeTexto2','CampoDeTexto3')

- Fíjate y respeta los espacios: un espacio después de INTO, otro después del Idtabla, otro antes del VALUES.
Si pones todo junto y no respeta espacios dará errores
INSERT INTOIdtabla(Nombre, Edad, Ciudad)VALUES('CampoDeTexto1','CampoDeTexto2','CampoDeTexto3')
Fíjate en la línea de arriba no he respetado los espacio. Obtendremos errores.

- Creamos la línea de comandos poniendo los VALUES entre comilla 'simple' y separando mediante coma,

- Para probarlo, escribimos tres datos en los CamposDeTexto y pulsamos el Botón4, se deberá INSERTAR en la tabla los VALUES que se encuentran en sus respectivos CamposDeTexto.

_____________________________
_____________________________
________________________________________________________________

6.- Vamos a ver toda la tabla mediante consulta.

- Vamos a ver en la Etiqueta1 toda la tabla. Es lo mismo que hemos visto en el apartado 3, pero ahora vamos a realizarlo utilizando los comandos típicos de base de datos.

- Para ello vamos a agregar en el Diseño un nuevo Botón5, le pondremos de Texto: Ver tabla (query) .

- Y añadimos el Bloque del Botón5...

SELECT * FROM Idtabla

- Una vez más fíjate en los espacios, antes y después del * hay espacios, también hay espacio después de SELECT

- Cuando pulsemos el Botón5, debe salir en la Etiqueta1, toda la tabla.

Si quisieramos que salga ordenado alfabéticamente por nombre pondríamos:

SELECT * FROM Idtabla ORDER BY Nombre

_____________________________
_____________________________
________________________________________________________________

7.- Vamos a consultar un valor de la tabla mediante comando.

- Vamos consultar un valor de la tabla. Es lo mismo que hemos visto en el apartado 4, pero ahora vamos a realizarlo utilizando los comandos típicos de base de datos.

- Para ello vamos a agregar en el Diseño un nuevo Botón6, le pondremos de Texto: Buscar por Nombre (query)

- Y añadimos el Bloque del Botón6...

SELECT * FROM Idtabla WHERE Nombre='CampoDeTexto1'

- Una vez más recuerdo que debemos respetar los espacios.

- Cuando pulsemos el Botón6, saldrá las filas cuyo Nombre coincida con el que hemos puesto en el CampoDeTexto1

- Podemos hacer una consulta con varias condiciones, por ejemplo:

SELECT * FROM Idtabla WHERE Nombre='CampoDeTexto1' AND Ciudad='CampoDeTexto3'

_____________________________
_____________________________
________________________________________________________________

8.- Borrado de una fila por código.

- Vamos borrar una fila.

- Para realizar esta prueba he añadido la Etiqueta5 y la Etiqueta6.

- Esta operación es algo más complicada. La primera intuición sería poner:

DELETE FROM Idtabla WHERE Nombre='CampoDeTexto1'

- Pero no funciona de esta manera. En WHERE hay que poner el Identificador de fila. ROWID.

_______________________

- Fusion tables, le pone automáticamente a cada fila un número Identificador de fila denominado ROWID.

- Si queremos borrar una fila, deberíamos poner:

DELETE FROM Idtabla WHERE ROWID ='1001'

- Donde el número 1001 sería, en este ejemplo, el número de la fila que queremos borrar.

- El problema está en buscar ese número ROWID correspondiente a la fila que queremos borrar.

- Para ello, previamente al DELETE, debemos SELECCIONAR el ROWID de la fila que queremos borrar:

SELECT ROWID FROM Idtabla WHERE Nombre='CampoDeTexto1'

- Mediante la línea anterior, tomamos un nombre que hayamos escrito en el CampoDeTexto1 y SELECCIONAMOS su ROWID
- Una vez que tengamos su ROWID, ya podemos borrar la línea con el DELETE.

_____________________________________

- Para pasar el valor de ROWID de una línea a otra, utilizamos una variable intermedia, por ejemplo:

SELECT ROWID FROM Idtabla WHERE Nombre='CampoDeTexto1'

mi_rowid = Result (del SELECT anterior)

DELETE FROM Idtabla WHERE ROWID ='mi_rowid'

____________________

- Pero NO es tan sencillo. El problema está en que el Resultado del SELECT viene de esta forma:
rowid
1001

Es decir, trae una palabra y un número, debemos extraer solo el número de ese Resultado.
La forma que he utilizado es la siguiente:

1.- Hago una consulta mediante un SELECT para obtener el ROWID que le corresponde al dato del CampoDeTexto1

SELECT ROWID FROM Idtabla WHERE Nombre='CampoDeTexto1'

2.- El Resultado obtenido, que viene en formato CSV, lo introduzco en una lista llamada listaborrarroid

rowid
1001

He puesto una Etiqueta1 y he creado otra Etiqueta5 para ver el resultado en forma de CSV y en forma de lista.

((rowid)) (1001))

3.- Una vez que tenemos la información del Resultado pasado a lista, vamos a sacar el segundo elemento de esa lista, es decir el (1001)

para ello hacemos lo siguiente.

Hemos convertido la información a lista: listaborrarroid

((rowid)) (1001))

Tomamos el segundo elemento de esa lista

(1001)

Para quitarles los paréntesis extremos, tomamos el segmento comprendido entre el segundo caracter y el último menos 2

y obtendremos

1001

En variable mi_rowid obtendremos la ROWID de la fila que queremos borrar.

En el gráfico de arriba visualizo mi_rowid en una Etiqueta6 auxiliar.

___________________________________________

4.- Ahora lo borramos con el DELETE

DELETE FROM Idtabla WHERE ROWID ='mi_rowid'

Cuando se borra debe aparecer el mensaje:

Resultado=
affected_rows
1

_____________________________________

- Varias observaciones.

- Este tipo de pruebas suele tener fallos, además a veces se comete un fallo y se corta la conexión con la Fusion tables de Google, de tal manera que seguimos haciendo pruebas y éstas no funciona, pero no funcionan porque tengamos mal el código sino porque hemos perdido la conexión, por eso se recomienda que cada dos por tres, reiniciemos el MIT COMPANION.

- También suele ocurrir que realicemos el código correctamente y unas veces funciones y otras no, eso es porque a veces la conexión con el servidor es lenta, y se manda un código de "Read time out". Intentamos el borrado varias veces hasta que se consiga. Funciona un poco mejor cuando la aplicación está instalada.

- Puedes probar que primero obtenga el número roiwd y cuando ya lo tenga se pulsaría otro botón y haría el borrado.

- Otro caso posible es cuando hay varios nombres iguales, por ejemplo hay varios Juan, otro Juan y otro Juan, obtendremos un Resultado

rowid
1001
4007
3004

Al realizar el borrado, se borrará solo la primera línea, el primer Juan.

- Para borrar líneas que cumplan dos requisitos pondríamos:

SELECT ROWID FROM Idtabla WHERE Nombre='CampoDeTexto1' AND Ciudad='CampoDeTexto3'

_________________

- ¿Cómo puedo ver qué ROWID tiene cada fila?

- Añadimos un Botón8 y este código. Se visualizará en la Etiqueta1.

SELECT ROWID, 'Nombre' FROM Idtabla

_____________________________
_____________________________
________________________________________________________________

9.- Actualizar un dato.

- En este caso vamos a obtener el dato del CampoDeTexto1 y lo vamos a sustituir por el dato del CampoDeTexto3

SELECT ROWID FROM Idtabla WHERE Nombre='CampoDeTexto1'

UPDATE Idtabla SET Nombre='CampoDeTexto13' WHERE ROWID = 'rowid'

- Observamos que se hace de forma similar al DELETE visto anteriormente, es decir, primero mediante un SELECT debemos obtener el ROWID y asignarlo a una varible y luego esa variable la ponemos en el WHERE del UPDATE.

________

Bueno aquí termina esta exposición para aclarar con ejemplos el funcionamiento de la Fusion tables, el lector puede profundizar y adaptar las aplicaciones a sus necesidades.

Como observamos con App inventor, cualquier mejora requiere de un código largo y lo que es peor una cantidad de bloques que hace incómodo es seguimiento del programa. Hay que tener en cuenta que AI está destinada a las personas que comienza a programar, para realizar programas de más envergadura se utiliza otros sistemas de programación distintos.

En el siguiente tutorial vamos a realizar un ejemplo con las Fusion tables.

_____________

- Ejemplo de Pizzaparty con FusionTable.

http://appinventor.mit.edu/explore/ai2/pizzaparty.html

Ayuda App inventor sobre Fusion tables.

- En este envío tenemos otra versión de Pizzaparty:

https://groups.google.com/forum/#!category-topic/mitappinventortest/specific-programming-issue/_V_0936N3qc

__________________________________