Connettere OneDrive in una Universal App

Con l’Update 2 di Visual Studio 2013 sono state introdotte le Universal App, una nuova tipologia di soluzione che consente di implementare una app sia per Windows Phone 8.1 che per Windows 8.1 contemporaneamente.

Senza entrare nel dettaglio di cosa sono le Universal App (nel caso non sappiate di cosa parliamo potete far riferimento a questo link per una introduzione), nel post di oggi ci focalizzeremo su come implementare al suo interno il collegamento con OneDrive.

Spiegheremo come creare una pagina di “settings” che funzioni sia nel progetto per Windows Phone che nel progetto per Windows Store, centralizzando così il punto di collegamento della soluzione (e degli applicativi) con OneDrive.

Per questo post ho fatto riferimento ad alcuni altri che indicherò di seguito come riferimenti, per poi modificarli e ottenere il risultato voluto.

Componenti da installare

Prima di procedere con la spiegazione, verificate che siano installati i seguenti componenti, necessari per poter eseguire il collegamento:

Ricordatevi che per sviluppare questo tipo di applicazioni, dovete lavorare con il sistema operativo Windows 8.1, altrimenti su altri sistemi (es. Windows Server) non potreste non avere la possibilità di farlo, almeno per il momento.

Nel nostro caso faremo uso della versione Express di Visual Studio 2013, con l’update 2 già installato.

Creazione del progetto

In Visual Studio 2013, bisogna creare una Universal App selezionandola tramite il menù File > New > Projects > Visual C# > Store Apps > Universal Apps > Blank App e dandogli un nome di comodo, ad esempio “OneDriveDemo“. Per la demo la Blank App sarà più che sufficiente.

Associazione del progetto

Per il corretto funzionamento del collegamento, è necessario che la app Windows 8.1 venga “associata” con una app nello Store, in questo modo sarà possibile in alcuni punti accedere alle informazioni dell’utente e del suo Microsoft Account. Del resto questa operazione andrà comunque fatta per poter poi pubblicare la vostra app.
Per eseguire questa associazione è sufficiente che dalla vostra soluzione, facciate Tasto destro sul progetto Windows 8.1 > Store > Associate App with the Store… e seguiate le istruzioni, per utilizzare la vostra app esistente o per farvi riservare il nome per la vostra nuova app.

 

Riferimenti e UI condivisa

Nel progetto shared della nostra soluzione centralizzeremo tutta la logica per poter eseguire il collegamento. In questo stesso progetto creeremo la pagina di settings condivisa tra le app Windows Phone e Windows Store.

Prima di tutto, aggiungiamo le reference al “Live sdk”, dobbiamo farlo sia nel progetto Windows 8.1 che nel progetto Windows Phone 8.1. Nel progetto shared non è possibile referenziare librerie esterne, perchè utilizzerà le reference del progetto per il quale è in esecuzione in quel momento.

Quindi andiamo prima nel progetto Windows 8.1 e poi nel progetto Windows Phone 8.1 e facciamo tasto destro su References > Add Reference > [Windows 8.1 o Windows Phone 8.1] > Extensions > mettiamo il check su Live SDK (version 5.6) > OK


Quindi possiamo procedere con la creazione della porzione di pagina di settings condivisa tra i due progetti. Lo faremo creando, sempre nel progetto shared, uno UserControl che chiameremo OneDriveSettingsUserControl.

Il codice contenuto non è molto complesso, si tratta dello stretto necessario per il login / logout:

 

 

 

 

 

 

 

 

 

 

 

Inizialmente non vedremo nulla nello user control appena creato perchè la label è vuota e i pulsanti sono nello stato Collapsed, il che li nasconde anche nell’editor grafico.

Temporaneamente ci conviene creare, per non avere problemi di compilazione, degli handler per l’evento di click dei bottoni, che dopo sostituiremo con il codice definitivo. Per fare questo andiamo prima sul metodo Click=”SignInClick” e poi sul metodo Click=”SignOutClick” e facciamo su ognuno tasto destro e poi Go To Definition F12, in questo modo Visual Studio creerà per noi degli handler vuoti associati agli eventi di click.

A questo punto possiamo cominciare col codice vero e proprio per la connessione a OneDrive.

Logica di business

Dato che la logica sarà posizionata nel progetto shared, ci conviene creare una classe apposita per contenere la business logic. Nel nostro esempio abbiamo creato una classe OneDriveBL.cs, in cui creeremo i seguenti metodi statici:

  • CheckOrSignIn
    • esegue l’operazione di sign in e/o verifica lo stato di connessione
  • VerifyIfUserCanSignOut
    • verifica se l’utente è connesso e può eseguire il sign out
  • SignOut
    • verifica se l’utente è connesso ed esegue il sign out

Il risultato è quanto segue:

 

 

 

N.B. abbiamo utilizzato in questo esempio il livello di permission “wl_basic”, potete trovare qui i vari livelli disponibili

 

 

