Condividi tramite

Creare un'app MAUI .NET con App per dispositivi mobili di Azure

  • Articolo

Nota

Questo prodotto viene ritirato. Per una sostituzione dei progetti che usano .NET 8 o versione successiva, vedere la libreria datasync di Community Toolkit.

Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili multipiattaforma usando .NET MAUI e un back-end di app per dispositivi mobili di Azure. Si creerà sia un nuovo back-end dell'app per dispositivi mobili che un semplice elenco Todo'app che archivia i dati delle app in Azure.

È necessario completare questa esercitazione prima di altre esercitazioni MAUI di .NET usando la funzionalità App per dispositivi mobili nel servizio app di Azure.

Prerequisiti

Per completare questa esercitazione, è necessario:

  • Visual Studio 2022 con i carichi di lavoro seguenti:
    • ASP.NET e sviluppo Web
    • Sviluppo di Azure
    • Sviluppo di dispositivi mobili con .NET
  • Un account azure .
  • Interfaccia della riga di comando di Azure .
    • Accedere con az login e selezionare una sottoscrizione appropriata prima di iniziare.
  • (Facoltativo) L'interfaccia della riga di comando per sviluppatori di Azure .
  • Un dispositivo virtuale Android , con le impostazioni seguenti:
    • Telefono: qualsiasi immagine del telefono: usiamo pixel 5 per i test.
    • Immagine di sistema: Android 11 (API 30 con API Google)
  • Un Mac disponibile (per la compilazione e l'esecuzione della versione iOS):
    • Installare XCode
    • Aprire Xcode dopo l'installazione in modo che possa aggiungere eventuali componenti aggiuntivi necessari.
    • Dopo l'apertura, selezionare Preferenze XCode...>Componentie installare un simulatore iOS.
    • Seguire la guida per Associare a Mac.

Per compilare la versione di iOS è necessario un mac.

È possibile completare questa esercitazione in Mac o Windows.

Scaricare l'app di esempio

  1. Aprire il repository azure-mobile-apps nel browser.

  2. Aprire l'elenco a discesa codice , quindi selezionare Download ZIP.

    Screenshot del menu Codice in GitHub.

  3. Al termine del download, aprire la Download cartella e individuare il file azure-mobile-apps-main.zip.

  4. Fare clic con il pulsante destro del mouse sul file scaricato e selezionare Estrai tutto....

    Se si preferisce, è possibile usare PowerShell per espandere l'archivio:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip

Gli esempi si trovano nella esempi cartella all'interno dei file estratti. L'esempio per la guida introduttiva è denominato TodoApp. È possibile aprire l'esempio in Visual Studio facendo doppio clic sul file TodoApp.sln.

Screenshot di Esplora file per la soluzione.

Distribuire il back-end in Azure

Nota

Se il back-end è già stato distribuito da un'altra guida introduttiva, è possibile usare lo stesso back-end e ignorare questo passaggio.

Per distribuire il servizio back-end, si:

  • Effettuare il provisioning di un servizio app di Azure e di un database SQL di Azure in Azure.
  • Usare Visual Studio per distribuire il codice del servizio nel servizio app di Azure appena creato.

Usare l'interfaccia della riga di comando per sviluppatori di Azure per completare tutti i passaggi

L'esempio TodoApp è configurato per supportare l'interfaccia della riga di comando per sviluppatori di Azure. Per completare tutti i passaggi (provisioning e distribuzione):

  1. Installare l'interfaccia della riga di comando per sviluppatori di Azure.
  2. Aprire un terminale e passare alla cartella contenente il file TodoApp.sln. Questa directory contiene anche azure.yaml.
  3. Eseguire azd up.

Se non è già stato eseguito l'accesso ad Azure, il browser viene avviato per chiedere di eseguire l'accesso. Verrà quindi richiesto di usare una sottoscrizione e un'area di Azure. L'interfaccia della riga di comando per sviluppatori di Azure effettua quindi il provisioning delle risorse necessarie e distribuisce il codice del servizio nell'area di Azure e nella sottoscrizione desiderata. Infine, l'interfaccia della riga di comando per sviluppatori di Azure scrive un file di Constants.cs appropriato.

È possibile eseguire il comando azd env get-values per visualizzare le informazioni di autenticazione SQL se si vuole accedere direttamente al database.

Se sono stati completati i passaggi con l'interfaccia della riga di comando per sviluppatori di Azure, procedere con il passaggio successivo. Se non si vuole usare l'interfaccia della riga di comando per sviluppatori di Azure, procedere con i passaggi manuali.

Creare risorse in Azure.

  1. Aprire un terminale e passare alla cartella contenente il file TodoApp.sln. Questa directory contiene anche azuredeploy.json.

  2. Assicurarsi di aver eseguito l'accesso e aver selezionato una sottoscrizione usando l'interfaccia della riga di comando di Azure.

  3. Creare un nuovo gruppo di risorse:

    az group create -l westus -g quickstart

    Questo comando crea il gruppo di risorse quickstart nell'area Stati Uniti occidentali. È possibile selezionare qualsiasi area desiderata, fornendo la possibilità di creare risorse in tale area. Assicurarsi di usare lo stesso nome e la stessa area ovunque siano menzionati in questa esercitazione.

  4. Creare le risorse usando una distribuzione di gruppo:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234

    Selezionare una password complessa per la password dell'amministratore SQL. Sarà necessario in un secondo momento quando si accede al database.

  5. Al termine della distribuzione, ottenere le variabili di output perché contengono informazioni importanti necessarie in un secondo momento:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs

    Un output di esempio è:

    Screenshot dei risultati della riga di comando.

  6. Prendere nota di ognuno dei valori negli output per usarli in un secondo momento.

Pubblicare il codice del servizio

Aprire il TodoApp.sln in Visual Studio.

  1. Nel riquadro di destra selezionare Esplora soluzioni.

  2. Fare clic con il pulsante destro del mouse sul progetto TodoAppService.NET6, quindi selezionare Imposta come progetto di avvio.

  3. Nel menu in alto selezionare Compila>Pubblica todoAppService.NET6.

  4. Nella finestra Pubblica selezionare Destinazione: Azure, quindi premere Avanti.

    Screenshot della finestra di selezione di destinazione.

  5. Selezionare Destinazione specifica: servizio app di Azure (Windows), quindi premere Avanti.

    Screenshot della finestra di selezione di destinazione specifica.

  6. Se necessario, accedere e selezionare un nome di sottoscrizione appropriato.

  7. Verificare che Visualizzazione sia impostata su gruppo di risorse.

  8. Espandere il gruppo di risorse quickstart, quindi selezionare il servizio app creato in precedenza.

    Screenshot della finestra di selezione del servizio app.

  9. Selezionare Fine.

  10. Al termine del processo di creazione del profilo di pubblicazione, selezionare Chiudi.

  11. Individuare il dipendenze del servizio e selezionare i tre puntini accanto al database di SQL Server, quindi selezionare Connetti.

    Screenshot che mostra la selezione della configurazione del server S Q L.

  12. Selezionare database SQL di Azuree quindi selezionare Avanti.

  13. Selezionare il database di avvio rapido e quindi selezionare Avanti.

    Screenshot della finestra di selezione del database.

  14. Compilare il modulo usando il nome utente SQL e la password presenti negli output della distribuzione, quindi selezionare Avanti.

    Screenshot della finestra delle impostazioni del database.

  15. Selezionare Fine.

  16. Al termine, selezionare Chiudi.

  17. Selezionare Pubblica per pubblicare l'app nel servizio app di Azure creato in precedenza.

    Screenshot che mostra il pulsante Pubblica.

  18. Dopo la pubblicazione del servizio back-end, viene aperto un browser. Aggiungere /tables/todoitem?ZUMO-API-VERSION=3.0.0 all'URL:

    Screenshot che mostra l'output del browser dopo la pubblicazione del servizio.

Configurare l'app di esempio

L'applicazione client deve conoscere l'URL di base del back-end in modo che possa comunicare con esso.

Se è stato usato azd up per effettuare il provisioning e distribuire il servizio, il file di Constants.cs è stato creato automaticamente ed è possibile ignorare questo passaggio.

  1. Espandere il progetto TodoApp.Data.

  2. Fare clic con il pulsante destro del mouse sul progetto di TodoApp.Data, quindi selezionare Aggiungi classe>....

  3. Immettere Constants.cs come nome, quindi selezionare Aggiungi.

    Screenshot dell'aggiunta del file Constants.cs al progetto.

  4. Aprire il file Constants.cs.example e copiare il contenuto (CTRL-A, seguito da Ctrl-C).

  5. Passare a Constants.cs, evidenziare tutto il testo (Ctrl-A), quindi incollare il contenuto dal file di esempio (Ctrl-V).

  6. Sostituire il https://APPSERVICENAME.azurewebsites.net con l'URL back-end del servizio.

    namespace TodoApp.Data
{
    public static class Constants
    {
        /// <summary>
        /// The base URI for the Datasync service.
        /// </summary>
        public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
    }
}

    È possibile ottenere l'URL back-end del servizio dalla scheda Pubblica. Assicurarsi di usare un URL https.

  7. Salvare il file. (Ctrl-S).

Compilare ed eseguire l'app Android

  1. In Esplora soluzioni espandere la cartella maui.

  2. Fare clic con il pulsante destro del mouse sul progetto di TodoApp.MAUI e selezionare Imposta come progetto di avvio.

  3. Nella barra superiore selezionare un emulatore Android appropriato:

    Screenshot che mostra come impostare la configurazione di esecuzione per un'app dot net maui per Android.

  4. Se non sono disponibili emulatori Android, è necessario crearne uno. Per altre informazioni, vedere configurazione dell'emulatore Android. Per creare un nuovo emulatore Android:

    • Selezionare strumenti >Android>Android Device Manager.
    • Selezionare + Nuovo.
    • Selezionare le opzioni seguenti sul lato sinistro:
      • Nome: quickstart
      • Dispositivo di base: pixel 5
      • Processore: x86_64
      • Sistema operativo: Android 11.0 - API 30
      • API Google: checked
    • Selezionare Crea.
    • Se necessario, accettare il contratto di licenza. L'immagine verrà quindi scaricata.
    • Quando viene visualizzato il pulsante start , premere Avvia.
    • Se viene richiesto di Hyper-V'accelerazione hardware, leggere la documentazione per abilitare l'accelerazione hardware prima di continuare. L'emulatore sarà lento senza abilitare l'accelerazione hardware.

    Mancia

    Avviare l'emulatore Android prima di continuare. A tale scopo, aprire Gestione dispositivi Android e premere Start accanto all'emulatore scelto.

  5. Premere F5 per compilare ed eseguire il progetto.

Dopo l'avvio dell'app, verrà visualizzato un elenco vuoto e una casella di testo per aggiungere elementi nell'emulatore. Si può:

  • Immettere un testo nella casella, quindi premere INVIO per inserire un nuovo elemento.
  • Selezionare un elemento per impostare o deselezionare il flag completato.
  • Premere l'icona di aggiornamento per ricaricare i dati dal servizio.

Screenshot dell'app Android in esecuzione che mostra l'elenco attività.

Compilare ed eseguire l'app di Windows

  1. In Esplora soluzioni espandere la cartella maui.

  2. Fare clic con il pulsante destro del mouse sul progetto di TodoApp.MAUI e selezionare Imposta come progetto di avvio.

  3. Nella barra superiore selezionare Computer Windows.

    Screenshot che mostra come impostare la configurazione di esecuzione per un'app dot net maui per windows.

  4. Premere F5 per compilare ed eseguire il progetto.

Una volta avviata l'app, verrà visualizzato un elenco vuoto e una casella di testo per aggiungere elementi. Si può:

  • Immettere un testo nella casella, quindi premere INVIO per inserire un nuovo elemento.
  • Selezionare un elemento per impostare o deselezionare il flag completato.
  • Premere l'icona di aggiornamento per ricaricare i dati dal servizio.

Screenshot dell'app windows in esecuzione che mostra l'elenco attività.

Passaggi successivi

Continuare l'esercitazione aggiungendo l'autenticazione all'app.