Creare un'app Xamarin.Forms con App per dispositivi mobili di Azure
Questa esercitazione illustra come aggiungere un servizio back-end basato sul cloud a un'app per dispositivi mobili multipiattaforma usando Xamarin.Forms e un back-end dell'app per dispositivi mobili di Azure. Si creerà sia un nuovo back-end dell'app per dispositivi mobili che una semplice app elenco Todo che archivia i dati delle app in Azure.
È necessario completare questa esercitazione prima di altre esercitazioni di Xamarin Forms usando la funzionalità App per dispositivi mobili nel servizio app Azure.
Prerequisiti
È possibile completare questa esercitazione in Mac o Windows. Per completare questa esercitazione è necessario:
- Visual Studio 2022 con i carichi di lavoro seguenti.
- Sviluppo ASP.NET e Web
- Sviluppo di Azure
- Sviluppo di applicazioni per 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.
- Accedere con
- (Facoltativo) 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)
Se si compila l'edizione iOS dell'app, è necessario disporre di un Mac disponibile:
- Installare XCode
- Aprire Xcode dopo l'installazione in modo che possa aggiungere eventuali componenti aggiuntivi necessari.
- Dopo l'apertura, selezionare Preferenze XCode...>Componenti e installare un simulatore iOS.
- Se si completa l'esercitazione su Windows, seguire la guida a Associa a Mac.
Scaricare l'app di esempio
Aprire il repository azure-mobile-apps nel browser.
Aprire l'elenco a discesa Codice , quindi selezionare Scarica ZIP.
Al termine del download, aprire la cartella Download e individuare il
azure-mobile-apps-main.zip
file.Fare clic con il pulsante destro del mouse sul file scaricato e scegliere 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 cartella samples all'interno dei file estratti. L'esempio per la guida introduttiva è denominato TodoApp
. È possibile aprire l'esempio in Visual Studio facendo doppio clic sul TodoApp.sln
file.
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 Azure e di database SQL di Azure in Azure.
- Usare Visual Studio per distribuire il codice del servizio nel servizio app 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):
- Installare l'interfaccia della riga di comando per sviluppatori di Azure.
- Aprire un terminale e passare alla cartella contenente il
TodoApp.sln
file. Questa directory contieneazure.yaml
anche . - 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 appropriato Constants.cs
.
È possibile eseguire il azd env get-values
comando 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.
Aprire un terminale e passare alla cartella contenente il
TodoApp.sln
file. Questa directory contieneazuredeploy.json
anche .Assicurarsi di aver eseguito l'accesso e aver selezionato una sottoscrizione usando l'interfaccia della riga di comando di Azure.
Creare un nuovo gruppo di risorse:
az group create -l westus -g quickstart
Questo comando crea il
quickstart
gruppo di risorse 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.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 di SQL Amministrazione istrator. Sarà necessario in un secondo momento quando si accede al database.
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 è:
Prendere nota di ognuno dei valori negli output per usarli in un secondo momento.
Pubblicare il codice del servizio
Aprire in TodoApp.sln
Visual Studio.
Nel riquadro di destra selezionare Esplora soluzioni.
Fare clic con il pulsante destro del mouse sul
TodoAppService.NET6
progetto, quindi scegliere Imposta come progetto di avvio.Nel menu in alto selezionare Compila>Pubblica TodoAppService.NET6.
Nella finestra Pubblica selezionare Destinazione: Azure, quindi premere Avanti.
Selezionare Destinazione specifica: app Azure Servizio (Windows) e quindi premere Avanti.
Se necessario, accedere e selezionare un nome di sottoscrizione appropriato.
Verificare che View sia impostato su Gruppo di risorse.
Espandere il
quickstart
gruppo di risorse, quindi selezionare il servizio app creato in precedenza.Selezionare Fine.
Al termine del processo di creazione del profilo di pubblicazione, selezionare Chiudi.
Individuare le dipendenze del servizio e selezionare i tre puntini accanto al database di SQL Server, quindi selezionare Connessione.
Selezionare database SQL di Azure, quindi selezionare Avanti.
Selezionare il database di avvio rapido e quindi selezionare Avanti.
Compilare il modulo usando il nome utente e la password SQL presenti negli output della distribuzione, quindi selezionare Avanti.
Selezionare Fine.
Al termine, selezionare Chiudi .
Selezionare Pubblica per pubblicare l'app nel servizio app Azure creato in precedenza.
Dopo la pubblicazione del servizio back-end, viene aperto un browser. Aggiungere
/tables/todoitem?ZUMO-API-VERSION=3.0.0
all'URL:
Configurazione dell'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 la distribuzione del servizio, ilConstants.cs
file è stato creato automaticamente ed è possibile ignorare questo passaggio.
Espandere il
TodoApp.Data
progetto.Fare clic con il pulsante destro del mouse sul
TodoApp.Data
progetto, quindi scegliere Aggiungi>classe....Immettere
Constants.cs
come nome e quindi selezionare Aggiungi.Aprire il
Constants.cs.example
file e copiare il contenuto (CTRL-A, seguito da CTRL-C).Passare a
Constants.cs
, evidenziare tutto il testo (CTRL-A), quindi incollare il contenuto dal file di esempio (CTRL-V).Sostituire con
https://APPSERVICENAME.azurewebsites.net
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 .
Salvare il file. (CTRL-S).
Compilare ed eseguire l'app Android
In Esplora soluzioni espandere la
xamarin-forms
cartella .Fare clic con il pulsante destro del mouse sul
TodoApp.Forms.Android
progetto e scegliere Imposta come progetto di avvio.Nella barra superiore selezionare Qualsiasi configurazione della CPU e la destinazione TodoApp.Forms.Android :
Se invece viene visualizzato l'emulatore Android, non è stato creato un emulatore Android. Per altre informazioni, vedere Configurazione dell'emulatore Android. Per creare un nuovo emulatore Android:
- Selezionare Strumenti>Android>Gestione dispositivi.
- 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: selezionata
- Nome:
- Seleziona 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 ottenere informazioni sull'accelerazione hardware Hyper-V, leggere la documentazione per abilitare l'accelerazione hardware prima di continuare. L'emulatore sarà lento senza abilitare l'accelerazione hardware.
Suggerimento
Avviare l'emulatore Android prima di continuare. A tale scopo, aprire il Gestione dispositivi Android e premere Avvia accanto all'emulatore scelto.
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. È possibile:
- 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.
Compilare ed eseguire l'app iOS
Nota
È NECESSARIO seguire la guida per Associare a Mac. Si riceveranno errori durante la compilazione o l'esecuzione di applicazioni iOS senza un Mac associato.
In Esplora soluzioni espandere la
xamarin-forms
cartella .Fare clic con il pulsante destro del mouse sul
TodoApp.Forms.iOS
progetto e scegliere Imposta come progetto di avvio.Nella barra superiore selezionare i Telefono Configurazione del simulatore e la destinazione TodoApp.Forms.iOS:
Selezionare il simulatore i Telefono
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. È possibile:
- 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.
Risoluzione dei problemi
Il simulatore remoto fornito con Visual Studio 2022 non è compatibile con XCode 13.3. Verrà visualizzato il messaggio di errore seguente:
Per risolvere questo problema:
- Disabilitare il simulatore remoto (Strumenti/Opzioni/iOS Impostazioni/deselezionare Simulatore remoto in Windows). Se deselezionato, il simulatore verrà eseguito sul Mac anziché su Windows. È quindi possibile interagire con il simulatore direttamente sul Mac durante l'uso del debugger e così via in Windows.
- Disabilitare il simulatore remoto come sopra, in modo che il simulatore venga eseguito sul Mac. Usare quindi un'app desktop remoto per connettersi al desktop Mac da Windows. Le opzioni desktop remoto includono Devolutions Remote Desktop Manager (veloce e disponibile una versione gratuita) e i client VNC (più lenti e gratuiti).
- Usare un dispositivo fisico per eseguire il test anziché il simulatore. È possibile ottenere un profilo di provisioning gratuito per completare l'esercitazione sull'autenticazione.
Passaggi successivi
Continuare l'esercitazione aggiungendo l'autenticazione all'app.
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedereInvia e visualizza il feedback per