MIT App Inventor - MultiTouch e Pinch to Zoom

Continuiamo a parlare di MIT App Inventor e delle nuova funzionalità "Extension".

MIT App Inventor può essere utilizzato per realizzare app Android in modo facile e divertente.

Come introdotto nel post precedente (MIT App Inventor extensions) sono da poco disponibili dei componenti aggiuntivi per App Inventor chiamati appunto extensions.

Ogni estensione ha un compito ben preciso e può essere aggiunta ai propri progetti caricando il relativo file .aix, con questo approccio modulare App Inventor diventa ancora più potente restando al tempo stesso semplice ed immediato per chi si avvicina per la prima volta alla programmazione di Android App.

Nuova versione di MIT App Inventor 2 (nb145) finalmente il Responsive Design

Vediamo in questo articolo la novità principale di MIT App Inventor 2 versione nb145.

Il tool semplice e gratuito per la realizzazione di android app web based.

E' stato introdotto il Responsive Design , finalmente sono stati fatti i primi passi per permettere alle app realizzate con App Inventor di adattarsi alla dimensione dei vari dispositivi (soprattutto smartphone e tablet).

Nuova versione di MIT App Inventor 2 (nb140)

Primo post del 2015 e primo aggiornamento per MIT App Inventor 2, il tool gratuito semplice e web based per la creazione di app Android.

Vediamo subito il changelog con le novità introdotte dalla versione

nb140 - 11 Febbraio 2015

Bisogna aggiornare il companion alla versione 2.24 (dovreste aver ricevuto l'aggiornamento tramite Play Store)

• Aggiunta la proprietà "IgnoreSslError" al componente Web. Questo vi permette di interrogare contenuti protetti in SSL che hanno un certificato valido e/o scaduto. Attenzione, questo potrebbe introdurre problematiche di sicurezza visto che anche i certificati invalidi vengono accettati.
• Aggiunto blocco "Obfuscated Text" (palette text). Con questo componente potete "offuscare" una stringa in modo che sia difficile decodificarla scompattando ed analizzando il file apk, può tornare utile se ci sono info sensibili da nascondere nelle vostre app (come una API key o altre info che devono essere secretate). Attenzione che il testo potrà comunque essere decodificato da un utente molto esperto.

Tutorial 5 - App Android disegno a mano libera

Proseguiamo la serie di tutorial introduttivi su MIT App Inventor 2 per la creazione di applicazioni Android.

Il tutorial di oggi vi permetterà di realizzare un applicazione per il disegno a mano libera che chiameremo "Scarabocchio Digitale" (digital doodle in inglese).

Questo tutorial è molto semplice e vi servirà per familiarizzare con il componente Canvas di App Inventor.

Tutta la nostra app avrà quindi un solo elemento, il Canvas appunto, vediamo nel dettaglio la realizzazione di questa app...

Tutorial 4 - Creazione di un gioco Android con MIT App Inventor (lancia la pallina)

Se ve lo stavate chiedendo, ebbene si, con App Inventor si possono creare anche dei giochi per Android!

Ovviamente ci vuole tanta pazienza e tanta bravura per creare qualcosa di accattivante, voglio comunque iniziare a mostrarvi nel tutorial di oggi alcuni componenti utili nella realizzazione di alcuni semplici giochi.

Partiremo con un gioco molto semplice, su un tavolo da biliardo avremo una pallina che potrà essere lanciata con il nostro dito tramite uno "swipe". (in 10 minuti di tutorial non si possono fare miracoli...)

Tutorial 60 - Ridimensionamento componenti in App Inventor per adattarsi a tutte le risoluzioni schermo (smartphone e tablet)

In questo tutorial affrontiamo una possibile ottimizzazione da applicare alle nostre app create con MIT App Inventor per far si che vengano visualizzate nella miglior maniera possibile su tutti i dispositivi Android.

Come ben sapete Android è una piattaforma diffusa su una miriade di dispositivi, ed a differenza di Iphone o Windows Phone (dove esistono solo un paio di risoluzioni per tutti i dispositivi), la risoluzione e la dimensione dello schermo può variare di molto da device a device.

Nuova versione App Inventor (v129 - 11-09-2012)

Dopo essere tornati tutti dalle vacanze, il team del MIT ci fa una bella sorpresa rilasciando una nuova versione di App Inventor,
per la precisione la nuova build è la :

Built: September 11 2012 Version: v129

Vediamone insieme tutte le novità:

• Supporto per il ridimensionamento ed il full screen nei video.
  E' ora possibile riscalare il componente "Video Player" da blocks editor, dalle versioni Android 2 e successive potete impostare il Video Player in full screen, il tasto back del telefono riporterà il componente alla sua dimensione originale
• Gli "Horizontal e Vertical Arrangements" possono ora allineare il loro contenuto!
  Anche lo Screen ha questa proprietà, si può scegliere di allineare a Sinistra, Destra, Centro, Alto o Basso il contenuto degli Arrangements.
  Questo settaggio non ha nessun effetto se il size dell'arrangement è impostato su "automatic", e l'impostazione di allineamento verticale non ha effetto se lo "screen" è impostato su "scrollable"
• Migliorie per "Canvas" e "Sprite". Creati nuovi eventi "Flung" , "TouchUp" e "TouchDown".
  Quando l'utente tocca uno sprite e fa uno "swipe" in una direzione, l'evento "Flung" viene generato con le informazioni sulla direzione e la velocità dello swipe stesso. Questo evento può essere utilizzato per determinare la direzione e la velocità a cui muovere lo Sprite. Anche il Canvas può creare un evento "Flung" così l'utente può leggere questo evento e programmare le azioni da fare di conseguenza
  In ultimo quando un utente poggia il dito su uno sprite l'evento "TouchDown" è generato, quando solleva il dito l'evento "TouchUp" è generato, questi nuovi eventi sono in più rispetto all'esistente "Touched" che rimane sempre valido.
• Aggiunte nuove impostazioni per la screen orientation
  User (lascia l'utente scegliere l'orientamento)
  Sensor (ruota automaticamente quando il telefono ruota)
• Bug fix vari

Se volete qui trovate le release note dal sito ufficiale (release notes in inglese)

Ora al solito i miei commenti:

1) Full screen nei video, potrebbe essere interessante ma reputo AI poco adatto alla gestione dei video e non ci ho mai lavorato tanto, ma magari a qualcuno può interessare

