Esercizio: creare la prima app .NET MAUI

Completato

In questo esercizio, si inizierà a compilare l'app .NET MAUI (Interfaccia utente dell'applicazione multipiattaforma) per la catena di negozi di alimentari. Si usa il modello per generare l'app predefinita ed eseguirla in Windows e nell'emulatore Android. In un esercizio successivo, l'app verrà modificata per personalizzare l'interfaccia utente e aggiungere le funzionalità richieste dall'app per la catena di alimentari.

Crea un nuovo progetto

1. Aprire Visual Studio e creare una nuova soluzione. Viene aperta la procedura guidata Nuovo progetto in Visual Studio.

   Suggerimento

   Assicurarsi di aver installato il carico di lavoro .NET MAUI con Visual Studio 2022 17.3 o versione successiva (preferibilmente v17.8 con .NET 8). Altre informazioni sono disponibili qui.

2. Selezionare il tipo di progetto MAUI, il modello di app .NET MAUI e quindi Avanti.

   

3. Nella pagina Configura il nuovo progetto assegnare al progetto il nome Phoneword e salvarlo nel percorso desiderato. Selezionare Avanti.

   

4. Selezionare .NET 8.0 (Supporto a lungo termine) nell'elenco a discesa Framework e quindi selezionare Crea per creare l'app.

Esaminare la struttura della soluzione

1. Nella finestra Esplora soluzioni espandere il progetto Phoneword. Espandere la cartella Risorse e le relative sottocartelle, quindi espandere i nodi App.xaml, AppShell.xaml e MainPage.xaml.

   

2. Nel progetto prendere nota degli elementi seguenti:

   • La cartella Resources contiene tipi di carattere, immagini e risorse condivisi utilizzati da tutte le piattaforme.

   • Il file MauiProgram.cs contiene il codice che configura l'app e specifica che la classe App deve essere utilizzata per eseguire l'applicazione.

   • Il file App.xaml.cs, costruttore per la classe App, crea una nuova istanza della classe AppShell, che viene quindi visualizzata nella finestra dell'applicazione.

   • Il file AppShell.xaml contiene il layout principale per l'applicazione e la pagina iniziale di MainPage.

   • Il file MainPage.xaml contiene il layout per la pagina. Questo layout include il codice XAML (Extensible Application Markup Language) per un pulsante con la didascalia Clicca qui e un'immagine che mostra il file dotnet_bot.png. Sono presenti anche altre due etichette.

   • Il file MainPage.xaml.cs contiene la logica dell'applicazione per la pagina. In particolare, la classe MainPage include un metodo denominato OnCounterClicked eseguito quando l'utente tocca il pulsante Click me.

Compilare ed eseguire l'applicazione in Windows

1. Nella barra degli strumenti di Visual Studio selezionare il profilo Computer Windows. Selezionare il framework .net8.0-windows nell'elenco a discesa di framework.

   

2. Scegliere Avvia debug dal menu Debug. Questa azione compila, distribuisce ed esegue l'app in Windows:

   

3. Verificare che la versione Windows dell'app si avvii. Selezionare più volte il pulsante Click me. Il testo del pulsante si aggiorna con il conteggio incrementato a ogni tocco.

   

4. Nel menu Visualizza selezionare Esplora soluzioni. Nella finestra Esplora soluzioni espandere il nodo MainPage.xaml e aprire il file code-behind MainPage.xaml.cs.

5. Nel metodo OnCounterClicked modificare l'istruzione che incrementa la variabile count per aggiungere 5 a questa variabile:

   private void OnCounterClicked(object sender, EventArgs e)
   {
       count+=5; // update this
   
       if (count == 1)
           CounterBtn.Text = $"Clicked {count} time";
       else
           CounterBtn.Text = $"Clicked {count} times";
   
       SemanticScreenReader.Announce(CounterBtn.Text);
   }
   

6. Nella barra degli strumenti di Visual Studio selezionare il pulsante Ricaricamento rapido:

   

7. Tornare all'app e selezionare il pulsante Click me. Verificare che il conteggio stia subendo un incremento di 5.

   Nota

   La funzionalità Ricaricamento rapido di Visual Studio consente di modificare il codice mentre l'app è in esecuzione in modalità debug. Non è necessario interrompere l'app per visualizzare le modifiche. Oltre a modificare il codice, è anche possibile apportare modifiche al markup XAML per una pagina e tali modifiche diventeranno visibili nell'app in esecuzione.

8. Chiudere l'app e tornare a Visual Studio.

Compilare ed eseguire l'applicazione in Android

1. Nella barra degli strumenti di Visual Studio selezionare il progetto Phoneword.

2. Scegliere Android nel menu Strumenti, quindi selezionare Gestione dispositivi Android. Se viene richiesto di consentire a Gestione dispositivi Android di apportare modifiche al computer, selezionare Sì.

   

3. Nella finestra Gestione dispositivi Android selezionare + Nuovo. Nella finestra Nuovo dispositivo selezionare il dispositivo di base Pixel 3a (+ Store), selezionare il sistema operativo API 30, quindi selezionare Crea. Attendere il download delle varie raccolte e la configurazione del dispositivo.

   Nota

   L'esempio in questo esercizio usa il dispositivo di base Pixel 3a (+ Store), ma è possibile usare dispositivi più recenti. Ad esempio, Pixel 5 - API 31 o Pixel 5 - API 34.

   

4. Dopo la creazione del dispositivo, tornare a Visual Studio.

5. Nella barra degli strumenti di Visual Studio, nell'elenco a discesa di configurazione Debug, selezionare il profilo Emulatori Android. Selezionare il dispositivo pixel_3a-api_30 creato.

   

6. Avviare il debug con il profilo pixel_3a-api_30. Questa azione compila, distribuisce ed esegue l'app nel dispositivo Android.

   

7. Quando l'app viene avviata nell'emulatore (quest'azione può richiedere alcuni minuti), selezionare il pulsante Clicca qui per verificare che l'app venga eseguita esattamente nello stesso modo in cui è stata eseguita in Windows.

   

8. Tornare in Visual Studio e interrompere il debug.