Cerca con Google

Translate

28 agosto 2015

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).

La documentazione ufficiale la si può trovare a questo link http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html
Nel mio articolo vi spiegherò le stesse cose con anche un paio di esempi pratici.

Per prima cosa spieghiamo come è stato implementato il Responsive Design in App Inventor; a differenza della programmazione Android "classica" dove si caricano varie immagini (asset) per le varie risoluzioni schermo (bassa, media, alta risoluzione, etc...) in AI hanno deciso di seguire una strada più semplice, dove lo stesso asset viene scalato "al meglio" utilizzando sempre lo stesso file (quindi meglio caricare un file dalla risoluzione maggiore d'ora in avanti). Questo approccio è più limitato ma si è reso necessario per non complicare troppo AI.

Le misure vanno ora specificate in percentuale:
Per realizzare app in responsive design le dimensioni dei componenti (width e height) vanno ora specificate in percentuale della dimensione dello schermo piuttosto che in un numero fisso di pixel.

Per esempio per fare un pulsante con larghezza metà dello schermo, impostate la sua "width" a 50% invece che ad un numero specifico di pixel.

Nel design editor vedrete ora la nuova opzione:


La "percentuale" è da intendersi SEMPRE come percentuale delle misure di larghezza e altezza relative allo schermo, non come percentuale del componente che lo contiene.
Quindi ad esempio un pulsante all'interno di un horizontal arrangement con specificata una larghezza di 50% prenderà il 50% della larghezza dello schermo, non della misura dell'horizontal arrangement che lo contiene.

Potete ovviamente continuare a specificare le misure anche come "fill parent" o "automatic" come si è sempre fatto.

Screen1 sizing "Fixed" vs "Responsive"


Come vedete una delle nuove proprietà in Screen1 è "Sizing" che può essere impostato a "Fixed" o "Responsive".

Molti sviluppatori non vorranno cambiare il metodo di creazione delle loro app, per fare questo basta impostare la proprietà a "Fixed" e tutto funzionerà come prima.

Quando il modo è impostato su "Fixed", App Inventor lavora con uno screen size fisso di 320 x 460 pixel, ogni immagine e elemento verrà scalato su schermi più grandi con quindi un effetto di minor risoluzione e sgranatura più evidente delle immagini (questo è il modo in cui funzionava AI in tutte le versioni precedenti alla nb145).

Ovviamente è suggerito l'utilizzo della nuova modalità "Responsive", tenendo presente quanto detto sopra per la definizione delle misure nella vostra app, usate sempre i valori in percentuale.

Un'importante differenza viene fatta nella gestione dei "Canvas" e tutto quello che è contenuto al loro interno "sprites" "ball" etc...vedremo questa limitazione più avanti...

Esempio dettagliato

Supponiamo di avere un app con un pulsante, vogliamo che il pulsante prenda il 50% dello spazio orizzontale del vostro schermo.

La risoluzione del vostro schermo è 320x460, imposto la larghezza del pulsante a 160 pixel e il modo sizing a "fixed".
Se da blocks editor leggo il valore della larghezza del pulsante, avrò il valore 160. Se leggo il valore della larghezza dello schermo avrò il valore 320.

Se ora installo l'app su un tablet con risoluzione 600x860, sempre con metodo "fixed" e chiedo ad AI le dimensioni del pulsante e dello schermo, mi ritornerà sempre i valori 160 e 320, anche un eventuale immagine verrà espansa per riempire tutto lo schermo.
AI gestisce il tablet come se avesse ancora risoluzione di 320x460 quindi non sfruttando appieno la risoluzione più elevata del tablet, quindi la resa sarà peggiore con font e immagini "sgranate" e magari font troppo grandi rispetto a quelli che volevate e che avete testato sul vostro smartphone.

Ora se invece avessimo impostato sizing a "Responsive", nel nostro telefono con risoluzione 320x460 non cambierebbe nulla ma le cose sarebbero ben diverse sul tablet...
Perchè ora avremmo infatti una dimensione di 300 pixel per il pulsante e una larghezza di 600 pixel per lo schermo del tablet.
Quindi App Inventor può sfruttare la risoluzione migliore, applicare font nativi con la risoluzione corretta ed in definitiva avremo una grafica più definita e migliore nella nostra app.

Come raccomandazione si consiglia di usare "Responsive" per le vostre nuove app, e "Fixed" per le vecchie app che non volete cambiare, oppure per app che siete sicuri gireranno solo su un device con risoluzione specifica.

Personalmente testando alcune app sul mio OnePlusOne ho subito visto un deciso miglioramento dell'aspetto dell'app usando "Responsive", i font sono più dettagliati e le immagini molto più nitide.
Qui sotto le due modalità a confronto con la stessa app in esecuzione, io noto un notevole miglioramento sui testi, sull'immagine si nota meno (ma vi garantisco che sul mio cellulare la differenza è abbastanza evidente)
A sinistra la versione Responsive a destra la versione Fixed

Limitazioni: palette Drawing and animation
Il supporto al responsive design per ora è incompleto e limitato. Questo è evidente nella palette drawing, con i canvas ed usando gli sprite per le animazioni. Le app usano valori come coordinate in pixel per disegnare i componenti e controllarne i movimenti e le animazioni. Risulta quindi complicato gestire questa cosa con misure diverse degli schermi.
Per ora il team raccomanda queste soluzioni:
1. Usare il metodo "Fixed" per questo tipo di app (principalmente videogiochi)
2. Usare il metodo "Responsive" ma impostare la misura del "Canvas" ad un valore fisso di pixel. In poche parole tutta la vostra app sarà responsive, ma il canvas (e gli oggetti in esso) avranno misure fisse in pixel. Purtroppo in questo modo le grafiche potrebbero risultare sgranate su alcuni dispositivi.
3. Usare il metodo "Responsive" ed impostare il canvas ad una percentuale appropriata della misura dello schermo.
Poi nel canvas fare dei calcoli matematici per computare le distanze delle coordinate relative al valore attuale della dimensione del canvas.
In questo modo avremo i risultati migliori, ma potrebbe essere molto complicato gestire la cosa se abbiamo tanti componenti e tante animazioni...

Per esempio se abbiamo un canvas la cui larghezza è la larghezza dello schermo e vogliamo mettere una oggetto "ball" (una palla) in mezzo al canvas, col metodo fixed posizioneremo la coordinata x dell'oggetto ball a 160 pixel (perchè AI lavora sempre a 320x460 pixel in questo caso).
Ma se usiamo il metodo responsive dovremo calcolare la posizione X quando l'app viene eseguita, ad esempio con un blocco di questo tipo:

In modo che se lo schermo avrà larghezza di 600 pixel, l'oggetto verrà correttamente posizionato alla posizione x = 300 pixel.
Capite che l'approccio è corretto ma è molto laborioso quando avete tanti oggetti da gestire.
Suggerisco di leggere in Screen1.Initialize la misura dello schermo e memorizzare in una variabile il rapporto tra questo e la dimensione di "default" in modo da eseguire facilmente il ridimensionamento per i vari oggetti usando sempre questa variabile.

Responsive design e Google Play
Come sapete potete caricare le vostre app su Google Play, il market filtra in automatico le app realizzate per telefoni e/o tablet e mostra solo quelle compatibili col device in uso.

Le app realizzate con App Inventor sono considerate compatibili in entrambi i casi e sono quindi installabili su tutti i device.
Però se la scaricate da un tablet potrete vedere l'avviso "app sviluppata per telefono". Questo non vi impedisce di far girare l'app su un tablet ma è un avviso che l'app non rispetta al 100% i dettami di Google per lo sviluppo di app responsive (come detto all'inizio dell'articolo considerato l'approccio preso dal team di AI),


