Programmare con

Fare clic per modificare lo stile
del sottotitolo dello schema
L’arte di programmare
• La programmazione è l'arte di far fare ad un
computer quello che noi vogliamo
• È un po' come una ricetta: un insieme di istruzioni
per indicare ad un cuoco come preparare un
particolare piatto.
• E cosa vi serve per preparare una buon piatto?
Programma= ingredienti + istruzioni
• Ingredienti
– Numeri
– Caratteri
– Immagini, suoni, filmati,
segnali (ad es. pressione)
–…
– Chiamiamoli proprio
“ingredienti”
• Fare
Istruzioni
clic per modificare
gli
stiliprogramma
del testo dello
– Un
è una
sequenza di istruzioni
schema
“spiega”
al computer
– che
Secondo
livello
cosa
fare degli
• Terzo livello
ingredienti
– Quarto livello
» Quinto livello
Appinventor
Una app con Appinventor si costruisce così:
1. Scegliete i vostri ingredienti (immagini, suoni, sensori, timer,
animazioni..)
2. Adattateli alle vostre esigenze (se ad esempio è un’immagine, potete
variare le dimensioni, ruotarla, ecc)
3. Scrivete la sequenza delle istruzioni (e qui bisogna pensarci bene su, o la
nostra ricetta sarà immangiabile!)
4. Le istruzioni di AppInventor sono scritte in un linguaggio semplicissimo,
come fossero un puzzle. Per farle “interpretare” ad un computer, ci vuole
un programma che le “traduca” in un linguaggio più “adatto” al
computer (questo tipo di programmi-interpreti si chiamano
COMPILATORI)
5. Il compilatore genera un QRCODE che il vostro cellulare, se avete
scaricato la app AI COMPANION, può leggere, interpretando il
programma
6. Il programma viene ESEGUITO sul vostro cellulare
Designer: per scegliere i vostri ingredienti
• Fare clic per modificare
gli stili del testo dello
schema
Qui “scaricate”
– Secondo livello
Qui
scegliete i tipi di
immagini,
suoni,
ecc, ed• Terzo livello
ingredienti
aggiustate
dettagli,
(immagini,
suoni,
tasti, –ad
Quarto livello
la
testi,esempio
sensori, animazioni..)
» Quinto livello
dimensione
di un immagine, la
durata
di un timer..
Qui “trascinate” gli ingredienti che
volete usare
ESEMPIO
Il gattino che miagola

Fare clic per modificare lo stile
del sottotitolo dello schema
Obiettivo dell’app: toccando il gattino, deve
miagolare
Ogni ingrediente ha un “tipo” (ad esempio la carota è un ortaggio) Il nostro primo
ingrediente è di tipo “tasto” (Button)
NOTA: BUTTON (=tasto)
Voi volete che l’immagine del gattino sia un tasto.
Toccandolo, volete che miagoli
L’ingrediente è di tipo “Button” ma ora vogliamo proprio scegliere
un particolare tasto: un gattino!!
Carichiamo il gattino dalla sezione “Properties”
clikkando su “Image”. Il file è sul vostro Desktop
Ogni “tasto” ha un campo testo. Qui ci da’ fastidio, perciò
Cancellate “Text for Button” nel campo Text
Qualcosa però vogliamo scrivere, ma “fuori” dal nostro tasto.
Quindi trasciniamo un ingrediente di tipo “label” sullo schermo
Un label è semplicemente una scritta.
Qui potete decidere
dimensioni e colore
del vostro label
Scriviamo nel campo Text “Accarezzami!”. Notate anche
che nella sezione “Components” appare un nuovo ingrediente
Il terzo (e per ora ultimo) ingrediente è di tipo “suono” (sound)
Nella sezione “Properties” nella casella “Source” selezionate “Upload”
e caricate dal Desktop il file Meow-sounds
Abbiamo tutti gli ingredienti!! Passiamo a scrivere la ricetta!
Selezionate “Blocks”
Qui, per ogni ingrediente, ci sono
vari tipi di istruzioni, catalogate
con colori diversi. (ad esempio, il
pane si può
affettare, ma l’olio si può solo
mescolare, versare..ecc)
Analogamente, non tutte le
istruzioni
possono essere applicate a tutti i
tipi di dati. Un Button lo
possiamo premere, un Label no!
Qui vi ritrovate tutti i vostri tipi di
ingredienti
Ricordatevi l’obiettivo della nostra
“ricetta”
• Quando “premiamo” il tasto-gatto, vogliamo
che miagoli!
• Questo tipo di istruzioni appartiene al gruppo
di istruzioni di Controllo (“quando succede X,
allora fai Y”)
Fare clic per modificare gli stili del
testo dello schema
Se Se selezionate un tipo di
dato, compaiono tutte le
“istruzioni” che potete
applicare a quel dato.
Le istruzioni in Appinventor
hanno la forma di un puzzle:
1) Il colore indica il tipo di
istruzione (es Controllo, Logica)
2) Le istruzioni si “collegano”
fra di loro come in un puzzle:
se sbagliate, NON SI
INCASTRANO fra loro!
1) Scegliete l’istruzione:
“When you click on Button1
do <something>” e trascinatela
2) Selezionate Sound e cercate
l’istruzione “adatta” . Quale?
Le istruzioni viola si chiamano “procedure”.
Sono dei “miniprogrammi” preconfezionati,
che possono essere chiamati (“call”) più
volte all’interno dei programmi.
SIAMO PRONTI!!
Fare clic
per modificare
stile
Adesso
carichiamo
il nostrolo
primo
del
sottotitolo
schema
programma
suldello
cellulare!!

Selezionate AI Companion sotto “Connect”
Con la App AICompanion, inquadrate il QRCode,
oppure scrivete il codice
Miawwww
Volete caricare “stabilmente” la vostra
app sul cellulare? (1)
• Quando cellulare e PC sono connessi in rete, la
vostra app funziona, ma appena disconnette il
cellulare, non funzionerà più
• Per caricare stabilmente la vostra app:
selezionate Build:
Volete caricare “stabilmente” la vostra
app sul cellulare? (2)
• App (provide QR code): questo comando genera
il QRCODE che potete leggere con un qualsiasi
lettore di QRCODE, ad esempio ZXing barcode
scanner (scaricabile gratuitamente in Google
Play).
• App (save to my computer): scarica un file di
formato .apk che potete inviare via email ai vostri
amici . Un file .apk su Android è come un file .exe
(eseguibile) su Windows. Una volta scaricato,
clikkateci su, e appare una finestra di
installazione, seguite le istruzioni.
Adesso complichiamo un po’ la nostra
app (provateci da sole!)
• Idee:
– Create due tasti, con due animali diversi (trovate
in rete immagini e file mp3 audio)
– Oltre a miagolare, il vostro gatto può fare le fusa!!
• Suggerimento: Usate la procedura (colore viola)
“VIBRATE”
• Questa procedura richiede anche di stabilire la durata
in millisecondi della vibrazione (suggerimemto 500)
PREMIO AI tre PRIMI TEAM CHE
RIESCONO A ESPANDERE LA APP!!!
Compito per la prossima volta!
• Andate su
http://appinventor.mit.edu/
explore/ai2/paintpotpart1.html
• Ci arrivate dalla pagina di
Appinventor Resources
Tutorials PaintPot Tutorial
• Da sole, seguite passo passo
il tutorial e create la app!