Come realizzare semplicemente un’applicazione Windows Phone con App Studio (it-IT) - TechNet Articles - United States (English) - TechNet Wiki

NOTA: Questo articolo è tratto da un post di Matteo Pagani (MVP Windows Phone) sul Blog di MSDN Italia. Si ringrazia l'autore per la gentile concessione.

Introduzione

Microsoft ha recentemente annunciato un nuovo tool dalle mille potenzialità chiamato App Studio e dedicato agli sviluppatori Windows Phone. Si tratta di un tool web, che consente la creazione di applicazioni anche a chi non ha conoscenza di programmazione: tramite una serie di passaggi visuali, è possibile definire sia l’aspetto visivo che i contenuti dell’applicazione. L’aspetto interessante è che sono molte le modalità che il tool mette a disposizione per utilizzare l’applicazione che abbiamo creato:

· E’ possibile installarla direttamente sul telefono, anche senza installare i tool di sviluppo e senza necessità di sbloccarlo come sviluppatori, grazie all’utilizzo di un certificato per la distribuzione enterprise che viene fornito al termine della procedura.

· E’ possibile scaricare il vero e proprio XAP, da distribuire ad altre persone o da pubblicare sullo Store.

· E’ possibile scaricare il codice sorgente dell’applicazione generata, così da poterla espandere e modificare, aggiungendo caratteristiche che non sono supportate dal tool.

Se siete sviluppatori Windows Phone esperti, la prima reazione a questo articolo potrebbe essere di disinteresse: “sono un programmatore, un tool in grado di generare applicazioni senza scrivere codice non mi è di alcun aiuto”. In realtà, potreste avere delle sorprese: innanzitutto, perché il tool contiene molti template decisamente ben fatti, che possono essere un buon punto di partenza per definire il layout della vostra applicazione; inoltre, il codice generato da App Studio è molto valido e ben strutturato e fa uso di concetti che dovrebbero essere famigliari allo sviluppatore esperto, come l’utilizzo del pattern Model-View-ViewModel (MVVM), di dependency injection, di servizi, ecc. In questo modo, diventa semplice per lo sviluppatore competente aggiungere nuove feature e sfruttare il progetto generato come base per il suo lavoro.

Ma partiamo dal principio e vediamo il funzionamento del tool. Il punto di partenza è il sito http://apps.windowsstore.com/, da cui è possibile iniziare la procedura facendo clic sul pulsante Start building e facendo login con il vostro Microsoft Account. Al momento, il tool si trova in fase di beta e l’accesso è consentito solo previa registrazione tramite un codice: se siete interessati a provarlo, potete contattarmi all’indirizzo info@qmatteoq.com. Ho a disposizione, infatti, parecchi codici di accesso, che sarò felice di condividere con chiunque voglia provare App Studio.

Una volta che avete effettuato l’accesso, la prima scelta sarà quella del punto di partenza: avete la possibilità, infatti, di creare un’applicazione da zero oppure di utilizzare uno dei template già esistenti.

Le opzioni che avrete a disposizione sono esattamente le stesse: la differenza è che, utilizzando uno dei template già esistenti, troverete già una serie di pagine e contenuti ad hoc per lo scenario di riferimento. I template coprono molti scenari reali: applicazioni aziendali, musicali, cinematografiche, sportive, ecc.

Per questo post ho scelto di partire con un’applicazione vuota, così da darvi la possibilità di capire meglio le differenti opzioni che avete a disposizione. Clicchiamo perciò su create an empty app per iniziare il processo: in entrambi i casi, comunque, darete avvio ad un wizard suddiviso in 4 passaggi. Vediamoli in dettaglio!

Step 1: App Information

Il primo passaggio è uno dei più brevi, in quanto ci permette di definire le caratteristiche base dell’applicazione: titolo, descrizione e logo (è richiesta un’immagine PNG dalla risoluzione di 160x160). In questo primo step possiamo fare la conoscenza, sulla sinistra, di uno degli aspetti più interessanti del tool: un simulatore di un dispositivo Windows Phone, in grado di mostrare in tempo reale i cambiamenti apportati durante la procedura di creazione.

Step 2: Configure App Content

Il secondo passaggio è quello in cui, probabilmente, spenderete la maggior parte del tempo, dato che si tratta del più importante, in quanto consente la creazione dei contenuti dell’applicazione.

Il contenuto di un’applicazione è definito da due concetti molto importanti e legati tra di loro: data source e section (uso la terminologia inglese dato che, al momento, il tool non è localizzato in italiano).

Le data source (in italiano, sorgente dati) sono i “contenitori” dei dati che andremo a mostrare nell’applicazione. App Studio offre diversi tipi di data source, le quali vengono aggiornate nel corso del tempo (ad esempio, Flickr è stato aggiunto qualche settimana dopo il lancio di tool). Al momento della scrittura del post, le sorgenti disponibili sono:

