APP INVENTOR 2

1. http://ai2.appinventor.mit.edu; richiede un account google

2. Si può:
2.1. Avviare un nuovo progetto: il progetto viene salvato
automaticamente online

2.2. Salvare il progetto (.aia): salva il codice sorgente

2.3. Importare un progetto (estensione .aia) dal proprio PC

3. Test/esecuzione dell’app
3.1. Emulatore onsite: è possibile utilizzare un emulatore android sul PC, che deve essere installato
(MIT_App_Inventor_Tools_2.3.0_win_setup.exe) ed eseguito (aistarter) prima di avviare la connessione
(viene eseguito in una finestra console, utilizzando un server all’indirizzo 127.0.0.1 localhost, con ascolto
sulla porta 8004).
ATTENZIONE: l’emulatore deve essere installato come amministratore: click destro -> esegui come
amministratore
La connessione può essere ripristinata: reset (l’hard reset simula invece il ripristino alle condizioni di fabbrica, e
richiede la reinstallazione degli eventuali aggiornamenti)

 Pro: non è necessario avere un telefono android

 Contro: lentezza; impossibilità di testare app che utilizzano i sensori (gps ecc)

3.2. Installazione sul cellulare della app MIT AI2

Companion, e connessione via WIFI con il PC per il
trasferimento della app da testare

la connessione può avvenire inserendo nella app il codice a 6 a caratteri o mediante il qrcode

 Nell’ultima versione è possibile la connessione anche senza il WIFI del cellulare.

 Ogni modifica viene applicata alla app in esecuzione nello smartphone immediatamente o mediante il
comando refresh:

3.3. Connessione mediante QRCode generato online

Installazione sul cellulare mediante scaricamento, mediante qrcode, del file .apk (cioè il file compilato installabile) e
successiva installazione

N.B.: per installare il file è necessario rimuovere le protezioni di Android:

opzioni -> sicurezza -> origini sconosciute

3.4. Salvataggio in locale del file .apk e trasferimento (via usb e cloud per es Drive) sul cellulare per la successiva
installazione

4. L’ambiente di lavoro:
4.1. E’ possibile impostare la lingua dell’ambiente di lavoro: anche i comandi del linguaggio vengono tradotti
nella lingua prescelta e questo può creare incertezze quando si accede alla documentazione che è scritta in
inglese; per questo, quando necessario, può essere utile commutare tra le lingue ENG <-> ITA
5. Struttura del linguaggio:

5.1. Il linguaggio utilizza blocchi per costruire il codice (in modo analogo a scratch) e implementa il paradigma
della programmazione a oggetti, guidato dagli eventi
5.2. Gli oggetti (Componenti) sono dotati di proprietà e metodi (sintassi puntata) e rispondono agli eventi (event
driven)
5.2.1.I componenti sono raggruppati in categorie:

5.2.2.

Esistono componenti visibili e non visibili (cioè non appaiono nello stage)
5.2.3.Il punto interrogativo a destra del componente permette di accedere alla descrizione e all’elenco
completo delle proprietà

5.2.4.le proprietà degli oggetti si possono impostare:

o in fase di progettazione:

o in fase di esecuzione (run time); nel codice viene utilizzata la notazione puntata (dot notation):
componente.proprietà
I Blocchi utilizzabili negli script si dividono in:

o Incorporato (suddivisi in categorie): blocchi comuni a tutte le app

o Blocchi associati ai componenti utilizzati nel progetto specifico
o Blocchi validi per una data tipologia di componente

5.2.5.Selezionato un componente, a destra vengono

visualizzati gli specifici blocchi relativi a quel
controllo, con la seguente codifica colore:
- Blocchi Marroni: gestione degli eventi
- Blocchi Viola: Metodi (cioè azioni specifiche del
componente)
- Blocchi Verde scuro: destinatario
dell’assegnazione (Get)
- Blocchi Verde chiaro: valore da assegnare (SET)

5.2.6. Alcuni blocchi hanno opzioni che permettono di strutturare il codice:

5.2.7. L’applicazione può utilizzare diversi SCREEN: ogni screen ha il suo script

5.2.8. Selezionato uno screen, tutto il codice relativo ai diversi componenti viene inserito nella medesima
area - sezione Blocchi (a differenza di Scratch, dove ogni sprite ha il proprio script)
 5.2.9.- E’ possibile inserire commenti (click destro)

5.2.10. N.B.: I blocchi vengono tradotti nella lingua scelta

5.2.11. Variabili
5.2.11.1. Variabili globali: sono definite da un nome e hanno validità per tutti gli script dello screen in
cui sono definite

5.2.11.2. Il blocco SET assegna un valore alla variabile; il blocco GET fornisce il valore contenuto nella
variabile:

- I media utilizzati (immagini, audio, video), possono essere caricati con il relativo pulsante in basso a destra.
- N.B. attenzione al copyright (Google -> immagini -> strumenti -> diritti di utilizzo -> selezionate per essere
riutilizzate)

5.3. Lo STAGE (CANVAS): rappresenta un’area sensibile al tocco, in cui disegnare o muovere sprite
0,0 0,380
1
x
90°
Direzione
movimento
-3 3
180° 0°

270°
320,0 -1
y 320,380

I bordi del Canvas sono identificati da un numero ed è possibile testare se uno sprite rimbalza o collide contro un
certo bordo:

EdgeReached(edge)
Event handler called when the Ball reaches an  edge  of the screen. If Bounce is then called
with that edge, the sprite will appear to bounce off of the edge it reached. Edge here is
represented as an integer that indicates one of eight directions north(1), northeast(2),
east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4).
 5.4. COMPONENTI PARTICOLARI:

5.4.1. SensoreDirezione: fornisce indicazioni sull’orientamento 3D del dispositivo

Beccheggio (tono, Pitch)

0° dispositivo in piano
-> 90° inclinato parte superiore verso il basso -> 180° quando girato
-> - 90° inclinato parte inferiore verso il basso -> -180° quando girato
Nord: 0° (lato superiore del cell)
azimut
Rollio (Roll)
0° dispositivo in piano Ovest: 270° Est: 90°
-> 90° inclinato verso lato sinistro
-> - 90° inclinato verso lato destro

Sud: 180°

azimut

N.B.: Il sensore è dotato di metodi e proprietà per fornire direttamente l’angolo di direzione e la velocità del
movimento del dispositivo senza dover fare i calcoli partendo dalle 3 coordinate 3D:

5.4.2. Maps

La categoria Maps contiene componenti in grado di visualizzare una mappa posizionando marker (in base alle
coordinate) e disegnando forme:

La mappa può essere utilizzata insieme al sensore di posizione (GPS) per creare app di navigazione e tracciamento
percorsi
 5.4.3. SensorePosizione

LocationSensor
Non-visible component providing location information, including Latitude, Longitude, Altitude (if
supported by the device), speed (if supported by the device), and address. This can also perform
“geocoding”, converting a given address (not necessarily the current one) to a latitude (with
the LatitudeFromAddress method) and a longitude (with the LongitudeFromAddress method).
In order to function, the component must have its Enabled property set to  true , and the device must
have location sensing enabled through wireless networks or GPS satellites (if outdoors).
Location information might not be immediately available when an app starts. You’ll have to wait a
short time for a location provider to be found and used, or wait for the LocationChanged event.
The emulator does not emulate sensors on all devices. Code should be tested on a physical
device.
Properties
Accuracy

The LocationSensor will be able to locate the device with a varying degree of confidence, based on
the quality of satellite, cell towers, and other data used to estimate location. The Accuracy value is
the radius in meters around the sensor’s detected location. The device has a 68% chance to be
located within this radius. More precise location detection will result in a smaller accuracy number,
which allows the app to have more confidence where the device is actually located.

If the accuracy is not known, the return value is 0.0

Altitude

Altitude of the device measured in meters, if available.

Altitude is measured from the World Geodetic System 84 reference ellipsoid, not sea level.
Note that it is difficult for devices to accurately sense altitude. Altitude reported on a
phone/tablet can easily be off by 30 meters or more.
AvailableProviders
 List of available service providers, such as gps or network. This information is provided as a list and
in text form.
CurrentAddress
Physical street address of the device from Google’s map database.

The address might not always be available from the provider, and the address reported may
not always be of the building where the device is located.
If Google has no address information available for a particular location, this will return No
address available.
DistanceInterval

Determines the minimum distance interval, in meters, that the sensor will try to use for sending out
location updates. For example, if this is set to 50, then the sensor will fire a LocationChanged event
only after 50 meters have been traversed. However, the sensor does not guarantee that an update
will be received at exactly the distance interval. It may take more than 5 meters to fire an event, for
instance.

It is also useful to check against Accuracy when using this property. When your device is
moving, the accuracy of the detected location is constantly changing.
Enabled

If  true , the LocationSensor will attempt to read location information from GPS, WiFi location, or
other means available on the device. This setting does not control whether location information is
actually available. Device location must be enabled or disabled in the device settings.
HasAccuracy
If  true , the device can report its accuracy level.
HasAltitude
If  true , the device can report its altitude.
HasLongitudeLatitude
If  true , the device can report longitude and latitude. It is always the case that either both or neither
are.
Latitude
The most recently available latitude value in degrees reported to 5 decimal places. If no value is
available, 0 will be returned. Latitude is a value between 90 (north) and -90 (south), where 0 marks
the Equator.
Longitude
The most recent available longitude value in degrees reported to 5 decimal places. If no value is
available, 0 will be returned. Longitude is a value between 180 (east) and -180 (west), where 0 marks
the Prime Meridian.
ProviderLocked
The device will not change the service provider.