2) Allineamenti!!!!! Finalmente possiamo allineare i nostri button, textbox, label, etc... con molta facilità!

questa era una cosa che aspettavamo da tempo, per centrare il famoso pulsante in centro allo schermo non dovremmo più impazzire con delle finte label vuote ma usare direttamente queste nuove properties,

Guardate questo esempio per capire meglio, ho allineato due pulsanti orizontalmente in centro allo schermo, basta mettere un horizontal arrangement con dimensione "fill parent" e poi scegliere l'alignhorizontal "center" e il gioco è fatto!

sarà così finalmente possibile creare interfacce ancora più curate con semplicità! era ora!!! :)

3) Evento "Flung"

molto interessante, in pratica mi sembra di capire che possiamo ora realizzare qualcosa del tipo swipe a destra o sinistra, non ho ancora provato a vedere bene come funziona, mi spaventa un pò il fatto che funzioni solo sui Canvas e sugli Sprite, sarebbe bello averlo anche ad esempio negli "Arrangement" così nell'esempio dell'allineamento di qua sopra si potrebbero programmare le azioni per passare da una schermata all'altra usando lo swipe (oltre che eventualmente premendo i pulsanti)

Proverò a sperimentare un pò sperando di capire un pò meglio il tutto e di trovarne un applicazione pratica

Che dire, il team MIT sembra sempre al lavoro ed ogni mese circa abbiamo qualche piccola ma utile funzione in più!

E voi, che ne pensate? venite nel forum per dire la vostra! :)

Tutorial 31 - Applicazione con schermate multiple (semplice)

Continuiamo oggi il discorso delle applicazioni MultiScreen andando a vedere un altro esempio che utilizza la nuova opzione "Add Screen" di App Inventor.

Nel precedente tutorial (Tutorial 29 - Applicazioni MultiScreen nuovo metodo) avevamo visto una certa complessità d'implementazione dove ad esempio uno screen passa delle informazioni all'altro per comunicare i settaggi di un applicazione.

Tutorial 29 - Applicazioni MultiScreen (nuovo metodo) MIT App Inventor

Rieccoci con un nuovo VideoTutorial, come accennato precedentemente, la prima novità offerta da quando App Inventor è passato nelle mani del MIT è quella di realizzare applicazioni "realmente" MultiScreen.