· Collection, ovvero una collezione di dati che può essere statica o dinamica.

· RSS, in grado di visualizzare in automatico le informazioni contenute in un feed RSS.

· YouTube, in grado di visualizzare una collezione di video di YouTube.

· Flickr, in grado di mostrare una collezione di fotografie pubblicate su un account Flickr.

· Html non rappresenta una collezione vera e propria, ma un contenitore che è possibile riempire con codice Html per visualizzare, ad esempio, del testo formattato.

Ogni data source è collegata ad una sezione, che è rappresenta dalle pagine che vengono create in automatico per mostrarne i dati. Nel caso di data source semplici, la pagina in questione è solamente una (ad esempio, se utilizzata una sorgente Html); nel caso di dati più complessi, il tool è in grado di creare in automatico più pagine (ad esempio, se utilizzate una sorgente di tipo Collection, sarà creata una pagina “master” per visualizzare l’elenco di informazioni e una pagina di dettaglio, che sarà mostrata nel momento in cui l’utente sceglie uno degli elementi della lista).

La pagina principale dell’applicazione fa uso di un controllo Panorama: questo significa che, per rispettare le guideline della piattaforma, la pagina non può contenere più di 6 sezioni: ognuna di esse viene rappresentata da un blocco di tipo PanoramaItem all’interno dello XAML.

Se avete la necessità di aggiungere più di 6 sezioni, il tool vi mette a disposizione il concetto di menu: si tratta di una sezione speciale, costituita semplicemente da un elenco di collegamenti. Possono essere link a siti web esterni oppure link ad altre sezioni. Il processo di creazione di una sezione è identico in entrambi i casi: la differenza è che se la state aggiungendo nella pagina principale, l’elenco degli elementi facenti parte del data source sarà mostrato direttamente nel controllo Panorama; se invece state aggiungendo una sezione raggiungibile da un menu, l’elenco sarà posizionato in una nuova pagina.

Per aggiungere una nuova sezione fate clic sul pulsante + presente nella pagina principale della sezione Configure App Content: avrete la possibilità di scegliere tra i due casi visti in precedenza, ovvero Add Section e Add Menu. Per il momento, scegliamo la prima opzione per aggiungere una nuova sezione:

Il primo passaggio è la scelta del nome della sezione, che sarà mostrato come titolo della pagina. Dopodiché potete scegliere il tipo di data source che volete utilizzare: avete a disposizione sia quelle già esistenti (nel caso vogliate creare una sezione per mostrare dei dati che avete creato in precedenza), sia i template per crearne di nuove. In questo tutorial vediamo come creare un sorgente dati di tipo Collection: dopo averla selezionata, è necessario specificare un nome con cui identificarla nel campo Datasource name. Premendo il pulsante Save Changes avrete la possibilità di vedere la struttura creata in automatico dal tool per gestire la sezione:

Se avete seguito attentamente quanto spiegato in precedenza sulle sezioni e sulle data source, non dovreste avere grosse sorprese: la sezione ha un titolo (indicato nel campo Section Name), una data source (in questo caso, di tipo Collection) e una serie di pagine per mostrare i dati (in questo caso, una chiamata Comics che mostra la lista di elementi e una chiamata Detail, che mostra il dettaglio dell’elemento scelto).

Il tool si è limitato, però, a creare la struttura base: ora dobbiamo configurare i contenuti e l’aspetto delle varie pagine. Iniziamo con il definire la data source, facendo click sull’icona presente nella sezione Data Souce (nell’immagine, si chiama ComicsCollection): il tool vi mette a disposizione un semplice editor visuale, che vi permette di personalizzare la sorgente dati.

Le data source di tipo Collection possono essere pensate come una tabella, che può avere una o più colonne, che contiene i dati da mostrare nell’applicazione: l’editor vi permette perciò di aggiungere, modificare o cambiare l’ordine delle colonne. Come impostazione predefinita, la data source include già alcune colonne per rappresentare dei dati generici, come il titolo (Title), la descrizione (Description) e un’immagine (Image).

Se volete personalizzare la tabella, dovete cliccare sul pulsante Edit columns: è importante eseguire questa operazione come primo passaggio; non sarete più in grado, infatti, di cambiarne la struttura una volta aggiunti dei dati.

Come anticipato poco fa, avrete la possibilità di:

· Aggiungere una nuova colonna, premendo il pulsante add new column: i tipi supportati sono immagini, testi e numeri.

· Eliminare una colonna esistente, premendo il pulsante con il simbolo del cestino posizionato in fondo ad ogni riga.

