Title: Fusion tables
Course: CFGS - Gestió de vendes i espais comercials / Màrqueting i publicitat > Section: Programació d'APPs per a dispositius mòbils

Where APP

Introducció

En aquest bloc trobarem informació sobre com utilitzar les Fusion Tables de Google Drive com a base de dades per utilitzar des d'App Inventor, així com diferents formes de mostrar la informació.

Tutorial original:
http://ateneu.xtec.cat/wikiform/wikiexport/cmd/tac/computacional/b15_ai_fusiontables/index

Crear Fusion table

D'entre les diferents opcions d'accés a dades que ens ofereix l'App Inventor, les Fusion Tables són les més versàtils i fàcils d'utilitzar. Un dels motius principals és que hi podem accedir també des del Drive de Google.

Per crear una Fusion Table només ens cal anar al Drive i crear-la com qualsevol altre tipus de document més:

En cas que no ens aparegui aquesta possibilitat el que hem de fer és anar a l'opció Connecta més aplicacions i triar-la de la llista d'opcions:

Per crear la nostra primera Fusion Table li hem de dir que volem crear un taula buida (Create empty table):

Un cop fet això ens apareixerà una proposta de taula amb quatre camps. Per configurar la taula amb els camps que nosaltres necessitem anem a Edit → Change columns i trobarem que els quatre camps que hi ha corresponen als quatre tipus de dades que les Fusion Tables poden emmagatzemar:

- Text. Li podem modificar el format per tal que hi pugui haver un enllaç a una pàgina web, un enllaç a una imatge o un enllaç a altres tipus de continguts
- Number. Admet diferents formats de nombres tal com podríem fer amb un full de càlcul
- Location. Podem posar-hi una adreça o el podem configurar per tal que faci referència a dos camps de la nostra taula que continguin la Latitud i la Longitud
- Date/time. Podem triar el format amb què volem aquest camp

A més a més en tots ells, excepte en els camps de tipus Location podem incloure-hi una validació de les dades de manera que es pugui triar des d'una llista desplegable.

A continuació hi ha un exemple d'una taula amb cinc camps:

- Nom. Un camp de tipus Text
- DataNaixement. Un camp de tipus Date/time
- Adreça. Un camp de tipus Location
- Etapa. Un camp de tipus Text amb validació de dades on només es poden introduir els valors Infantil, Primària o Secundària
- Foto. Un camp de tipus Text amb format Four line image on hi posem la URL d'una imatge i ens la mostra amb una mida que ocupa l'equivalent a quatre línies de text

En aquesta taula hi ha quatre registres, que podem veure en format llista, en format fitxes o, com que hi ha localitzacions, en format mapa:

Compartim

Les Fusion Tables les podem compartir de forma similar als altres documents del Drive de Google, de manera que podem donar permisos d'edició o de visualització a persones concretes.

Si tenim intenció de donar permisos d'edició a molta gent, la forma més fàcil és crear un grup de Google i assignar-li els permisos utilitzant l'adreça de correu del grup.

Configurar l'accés

Des d'App Inventor podem utilitzar el componenent FusiontablesControl per tal d'accedir a una Fusion Table i utiltzar-la com a base de dades. Quan ho fem necessitem saber l'API Key.

L'API Key és el codi que ens identificarà de forma unívoca l'usuari propietari de la Fusion Table a la què volem accedir

Per obtenir aquesta informació hem de seguir aquestes instruccions:

1.- Hem d'anar a la Consola d'APIs de Google. Cal que estem validats amb el nostre usuari de GMail.

2.- A la pantalla que ens apareix hem d'anar a Use Google APIs i fer clic on diu Enable and manage APIs.

3.- Si és la primera vegada que accedim a la consola de desenvolupadors de Google, i no hem creat mai cap projecte, ens apareixerà aquesta pantalla on n'hem de crear un:

4.- Tot seguit ens trobarem aquesta pantalla on hi ha totes les APIs que podem activar. Hem de trobar la Fusion Tables API i fer-hi clic:

5.- Quan hi hem fet clic, ens trobem amb aquesta pantalla on hem d'activar la Fusion Tables API:

6.- Un cop habilitada, hem d'anar al menú de l'esquerra i triar l'opció Credentials. Quan ho haguem fet ens trobarem aquesta nova pantalla on, al desplegable, hem de triar la primera opció per crear una nova credencial:

7.- Ens apareixerà aquesta nova pantalla on li hem d'indicar que la nova clau que estem creant és del tipus Android key. Pensem que volem enllaçar les Fusion Tables amb dispositius mòbils Android:

8.- El següent pas és la creació de la clau, que ens apareixerà sota el títol Create Android API key, i que haurem de crear fent clic al botó Create