It is possible for a device to switch service providers when the current provider is unable to
provide adequate location information. ProviderLocked is a Boolean value: true/false. Set
to  true  to prevent providers from changing. Set to  false  to allow for automatic switching
when necessary.
ProviderName

The current service provider. The provider will most likely be either GPS or network.
TimeInterval
Determines the minimum time interval, in milliseconds, that the sensor will try to use for sending out
location updates. However, location updates will only be received when the location of the phone
 actually changes, and use of the specified time interval is not guaranteed. For example, if 30000 is
used as the time interval, location updates will never be fired sooner than 30000ms, but they may be
fired anytime after.

Values smaller than 30000ms (30 seconds) are not practical for most devices. Small values
may drain battery and overwork the GPS.
Events
LocationChanged(latitude,longitude,altitude,speed)

Indicates that a new location has been detected. Speed is reported in meters/second Other values
match their properties.
StatusChanged(provider,status)
Indicates that the status of the location provider service has changed, such as when a provider is
lost or a new provider starts being used.
Methods
 LatitudeFromAddress(locationName)

Derives latitude from the given locationName.

 LongitudeFromAddress(locationName)
Derives longitude from the given locationName.

5.4.4. Visualizzatore WEB

Il componente visualizzatore WEB permette di visualizzare pagine Web. La pagina iniziale può essere specificata in
Progettazione o nell'Editor dei blocchi. Il visualizzatore può essere impostato per aprire i collegamenti che vengono
toccati, e l'utente può compilare moduli Web. Attenzione: questo non è un browser completo. Ad esempio, se si
preme il pulsante fisico Indietro nel telefono l'applicazione verrà chiusa, invece di andare indietro nella cronologia
del browser.

Richiede un indirizzo URL testuale

Esempio: visualizzazione di una mappa in google maps (istituto Cigna)

L’indirizzo viene costruito con latitudine e longitudine fornito dal GPS:

https://www.google.it/maps/@44.3842396,7.8190186,17z

5.5. E’ possibile creare sottoprogrammi (Procedure) richiamabili mediante il nome

5.6. E’ possibile riferirsi ad un gruppo di componenti in base al loro tipo:
 5.7. GESTIONE MULTISCHERMO

- Ogni screen ha i suoi script: le variabili sono locali ai singoli screen

- Agli screen si possono passare valori in ingresso e uscita (stringa di testo, lista)
o https://www.youtube.com/watch?v=7qjSiMq0gus
- Si possono utilizzare i valori memorizzati in un database per passare parametri tra gli screen, perché tutti gli
screen accedono ai dati memorizzati in un database TinyDB (variabili globali)
- Il passaggio tra screen può avere animazioni di transizione

esempio

Codice schermo 1

Codice schermo 2
5.8. LISTE

La lista è una struttura dati di dimensione variabile in cui ogni elemento è caratterizzato da un numero
univoco (indice) che ne identifica la posizione.

indice Elemento
1 Renzo
2 Silvia
3 Marco
4 Paolo
5 giulia
Quando viene definita la lista è vuota:

I metodi disponibili permettono di inserire (append) nuovi elementi (questo comporta l’allungamento della
lista),

modificare/eliminare/visualizzare/ricercare/sostituire elementi ecc

5.8.1. Liste annidate per la creazione di strutture n-dimensionali

Esempio: struttura bidimensionale (matrice) = lista di liste

Nell’esempio viene generata, riempita e visualizzata una struttura 3 righe x 3 colonne

 5.9. GESTIONE DI DATABASE INTERNI

Componente TinyDB: permette di gestire record di testo: ogni record è identificato da un TAG (testo che
denomina/identifica il record) e un VALUE (valore del record), creando una struttura tabellare a 2 colonne

TAG VALUE
n1 Renzo
n2 Silvia

 Ogni APP può accedere a 1 solo database interno; più APP NON possono condividere lo stesso DB
 i dati vengono salvati permanentemente nel dispositivo nella cartella /data/ in un file con estensione .XML
 Il database è accessibile ai diversi screen dell’APP e quindi permette di passare valori tra gli screen

Data items consist of tags and values. To store a data item, you
specify the tag it should be stored under. The tag must be a text
block, giving the data a name. Subsequently, you can retrieve the
data that was stored under a given tag.
When you are developing apps using the AI Companion, all the
apps using that Companion will share the same TinyDB. That sharing
will disappear once the apps are packaged and installed on the
phone. During development you should be careful to clear the
Companion app’s data each time you start working on a new app.
Properties:
Namespace

Namespace for storing data.

Methods:
ClearAll()

Clear the entire data store.