Troviamo infatti ora due nuovi pulsanti sulla barra del design editor, "Add Screen" e "Remove Screen" che ci permettono in pratica di creare delle vere e proprie "sottoapplicazioni" all'interno della nostra app principale.

Tutorial 24 - I componenti OrientationSensor e Ball (ImageSprite) per la creazione di un semplice gioco

Nel tutorial di oggi vedremo come realizzare un semplicissimo gioco del biliardo (o meglio di una palla che deve esser fatta rotolare in una delle buche...).

Ovviamente questo esempio ci serve soltanto per dimostrare ancora una volta la versatilità di App Inventor e con quale facilità sia possibile accedere ai vari sensori presenti sul nostro telefono Android. In questo caso all'accelerometro ed alla bussola.

Tutorial 16 - Utilizzare l'elemento ImageSprite al posto dell'elemento Button

Come abbiamo visto nel Tutorial 15 possiamo usare un immagine come sfondo per i nostri pulsanti in App Inventor.
Il risultato sarà sicuramente soddisfacente ma, sfortunatamente, in alcune situazioni potrà capitare che l'allineamento dei nostri pulsanti risulti molto difficoltoso (se non a volte impossibile).

Ecco allora che si può utilizzare un altro trucchetto per simulare un pulsante (Button), il componente da utilizzare si trova nella palette Animation ed è chiamato ImageSprite.

ImageSprite va utilizzato solamente all'interno di un Canvas (elemento che abbiamo visto nel Tutorial di PaintPot), ed è per questo che suggerisco di utilizzare questo accorgimento per applicazioni dove l'aspetto grafico è di fondamentale importanza.

Tutorial 12 - Funzione Canvas Save e Canvas SaveAs

Un'altra delle nuove funzionalità offerte con i recenti update di App Inventor è la possibilità di salvare i canvas utilizzati nelle nostre app sulla memoria del telefono.

Ricorderete infatti il tutorial Paint Pot (che vi invito ad andare a rileggere se non lo avete ancora fatto), con questa semplice app potevamo disegnare tramite touchscreen sullo schermo del cellulare ed andare a modificare così la nostra foto (una sorta di photoshop molto molto basilare ;) )
Putroppo alla chiusura dell'applicazione tutte le modifiche andavano perse perchè il Canvas, ovvero l'elemento su cui si può disegnare in App Inventor, non permetteva il salvataggio delle modifiche effettuate al Canvas stesso.

Nuova applicazione App Inventor - Ristorante La Conchiglia

Probabilmente scrivendo un blog capita anche questo...
Ovvero di essere contattati da gente che, incuriosita da quel che stavo facendo, chiede una mano per la realizzazione di un applicazione per il proprio ristorante! :)
Eh si, infatti circa un mese fa l'amico Alessandro mi richiede alcune informazioni via email a proposito della mia applicazione Acqua Alta App e chiede se fossi disposto a dedicargli del tempo e dargli una mano per la realizzazione di un progetto che aveva in mente da un pò.

Tutorial 9 (Parte 2) - Modifichiamo l'applicazione PaintPot - Le Variabili in App Inventor

Nel tutorial di oggi andremo ad ampliare le funzionalità della semplice applicazione PaintPot ma sopratutto andremo ad introdurre quelli che sono i concetti di variabili in App Inventor.
Come in tutti i linguaggi di programmazione le variabili sono essenziali per la realizzazione dei programmi, App Inventor le gestisce in maniera semplificata e non è molto rigoroso nella loro definizione (ovvero non le dobbiamo definire prima come integer, string, etc... ma si adatta "automaticamente" in base all'assegnazione che facciamo nel Blocks Editor)

Tutorial 9 - Realizziamo l'applicazione PaintPot (parte 1)

Eccoci alla guida di oggi, la creazione dell'applicazione Paint Pot con App Inventor.
La realizzazione di questa applicazione è spiegata passo passo nei tutorial "base" che trovate nella home page ufficiale di App Inventor.
Due sono le motivazioni che mi hanno spinto a creare una video guida a riguardo:

1. Tutti i tutorial alla pagina di App Inventor sono in lingua inglese
2. i tutorial alla pagina di App Inventor introducono passo passo alle varie caratteristiche e potenzialità di questo linguaggio di programmazione.