Sviluppare una app universale per Windows 8.1 e Windows 10

Sin dal periodo antecedente la prima presentazione ufficiale di Windows 10, Microsoft ha presentato il concetto di universal apps o app universali.
Una universal app è un’applicazione in grado di funzionare allo stesso modo su qualunque dispositivo essa venga installata ed eseguita. Non c’è più bisogno di scrivere codice “ad hoc” per differenziare ed ottimizzare il comportamento delle app sui vari device.

Il concetto di universal apps è la naturale conseguenza di quella filosofia One Windows sulla quale Microsoft sta puntando da tempo. Con Windows 8 Microsoft ha commesso un errore: ha cioè di fatto obbligato gli utenti storici del suo sistema operativo ad imparare un nuovo modo di lavorare, soggiogandosi ad un’interfaccia totalmente nuova. Con Windows 8.1 prima e con Windows 10 poi, Microsoft ha radicalmente modificato questa filosofia. Non è più l’utente che deve adattarsi all’interfaccia ma è il sistema operativo e la sua interfaccia che si adegua al dispositivo.
Era impensabile obbligare gli utenti ad usare primariamente un’interfaccia a piastrelle se questi non disponevano di un sistema dotato di schermo multitouch ed utilizzavano il PC in primis per scopi produttivi (e non per la mera fruizione di contenuti prodotti da terzi).

Con l’evidente obiettivo di facilitare sin da subito lo sviluppo di app universali, Microsoft ha presentato nei giorni scorsi il nuovo App Studio.

Sviluppare app universali per Windows 8.1 e Windows 10

App Studio altro non è che un’applicazione web in grado di aiutare lo sviluppatore, anche quello alle prime armi, nella realizzazione di app per Windows 8.1 e Windows 10.

Creare un’app universale per Windows 10 od un’applicazione in stile Windows Store per Windows 8.1 è molto semplice con App Studio.
Questo strumento, infatti, offre una comodissima interfaccia punta e clicca che consente di creare semplici app per Windows 8.1 e Windows 10.
Con App Studio tutto si realizza senza mai mettere mano al codice di programmazione: basta scegliere un modello di app, personalizzarlo per ciò che riguarda la grafica (tema, colori, immagini, icone,…), selezionare la tipologia di contenuti da caricare, inserirli ed infine generare l’applicazione come ultimo passo.

Ciò che è interessante evidenziare è che App Studio può essere utilizzato come base per la creazione di una nuova app in stile Windows Store anche dal programmatore più esperto.
App Studio, infatti, fornisce il codice sorgente dell’applicazione che potrà poi essere scaricato e modificato liberamente ricorrendo a Visual Studio 2013 o a Visual Studio 2015 (quest’ultimo ancora non disponibile nella sua veste definitiva).

Iniziare a lavorare con App Studio

Per iniziare a lavorare con App Studio basta essere possessori di un account utente Microsoft, effettuare il login e puntare il browser a questo indirizzo.

Non è affatto necessario utilizzare Internet Explorer od Edge: App Studio può essere adoperata con qualunque browser web (nel nostro caso, ad esempio, abbiamo usato Chrome).

Dopo aver fatto clic sul pulsante Inizia subito, si potrà scegliere tra uno dei modelli proposti da App Studio oppure selezionare il progetto vuoto (Empty app).

Il passaggio successivo consiste nell’assegnare un nome all’applicazione (casella Name your app):

Cliccando su Start with this one, verrà visualizzata la schermata per la composizione dell’applicazione.

Nella parte destra della finestra, viene visualizzata un’anteprima dell’applicazione così come comparirebbe sullo schermo di uno smartphone.
Cliccando su Windows Preview, si otterrà un’anteprima dell’applicazione così come apparirebbe su di un tablet. L’anteprima può essere considerata valida anche per rendersi conto di come apparirà l’app su un normale computer.

I pulsanti Add sections posti nella parte inferiore della schermata consentono di aggiungere nuove sezioni all’interno dell’applicazione.

Oltre alla possibilità di inserire liste, menu e contenuti HTML, App Studio offre lo strumento Collection che permette di aggiungere dati più strutturati.

Nell’esempio, una Collection è rappresentata dalla sezione Museum. Cliccando sulla prima icona (Edit collection) si può inserire un insieme di dati (testi ed immagini) che poi saranno visualizzati dall’applicazione.

La seconda icona (Edit) consente di stabilire in che modo visualizzare i dati precedentemente inseriti nella collection.

Cliccando su List page è possibile definire gli elementi da visualizzare in prima battuta mentre selezionando una delle modalità di visualizzazione sulla destra (Layouts for list page) si può definire l’aspetto grafico per proporre le informazioni in maniera più accattivante possibile.

Con un clic su Details page, si possono specificare le informazioni da visualizzare non appena selezionato un elemento dall’elenco.
La soluzione scelta è interessante perché i dettagli possono essere visualizzati su più colonne e strutturati con il layout che si ritiene più opportuno.

Cliccando la scheda Themes si può personalizzare in profondità il look dell’applicazione. Con Tiles, invece, si può definire quali informazioni visualizzare nelle “live tiles” di Windows 8.1, Windows Phone 8.x e Windows 10.

Il pulsante Finish consente di concludere il lavoro mentre Generate di produrre il pacchetto installabile ed il codice sorgente eventualmente modificabile ed ulteriormente personalizzabile usando Visual Studio 2013 o Visual Studio 2015.

Scaricato il pacchetto d’installazione dell’app e copiato in Windows 8.1 o in Windows 10, si potrà caricarlo sul sistema estraendo il contenuto dell’archivio Zip, cliccando con il tasto destro del mouse sul file Add-AppDevPackage.ps1 quindi selezionando Esegui con PowerShell.

Per installare l’app, biosognerà premere semplicemente il tasto Invio.

Si dovrebbe ottenere una schermata simile a quella che segue (l’applicazione è stata installata).

Se, invece, dovesse essere mostrato un errore che fa riferimento all’assenza di un certificato digitale necessario per l’installazione, basterà cliccare qui, ottenere il certificato root offerto da Microsoft, estrarre il contenuto dell’archivio, fare clic con il tasto destro del mouse sul file Add-RootCertificate.ps1 e selezionare Esegui con Powershell.

Effettuata quest’operazione, l’app risulterà installabile sul sistema locale.

Ecco l’applicazione in esecuzione su un sistema Windows 8.1:

Con un clic sulla scheda Source code di App Studio quindi su Download source code, si potrà prelevare il sorgente dell’applicazione, modificabile con Visual Studio 2013 o Visual Studio 2015.