ClearTag(tag)
Clear the entry with the given  tag .
 GetTags()
Return a list of all the tags in the data store.
 GetValue(tag,valueIfTagNotThere)
Retrieve the value stored under the given  tag . If there’s no such tag, then return  valueIfTagNotThere .
StoreValue(tag,valueToStore)
Store the given  valueToStore  under the given  tag . The storage persists on the phone when the app
is restarted.

Esempio: Il pulsante memorizza record consente di memorizzare il valore scritta

nella textbox e corrispondente al numero di record visualizzato dalla label;
il pulsante leggi record scorre i singoli record del database

la variabile NRecord conta il numero di record

la variabile indice identifica il singolo record

all’avvio dell’applicazione il database viene svuotato

il pulsante memorizza record:

- Memorizza il valore contenuto nella

textbox e lo associa al TAG (cioè
l’etichetta che identifica il singolo
record) al valore dell’indice (in questo
caso un numero)
- Svuota la textbox
- Nasconde la tastiera
- Incrementa l’indice

Il pulsante leggi record abilita il timer che 1 volta al secondo visualizzerà ogni singolo record, partendo dal 1°, fino
all’ultimo record (NRecord)

Il TAG assume il valore dell’indice per individuare i singoli record

GETVALUE è il metodo che, dato il valore del TAG, fornisce in uscita il valore del value del record, che verrà
visualizzato nella label lblTXtR

Esempio:
 5.10. Creazione di procedure
Un problema complesso può essere scomposto in sottoproblemi più semplici (metodologia top-down): ogni
sottoproblema può essere risolto mediante una porzione di codice (sottoprogramma).
In app inventor questi sottoprogrammi vengono denominati “procedure”.
L’utilizzo di procedure serve anche a non dovere riscrivere più volte la stessa porzione di codice

I linguaggi di programmazione in genere definiscono 2 tipi di sottoprogrammi:

 Function: forniscono un valore in output

 Procedure (subroutine): eseguono istruzioni senza fornire un valore in uscita

Esempio tipico di function sono le funzioni matematiche:

x=6
y= √ x

Valore in input: x  Valore in output: y

In app inventor entrambi i tipi di sottoprogrammi vengono denominati “procedure”:

1. Blocco che crea una procedura denominata proc1 senza valore in output

E’ possibile impostare 1 o più parametri in input:

Quando la procedura viene invocata (call) è necessario fornire in input i parametri

richiesti:

2. Blocco che crea una procedura denominata proc2 con valore in output

- Esempio 1: procedura con passaggio di parametri

- Esempio 2: invece che fornire parametri in input è anche possibile (ma sconsigliato) ricorrere all’utilizzo di
variabili globali
 5.11. Qualsiasi blocco componente

Un concetto comune quando si scrivono app è "Don't Repeat Yourself" (o DRY). Invece di creare un sacco di codice
ripetitivo, ad esempio copiando e incollando, puoi invece utilizzare blocchi speciali chiamati blocchi "Any
Component".
Che cos'è esattamente un blocco "qualsiasi componente"? Ogni blocco di componenti, come set Button1.Text to , ha
tre parti: (1) il componente che viene modificato ( Button1 ), la parte del componente che viene manipolata
( set… .Text to ) e (3) gli input ( se presente). I blocchi che in genere tireresti fuori dal cassetto dei blocchi nominano
un singolo componente quando codifichi la tua app. Ma cosa succede se si desidera eseguire un'azione su molti
componenti diversi dello stesso tipo? Un'opzione potrebbe essere quella di copiare e incollare ogni blocco tutte le
volte che è necessario, ma man mano che l'app si espande, diventa difficile modificarlo. Potrebbe invece avere senso
essere in grado di sostituire diversi componenti al posto di un singolo componente. Questo è ciò che i blocchi
"qualsiasi componente" ti consentono di fare. Piuttosto che correggere il blocco su un componente specifico,
consentono di rendere il codice più generale fornendo qualsiasi componente dello stesso tipo come input. Ciò
consente, ad esempio, di creare un elenco di pulsanti e aggiornare tutte le loro proprietà contemporaneamente
utilizzando un ciclo for-each , ad esempio:

Figura 1. Un esempio di un ciclo for che nasconde tutti i pulsanti elencati in una lista.
Ciascuno dei tre tipi di blocco dei componenti principali, ovvero eventi, metodi e proprietà, ha blocchi "qualsiasi
componente" corrispondenti.
5.11.1. Proprietà

I blocchi "qualsiasi componente" per le proprietà sono le versioni più semplici di qualsiasi blocco componente. I
getter di proprietà, come quello mostrato di seguito, accettano un singolo componente e restituiscono il valore della
proprietà denominata per quel componente. I setter di proprietà accettano un argomento aggiuntivo, che è il nuovo
valore della proprietà.