· Riorganizzare l’ordine delle colonne, utilizzando il drag and drop sull’icona presente all’inizio di ogni riga.

Una volta definita la struttura, potete passare all’inserimento vero e proprio dei dati, tramite il pratico editor visuale: è sufficiente premere il pulsante Create item per aprire un pop up che vi chiederà di immettere le varie informazioni.

Una delle caratteristiche più interessanti della data source di tipo Collection è il supporto a due modalità, che potete vedere in cima alla pagina: Static o Dynamic. Nel primo caso, la sorgente dati è statica: l’applicazione mostrerà semplicemente i dati che andrete ad inserire tramite l’editor visuale. Se volete aggiungere dei nuovi dati, dovrete creare e distribuire una nuova versione dell’applicazione. Nel caso di data source di tipo dynamic, invece, dietro le quinte App Studio genererà un servizio REST ospitato su Azure, in grado di esporre i dati contenuti nella sorgente dati utilizzando il formato JSON. Ciò significa che, se volete aggiungere dei nuovi dati, non sarete costretti ad aggiornare l’applicazione: i dati contenuti nella tabella saranno richiesti in tempo reale dall’app. L’unico svantaggio, in questo caso, è che per funzionare correttamente l’applicazione avrà bisogno di connettività, dato che il servizio è esposto su Internet.

Ora che abbiamo definito la data source, è il momento di impostare il layout delle pagine, ovvero come visualizzare i dati che abbiamo creato in precedenza: per farlo, dobbiamo tornare alla pagina di personalizzazione della sezione e fare click sulla pagina che vogliamo modificare.

L’editor ci dà la possibilità di scegliere il template che vogliamo utilizzare per mostrare i dati e i contenuti che vogliamo mostrare:

In questa immagine potete vedere il processo di personalizzazione della lista di elementi: nella sezione layout è possibile scegliere il template da utilizzare per mostrare i singoli elementi. Ce ne sono per tutti i gusti e per tutti gli scopi: solamente testuali, testi con immagini, photogallery, ecc.

In base al layout selezionato, la sezione sottostante (che permette di definire le informazioni da mostrare nel template) si aggiornerà in tempo reale, in quanto ogni layout è in grado di mostrare un numero e un tipo differente di informazioni (ad esempio, se scegliete il layout photogallery, avrete la possibilità di specificare solamente l’immagine).

Come funziona l’editor del layout? La sezione Content rappresenta l’aspetto del singolo elemento della vostra data source: di conseguenza, premendo il pulsante che appare in fondo ad ogni campo, avrete la possibilità di scegliere quale campo che avete definito nella tabella volete mostrare in una determinata posizione. Se utilizzate i campi predefiniti che vengono creati quando aggiungete una data source di tipo Collection, sarà già tutto configurato in automatico: se invece avete personalizzato la tabella, dovrete effettuare delle modifiche.

Ecco il risultato finale, in base al template definito nell’immagine precedente:

La personalizzazione della pagina di dettaglio funziona allo stesso modo: l’unica differenza è che i template disponibili per il layout saranno diversi.

In più, come potete vedere, è presente una sezione Extras, che vi permette di abilitare o disabilitare alcune feature avanzate che vengono mostrate nella pagina di dettaglio:

· TextToSpeech vi consente di abilitare l’uso delle Speech API, così che l’utente possa ascoltare, invece che leggere, il contenuto della pagina.

· ShareText vi consente di abilitare la condivisione del contenuto della pagina tramite i social network.

· PinToStart vi consente di abilitare la creazione di una tile secondaria, in grado di portare l’utente direttamente alla pagina di dettaglio dell’elemento corrente.

Ecco come compare la pagina di dettaglio con il template definito nell’immagine:

Step 3: Configure App Style

Il terzo passaggio è dedicato alla personalizzazione grafica dell’applicazione ed è suddiviso in tre macro aree: style, tiles e splash & lock. Vediamole in dettaglio.

Style

La sezione style nasce per personalizzare l’aspetto visivo dell’applicazione: colori, sfondi, ecc. E’ possibile configurare:

· Accent brush, ovvero il colore usato per i testi principali, come il titolo dell’applicazione mostrato nel Panorama.

· Background brush, ovvero lo sfondo utilizzato in tutte le pagine. Può essere utilizzato uno dei colori disponibili, oppure un’immagine tra quelle disponibili (oppure caricata dal proprio computer).

· Foreground brush, ovvero il colore utilizzato per tutti i testi dell’applicazione.

· Application bar brush, ovvero il colore di sfondo della Application Bar.

Tiles

