Category Archives: Applicazioni

Animali parlanti

Libro di testo – pagine 294…301


GUI



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > Label1
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…


Blocchi


Un pulsante risponde al clic attivando il suono corrispondente



Pagina 302 – Numero 1 – Colore di sfondo



  1. Screen > Screen1
    1. BackgroundColor=Gray


Pagina 302 – Numero 2 – Etichette



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Label > la_Cane
    1. Text=Sofia
  5. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  6. User Interface > Label > la_Gatto
    1. Text=Alice

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…



Pagina 302 – Numero 3 – Pulsante e testo di Help



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Label > la_Cane
    1. Text=Sofia
  5. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  6. User Interface > Label > la_Gatto
    1. Text=Alice
  7. User Interface > Button > bu_Help
    1. Text=Help
  8. User Interface > Label > la_Help
    1. Text=

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…


Quando il pulsante Help viene attivato con un clic appare il contenuto dell’etichetta sottostante


Pagina 302 – Numero 4 – Disposizione orizzontale



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. Layout >HorizontalArrangement > ha_Cane
  4. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  5. User Interface > Label > la_Cane
    1. Text=Sofia
  6. Layout >HorizontalArrangement > ha_Gatto
  7. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  8. User Interface > Label > la_Gatto
    1. Text=Alice
  9. User Interface > Button > bu_Help
    1. Text=Help
  10. User Interface > Label > la_Help
    1. Text=

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…



Pagina 302 – Numero 5 – Disposizione in tabella 3×2



Layout >TableArrangement > TableArrangement1

  1. Columns=2
  2. Rows=3

Disponi 6 pulsanti, associa immagini, suoni, blocchi corrispondenti…

Space Invaders

http://appinventor.mit.edu/explore/ai2/space-invaders


GUI


Componenti


  1.  Screen > Screen1
    1. Title=Space Invaders
  2. Drawing and Animation > Canvas > Canvas1
    1. BackgroundColor=Black
  3. Drawing and Animation > Ball > ba_Bullet
    1. PaintColor=Green
    2. Radius=8
  4. Drawing and Animation > ImageSprite > is_Rocket
    1. Picture=rocket.png
  5. Drawing and Animation > ImageSprite > is_Saucer
    1. Picture=saucer.png
  6. Layout > HorizontalArrangement > ha_Score
  7. User interface > Label > la_Score
    1. Text=Score:
  8. User interface > Label > la_ScoreValue
    1. Text=0
  9. User interface > Button > bu_Reset
    1. Text=Reset

Componenti non visibili


  1. Sensing > Clock > Clock1
    1. On, On, 3000

Blocchi


All’apertura si imposta il proiettile come invisibile

Il razzo si muove se trascinato

Alla fine del tocco del razzo parte il proiettile

Se il proiettile finisce sul fondo scompare

Se il proiettile colpisce il disco volante: scompare, aumenta il punteggio, il disco volante si sposta in posizione casuale

Il disco si sposta ogni 3 secondi

Il tasto Reset azzera il punteggio




Miglioramenti

  1. Esplosione
  2. Vibrazione, Suoni
  3. Movimento continuo del disco volante
  4. Finché il proiettile non raggiunge il fondo…

Get the Gold

http://appinventor.mit.edu/explore/ai2/get-gold


GUI


Componenti


  1. Screen > Screen1
    1. Title=Get the Gold
  2. Drawing and Animation > Canvas > Canvas1
  3. Drawing and Animation > ImageSprite > is_Pirate
    1. Picture=pirateship.jpeg
    2. Speed=10
  4. Drawing and Animation > ImageSprite > is_Gold1
    1. Picture=goldcoin.jpeg
  5. Drawing and Animation > ImageSprite > is_Gold2
    1. Picture=goldcoin.jpeg
  6. Drawing and Animation > ImageSprite > is_Gold3
    1. Picture=goldcoin.jpeg
  7. Drawing and Animation > ImageSprite > is_Gold4
    1. Picture=goldcoin.jpeg
  8. Drawing and Animation > ImageSprite > is_Gold5
    1. Picture=goldcoin.jpeg
  9. User interface > Button > bu_Reset
    1. Text=Reset

Componenti non visibili


  1. Sensing > Clock > Clock1
    1. On, On, 2000

Blocchi


Le 5 monete d’oro cambiano posizione ogni 2 secondi

Se la nave dei pirati colpisce una moneta la fa scomparire

Il giocatore indirizza i pirati verso le monete con un tocco veloce

La nave dei pirati rimbalza se tocca il bordo

Con il tasto Reset ritornano visibili le 5 monete

Mole Mash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Mole Mash 1
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=Fill parent
  3. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  4. User Interface > Button > bu_Reset
    1. Text=Reset
  5. Layout > HorizontalArrangement > ha_Hits
    1. Layout > Label > la_Hits
      1. Text=Hits:
    2. Layout > Label > la_HitsCount
      1. Text=0
  6. Layout > HorizontalArrangement > ha_Misses
    1. Layout > Label > la_Misses
      1. Text=Misses:
    2. Layout > Label > la_MissesCount
      1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


La talpa occupa una posizione casuale

… appena parte l’applicazione

… e ogni secondo

Ogni volta che si tocca lo schermo (Canvas) ed è stato toccato uno sprite (c’è solo quello della talpa…) si incrementa il contatore di successi, altrimenti quello dei fallimenti

Per ricominciare il gioco basta reimpostare i contatori a zero

Per rendere il gioco più interattivo si aggiunge la vibrazione




Il gioco è più realistico con 5 buche in posizioni fisse e la talpa che si sposta da una buca all’altra


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=Mole Mash 2
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=300
  3. Drawing and Animation > ImageSprite > is_Hole1
  4. Drawing and Animation > ImageSprite > is_Hole2
  5. Drawing and Animation > ImageSprite > is_Hole3
  6. Drawing and Animation > ImageSprite > is_Hole4
  7. Drawing and Animation > ImageSprite > is_Hole5
  8. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  9. Layout > HorizontalArrangement > ha_Score
  10. Layout > Label > la_Score
    1. Text=Score:
  11. Layout > Label > la_ScoreValue
    1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


Le 5 buche sono inserite in una lista e condividono la stessa immagine

Ogni secondo la talpa cambia buca

La talpa occupa una buca scelta a caso dalla lista

Quando si colpisce la talpa: incremento del punteggio, vibrazione, nuova posizione




Proposte

  1. tasto Reset
  2. contatore dei colpi a vuoto
  3. suoni

President’s Quiz


GUI



Componenti


  1. Screen > Screen1
    1. Title=President’s Quiz
  2. User Interface > Image > im_Question
  3. User Interface > Label > la_Question
    1. Text=Question…
  4. Layout > HorizontalArrangement > ha_Answer
  5. User Interface > TextBox > tb_Answer
    1. Text=Enter an Answer…
  6. User Interface > Button > bu_Answer
    1. Text=Submit
  7. User Interface > Label > la_RW
    1. Text=Right / Wrong
  8. User Interface > Button > bu_Next
    1. Text=Next

Componenti non visibili



Blocchi


Ogni quiz è costituito da un’immagine, una domanda e una risposta

Variabili per il numero di domande e per la domanda in corso

La app parte impostando le variabili e chiamando la procedura per visualizzare la prima domanda

Osserva

  1. aggiorna l’indice alla prossima domanda (se le domande finiscono si ricomincia dalla prima)
  2. imposta immagine e testo della domanda
  3. svuota testo e commento per la risposta

Quando l’utente invia la risposta ottiene il commento


Miglioramenti

  1. Aggiungere nuovi quiz
  2. Per i testi: grassetto, corsivo, font, dimensioni, colori, …
  3. Aggiungere 1/2 audio alla risposta
  4. Utilizzare file video o audio invece di foto



Il confronto tra la risposta dell’utente e quella considerata esatta è troppo rigido: “Carter” = “carter” = “CARTER” = … ?
Trasformando le stringhe in maiuscolo (minuscolo) si evita l’errore.
(Compare index invece di currentQuestionIndex)

Controllare se la parola esatta appare come sottostringa?




Trasformare in quiz a risposta multipla (con scelta in una lista di risposte)


GUI


Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. BackgroundColor=Light Gray
    3. Title=US Presidents 2
  2. User Interface > Image > im_Question
    1. Height=200
    2. Picture=roosChurch.gif
    3. Width=Fill parent
  3. User Interface > Label > la_Question
    1. Text=Question…
  4. Layout > HorizontalArrangement > ha_Answer
  5. User Interface > ListPicker > lp_Answer
    1. Text=Choose Answer
  6. User Interface > Button > bu_Next
    1. Text=Next
  7. User Interface > Label > la_RW
    1. Text=Correct?

Componenti non visibili



Blocchi


Una lista con le risposte possibili in ordine alfabetico

Le risposte vengono caricate nella lista di scelta (ListPicker > lp_Answer)

Dopo che è stata fatta la scelta si controlla se la risposta è esatta




Trasformare in quiz a risposta multipla con scelte multiple diverse per ogni domanda


Le risposte possibili sono organizzate in una lista di liste, per ogni domanda c’è la risposta esatta e altre 3/… sbagliate

Si carica l’elenco specifico di risposte piuttosto che quello generico precedente

Magic 8-Ball

http://appinventor.mit.edu/explore/ai2/magic-8-ball


GUI



Componenti


  1. Screen > Screen1
    1. Title=Magic 8-Ball 1
  2. User Interface > Button > Button1
    1. Image=image_8_ball.jpg
  3. User Interface > Label > Label1
    1. Text=Ask the Magic 8-Ball a question
  4. User Interface > Label > Label2
    1. Text=Touch the Magic 8-Ball to receive yor answer

Componenti non visibili


  1. Media > Player > Player1
    1. Source=Clinking_Teaspoon.mp3

Clinking_Teaspoon.mp3 / Cha_Ching.mp3


Blocchi


Crea una lista con 8 frasi fatte

Ogni volta che la palla viene toccata viene emesso un suono e appare una frase a caso




Per utilizzare la palla magica è sufficiente agitare il dispositivo (tramite AccelerometerSensor).
Button viene sostituito da Image.


GUI



Componenti


  1. Screen > Screen1
    1. Title=Magic 8-Ball 2
  2. Draw and Animation > Image > Image1
    1. Picture=image_8_ball.jpg
  3. User Interface > Label > Label1
    1. Text=Ask the Magic 8-Ball a question
  4. User Interface > Label > Label2
    1. Text=Touch the Magic 8-Ball to receive yor answer

Componenti non visibili


  1. Sensing > AccelerometerSensor > AccelerometerSensor1
  2. Media > Player > Player1
    1. Source=Clinking_Teaspoon.mp3

Blocchi


Sostituisce l’evento del pulsante




Miglioramenti

  1. Grassetto, corsivo, font, colori, …
  2. Animazione della palla (rotazione)
  3. Un numero per ogni frase
  4. TextToSpeech per pronunciare la frase

Android Mash

http://www.appinventor.org/content/ai2apps/simpleApps/androidMash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Android Mash 1
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1

Blocchi


La procedura moveRandom sposta l’immagine di Android sullo schermo in modo casuale

La procedura viene chiamata quando parte l’applicazione e ad ogni segnale del timer (1000 ms = 1 s)

Quando l’immagine viene colpita si ottiene una vibrazione (500 ms = 0.5 s)




Gestione del punteggio, fine del gioco, nuovo gioco


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. BackgroundColor=Black
    3. Title=Android Mash 2
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png
  4. Layout > HorizontalArrangement > HorizontalArrangement1
  5. User Interface > Label > Label_Score1
    1. Text=Score:
  6. User Interface > Label > Label_Score2
    1. Text=0
  7. User Interface > Button > Button_Reset
    1. Shape=rounded
    2. Text=New Game
    3. TextColor=Blue

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1
  3. Media > TextToSpeech > TextToSpeech1

Blocchi


Con il pulsante New Game si fa ripartire il gioco: punteggio a zero e timer attivato

Quando viene colpito il robot: vibrazione, il punteggio aumenta di 1, se il punteggio è arrivato a 5 si ferma il timer (e il robot…) e si sente un messaggio di vittoria

PaintPot


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 1
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. User Interface > Button > Button_Wipe
    1. Text=Wipe

Componenti non visibili



Blocchi


Cambiare il colore di Canvas

Touch: toccando la figura si disegna un cerchio di raggio 5, del colore precedentemente selezionato

Drag: trascinando il dito sulla figura si ottiene una striscia colorata

Wipe: pulisce tutti i disegni




Cambiare la dimensione dei cerchi colorati


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 2
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Wipe
    1. Text=Wipe
  9. User Interface > Button > Button_Big
    1. Text=Big Dots
  10. User Interface > Button > Button_Small
    1. Text=Small Dots

Componenti non visibili



Blocchi


Tramite i 2 pulsanti Big… e Small… si imposta la variabile dotSize, il raggio dei cerchi.
Le dimensioni sono fissate tramite 2 variabili (costanti) globali.





Nel disegno del cerchio il raggio dipende dalla variabile globale dotSize




Cambiare l’immagine da truccare


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=PaintPot
  2. Layout > HorizontalArrangement > HorizontalArrangement1
  3. User Interface > Button > Button_Red
    1. Text=Red
  4. User Interface > Button > Button_Green
    1. Text=Green
  5. User Interface > Button > Button_Bue
    1. Text=Blue
    2. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. PaintColor=Red
    4. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Take
    1. Text=Take Picture
  9. User Interface > Button > Button_Wipe
    1. Text=Wipe
  10. User Interface > Button > Button_Big
    1. Text=Big Dots
  11. User Interface > Button > Button_Big
    1. Text=Small Dots

Componenti non visibili


  1. Media > Camera > Camera1

Blocchi


Tramite il pulsante Take Picture si aziona la fotocamera

La foto appena scattata diventa lo sfondo di Canvas




Proposte


  1. La dimensione dei cerchi e il loro colore non sono visibile finché non si disegna qualcosa: aggiungi la visualizzazione delle variabili
  2. La dimensione dei cerchi è fissata a 2 valori: aggiungi uno cursore per modificarla in modo continuo