Figura 2. Blocchi di esempio per getter e setter di proprietà any.

5.11.2. Metodi

Tutti i blocchi del metodo dei componenti funzionano in modo simile alle proprietà getter e setter. Per ogni dato
metodo su un componente, il corrispondente blocco di qualsiasi componente prenderà un componente e tutti i
parametri necessari per il metodo. Il blocco avrà lo stesso output del blocco del metodo specifico (se presente). Ad
esempio, di seguito è riportato un blocco di metodo per calcolare la distanza da un Marker alla posizione corrente
dell'utente su una mappa.

Figura 3. Esempio di utilizzo di un blocco di metodo che prende qualsiasi marker e ne calcola la distanza dalla
posizione corrente dell'utente.
5.11.3. Eventi

Qualsiasi evento componente è la forma più complessa di un qualsiasi blocco componente. Per ogni dato evento, il
corrispondente evento any component aggiunge altri due parametri, component e notAlreadyHandled , all'elenco
esistente di parametri evento, se presenti. Il parametro component sarà il componente che ha attivato l'evento, ad
esempio Button . Il parametro notAlreadyHandled è true se nessun altro blocco di eventi gestisce specificamente
l'evento per il componente .
Considera il seguente pseudocodice per la gestione degli eventi per vedere come funziona:
1. Si verifica un evento, ad esempio l'utente fa clic su un pulsante denominato Button1.
2. il componente viene inizializzato su Button1 .
3. notAlreadyHandled viene inizializzato su true .
4. App Inventor verifica se esiste Button1.Click .
5. Se viene trovato il blocco eventi:
1. Il codice del blocco eventi viene eseguito.
2. notAlreadyHandled è impostato su false .
6. App Inventor verifica se esiste un pulsante Button.Click .
7. Se viene trovato un blocco di eventi, il codice del blocco di eventi viene eseguito
con component e notAlreadyHandled viene passato ad esso.
5.11.4. Suggerimenti e trucchi

Ci sono molte cose che puoi fare con qualsiasi blocco di componenti. Ecco alcuni suggerimenti e trucchi per ottenere
il massimo da qualsiasi blocco di componenti.
5.11.4.1. Elenchi di componenti

È possibile creare un elenco di componenti utilizzando liste. In questo modo è facile fare riferimento a grandi gruppi
di componenti attraverso un unico elenco e applicare le modifiche utilizzando il blocco for-each .

Figura 4. La variabile globale listOfButtons è impostata su un elenco di componenti pulsante.

5.11.4.2. Scambia blocchi

È possibile passare da un blocco per un componente specifico all'equivalente di qualsiasi blocco di componenti
tramite le voci di menu "Rendi generico" e "Rendi specifico" nel menu di scelta rapida (contesto) di un blocco. "Make
Generic" convertirà un blocco per un componente specifico, ad esempio, impostare Button1.Enabled su , in un
qualsiasi blocco di componenti, ad esempio, impostare Button.Enabled del componente con il blocco di componenti
corrispondente, ad esempio, Button1 . Per poter utilizzare la voce di menu "Rendi specifico", lo slot "di componente"
deve essere riempito con un componente specifico, ad esempio Pulsante1 , e non un altro tipo di blocco. Questa
funzione è disponibile per setter di proprietà, getter di proprietà e metodi.

 
Figura 5. Una dimostrazione di come i blocchi possono essere trasformati da versioni specifiche a versioni generiche
utilizzando il menu di scelta rapida (contesto).
Eventuali eventi di componenti
A differenza dell'operazione per trasformare proprietà e metodi nelle versioni di qualsiasi componente, trasformare
un gestore di eventi di componente in un evento di qualsiasi componente utilizzando "Rendi generico" è
un'operazione unidirezionale (può essere annullata utilizzando l'opzione Annulla, tuttavia). Quando si utilizza questa
funzione, tutti i riferimenti al componente verranno sostituiti con qualsiasi versione del componente.
 Figura 6. In alto: un evento quando Button1.Click che modifica un numero di proprietà di Button1. In basso: Dopo
aver utilizzato l'opzione “Make generico” menu (in basso), il cui Button1.Click evento viene sostituita con una in cui
qualsiasi Button.Click evento, e tutti i blocchi che fanno riferimento a Button1 vengono sostituiti con componenti .
Esempi
a) Globo di neve
In un'app con globo di neve, potresti usare molti sprite di palla su una tela per rappresentare i fiocchi di neve nel
globo di neve. Potresti volere che scompaiano quando raggiungono il bordo dello schermo. In precedenza, dovresti
creare un quando Ball_XX_.EdgeReached per ogni fiocco di neve affinché ciò accada. Con l' evento when any
Ball.EdgeReached , devi solo scrivere il codice una volta:

a sinistra: gestori di eventi ripetitivi prima dell'utilizzo del gestore di eventi generico. A destra tutto il codice si riduce
a un singolo gestore di eventi, risparmiando spazio e tempo nella codifica.
b) Colori pulsanti casuali
Questo blocco di eventi mostra tutti gli eventi dei componenti e i setter di proprietà.

Un gestore di eventi per modificare il colore di sfondo di qualsiasi pulsante quando viene cliccato.
c) Distanza dalla caratteristica più vicina
Data una mappa con un numero di marker, trova la distanza dal marker più vicino all'utente con il blocco di chiamata
Marker.DistanceToPoint :
 Un esempio di come trovare l'indicatore su una mappa più vicino alla posizione corrente dell'utente.
5.12. ACCESSO A DATI RESIDENTI SU SERVER WEB MEDIANTE PARTICOLARI API

- È possibile accedere a dati forniti da appositi server http mediante le API da loro fornite
- E’ possibile importare dati XML:
o https://www.youtube.com/watch?v=05s6Hf2U0ZY

Che cos’è una API?

Un API (Application Programmable Interface, tradotto «Interfaccia di Programmazione di un'Applicazione») è un

insieme di funzioni che permettono d'accedere ai servizi di un'applicazione, mediante un linguaggio di
programmazione. Un API permette di nasconde la difficoltà dell'accesso a un sistema proponendo funzioni standard
dove solamente i parametri e i valori rinviati sono conosciuti.

Mediante gli API, uno sviluppatore non deve quindi preoccuparsi del modo in cui funziona un'applicazione remota,
né della maniera in cui le funzioni sono state implementate per poter usare un programma. Un'API può essere
disponibile per un linguaggio particolare oppure per diversi linguaggi di programmazione.

Come avviene la selezione mediante l’utilizzo della API?

Per richiamare l’API si utilizza un link URL che varia a seconda delle valute prese in considerazione: l’applicazione è
stata programmata per generare un nuovo link, diverso a seconda dei casi, ogni volta che si esegue il processo di
conversione. Una parte dell’URL rimane costante a prescindere dalle due valute:

http://api.fixer.io/latest?base=

“api.fixer.io” è il dominio (N.B.: oggi il nuovo dominio è fixer.io) che gestisce l’API, mentre la scritta “latest?” serve a
richiamare una delle funzioni dell’applicativo web, la quale ci fornisce in output i tassi di cambio aggiornati.

Dopo “base=” il programma aggiunge in automatico il contenuto della variabile “global tag1”, precedentemente
impostata durante la fase di selezione delle valute. A questo punto rimane una parte sempre costante del link:

&symbols=

Dopo la quale il programma aggiunge in automatico il contenuto della variabile “global tag2” correlata alla seconda
valuta.

Il componente Web si collega con l’url fornita; il metodo GET (ottieni) genera una richiesta http GET che attende una
risposta dall’url selezionata

In questo modo, si ottiene un link completo e perfettamente funzionante che fornisce un valore numerico, detto
tasso di cambio, il quale rappresenta la quantità corrispondente alla seconda valuta con lo stesso valore di un’unità
della prima valuta (es. http://api.fixer.io/latest?base=EUR&symbols=USD restituisce un valore pari circa a 1.24, dove
1EUR=1. 24USD).
 - Esempio:

Il tasso di cambio è contenuto in una lunga stringa contenente varie informazioni non utili ai fini dell’applicazione,
motivo per cui essa viene suddivisa in più parti fino a quando si ottiene il valore numerico isolato.

Chiamata a sottoprogramma

Con passaggio di 3 parametri

A questo punto l’applicazione esegue una serie di decodifiche, delle quali spieghiamo il significato.

1) API JSON: è progettata per ridurre al minimo il numero di richieste e la quantità di dati trasmessi tra client e
server. Questa efficienza viene raggiunta senza compromettere la leggibilità, la flessibilità o la rilevabilità.
L'API JSON richiede l'uso del tipo di supporto dell'API JSON per lo scambio di dati.
2) API HTML: sono progettate per abilitare la selezione multipla di file, evitando così di dover ricorrere a plugin
esterni per eseguire l’upload di più file contemporaneamente.

Tramite la compilazione del link usando la API otteniamo il tasso di cambio aggiornato che possiamo inserire
nell'operazione che ci fornisce il risultato della conversione.

Sottoprogramma con
parametri in input
 ESEMPIO 2:

Map It: Displaying Locations on a Google Map

This tutorial shows how you can develop an app that allows you to record list of addresses and view the address on
the Google Maps. It will also show you how view your current location on the Google Map. This tutorial assumes you
have completed the basic tutorials of App Inventor. For basic and intermediate tutorials, click here.
Introduction

