Giugno 2017
Volume 32 Numero 6
Il presente articolo è stato tradotto automaticamente.
Xamarin - Autenticazione e accesso ai dati con Visual Studio Mobile Center
In Connect (); 2016, Microsoft ha presentato un'anteprima di Visual Studio Mobile Center (mobile.azure.com), un nuovo portale che offre, in un'unica posizione, ovvero tutto ciò che gli sviluppatori devono compilare App per dispositivi mobili in un approccio DevOps, da servizi back-end e di integrazione continua, all'automazione analitica e di test. Visual Studio Mobile Center riunisce gli strumenti e servizi Microsoft offre tramite app mobili di Microsoft Azure, Visual Studio Team Services, Xamarin Test Cloud e HockeyApp. È consigliabile leggere l'articolo "Mobile DevOps esplorazione Mobile Center di Visual Studio," da Thomas Dohmke (bit.ly/2f7a8Wk) per una panoramica generale delle funzionalità disponibile in Visual Studio Mobile Center.
In questo articolo, analizziamo l'autenticazione e le tabelle con un approccio pratico, che descrive come utilizzare questi servizi da un'app multipiattaforma in esecuzione su Android e iOS, compilata con xamarin. Forms. L'app di esempio verrà Mostra e archiviare un elenco di libri, un utente acquistato ed è basato sul modello Model-View-ViewModel (MVVM) per una migliore riutilizzo del codice. Alcune delle funzionalità descritte di seguito richiedono una sottoscrizione di Azure. Se non si dispone di uno, è possibile richiedere una valutazione gratuita in azure.microsoft.com. È necessario Visual Studio 2017 o 2015 con le estensioni più recente di Xamarin per compilare l'applicazione di esempio. È possibile scaricare l'edizione gratuita Community da visualstudio.com.
Aggiunta di un'App a Visual Studio Mobile Center
Per sfruttare un servizio dal centro di dispositivi mobili di Visual Studio, la prima cosa che è necessario eseguire è associare una nuova app nel portale. A tale scopo, è necessario accedere al portale (mobile.azure.com) e accedere con l'account Microsoft o GitHub. La pagina iniziale del centro di dispositivi mobili Mostra il pulsante Aggiungi nuova app. Come illustrato nella figura 1, quando si fa clic su questo pulsante, è necessario specificare il nome dell'applicazione, una descrizione facoltativa, il sistema operativo di destinazione e la piattaforma di sviluppo.
.png "Aggiunta di un'App per dispositivi mobili centro di Visual Studio")
Figura 1, l'aggiunta di un'App per dispositivi mobili centro di Visual Studio
Al momento della redazione del presente documento, Mobile Center supporta solo applicazioni iOS e Android (supporto per Windows è pianificato), e l'elenco delle piattaforme di sviluppo disponibili varia a seconda del sistema operativo di propria scelta. Immettere le informazioni come illustrato nella figura 1, assicurandosi di selezionare Xamarin e fare clic su Aggiungi nuova app. È possibile selezionare iOS anziché Android se si dispone di un computer Mac che è possibile utilizzare per compilare i progetti di Xamarin, come nell'esempio di codice verrà eseguito su entrambi. Inoltre, è possibile associare un'applicazione due volte per abilitare il supporto per analitica e arresto anomalo del sistema fornisce un report sui due sistemi operativi.
Successivamente, il centro di dispositivi mobili di Visual Studio viene illustrato come includere analitica e di arresto anomalo del report in un'app Xamarin (incluso xamarin. Forms) utilizzando i pacchetti NuGet di SDK Center Mobile. Questa verrà eseguita in un secondo momento nel codice di esempio, quindi spostarsi in avanti.
Creazione di tabelle
Verrà ora impostare una nuova tabella per archiviare un elenco di libri, pertanto fare clic su tabelle nella barra degli strumenti. Poiché Mobile Center si basa sulla piattaforma Azure di identità e le tabelle, verrà chiesto di connettersi alla sottoscrizione di Azure con il pulsante di connessione di sottoscrizione. Dopo la sottoscrizione è stata connessa, sarà possibile fare clic su Create Table per iniziare. A questo punto, il centro di dispositivi mobili di Visual Studio crea un nuovo back-end app per dispositivi mobili e un endpoint di app nel servizio di App mobili di Azure. Visualizzare il modulo di endpoint in https://mobile-{your-app-id}.azurewebsites.net/. Nella finestra popup che viene visualizzata, immettere libro come nome della nuova tabella. Selezionare autenticato, l'eliminazione temporanea e le caselle di controllo dei dati per ogni utente, quindi deselezionare lo schema dinamico. Di seguito è fornita una breve descrizione di ogni opzione:
- Autenticato consente per che limitare l'accesso alla tabella solo gli utenti autenticavano. Quando questa opzione non è selezionata, viene concesso l'accesso anonimo.
- L'eliminazione temporanea consente di contrassegnare i record come eliminati invece di rimuoverli dal database. In questo modo è possibile annullare l'eliminazione di record. Le query possono essere filtrate per restituire solo i record attivi.
- Lo schema dinamico consente di creare dinamicamente le nuove colonne nel client anziché il server quando si inseriscono nuovi oggetti. Ciò è utile durante lo sviluppo, ma un problema di sicurezza durante l'utilizzo di produzione, si consiglia di evitarlo quando si è l'app nell'ambiente di produzione.
- Dati per ogni utente aggiunge una colonna di utente per la tabella e consente di che filtrare i dati in base alle informazioni utente corrente. Se si seleziona questa opzione ha senso quando è abilitata l'autenticazione.
Quando si fa clic su Crea, Mobile Center genererà una tabella con un numero di colonne di sistema, che è possibile visualizzare selezionando il controllo di commutatore Mostra colonne sistema o quando si fa clic su Modifica dello Schema per aggiungere le colonne, come illustrato nella figura 2.
.png "Lo Schema di una nuova tabella, incluse le colonne di sistema")
Figura 2, lo Schema di una nuova tabella, incluse le colonne di sistema
Le colonne possono essere di cinque diversi tipi: Stringa, data, numero, booleano e versione. In realtà, versione è destinata esclusivamente per scopi interni con la colonna della versione. Questi tipi sono molto flessibili perché possono ricevere una varietà di tipi di dati specifici della piattaforma. In Microsoft .NET Framework, ad esempio, è possibile archiviare gli oggetti di tipo Int32 e Double in una colonna di tipo Number e questo vale per le altre supportati piattaforme di sviluppo, nonché. Vale la pena notare che l'utilizzo di DateTimeOffset per le date è preferibile utilizzare DateTime, il primo e utilizza le informazioni sul fuso orario di account, mentre quest'ultimo non. A questo punto, fare clic su Aggiungi colonna e aggiungere due colonne semplice: Titolo e l'autore (di tipo stringa). Una finestra popup viene visualizzato e consente di immettere il nome della colonna e i dati di tipo. Dopo aver aggiunto le colonne desiderate, è richiesto un passaggio aggiuntivo per impostare le autorizzazioni di colonna. A tale scopo, utilizzare il pulsante Opzioni (un'icona con tre punti di allineamento verticale), che fornisce un menu con diversi comandi. Tra gli altri, il comando di modifica delle autorizzazioni consente di specificare autorizzazioni individuali per ogni operazione sui dati, come si può notare figura 3.
.png "Specificare le autorizzazioni per una tabella")
Figura 3 specificare le autorizzazioni per una tabella
Fare clic su al salvataggio quando è pronto. È importante ricordare che il menu di opzioni consente di caricare dati da file CSV, nonché Cancella i dati nella tabella ed eliminare la tabella. Un'altra funzionalità molto utile è che nella pagina per una tabella verranno inoltre visualizzati i dati archiviati all'interno di una griglia.
Impostazione dell'autenticazione
Il passaggio successivo consiste nella configurazione dell'autenticazione. Nel centro Mobile, fare clic sul pulsante di identità nella barra degli strumenti sul lato sinistro della pagina. Verrà visualizzato l'endpoint di autenticazione per Azure Active Directory (Azure AD) e l'elenco dei provider di autenticazione disponibili: Azure Active Directory, Account Microsoft, Facebook, Google e Twitter. È assolutamente possibile selezionare più servizi di autenticazione, ma per questo esempio, utilizzare il servizio Account Microsoft. Qualsiasi servizio di autenticazione si fa clic, una finestra popup visualizzata un collegamento alla documentazione per ogni provider e un elenco dei campi che devono essere configurati in base al provider selezionato. Nel caso il servizio Account Microsoft, la documentazione (disponibile all'indirizzo bit.ly/2peCBgf) viene illustrato come registrare un'app e come recuperare l'ID dell'app e il segreto client dell'applicazione tramite la procedura seguente:
- Aprire il portale per sviluppatori di Account Microsoft. Questa opzione è disponibile in apps.dev.microsoft.com. In questo caso, verrà visualizzato un elenco delle App associate all'Account Microsoft (se presente).
- Fare clic su Aggiungi un App.You verrà richiesto di specificare un nome di applicazione, che non includa caratteri speciali. Ad esempio corrente, è possibile immettere MyBookshelf. Quindi, fare clic su Crea applicazione.
- Genera un ID e client secret. Quando viene aggiunta una nuova app, il portale per sviluppatori genera l'Id applicazione, che è visibile nella pagina dell'applicazione, come illustrato nella figura 4. È inoltre necessario un segreto Client, che è ottenere facendo clic su Genera una nuova Password. Una finestra popup verrà visualizzato il segreto Client e si tratta in realtà l'unica volta che sarà in grado di vedere chiaramente, quindi copiarlo in un luogo sicuro per un uso successivo.
- Specificare un URI di reindirizzamento. Ciò è necessario indicare a quale pagina dovranno visualizzato dopo che l'utente ha fornito le credenziali del servizio di autenticazione. A tale scopo, fare clic su Aggiungi piattaforma, quindi Web. Nella finestra di URI di reindirizzamento è necessario immettere il corretto reindirizzamento dell'URI, che ha il formato seguente: https://mobile-{your-app-id}.azurewebsites.net/.auth/login/microsoftaccount/callback. Figura 5 viene illustrato questo passaggio.
Salvare le modifiche, tornare al centro Mobile e aggiungere l'ID Client e segreto Client alla pagina di configurazione per l'app, come illustrato nella figura 6.
.png "Registrazione di un'applicazione nel portale di Microsoft Developer")
Figura 4 registrazione di un'applicazione nel portale di Microsoft Developer
.png "Immettere un URI di reindirizzamento")
Figura 5, immettere un URI di reindirizzamento
.png "Configurazione del servizio di autenticazione Account Microsoft")
Figura 6 la configurazione del servizio di autenticazione Account Microsoft
È possibile specificare autorizzazioni aggiuntive nell'ambito, ma questo non avviene in questo caso, quindi fare clic su Salva. Con pochi passaggi, aver correttamente configurato l'autenticazione per l'applicazione; passaggi simili si applicano altri provider di autenticazione. Ora è necessario creare un'app multipiattaforma e scrivere codice.
Creazione e configurazione di un progetto di esempio Xamarin
In Visual Studio 2017 selezionare File | New | Progetto. Individuare il nodo multipiattaforma in Visual c# e selezionare il modello di progetto denominato App della piattaforma incrociata (xamarin. Forms o nativo). Denominare il progetto MyBookshelf e fare clic su OK. Nella finestra di dialogo Nuova App della piattaforma incrociata, assicurarsi selezionare il modello applicazione vuota, quindi xamarin. Forms nella tecnologia dell'interfaccia utente e libreria di classe portabile (PCL) in una strategia di condivisione del codice e fare clic su OK. Per funzionare con i servizi mobili centro di Visual Studio, tra cui Center Mobile SDK, è necessario scaricare e installare i pacchetti NuGet seguenti:
- Microsoft.Azure.Mobile.Crashes: Consente a un'applicazione condividere informazioni sull'arresto anomalo con il centro di dispositivi mobili. E presenta una dipendenza sul pacchetto Microsoft.Azure.Mobile, che viene inoltre installato.
- Microsoft.Azure.Mobile.Analytics: Consente a un'applicazione di condividere le informazioni sull'utilizzo con il centro di dispositivi mobili e ha la stessa dipendenza Microsoft.Azure.Mobile.
- Microsoft.Azure.Mobile.Client: Installa il Client di dispositivi mobili di Azure SDK e consente a un'app di Windows o Xamarin di lavorare con il servizio di App mobili di Azure.
Il passaggio successivo è la modellazione di oggetti che eseguono il mapping di tabelle nel servizio back-end.
Definizione di un modello di dati
Per una migliore riutilizzo del codice, creare una classe di base che esegue il mapping la struttura di base di una tabella e quindi scrivere le classi derivate che estendono l'oggetto di base con colonne specifiche. La classe di base deve inoltre implementare l'interfaccia INotifyPropertyChanged per generare una notifica di modifica con l'associazione dati per l'interfaccia utente. Detto, ora aggiunto al progetto PCL una cartella denominata modello e due file di codice denominati TableBase.cs e Book.cs. Figura 7 Mostra il codice completo per entrambe le definizioni di classe.
Figura 7, la definizione del modello di dati
// Requires the following directives:
// using System.ComponentModel and System.Runtime.CompilerServices
public abstract class TableBase : INotifyPropertyChanged
{
private string id;
public string Id
{
get
{
return id;
}
set
{
id = value; OnPropertyChanged();
}
}
private string userId;
public string UserId
{
get
{
return userId;
}
set
{
userId = value; OnPropertyChanged();
}
}
private DateTimeOffset createdAt;
public DateTimeOffset CreatedAt
{
get
{
return createdAt;
}
set
{
createdAt = value; OnPropertyChanged();
}
}
private DateTimeOffset updatedAt;
public DateTimeOffset UpdatedAt
{
get
{
return updatedAt;
}
set
{
updatedAt = value; OnPropertyChanged();
}
}
private string version;
public string Version
{
get
{
return version;
}
set
{
version = value; OnPropertyChanged();
}
}
private bool deleted;
public bool Deleted
{
get
{
return deleted;
}
set
{
deleted = value; OnPropertyChanged();
}
}
public TableBase()
{
this.CreatedAt = DateTimeOffset.Now;
this.UpdatedAt = DateTimeOffset.Now;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(propertyName));
}
}
public class Book: TableBase
{
private string author;
public string Author
{
get
{
return author;
}
set
{
author = value; OnPropertyChanged();
}
}
private string title;
public string Title
{
get
{
return title;
}
set
{
title = value; OnPropertyChanged();
}
}
}
Con questo approccio, non è necessario ripetere le stesse proprietà comuni per ogni classe. è semplicemente possibile sfruttare ereditarietà. Nel progetto libreria di classi Portabile, aggiungere un file di codice denominato Constants.cs, il cui contenuto è la seguente:
public static class Constants
{
public const string BaseUrl = "https://mobile-{your-app-id}.azurewebsites.net/";
}
Questa costante conterrà l'URL del servizio back-end e verrà utilizzata invece di scrivere l'URL manualmente ogni volta.
Implementazione dell'autenticazione
Il Client Mobile di Azure SDK rende molto semplice l'autenticazione di un utente. In effetti, è sufficiente richiamare il metodo MobileServiceClient.LoginAsync. LoginAsync accetta due argomenti: il contesto in cui l'autenticazione dell'interfaccia utente deve essere presentati e provider di autenticazione tramite l'enumerazione MobileServiceAuthenticationProvider. Restituisce un oggetto di tipo MobileServiceUser, che contiene informazioni sull'utente autenticato. In xamarin. Forms, il codice che autentica l'utente non può essere condivisa nella libreria di classi Portabile in quanto iOS e Android gestire contesti dell'interfaccia utente in modo diverso. Il problema può essere risolto utilizzando il modello di servizi di dipendenza, pertanto aggiunta a una libreria di classi Portabile di un'interfaccia che fornisce una definizione di metodo di accesso astratta e le implementazioni specifiche della piattaforma dell'interfaccia. Nel progetto libreria di classi Portabile, aggiungere una nuova cartella denominata autenticazione e un'interfaccia denominata IAuthentication.cs che è simile al seguente:
using Microsoft.WindowsAzure.MobileServices;
using System.Threading.Tasks;
namespace MyBookshelf.Authentication
{
public interface IAuthentication
{
Task<MobileServiceUser> LoginAsync(MobileServiceClient client,
MobileServiceAuthenticationProvider provider);
}
}
Questa definizione di LoginAsync personalizzato accetta un'istanza della classe MobileServiceClient che viene passato da un modello di visualizzazione e che verrà usato per richiamare il metodo LoginAsync dai progetti specifici della piattaforma. Aggiungere un file denominato Authentication.cs progetti di Android e iOS, quindi esaminare figura 8 e figura 9, che mostrano le implementazioni di Android e iOS, rispettivamente.
Figura 8 Authentication.cs in Android
using System;
using MyBookshelf.Authentication;
using Microsoft.WindowsAzure.MobileServices;
using Xamarin.Forms;
using System.Threading.Tasks;
using MyBookshelf.Droid;
[assembly: Dependency(typeof(Authentication))]
namespace MyBookshelf.Droid
{
public class Authentication : IAuthentication
{
public async Task<MobileServiceUser> LoginAsync(MobileServiceClient client,
MobileServiceAuthenticationProvider provider)
{
try
{
var user = await client.LoginAsync(Forms.Context, provider);
return user;
}
catch (Exception)
{
return null;
}
}
}
}
Figura 9 Authentication.cs in iOS
using Microsoft.WindowsAzure.MobileServices;
using MyBookshelf.Authentication;
using MyBookshelf.iOS;
using System;
using System.Threading.Tasks;
[assembly: Xamarin.Forms.Dependency(typeof(Authentication))]
namespace MyBookshelf.iOS
{
public class Authentication : IAuthentication
{
public async Task<MobileServiceUser> LoginAsync(MobileServiceClient client,
MobileServiceAuthenticationProvider provider)
{
try
{
// Attempt to find root view controller to present authentication page
var window = UIKit.UIApplication.SharedApplication.KeyWindow;
var root = window.RootViewController;
if (root != null)
{
var current = root;
while (current.PresentedViewController != null)
{
current = current.PresentedViewController;
}
// Login and save user status
var user = await client.LoginAsync(current, provider);
return user;
}
return null;
}
catch (Exception)
{
return null;
}
}
}
}
Con questo approccio, ogni progetto specifico della piattaforma può richiamare LoginAsync passando il contesto di esecuzione corretta.
Implementare l'accesso ai dati con il Client Mobile di Azure SDK
La classe MobileServiceClient fornisce inoltre le funzionalità che necessarie per lavorare con i record in una tabella. È innanzitutto ottenere un riferimento a una tabella con il metodo GetTable, quindi con i metodi, ad esempio ToEnumerableAync, InsertAsync, UpdateAsync e DeleteAsync, è possibile eseguire una query, inserire, aggiornare ed eliminare record, rispettivamente. Questi sono tutti i metodi generici, pertanto è possibile scrivere un livello di accesso ai dati che può essere riutilizzato per funzionare con qualsiasi oggetto che deriva da TableBase. Detto ciò, nel progetto libreria di classi Portabile, aggiungere una cartella DataAccess e un file denominato DataManager.cs all'interno. Prima di scrivere la classe DataManager, aggiungere il codice seguente al file App.xaml.cs, in modo che una variabile di tipo DataManager è disponibile a livello di app:
internal static DataManager DataManager;
public App()
{
InitializeComponent();
DataManager = new DataManager(Constants.BaseUrl);
MainPage = new MyBookshelf.MainPage();
}
Figura 10 Mostra il codice per la classe DataManager.
Livello di accesso nella figura 10, l'implementazione di un tipo di dati
using Microsoft.WindowsAzure.MobileServices;
using MyBookshelf.Model;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace MyBookshelf.DataAccess
{
public class DataManager
{
public MobileServiceClient Client { get; set; }
public DataManager(string serviceUrl)
{
Client = new MobileServiceClient(serviceUrl);
}
public async Task SaveAsync<T>(IEnumerable<T> items) where T : TableBase
{
var table = this.Client.GetTable<T>();
foreach (T item in items)
{
if (item.Id == null)
{
item.Id = Guid.NewGuid().ToString("N");
await table.InsertAsync(item);
}
else
{
await table.UpdateAsync(item);
}
}
}
public async Task<IEnumerable<T>> LoadAsync<T>(string userId)
where T : TableBase
{
var table = this.Client.GetTable<T>();
var query = await table.Where(t => t.UserId == userId).ToEnumerableAsync();
return query;
}
}
}
Nel metodo SaveAsync, la proprietà Id è utilizzata per rilevare se un elemento è nuovo o esistente. Se è nuovo, viene generato un nuovo GUID e l'inserimento dell'elemento; in caso contrario, viene aggiornato. In LoadAsync, la proprietà UserId è utilizzata per filtrare l'elenco di elementi di base sull'utente corrente. Questo è possibile a causa di vincoli generici, che consentono di lavorare con qualsiasi oggetto che deriva da TableBase entrambi i metodi e generics.
L'elemento ViewModel
Una classe ViewModel sarà responsabile per l'esposizione di una raccolta di documentazione, i comandi che consentono di lavorare con gli elementi libro e la logica di accesso. Aggiungere un nuovo file denominato BookViewModel.cs in una sottocartella denominata ViewModel nel progetto libreria di classi Portabile, quindi scrivere il codice illustrato in figura 11.
Figura 11 esposizione di un elemento ViewModel
using Microsoft.WindowsAzure.MobileServices;
using MyBookshelf.Authentication;
using MyBookshelf.Model;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MyBookshelf.ViewModel
{
public class BookViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private bool isBusy;
public bool IsBusy
{
get
{
return isBusy;
}
set
{
isBusy = value; OnPropertyChanged();
}
}
private bool isUserAuthenticated;
public bool IsUserAuthenticated
{
get
{
return isUserAuthenticated;
}
set
{
isUserAuthenticated = value; OnPropertyChanged();
}
}
private string userId;
public string UserId
{
get
{
return userId;
}
set
{
userId = value; OnPropertyChanged();
}
}
private ObservableCollection<Book> books;
public ObservableCollection<Book> Books
{
get
{
return books;
}
set
{
books = value; OnPropertyChanged();
}
}
private Book selectedBook;
public Book SelectedBook
{
get
{
return selectedBook;
}
set
{
selectedBook = value; OnPropertyChanged();
}
}
public BookViewModel()
{
this.Books = new ObservableCollection<Book>();
this.IsBusy = false;
}
public Command SaveBooks
{
get
{
return new Command(async () =>
{
if (IsUserAuthenticated)
{
this.IsBusy = true;
await App.DataManager.SaveAsync(this.Books);
this.IsBusy = false;
}
});
}
}
public Command LoadBooks
{
get
{
return new Command(async () =>
{
if (IsUserAuthenticated)
{
this.IsBusy = true;
var listOfBooks = await App.DataManager.LoadAsync<Book>(UserId);
this.Books = new ObservableCollection<Book>(listOfBooks);
this.IsBusy = false;
}
});
}
}
public Command AddNewBook
{
get
{
return new Command(() =>
this.Books.Add(new Book { UserId = this.UserId }));
}
}
public async Task LoginAsync()
{
var authenticator = DependencyService.Get<IAuthentication>();
var user = await authenticator.LoginAsync(App.DataManager.Client,
MobileServiceAuthenticationProvider.MicrosoftAccount);
if (user == null)
{
IsUserAuthenticated = false;
return;
}
else
{
UserId = user.UserId;
IsUserAuthenticated = true;
return;
}
}
}
}
Si noti come il metodo LoginAsync richiama l'implementazione specifica della piattaforma dell'interfaccia IAuthentication tramite il metodo DependencyService.Get, passando l'istanza della classe MobileServiceClient e il provider di autenticazione corrente attivo.
L'interfaccia utente
L'interfaccia utente per l'applicazione di esempio è molto semplice. Se un controllo ListView con associazione dati a un'istanza del ViewModel, un ActivityIndicator verrà visualizzato l'indicatore di stato quando l'app è occupato e alcuni pulsanti sono associati a dati ai comandi di ViewModel. Il codice XAML per l'interfaccia utente viene visualizzato figura 12 e passa nel file MainPage. Xaml.
Figura 12 l'interfaccia utente per il metodo Main pagina
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyBookshelf"
x:Class="MyBookshelf.MainPage">
<Grid BindingContext="{Binding}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
<RowDefinition />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label Text="My Bookshelf" FontSize="Large" Margin="5"/>
<ActivityIndicator x:Name="Indicator1" IsRunning="{Binding IsBusy}"
IsVisible="{Binding IsBusy}" Grid.Row="1"/>
<ListView HasUnevenRows="True" ItemsSource="{Binding Books}"
x:Name="BooksListView"
Grid.Row="2" SelectedItem="{Binding SelectedBook}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Frame OutlineColor="Blue">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Entry Placeholder="Title" Text="{Binding Title}"/>
<Entry Placeholder="Author" Text="{Binding Author}"
Grid.Row="1"/>
</Grid>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="3" Orientation="Horizontal"
BindingContext="{Binding}">
<Button Text="Load" x:Name="LoadButton" Command="{Binding LoadBooks}"/>
<Button Text="Save" x:Name="SaveButton" Command="{Binding SaveBooks}"/>
<Button Text="Add" x:Name="AddButton" Command="{Binding AddNewBook}"/>
</StackLayout>
</Grid>
</ContentPage>
Nel codebehind, è necessario assegnare un'istanza di ViewModel al contesto di associazione della pagina e sarà necessario controllare che tale account di accesso è necessario ogni volta che l'utente apre la pagina. Il codice è il seguente:
private BookViewModel ViewModel { get; set; }
public MainPage()
{
InitializeComponent();
this.ViewModel = new BookViewModel();
this.BindingContext = this.ViewModel;
}
protected async override void OnAppearing()
{
base.OnAppearing();
if (this.ViewModel.IsUserAuthenticated == false) await this.ViewModel.LoginAsync();
}
LoginAsync viene chiamato all'interno del metodo OnAppearing perché consente di chiamare i metodi asincroni in fase di inizializzazione di pagina e ogni volta che viene visualizzata una pagina.
Configurazione dell'applicazione per Analitica e la segnalazione di arresto anomalo del sistema
Con una singola riga di codice, è possibile configurare l'app xamarin. Forms per l'invio di report di utilizzo e di arresto anomalo del sistema per il centro di dispositivi mobili di Visual Studio. In App.xaml.cs, eseguire l'override del metodo OnStart come indicato di seguito:
// Requires using directives for Microsoft.Azure.Mobile,
// Microsoft.Azure.Mobile.Analytics and Microsoft.Azure.Mobile.Crashes
protected override void OnStart()
{
MobileCenter.Start("android={Your Android App secret here};" +
"ios={Your iOS App secret here}",
typeof(Analytics), typeof(Crashes));
}
Come si può notare, è possibile abilitare i progetti di Android e iOS, specificando il segreto dell'applicazione, che sono disponibili nella pagina Guida introduttiva del centro di dispositivi mobili. Tutti i report sono disponibili nelle pagine di Analitica e gli arresti anomali del centro di dispositivi mobili.
Test dell'applicazione
Se si esegue ora l'app di esempio, la prima cosa che verrà visualizzato è la schermata di accesso per l'account Microsoft. Una volta che si è stati autenticati, sarà possibile visualizzare, modificare e salvare l'elenco di libri, come illustrato in figura 13.
.png "L'App di esempio in esecuzione su Android")
Figura 13 l'App di esempio in esecuzione su Android
Naturalmente, un risultato simile apparirà nei dispositivi iOS. Se si tenta di aggiungere e salvare alcuni elementi e quindi passare alla pagina di tabella nel centro di dispositivi mobili di Visual Studio, si noterà una griglia che mostra i record. Ulteriori miglioramenti per il codice potrebbero comportare l'implementazione di sincronizzazione non in linea con il Client Mobile di Azure SDK e la gestione degli errori più specifici nel caso in cui l'utente non autenticato.
Conclusioni
Centro di dispositivi mobili di Visual Studio semplifica notevolmente la modalità di implementazione di servizi back-end per le App per dispositivi mobili, quali l'autenticazione e le tabelle, non solo con un'interfaccia utente semplice, ma anche impostando la maggior parte dell'infrastruttura di supporto in App per dispositivi mobili di Azure del servizio per conto dell'utente. Visitare spesso l'area di dispositivi mobili per verificare la disponibilità di nuove funzionalità.
Alessandro Del Soleè stato MVP di Microsoft a partire da 2008. Affidato MVP di cinque volte l'anno, Davide è l'autore di molti libri, eBook, video dimostrativi e articoli sullo sviluppo per .NET con Visual Studio. CANC unico funziona come un senior sviluppatori di .NET, porre l'attenzione su .NET e lo sviluppo di app per dispositivi mobili, di consulenza e formazione. Seguire quest'ultimo su Twitter: @progalex.
Grazie al seguente esperto tecnico per la revisione dell'articolo: Adrian Hall
Adrian Hall è l'entità Product Manager di App mobili di Azure e le funzionalità di back-end mobile in Mobile Center. Adrian è anche un relatore conferenza frequenti, l'autore di "Sviluppare Cloud connesso Mobile App con Xamarin e Microsoft Azure" (disponibile all'indirizzo https://aka.ms/zumobook), blog e video su diversi in App mobili di Azure.