Come aggiungere servizi mobili di Azure a un'app di Windows Phone

Le app di Windows Phone che utilizzano riquadri attivi, autenticano gli utenti con accesso singolo e condividono dati tra dispositivi e utenti in genere utilizzano servizi cloud. La maggior parte delle piattaforme cloud offre funzionalità generiche per archiviare dati ed eseguire codice, ma è necessario aggiungere molto codice di infrastruttura per unire queste funzionalità. I servizi mobili di Azure consentono di aggiungere servizi cloud alla tua app in pochi minuti.

introduzione

Questo tutorial mostra come aggiungere un servizio di backend a un'app di Windows Phone utilizzando Servizi mobili di Azure. Creerai un nuovo servizio mobile e una semplice app to-do che memorizza i suoi dati nel cloud utilizzando il nuovo servizio mobile. In questo tutorial, imparerai come:

• creare un servizio mobile e aggiungervi tabelle
• aggiornare l'app per utilizzare il servizio mobile
• prova il servizio mobile ospitato su Azure Mobile Services

Per seguire insieme a me, è necessario un account Windows Azure. È possibile registrarsi per una versione di prova di Windows Azure se non si dispone ancora di un account. 

1. Creare un servizio mobile

Per prima cosa è necessario impostare un nuovo servizio mobile che possa essere utilizzato dall'app Windows Phone. Il servizio mobile che verrà creato in questo tutorial è un servizio mobile back-end JavaScript. Ti consente di utilizzare JavaScript per la logica di business lato server. Seguire questi passaggi per creare un nuovo servizio mobile utilizzando il portale di gestione di Azure.

Passaggio 1: aggiungere un servizio mobile

Accedere al portale di gestione di Azure e fare clic su NUOVO pulsante nella barra di navigazione. Espandere Calcola> Servizio mobile e fare clic su Creare.

 Passaggio 2: selezionare il tipo di database, la regione e il runtime

Nel Nuovo servizio mobile procedura guidata, selezionare un database SQL libero da 20 MB o utilizzare uno dei database esistenti. Selezionare JavaScript dal backend menu e inserire un sottodominio per il nuovo servizio mobile in URL casella di testo.

Nota che il nome del servizio mobile deve essere unico. Un errore viene visualizzato accanto a URL quando il nome / sottodominio inserito non è disponibile.

Passaggio 3: specificare le impostazioni del database

Quando crei un nuovo servizio mobile, questo viene automaticamente associato a un database SQL. Il back-end dei servizi mobili di Azure fornisce quindi il supporto integrato per consentire alle app remote di archiviare e recuperare in modo sicuro i dati da esso, senza dover scrivere o distribuire alcun codice server personalizzato.

Per configurare il database, inserire il nome del database nel file Nome campo. Avanti, entra Nome di accesso al server e Password di accesso al server per accedere al server del database SQL.

Fare clic sul segno di spunta in basso a destra per completare il processo. Ora hai creato un nuovo servizio mobile che può essere utilizzato dalle tue app mobili. Prima di poter iniziare a memorizzare i dati, è necessario prima creare una tabella in grado di memorizzare i dati dell'applicazione.

Si noti che l'uso di un database in una regione diversa non è consigliato a causa di costi di larghezza di banda e latenze più elevate.

2. Aggiungi una tabella al servizio mobile

In questo passaggio, aggiungeremo una tabella chiamata ToDoItem al servizio mobile, che verrà utilizzato dall'app client per salvare gli elementi da fare dell'utente.

Passaggio 1: crea una nuova tabella

Dal Dati scheda in Portale di gestione di Azure, clic Creare aggiungere una nuova tabella al servizio mobile. Dai un nome al tavolo ToDoItem e impostare un livello di autorizzazione per ogni operazione. Per il ToDoItem tabella, ho usato le impostazioni di autorizzazione predefinite.

Fare clic sul segno di spunta in basso a destra per completare la procedura di impostazione della tabella. In pochi secondi, hai aggiunto il ToDoItem tavolo al servizio mobile.

Passaggio 2: aggiungere colonne alla tabella