9.-Finalment ja tenim la clau creada, tal i com ens apareix en aquesta pantalla. Aquesta clau és la que utilitzarem des d'App Inventor per fer referència a les nostres Fusion Tables:

Accedir a les dades

Per accedir a una Fusion Table necessitem l'API Key que ens permetrà l'accés a les Fusion Tables que tinguem, i que ja hem vist a l'apartat anterior com obtenir-la. Hem de tenir també l'identificador de la Fusion Table en concret a la que volem accedir. Per obtenir aquesta informació, des de la Fusion Table hem d'anar al menú File i triar l'opció About this table. Obtindrem una pantalla com la següent, d'on hem de copiar l'Id:

Quan tenim aquestes dues dades, el més pràctic és definir dues constants a App Inventor per fer-ne referència sempre que les necessitem. A més a més farem que, en carregar-se la pantalla, es defineixi per defecte quina és l'API Key que volem utilitzar per a les nostres Fusion Tables:

Disseny de la pantalla

Què farem ara? Farem una consulta a la Fusion Table amb una sentència SQL, com a una base de dades, de manera que ens mostri un llistat de tots els registres que acompleixin la condició que haguem definit, en triarem un i ens l'ensenyarà en una fitxa. El disseny de la pantalla a App Inventor serà la següent:

És important que posem un nom suficientment clar a cadascun dels elements que farem servir des de l'entorn de programació. En aquest cas tots els TextBox tenen un nom que comença per "Text" i tots els Button tenen un nom que comença per "Boto".

És molt recomanable que els noms dels elements només utilitzin els caràcters de l'alfabet anglès. Cal evitar la ç, la ñ i qualsevol altres caràcters que no siguin els propis d'aquest alfabet.

Consulta de la base de dades

Per fer consultes sobre una base de dades s'utilitzen sentències SQL (Structured Query Language). La sintaxi d'una sentència SQL és la següent:

SELECT nom dels camps separats per comes, o un asterisc per tots els camps
FROM nom de la taula
WHERE criteris de selecció

Per exemple: SELECT Nom, Cognoms FROM Alumnes WHERE AnyNaixement=2000

En el nostre cas, veiem que a la part superior de la pantalla ens demana l'etapa. Haurem de construir una sentència SQL de forma dinàmica en funció del contingut d'aquest TextBox i fer la consulta a la nostra Fusion Table. Això ho farem de la següent forma:

A la sentència SQL que comença per SELECT *, aquest asterisc vol dir tots els camps

Quan construïm aquesta sentència SQL és especialment important que anem amb compte a deixar els espais en blanc necessaris per tal de separar els termes de forma adequada. Així doncs, després del FROM i abans del WHERE hi haurà d'haver un espai:

L'execució d'aquesta consulta ens retornarà un llistat amb totes les persones que estan a l'etapa seleccionada. Aquest llistat està en format CSV. Per treballar amb aquest llistat des d'App Inventor el més fàcil és convertir-lo en llistes, de manera que obtinguem una llista de llistes, on la primera correspondrà als noms dels camps i cadascuna de les altres correspondrà a un registre. Si esborrem aleshores la primera llista, la que correspon als noms dels camps, ens quedaran només els registres resultat de la consulta:

El format CSV significa Comma Separated Values. En aquest format cada línia és un registre, i a cada registre els camps estan separats per comes.

Com que volem poder seleccionar un registre, els afegirem tots a un ListPicker. Ara bé, en lloc d'afegir tots els camps, visualitzarem només el nom i l'etapa, que corresponen als camps 1 i 4. Això ho farem creant una llista buida en el ListPicker i, per a cadascun dels registres, hi afegirem el contingut dels camps seleccionats. Finalment obrirem el ListPicker per poder triar la persona que vulguem.

Val a dir que si mirem el disseny de la pantalla no trobarem cap ListPicker, però si ens fixem bé en el llistat de components allà si que n'hi ha un. Hem dissenyat l'app de manera que no hi ha cap necessitat d'accedir al ListPicker manualment, per la qual cosa l'hem definit com un component ocult. Això ho hem fet establint com a hidden la seva propietat Visible.

Visualització de la informació

Un cop hem triat la persona que volíem del llistat, el que hem de fer ara és mostrar tota la seva informació en els camps corresponents. Això ho fem agafant el SelectionIndex del ListPicker i utilitzant-lo en la llista on tenim tots els registres.

La visualització de l'aplicació en un dispositiu mòbil quedaria de la següent forma:

Finalment, i com que tenim l'adreça, hem afegit un botó en el disseny de la pantalla per situar en un mapa de Google aquesta adreça. Això ho fem de la següent manera: