1 / 34

appinventor

appinventor. realizzazione app per Google Android OS. drag & drop visual programming. appinventor è un’applicazione “drag & drop visual programming ”

liz
Télécharger la présentation

appinventor

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. appinventor realizzazione app per Google Android OS

  2. drag & dropvisualprogramming • appinventor è un’applicazione “drag & dropvisualprogramming” • Contrariamente ai linguaggi tradizionali (text-basedprogramminglanguages) è basato su componenti visuali come blocchi e icone che sono utilizzate dall’utente-programmatore mediante operazioni di drag-and-drop

  3. un esempio di drag & dropprogramming: Scratch • Scratch è un linguaggio di programmazione che rende semplice creare storie interattive, animazioni, giochi, musica e arte e condividere le tue creazioni sul web. • Quando i ragazzi creano e condividono i loro progetti Scratch, imparano importanti idee matematiche e computazionali e allo stesso tempo imparano a pensare creativamente, a ragionare con sistematicità e a lavorare in collaborazione. • http://scratch.mit.edu/

  4. appinventor • È un semplice ambiente di sviluppo basato su piattaforma Java • AppInventor faceva parte di Google Labs, luogo virtuale ove gli ingegneri di Google sviluppano le nuove applicazioni sperimentali, ma il 10 agosto 2011 Google ha comunicato che App Inventor sarebbe stato chiuso, cosa che è avvenuta il 31 dicembre 2011. • Il sistema è stato preso in carico dal MIT Center for Mobile Learning che ora lo supporta con il nome "App Inventor Edu”

  5. storia • Presentato da Google nel dicembre 2010 • Utilizza la Open Blockslibrary di Java del MIT • Simile a Scratch (altro lavoro del MIT) • Ospitato dai server MIT nel gennaio 2012

  6. la struttura di appinventor • Appinventor Designer • permette di “disegnare” l’interfaccia grafica e scegliere i componenti dell’applicazione • è una web application ospitata su un server del MIT • tutti i dati risiedono sul server (cloudcomputing) • E’ possibile installare in locale un server contenente la web application • AppinventorBlocks Editor • permette di associare le azioni agli eventi • è una Java Web Start Application che opera sul client • Emulatore per testare l’applicazione senza la necessità di un dispositivo android

  7. la struttura di appinventor

  8. designer sceltadeicomponenti da trascinaresullo screen proprietà del componenteselezionato screen (interfacciadell’applicazione) Listadeicomponenti

  9. caricamento del blocks editor • “Open the Blocks Editor” per passare dal Designer al Blocks Editor • Esegue il download del file che contiene la Java Web Start application che deve essere eseguita sul client

  10. blocks editor

  11. blocks editor (Java Web Start) • Java Web Start (JavaWS, javaws o JAWS) è un framework sviluppato da SunMicrosystems (ora Oracle), che permette agli utenti di scaricare ed avviare applicazioni software per Java Platform direttamente da Internet utilizzando un browser web. • Il software Java Web Start: • Permette una facile attivazione delle applicazioni mediante un clic • Garantisce che venga sempre eseguita l'ultima versione dell'applicazione • Elimina le complicate procedure d'installazione e di aggiornamento

  12. “programmazione” • Nel Blocks Editor si compongono i blocchi che associano agli eventi associati ai componenti le azioni da compiere

  13. test dell’applicazione • è possibile testare l’applicazione mediante un emulatore android

  14. … o collegare direttamente il device

  15. Variable Declaration • App Inventor: Declare Variables using the “Define Variable As” Block • Find the Blocks Editor (top-left), click the Definition button, then pull out the correct block.

  16. Variable Assignment • Assign a variable named “count” to 5 • In App Inventor, use “set global - to” block in the My Blocks Menu • Only available once defined your variable • Drag the “set global - to” block out • Create a number block by typing in “5” in the editor window • Click 5 into the “set global – to” block

  17. App Inventor Math using Variables • Combine the “Set-To” Block with operators from the “Built-In->Math” Menu Count = 9 Count = 5 Count = 14 Count = 3 Count = 1 (modulo gives the remainder of division)

  18. Variable Initialization

  19. You are forced to define a variables value when you declare it in App Inventor • A general place for program initialization is the “When Screen1.Initialize” block • Note: Most Text-Based languages use the “main()” function as the start of the program • For example, set count to 100 when the program starts:

  20. Implementing an Equation inApp Inventor • Area of a Rectangle = Length * Width • Step 1: What variables do we need? • Area, Length, and Width • Step 2: Declare them in App Inventor • Step 3: Use Math. Operators to Implement

  21. Output: The Label Component • Label • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

  22. Output: The Image Component • Image • Components used to • show a picture • Displays text specified • by the Picture property. • Useful Properties • Picture • Width • Visible • Height

  23. Output: The Texting Component • Texting • A non-visible component • to allow users to send and • receive text messages. • Useful Properties • Message • Phone Number • Receiving Enabled (Does this • also make the Texting component a • input?)

  24. Input: The Button Component • Button • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

  25. Input: The TextBox Component • TextBox • Components used to • show text. • Displays text specified • by the Text property. • Useful Properties • Text • Width • Visible • Background Color

  26. If-Blocks

  27. Nesting If and If-Else Blocks Often times, we want to check if a prior condition is true, before checking another condition. • Example: If x > 100, then check if y is < 100. If y < 100, then assign z to 1. If x <= 100, set z to 35.

  28. Implementation Step 1: Lamp Doesn’t Work • If-Block or If-Else Block? Why?

  29. Step 2: Lamp Plugged In?

  30. Step 3: Bulb Burned Out?

  31. Tips • E’ possibile copiare e incollare un insieme di blocchi • Ctrl C – Ctrl V • E’ possibile digitare un valore numerico o booleano e viene automaticamente creato il blocco • Con click destro su un blocco è possibile • associare un commento • disattivare il blocco • eseguire il blocco • controllare il valore di una variabile

More Related