Creare un'app Windows con un back-end di Azure

  • Articolo

Panoramica

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app UWP (Universal Windows Platform). Per altre informazioni, vedere Informazioni sulle app per dispositivi mobili. Di seguito sono riportate alcune schermate dell'app completata:

App desktop completata

Il completamento di questa esercitazione costituisce un prerequisito per tutte le altre esercitazioni delle app per dispositivi mobili relative ad app UWP.

Prerequisiti

Per completare l'esercitazione, sono necessari gli elementi seguenti:

  • Un account Azure attivo. Se non è disponibile un account, è possibile iscriversi per accedere a una versione di valutazione di Azure e ottenere un massimo di 10 app per dispositivi mobili gratuite che potranno essere usate anche dopo il termine del periodo di valutazione. Per informazioni dettagliate, vedere la pagina relativa alla versione di valutazione gratuita di Azure.
  • Windows 10.
  • Visual Studio Community 2017.
  • Familiarità con lo sviluppo di app UWP. Vedere la documentazione di UWP per informazioni su come avviare la configurazione per creare app UWP.

Creare un nuovo back-end dell'app per dispositivi mobili di Azure

Per creare un nuovo back-end dell'app per dispositivi mobili, attenersi alla procedura seguente.

  1. Accedere al portale di Azure.

  2. Fare clic su Crea una risorsa.

  3. Nella casella di ricerca digitare App Web.

  4. Nell'elenco dei risultati selezionare App Web dal Marketplace.

  5. Selezionare la sottoscrizione e il gruppo di risorse (selezionare un gruppo di risorse esistente o crearne uno nuovo (usando lo stesso nome dell'app).

  6. Scegliere un nome univoco dell'app Web.

  7. Scegliere l'opzione Pubblica predefinita come Codice.

  8. Nello stack di runtime è necessario selezionare una versione in ASP.NET o Node. Se si sta creando un back-end .NET, selezionare una versione in ASP.NET. In caso contrario, se si punta a un'applicazione basata su Node, selezionare una delle versioni da Node.

  9. Selezionare il sistema operativo corretto, Linux o Windows.

  10. Selezionare l'area in cui si vuole distribuire questa app.

  11. Selezionare il servizio app piano appropriato e premere Rivedi e crea.

  12. In Gruppo di risorse selezionare un gruppo di risorse esistente oppure crearne uno nuovo usando lo stesso nome dell'app.

  13. Fare clic su Crea. Prima di procedere, attendere il completamento della distribuzione del servizio. Osservare l'icona di notifica (a forma di campana) nell'intestazione del portale per informazioni sugli aggiornamenti dello stato.

  14. Al termine della distribuzione, fare clic sulla sezione Dettagli distribuzione e quindi fare clic sulla risorsa tipo Microsoft.Web/sites. Verrà visualizzata l'app Web servizio app appena creata.

  15. Fare clic sul pannello Configurazione in Impostazioni e nelle impostazioni dell'applicazione fare clic sul pulsante Nuova impostazione applicazione .

  16. Nella pagina Aggiungi/Modifica applicazione immettere Nome come MobileAppsManagement_EXTENSION_VERSION e Valore come più recente e premere OK.

Si è tutti impostati per usare questo servizio app'app Web appena creata come app Per dispositivi mobili.

Creare una connessione al database e configurare il progetto client e server

  1. Scaricare le guide introduttive dell'SDK client per le piattaforme seguenti:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    Nota

    Se si usa il progetto iOS, è necessario scaricare "azuresdk-iOS-*.zip" dalla versione più recente di GitHub. Decomprimere e aggiungere il MicrosoftAzureMobile.framework file alla radice del progetto.

  2. È necessario aggiungere una connessione al database o connettersi a una connessione esistente. Prima di tutto, determinare se si creerà un archivio dati o si userà uno esistente.

    • Creare un nuovo archivio dati: se si creerà un archivio dati, usare la guida introduttiva seguente:

      Guida introduttiva: Introduzione ai singoli database in Azure SQL Database

    • Origine dati esistente: seguire le istruzioni seguenti se si vuole usare una connessione di database esistente

      1. database SQL formato stringa di connessione -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} Il nome del server è disponibile nella pagina di panoramica per il database ed è in genere sotto forma di "server_name.database.windows.net". {port} in genere 1433. {your_catalogue} Nome del database. {your_username} Nome utente per accedere al database. {your_password} Password per accedere al database.

        Altre informazioni sul formato stringa di connessione SQL

      2. Aggiungere la stringa di connessione all'app per dispositivi mobili In servizio app, è possibile gestire le stringhe di connessione per l'applicazione usando l'opzione Configurazione nel menu.

        Per aggiungere una stringa di connessione:

        1. Fare clic sulla scheda Impostazioni applicazione .

        2. Fare clic su [+] Nuova stringa di connessione.

        3. Sarà necessario specificare Nome, Valore e Tipo per la stringa di connessione.

        4. Digitare Nome come MS_TableConnectionString

        5. Il valore deve essere la stringa di connessione creata nel passaggio prima.

        6. Se si aggiunge una stringa di connessione a un database SQL Azure scegliere SQLAzure in base al tipo.

  3. App per dispositivi mobili di Azure include SDK per .NET e back-end di Node.js.

    • Back-end Node.js

      Se si userà Node.js'app di avvio rapido, seguire le istruzioni riportate di seguito.

      1. Nella portale di Azure passare a Tabelle semplici, verrà visualizzata questa schermata.

        Tabelle semplici del nodo

      2. Assicurarsi che la stringa di connessione SQL sia già stata aggiunta nella scheda Configurazione . Selezionare quindi la casella di riconoscimento che sovrascriverà tutto il contenuto del sito e fare clic sul pulsante Crea tabella TodoItem .

        Configurazione di tabelle semplici del nodo

      3. In Tabelle semplici fare clic sul pulsante + Aggiungi .

        Pulsante Aggiungi tabelle facili del nodo

      4. Creare una TodoItem tabella con accesso anonimo.

        Tabelle facili del nodo Aggiungere tabella

    • Back-end .NET

      Se si userà l'app di avvio rapido .NET, seguire le istruzioni riportate di seguito.

      1. Scaricare il progetto del server .NET di App per dispositivi mobili di Azure dal repository azure-mobile-apps-quickstarts.

      2. Compilare il progetto di server .NET in locale in Visual Studio.

      3. In Visual Studio aprire Esplora soluzioni, fare clic con il pulsante destro del mouse sul ZUMOAPPNAMEService progetto, scegliere Pubblica, verrà visualizzata una Publish to App Service finestra. Se si lavora su Mac, vedere altri modi per distribuire l'app qui.

        Pubblicazione di Visual Studio

      4. Selezionare servizio app come destinazione di pubblicazione, quindi fare clic sul pulsantePubblica nella parte inferiore della finestra.

      5. Per prima cosa è necessario accedere a Visual Studio con la sottoscrizione di Azure. SubscriptionSelezionare , Resource Groupe quindi selezionare il nome dell'app. Quando si è pronti, fare clic su OK, verrà distribuito il progetto del server .NET in locale nel back-end di servizio app. Al termine della distribuzione, verrà eseguito il reindirizzamento al http://{zumoappname}.azurewebsites.net/ browser.

Eseguire il progetto client

  1. Aprire il progetto UWP.

  2. Passare alla portale di Azure e passare all'app per dispositivi mobili creata. Overview Nel pannello cercare l'URL che rappresenta l'endpoint pubblico per l'app per dispositivi mobili. Esempio: il nome sito per il nome dell'app "test123" sarà https://test123.azurewebsites.net.

  3. Aprire il file App.xaml.cs in questa cartella: windows-uwp-cs/ZUMOAPPNAME/. Il nome dell'applicazione è ZUMOAPPNAME.

  4. In App classe sostituire ZUMOAPPURL il parametro con l'endpoint pubblico precedente.

    public static MobileServiceClient MobileService = new MobileServiceClient("ZUMOAPPURL");

    diventa

    public static MobileServiceClient MobileService = new MobileServiceClient("https://test123.azurewebsites.net");

  5. Premere il tasto F5 per distribuire ed eseguire l'app.

  6. Nell'app digitare un testo significativo, ad esempio Complete the tutorial nella casella di testo Insert a TodoItem (Inserire TodoItem), quindi fare clic su Save (Salva).

    Desktop completo di guida introduttiva di Windows

    Verrà inviata una richiesta POST al nuovo back-end dell'app per dispositivi mobili ospitato in Azure.