Fatemi sapere cosa ne pensate nei commenti qui sotto, sperimentate e confrontiamoci.
Sono comunque molto contento del fatto che il team del MIT App Inventor abbia finalmente deciso di prendere in considerazione il supporto alle diverse risoluzioni ed alle diverse misure degli schermi degli attuali dispositivi Android.

Buon app inventing!!!





14 commenti:

  1. Grazie per la tempestiva spiegazione a riguardo ma ho notato anche alcune nuove voci del tasto contestuale mouse destro tipo "esternal input" e viceversa nei set text. Puoi darci informazioni anche su questo.
    Grazie.

    RispondiElimina
    Risposte
    1. C'è la novità dei moduli esterni, ma mi risulta non sia ancora attiva sul server principale. Ti riferisci a questo?
      Ad ogni modo appena la funzionalità sarà un pò più matura non tarderò di spiegarla come si deve.
      Grazie per la segnalazione, continua a seguirmi.

      Elimina
  2. Ciao Sebastiano eccellente lavoro come sempre !
    Io però con questa ultima versione ho riscontrato problemi con chi utilizza android 5.0 e superiore. Mi segnalano che riescono ad installare l'app ma poi appena cliccano per accedere appare un msg che dice: "il programma ....è stato arrestato", Questo accade solo con android 5.0 e superiore. Quando l'app inizializza ho un controllo del clock che se in una determinata fascia oraria fa partire un msg scritto e vocale con alcune indicazioni. Visti gli errori nella versione nb144 pensavo fosse questo. Qualcuno ti ha segnalato gli stessi problemi di arresto con android 5.0 ?
    grazie e buon lavoro

    RispondiElimina
  3. Ciao Seba io volevo segnalare che sulla mia app quando premo un canvas utilizzato come touch down per aprire un'altro screen le textbox dello screen aperto impostate a fill parent si restringono a metà schermo non capisco il perchè, sto impazzendo. Non so se sia dovuto alle novità di AI. Da premettere che sino a poco tempo fà ciò non accadeva

    RispondiElimina
    Risposte
    1. Prova a compilare la tua app mettendo il flag su "fixed" e vedi cosa succede, è probabile che ci siano dei problemini visto che questa feature è ancora molto nuova...

      Elimina
    2. ciao ragazzi ,
      anche io ho qualche problema con il Responsive Design.
      praticamente la mia app funziona senza problemi sul tutti smartfone ma non posso impostare la modalita responsive per visualizare bene sul tablet. io uso appinventor 2 e non trovo il blocco CANVAS.
      QUALCUNO MI PUO AIUTARE PER FAVORE

      Elimina
    3. Il blocco Canvas è in "Drawing and Animation" ma come spiegato nell'articolo, questo componente ancora non supporta il responsive design, bisogna quindi ancora specificare le misure del canvas in pixel o con fill parent.

      Elimina
  4. Salve Sebastiano
    I complimenti (per il suo lavoro in generale) sono d'obbligo! :)
    Volevo chiederle se per caso ha visto i messaggi che le ho scritto su Facebook.
    Grazie e saluti
    Enzo

    RispondiElimina
  5. ciao sebastiano, ti faccio i complimenti per le tue guide e i tuoi lavori che mi hanno aiutato molto a capire il funzionamento di app inventor, volevo farti una domanda, magari puoi aiutarmi o darmi qualche dritta, io dovrei mettere un blocco ad una app realizzata da me con app inventor. Mi spiego meglio: la mia app è un app privata aziendale che gestisce i turni di lavoro dei vari agenti, io per il tempo perso e per il tempo che perdo ogni volta per aggiornarla (spesso) vorrei venderla per una cifra irrisoria,
    il mio problema è fare in modo che non possono passarsela uno con l'altro. facendo backup oppure usando la stessa password d'accesso. nel 2012 utilizzai fusion tables facendo un database con tutte le password di ognuno e nella app un sistema che usando la propria password temporanea sbloccavano l'app e automaticamente l'app stessa cambiava la password nel database online di fusion tables. questo sembrava funzionare a dovere, ma ha funzionato per nemmeno un mese dopodichè ha cessato di funzionare come se qualcosa in app inventor relativo al codice di fusion tables fosse cambiato. gentilmente mi sai dire cosa puo essere cambiato o se c'è un modo per mettere un blocco sicuro all applicazione in modo che non puo essere copiata o sbloccata da altri? ti ringrazio anticipatamente e scusami per il disturbo

    RispondiElimina
  6. Ciao Sebastiano, complimenti per il tuo lavoro i tuoi tutorial sono veramente utili. Volevo porti una domanda, ho creato un'app semplice e carina per una radio di mio zio, ora sui cellulari funziona benissimo, sul tablet quando la eseguo si arresta ed alcune volte si apre e comunque non funziona(nessuno oggetto sembra cliccabile), io ho usato il metodo fixed e Canvas in pixel, può dipendere da questo? inoltre sulla console di Google nei suggerimenti trovo i seguenti suggerimenti:
    Progetta la tua app per i tablet
    Nascondi dettagli
    Il tuo APK di produzione deve soddisfare i seguenti criteri:
    Le versioni Android minima e target devono supportare i tablet (controlla targetSdkVersion e minSdkVersion). Leggi ulteriori informazioni
    Il tuo APK dovrebbe richiedere solo le funzionalità hardware solitamente disponibili sui tablet. Leggi ulteriori informazioni
    L'APK dovrebbe supportare dimensioni di schermo comuni dei tablet (LARGE e XLARGE). Leggi ulteriori informazioni
    L'APK dovrebbe includere risorse drawable personalizzate per densità di schermo comuni dei tablet. Leggi ulteriori informazioni
    Carica screenshot dei tablet:
    Carica almeno uno screenshot per i tablet da 7 e 10 pollici nella scheda dello store. Leggi ulteriori informazioni.

    Puoi darmi qualche consiglio? Grazie ancora.
    Domenico

    RispondiElimina
    Risposte
    1. Ciao Domenico, purtroppo quei messaggi usciranno sempre finchè non aggiornano App Inventor affinchè utilizzi degli SDK più recenti, e non c'è modo di risolvere la cosa.
      Si stanno muovendo lentamente col supporto tablet anche in AI ma chissà se e quando si muoverà davvero qualcosa.
      Prova invece di usare il metodo "fixed" di usare "responsive" e definire tutte le dimensioni dei tuoi oggetti in percentuale, in questo modo dovrebbe andare un pò meglio su schermi grandi.
      Però ripeto, purtroppo a mio avviso App Inventor non è ancora il tool ideale per lo sviluppo anche su tablet...

      Elimina
  7. Ciao Sebastiano, sai come posso risolvere il problema che inserendo un orario ad esempio 09:09 oppure 22:00 o 06:00 dentro la label viene riportato in questo modo: 9:9 oppure 22:0 o 6:0. Grazie

    RispondiElimina
  8. Ciao sto seguendo i tuoi corsi per poterli poi affrontare con i ragazzi a scuola mi chiedevo se in privato realizzi app con appinventor ovviamente e che tipo di preventivi potresti fare grazie

    RispondiElimina