Lo scopo di questa sezione è di personalizzare la tile dell’applicazione: è possibile scegliere, così come durante lo sviluppo di un’applicazione in modo tradizionale, quale dei template utilizzare, tra flip, cycle e iconic. Dato che Windows Phone non è in grado di utilizzare il template cycle con immagini remote, questi sarà abilitato solo se fate uso di data source di tipo statico.

In base al template che avrete scelto, un pratico editor visuale vi permetterà di definire i testi e le immagini che saranno mostrati nei vari formati (small, medium, wide) e nelle varie condizioni (ad esempio, per il template flip potete impostare anche il retro della tile).

Sulla sinistra ci sarà un’anteprima, in tempo reale, dell’aspetto finale che avrà la tile della vostra applicazione. Come impostazione predefinita, la tile riutilizza l’icona dell’applicazione che avete definito nella prima fase del wizard: avete comunque la possibilità di cambiarla a piacimento, caricando una nuova immagine dhe saranno mostrati nei vari formati (small, medium, wide) e nelle varie condizioni (ad esempio, per il template flip potete impostare anche il retro della tile).

Sulla sinistra ci sarà un’anteprima, in tempo reale, dell’aspetto finale che avrà la tile della vostra applicazione. Come impostazione predefinita, la tile riutilizza l’icona dell’applicaal vostro computer.

Splash & lock

L’ultima sezione vi permette di configurare la splash screen che viene mostrata in fase di caricamento dell’applicazione. Anche in questo caso, potete scegliere una tra le immagini predefinite o caricarne una a piacimento dal vostro computer. Una delle funzionalità integrate nel tool è il supporto ad una delle novità di Windows Phone 8, ovvero la possibilità di cambiare l’immagine di sfondo della lock screen del telefono direttamente da un’applicazione di terze parti: per questo motivo, avrete la possibilità di scegliere un’immagine (nella sezione lock screen background) che sarà visualizzata come sfondo nel caso in cui l’utente scelga di sfruttare questa funzionalità (sarà presente, nella Application Bar della pagina principale dell’applicazione, un pulsante dedicato).

Step 4: Summary

Abbiamo completato il nostro lavoro: ora siamo pronti per provare la nostra applicazione! La pagina finale del processo vi mostrerà un riepilogo del lavoro svolto, mettendo in evidenza le informazioni create nel corso del wizard (come il numero di sezioni o di pagine):

Premendo il pulsante Generate, inizierà il processo vero e proprio di generazione dell’applicazione, che durerà qualche minuto: una volta completato, riceverete una mail molto importante, soprattutto se è la vostra prima applicazione creata con App Studio, in quanto contiene il link per installare il certificato enterprise che vi dà la possibilità di caricare l’applicazione sul vostro telefono senza doverlo sbloccare.

Ecco un esempio di mail che riceverete:

Installare il certificato è un’operazione molto semplice: fate tap sul link contenuto nella mail (dove trovate la dicitura click here) dal vostro telefono; Windows Phone aprirà Internet Explorer e inizierà il download del file: al termine della procedura vi sarà chiesto se volete aggiungere un Company Account per la società Microsoft Corporation. Confermate e il gioco è fatto!

A questo punto potete tornare sul portale: nel momento in cui la procedura di generazione è completata, sarà mostrata una pagina di riepilogo che vi permetterà di scaricare l’applicazione nei vari formati (XAP, codice sorgente, pacchetto per l’installazione).

Installare l’applicazione è semplice, grazie al QR Code che trovate nella pagina e a Bing Vision, integrato in Windows Phone: premete il pulsante di ricerca di Windows Phone (il terzo pulsante hardware, quello con la lente di ingrandimento) e, nella pagina di ricerca, premete il pulsante identificato dal simbolo dell’occhio nella barra per accedere a Bing Vision. E’ sufficiente, a questo punto, che inquadriate il QR Code con la fotocamera del vostro telefono: Windows Phone interpreterà il codice e vi proporrà di fare tap sull’indirizzo che è stato decodificato. Sarà aperto nuovamente Internet Explorer: in questo caso, la procedura di download sarà più lunga, dato che sarà scaricato lo XAP vero e proprio. Al termine, vi sarà chiesta conferma se volete installare l’applicazione: scegliete Yes e, dopo qualche secondo, la troverete nell’elenco delle applicazioni installate sul vostro telefono.

Sviluppate, sviluppate, sviluppate!

Nel corso di questo post abbiamo visto i concetti base per utilizzare App Studio: non c’è limite, però, alla vostra fantasia, perciò il mio consiglio è quello di provarlo e fare esperimenti, per testare in prima persona tutte le opzioni messe a disposizione dal tool. In qualsiasi momento, avrete la possibilità di riprendere il vostro lavoro o di modificare un’applicazione già creata tramite la Dashboard, che vi mostrerà tutti i progetti sui quali avete già lavorato.