Il ToDoItem la tabella contiene già un numero di colonne per la memorizzazione di ID, data di creazione, stato cancellato, data di aggiornamento e informazioni sulla versione. Per rendere la tabella utile per la nostra applicazione, dobbiamo aggiungere due colonne aggiuntive, una per la memorizzazione del testo della voce to-do e una per la memorizzazione dello stato della voce to-do.

Per aggiungere le colonne aggiuntive, fare clic su Aggiungi colonna dal colonne scheda del ToDoItem tavolo. Il testo la colonna è di tipo Stringa e il completato la colonna è di tipo booleano.

Queste sono le colonne del ToDoItem tavolo.

Ora che abbiamo configurato il nostro servizio mobile e aggiunto una tabella, abbiamo due opzioni: creare una nuova app o connettere un'app esistente al servizio mobile. In questo tutorial, modificheremo un'app di Windows Phone esistente per utilizzare il servizio mobile.

3. Configurare l'app per utilizzare il servizio mobile

L'app deve essere configurata correttamente per utilizzare il servizio mobile. È necessario aggiungere codice per connettere la tua app al servizio mobile e salvare i dati nel cloud.

Fare clic con il pulsante destro del mouse sul nome del progetto in Esploratore di soluzioni e scegliere Inserisci > Servizio connesso dal menu. Nel Aggiungi servizio connesso finestra di dialogo che appare, scegliere Servizi mobili di Azure e fare clic Configurazione.

Quindi, scegli il servizio mobile creato in precedenza dall'elenco dei servizi esistenti nel tuo account. Dovrai fornire le tue credenziali per connetterti e elencare i servizi mobili nel tuo account Windows Azure.

Seleziona il servizio mobile che abbiamo creato e fai clic Inserisci per completare il processo. La procedura guidata aggiungerà quindi tutti i riferimenti richiesti al progetto. I riferimenti possono anche essere aggiunti manualmente installando il pacchetto richiesto usando NuGet. Fare clic con il pulsante destro del mouse sul progetto client, selezionare Gestisci i pacchetti NuGet, cerca il WindowsAzure.MobileServices pacchetto e aggiungere un riferimento per il pacchetto.

La procedura guidata installa il richiesto NuGet pacchetti, aggiunge un riferimento per la libreria client del servizio mobile al progetto e aggiorna il codice sorgente del progetto. La procedura guidata aggiunge anche un nuovo campo statico a App classe che assomiglia a questo:

public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient todolistClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient ("https://todolist.azure-mobile.net/", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

Questo codice fornisce l'accesso al tuo nuovo servizio mobile nell'app utilizzando un'istanza di MobileServiceClient classe. Il client viene creato fornendo l'URI e la chiave dell'applicazione del nuovo servizio mobile. Questo campo statico è disponibile per tutte le pagine della tua app. È necessario aggiungere manualmente questo codice a app.xaml.cs se non stai usando la procedura guidata.

4. Aggiornare l'app per utilizzare il servizio mobile

È necessario aggiornare l'app Windows Phone per utilizzare il servizio mobile come servizio di back-end. Hai solo bisogno di apportare modifiche al MainPage.cs file di progetto.

Passaggio 1: aggiungere il ToDoItem Definizione di classe

Aggiungi una nuova classe di modello, ToDoItem, al tuo progetto. La classe del modello contiene proprietà corrispondenti alle colonne nel ToDoItem tabella che abbiamo creato in precedenza.

ToDoItem di classe pubblica Id stringa pubblica get; impostato;  [Newtonsoft.Json.JsonProperty (PropertyName = "text")] public string Testo get; impostato;  [Newtonsoft.Json.JsonProperty (PropertyName = "complete")] public bool Completa get; impostato;  public ToDoItem ()  public ToDoItem (testo stringa, bool status = false) Testo = testo; Completo = stato; 

Il JsonPropertyAttribute il metodo viene utilizzato per definire il mapping tra i nomi delle proprietà nell'app client e i nomi delle colonne nella tabella corrispondente. Un riferimento a Newtonsoft.Json il pacchetto deve essere aggiunto al progetto per farlo funzionare.

Passaggio 2: aggiungi codice per inserire e recuperare elementi

Aggiungi il seguente utilizzando dichiarazione a MainPage.xaml.cs:

utilizzando Microsoft.WindowsAzure.MobileServices;

Aggiungi le seguenti righe nella parte superiore di MainPage.xaml.cs per creare una raccolta di binding in grado di riconoscere i servizi mobili e una classe proxy per la tabella del database.

MobileServiceCollection privato elementi; IMobileServiceTable privato todoTable = App.tutsplusdemoClient.GetTable();

Quindi, crea un InsertToDoItem metodo per inserire un nuovo oggetto nella tabella. Aggiungi il async modificatore del metodo e aggiungere il seguente codice per inserire un elemento.

public async Task InsertToDoItem (ToDoItem toDoItem) attende todoTable.InsertAsync (toDoItem); Items.Add (toDoItem); 

Questo codice funziona se la tua tabella ha le autorizzazioni impostate su Qualcuno con una chiave di applicazione. Se modifichi le autorizzazioni per proteggere il tuo servizio mobile, dovrai aggiungere il supporto per l'autenticazione dell'utente. Vedere Aggiunta dell'autenticazione tramite Servizi mobili di Azure. 

Creare un RefreshTodoItems metodo che imposta l'associazione alla raccolta di elementi nel file ToDoItem tabella, che contiene tutto il ToDoItem oggetti restituiti dal servizio mobile. Visualizziamo una finestra di messaggio se si verifica un problema durante l'esecuzione della query.

private async Task RefreshTodoItems () MobileServiceInvalidOperationException exception = null; prova // Query che restituisce tutti gli elementi. items = attendi todoTable.ToCollectionAsync ();  catch (MobileServiceInvalidOperationException e) exception = e;  if (exception! = null) attende il nuovo MessageDialog (exception.Message, "Error loading items"). ShowAsync ();  else ListItems.ItemsSource = items; this.ButtonSave.IsEnabled = true;  

Passaggio 3: aggiungere controlli a MainPage.xaml

Ora dobbiamo aggiornare MainPage.xaml per visualizzare gli elementi da fare e aggiungere la possibilità di aggiungere elementi to-do. Di seguito è riportato l'aspetto del codice XAML per una semplice interfaccia utente che contiene a Casella di testo inserire oggetti e a Visualizzazione elenco per visualizzare gli elementi da fare.

           Salvare ricaricare          

Il InsertToDoItem il metodo è chiamato quando il Salvare Tocca il pulsante, che inserisce la voce to-do nella tabella.

private async void ButtonSave_Click (oggetto mittente, RoutedEventArgs e) var todoItem = new TodoItem Text = TextInput.Text; attendere InsertTodoItem (todoItem); 

Il RefreshToDoItems il metodo è invocato quando il ricaricare il pulsante è TAPpato. In questo metodo, recuperiamo tutti gli elementi nella tabella.

private async void ButtonRefresh_Click (mittente dell'oggetto, RoutedEventArgs e) ButtonRefresh.IsEnabled = false; // attende SyncAsync (); // sincronizzazione offline attende RefreshTodoItems (); ButtonRefresh.IsEnabled = true; 

5. Testare il servizio mobile

Il passaggio finale di questo tutorial è la revisione dei dati memorizzati nel servizio mobile. Nel portale di Windows Azure classico, fare clic su ToDoItem tavolo sotto il Dati scheda del tuo servizio mobile. Sotto il Navigare scheda, è possibile visualizzare tutti gli elementi nella tabella.

Conclusione

Questo tutorial illustra le basi dell'utilizzo di Servizi mobili di Azure come back-end per un'app di Windows Phone. Creare un servizio mobile e utilizzarlo nell'app per archiviare i dati nel cloud è facile da implementare.

Scenari più complessi implicano il supporto della sincronizzazione dei dati offline. Puoi anche aggiungere il supporto per la sincronizzazione dei dati offline all'app seguendo questo tutorial. È possibile limitare le autorizzazioni della tabella per consentire solo agli utenti autenticati di aggiornare la tabella seguendo questo articolo Envato Tuts +.

Sentiti libero di scaricare i file sorgente del tutorial come riferimento. Ricordarsi di configurare l'app per utilizzare Servizi mobili di Azure prima di distribuirla.