This tutorial introduces:

 List manipulation – creating lists, appending items to lists
 ListPicker – adding items to lists, saving list data
 LocationSensor – detecting current location for displaying on Google Maps
 ActivityStarter – used to start-up Google Maps for current or predefined address
 Notifier – displaying messages
 TinyDB – saving data into a persistent database
 Misc. – text manipulation, basic validation
We will be working toward the design shown in figure blow:

The figure below shows how the components are arranged in the design editor. It also shows you the non-visible
components (e.g. TinyDb, ActivityStarter, LocationSensor, Notifier) that are used in the app.
  
Blocks

We define 2 global variables.

 tagAddress – a variable that is a constant and will be used, as a tag, for storing and retrieving data from our database.
 listLocations – a variable that can be used to store and manipulate list of addresses.
We now create a procedure that can be invoked when the app is started (initialized). The procedure sets up the initial
state of some of the components. Some of these settings could have been done from the design editor, but for demo
purpose and clarification, we are using a procedure. In the procedure, we also check our database to find out if there
are any stored addresses. If no data, then we just use an empty list.
Adding a New Addresses

We use AddLocationButton to add a new address, CancelButton to cancel the process of adding, and
LocationHelpButton to display what type of addresses can be entered. The blocks to make these actions work are
here:

When AddLocationButton is clicked, we make our address data entry visible (using screen arrangement), allowing
user to enter address. If user clicks on Cancel, we make the arrangement hidden again. Using this approach, we keep
the screen simple and avoid the clutter. We also provide the SubmitButton to allow the user to indicate that they want
to store data.
When the user clicks on SubmitButton, we perform basic validation to ensure data has been submitted. If validation
does not pass, we display an error message. Otherwise, we invoke a procedure that appends the new address to our
list. We also store the updated list into our database. Once address is added, we hide our arrangement again. The
blocks below show how this logic is done:
Selecting an Addresses

When the user clicks on ListPicker1 ‘Select Location’ and selects an address, this action calls the blocks below:

This displays the address in the device and allow the user to tap on ViewOnMapButton to see the blocks selected
address on the Google Map — see the figure below:

When ViewOnMapButton is clicked, we validate to ensure that an address already has been selected. If not, an error
message is displayed. Otherwise, we use blocks below to show address:

The above blocks will open the map and the output will be like image below:
Viewing Current Location On the Map

We have dropped in a button, MyLocationButton ‘My location On the Map’ that can be clicked to view one's current
location. It will use
 EXTENSION

Possibilità di inserire EXTENSION prodotte da terzi per aumentare le potenzialità;

scaricare e installare file con estensione.aix

per esempio: extension per accesso e gestione portale ISENSE (database sul cloud):
edu.uml.cs.isense.iSENSEPublisher.aix

Sito con raccolta di extension per APP INVENTOR:

https://puravidaapps.com/extensions.php

per esempio: dall’interno di una app eseguire altre app (per es vlc) o altre applicazioni di appinventor
 ESTENSIONE APPINVENTOR PER FIREBASE

- https://firebase.google.com/

- Creazione account google e accesso alla console personale

- https://console.firebase.google.com/
- Nuovo progetto

project: android -> nome: com.cigna.app4alsa

Eseguire tutti i passaggi

 -
o Nuovo database realtime

o Regole di sicurezza per database realtime

Link al database: https://alsa-aca62.firebaseio.com/

Regole di accesso: mettere a true -> pubblica

Il simulatore permette di
controlla le azioni di
lettura e scrittura

tipo di database: realtime: le applicazioni vengono immediatamente avvertite che sono stati inseriti dei record nel
database e questi dati possono essere immediatamente letti (tempi ms)

Authentication:

metodo di accesso (Sign-in-method): anonimo -> abilita -> salva

:
:
.

Solo dopo aver consentito l’accesso (anonimo), nel progetto compare l’API Key (valore da copiare e inserire nel
progetto APP inventor):
Nel progetto App Inventor, oltre al link, deve anche essere inserito il Firebase token (cioè la chiave API Web):

N.B.: non è obbligatorio strutturare prima i campi del database; i dati ricevuti dalla app definiscono la struttura

Esempio di applicazione APP INVENTOR con estensione FIREBASE

In modo analogo a TinydB il database è costituito da una tabella di 2 colonne con i campi TAG e VALUE

l’esempio salva 1 solo valore che viene sovrascritto.

Nel componente Firebase di AppInventor il parametro ProjectBucket definisce un singolo dB all’interno di un

medesimo progetto e permette di far convivere diversi database sullo stesso Progetto
 Firebase Storage
Quest’estensione permette di caricare delle immagini (o anche video) in un archivio
online, in modo da non appesantire l’applicazione con molti dati.Il meccanismo di
richiamo è simile a quello di Firebase Realtime Database e utilizza la stesso tipo di
API.

Storage bucket

Modifica delle regole di accesso (rules)

Installazione della estensione di app inventor:

https://community.thunkable.com/t/free-firebasestorage-extension-v2-0-new-
version/8544/49
Blocchi:

Viene richiesto un file a Firebase e, quando ottenuto, viene visualizzato nel

componente immagine di app inventor
 PORTALE ISENSE
Permette alle app di salvare sul cloud dati in forma tabellare (database monotabellare: record - campi) e di ricevere
dati elaborati in forma grafica

https://isenseproject.org/

APP
Isense

La creazione di progetti Isense richiede una registrazione free

I progetti creati sono pubblici, a meno che non si specifichi il contrario

Creazione del progetto:

1. Pulsante + e denominazione del progetto; al progetto viene attribuito un numero univoco

2. Impostazioni del progetto: Setting

2.1. Si definiscono le proprietà del progetto e gli elementi necessari alla connessione con le APP:
 La CONTRIBUTOR KEY permette agli utenti di inviare dati al progetto; nella APP deve essere indicato il numero
del progetto e la Key
N.B.: potrebbero esserci più Key che identificano i singoli utenti del progetto in modo da rendere possibile
riconoscere chi ha inviato quali dati

3. Definizione dei campi della struttura tabellare: edit

3.1. Si definiscono i campi della tabella: nome e tipo (numero, testo, timestamp, location)
N.B.: i nomi dei campi sono Case Sensitive!

3.2. E’ possibile inserire formule per l’aggiunta di campi calcolati

(vedi documentazione sulle formule utilizzabili)
3.3. E’ possibile inserire direttamente dati (DATA SET = record) di
esempio, con diverse modalità

3.4. dati (DATA SET) ricevuti dalla APP

3.5. E’ possibile visualizzare/editare/cancellare i singoli data set
3.6. Pulsante VISUALIZE
Permette di visualizzare in modo grafico i dati secondo diverse modalità

3.6.1. Raggruppamento
3.6.2. Filtraggio
3.6.3. Strumenti
3.6.4. Salvataggio
3.6.5. Tipo di grafico (torta, tabella, barre, istogramma, mappa ecc)
4. Realizzazione della APP
4.1. Importazione del file aix contenente l’extension di Isense: edu.uml.cs.isense.iSENSEPublisher.aix
Viene aggiunto un componente:

- Contributor Key: la sola parte Key del progetto

- ProjectID: il numero ID del progetto

Il componente è dotato dei blocchi che permettono di gestirne

l’attività (connessione con il portale, invio e ricezione dei dati)
4.2. La trasmissione dei data set al portale avviene mediante LISTE che contengono i nomi dei campi e i relativi
valori

Attenzione: i nomi
dei campi sono
case sensitive
4.3. E’ possibile verificare la correttezza della trasmissione dei dati

4.4. La visualizzazione dei grafici nella APP avviene un normale componente WEB Viewer, a cui viene passato
l’indirizzo del portale Isense
 ACTIVITYSTARTER

Nel controlli di connettività è un componente che permette di eseguire una attività utilizzando il metodo
StartActivity .

Activities that can be launched include:

 Da una app eseguire un’altra app AppInventor
To do so, first find out the class of the other application by downloading the source code and using a file explorer or unzip
utility to find a file named "youngandroidproject/project.properties". The first line of the file will start with "main=" and be
followed by the class name; for example, main=com.gmail.Bitdiddle.Ben.HelloPurr.Screen1. (The first
components indicate that it was created by Ben.Bitdiddle@gmail.com.) To make your ActivityStarter launch this
application, set the following properties:
o ActivityPackage to the class name, dropping the last component (for
example, com.gmail.Bitdiddle.Ben.HelloPurr)
o ActivityClass to the entire class name (for
example, com.gmail.Bitdiddle.Ben.HelloPurr.Screen1)

 Da una app eseguire una app installata sul cellulare: è necessario inserire i 2 parametri
o ActivityPackage
o ActivityClass

I parametri si possono ottenere dalla app: Activity launcher, che effettua una
scansione delle app del cellulare e fornisce le stringhe richieste

 Starting the camera application by setting the following properties:

o Action: android.intent.action.MAIN
o ActivityPackage: com.android.camera
o ActivityClass: com.android.camera.Camera

 Performing web search. Assuming the term you want to search for is "vampire" (feel free to substitute your own choice),
set the properties to:
o Action: android.intent.action.WEB_SEARCH
o ExtraKey: query
o ExtraValue: vampire
o ActivityPackage: com.google.android.providers.enhancedgooglesearch
o ActivityClass: com.google.android.providers.enhancedgooglesearch.Launcher

 Opening a browser to a specified web page. Assuming the page you want to go to is "www.facebook.com" (feel free to
substitute your own choice), set the properties to:
o Action: android.intent.action.VIEW
o DataUri: http://www.facebook.com