A questo punto possiamo cominciare a far funzionare il nostro user control tramite l’utilizzo di questa classe.

Implementiamo nello user control i seguenti metodi:

  • UpdateControls
    • si occupa di gestire lo stato dei control presenti (verrà richiamato da vari punti del codice) ovvero si occupa di visualizzare o nascondere i pulsanti in funzione dello stato di connessione o disconnessione dell’utente
  • ManageStatus
    • si occupa di gestire o verificare lo stato della connessione
    • tramite un parametro Nullable<bool> può eseguire tre azioni differenti:
      • verificare lo stato della connessione
      • avviare il sign in
      • eseguire il sign out
    • richiama proprio il metodo UpdateControls

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adesso possiamo implementare sul costruttore la verifica dello stato di connessione, e sugli event handlers che prima abbiamo creato vuoti possiamo eseguire le richieste per il sign in e il sign out.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ah, finalmente! Il grosso è fatto (o almeno si spera). Ora “resta solo” da realizzare le pagine di settings. Partiamo con quella per Windows 8.1.

 

Creazione del flyout di settings per Windows 8.1

Dobbiamo aggiungere lo user control creato nei settings della nostra (futura) app per Windows 8.1. Per fare questo creiamo un SettingsFlyout, che altro non è che (banalizzando) una pagina che viene contenuta nel flyout dei settings (ricordiamo che il termine Flyout in Windows 8+ riguarda indica in questo caso un control specifico che viene visualizzato quando eseguiamo lo swipe con il dito dal lato destro dello schermo).

Una volta creata (e registrata opportunamente) questa “pagina”, la ritroveremo tra le “voci” dei settings della nostra applicazione, secondo le linee guida per lo sviluppo di app per Window 8.1.

 

 

Nel SetttingsFlyout dovremo:

  • cambiare il titolo in OneDrive
  • sostituire l’intero contenuto con una istanza dello user control creato

Il risultato sarà questo:

 

 

 

 

 

 

 

 

 

 

 

Ora il flyout va “registrato” nell’elenco di voci da presentare sul settings di Windows, ovviamente per l’app che lo contiene.

Per fare questo dobbiamo agire nella classe App.xaml.cs, ricordandoci una cosa importante riguardante le Universal App cioè che il codice destinato alla sola applicazione Windows 8.1 va incluso in una direttiva di compilazione WINDOWS_APP che indica al compilatore che quel blocco di codice incluso nella parte shared va considerato solo nel momento in cui si compila la Windows 8.1 app. Discorso identico, con la direttiva WINDOWS_PHONE_APP va fatta per le parti di codice che vanno compilate solo per Windows Phone 8.1. Le parti comuni, cioè che vanno considerate sia per la Windows 8.1 app che per la Windows Phone 8.1 app, semplicemente non vanno incluse in alcuna direttiva.

La “registrazione” di cui parlavamo (io uso il termine registrazione solo per convenienza, non è questo un termine della nomenclatura ufficiale) avviene tramite l’override dell’evento OnWindowCreated, tramite il quale indicare che al momento della richiesta dei settings va incluso anche il nostro flyout. Ricordiamoci che, quando necessario, anche le using vanno incluse nelle direttive di compilazione.

Il risultato è quello che segue:

 

 

 

 

 

 

 

 

 

 

 

 

 


Proviamo a lanciare in debug l’app con F5 sulla Local Machine e otterremo quanto segue:

 


 

 

 

 

Creazione della pagina di settings per Windows Phone 8.1

Questa volta ci dobbiamo occupare dei settings per Windows Phone 8.1, in questo caso non è prevista da sistema una modalità di settings specifica, per cui mostreremo come creare una pagina in cui sia presente lo user control che abbiamo realizzato. La decisione sul dove posizionare questa pagina resta al developer dell’app.

Nel nostro esempio utilizzeremo direttamente la pagina iniziale della app per mostrare lo user control che abbiamo creato:

 

 

 

 

 

 

 

 

 

 

 

Il risultato ottenuto sarà questo:

 

 

 

Lanciamo l’app per Windows 8.1

In questo esempio proveremo a lanciare l’app per Windows 8.1, ma lo stesso procedimento vale anche per Windows Phone 8.1.

Andiamo nei settings che abbiamo implementato e premiamo il pulsante di Sign in, ci verranno richieste le credenziali di un Microsoft account:

 

 

 

Una volta completato il sign in, viene mostrata una schermata che mostra le permission richieste per l’accesso a OneDrive:


 

 

 

Ora l’app risulta autenticata con OneDrive e potrà quindi utilizzare le API disponibili per eseguire le azioni disponibili per il livello di permission utilizzato durante il sign in.


 

 

 

A questo link trovate il codice implementato, potrebbe non compilare perchè sono stati rimossi i riferimenti allo store, in ogni caso il codice di questo post c’è tutto.

 

 

 

Riferimenti

 

 

Connettere OneDrive in una Universal App

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...