Előző

Következő

Gyakorlat: Az első .NET MAUI-alkalmazás létrehozása

Befejeződött

Ebben a gyakorlatban elkezdi létrehozni a .NET MAUI alkalmazást a boltlánchoz. Az alapértelmezett alkalmazás létrehozásához és futtatásához használja a sablont Windows rendszeren és az Android emulátorban. Ezt az alkalmazást egy későbbi gyakorlatban fogja módosítani, hogy testre szabja a felhasználói felületet, és hozzáadja az áruházlánc alkalmazás által igényelt funkciókat.

Új projekt létrehozása

1. Nyissa meg a Visual Studiót, és hozzon létre egy új megoldást. Ez a művelet megnyitja az Új projekt varázslót a Visual Studióban.

   Tipp.

   Győződjön meg arról, hogy a .NET MAUI számítási feladat telepítve van a Visual Studio 2022 17.3-s vagy újabb verziójával (a .NET 8-hoz előnyben részesített 17.8-at). További információ itt.

2. Válassza ki a MAUI-projekt típusát, válassza a .NET MAUI-alkalmazássablont, és válassza a Tovább lehetőséget.

   

3. Az új projekt konfigurálása lapon nevezze el a projektet Telefon szónak, és mentse a kívánt helyre. Válassza a Következő lehetőséget.

   

4. Válassza a .NET 8.0 (hosszú távú támogatás) lehetőséget a Keretrendszer legördülő listában, majd válassza a Létrehozás lehetőséget az alkalmazás létrehozásához.

A megoldás szerkezetének vizsgálata

1. Az Megoldáskezelő ablakban bontsa ki a Telefon word projektet. Bontsa ki az Erőforrások mappát és almappáit, bontsa ki az App.xaml csomópontot, az AppShell.xaml csomópontot és a MainPage.xaml csomópontot.

   

2. A projektben jegyezze fel a következő elemeket:

   • Az Erőforrások mappa az összes platform által használt megosztott betűtípusokat, képeket és eszközöket tartalmazza.

   • A MauiProgram.cs fájl tartalmazza az alkalmazást konfiguráló kódot, és meghatározza, hogy az alkalmazásosztályt kell használni az alkalmazás futtatásához.

   • Az App.xaml.cs fájl, az Alkalmazásosztály konstruktora létrehozza az AppShell-osztály új példányát, amely ezután megjelenik az alkalmazásablakban.

   • Az AppShell.xaml fájl tartalmazza az alkalmazás fő elrendezését és a MainPage kezdőoldalát.

   • A MainPage.xaml fájl tartalmazza a lap elrendezését. Ez az elrendezés tartalmazza a gomb XAML-kódját a képaláírás Kattintson rám és egy képet, amely megjeleníti a dotnet_bot.png fájlt. Két másik címke is létezik.

   • A MainPage.xaml.cs fájl tartalmazza a lap alkalmazáslogikát. Pontosabban a MainPage osztály tartalmaz egy metódust OnCounterClicked , amely akkor fut, amikor a felhasználó a Kattintásra gombra koppint.

Az alkalmazás létrehozása és futtatása Windows rendszeren

1. A Visual Studio eszköztárán válassza ki a Windows Machine-profilt . Válassza ki a .net6.0-windows keretrendszert a keretrendszerek legördülő listájának listájából.

   

2. Válassza a Hibakeresés menü Hibakeresés indítása pontját. Ez a művelet létrehozza, üzembe helyezi és futtatja az alkalmazást Windows rendszeren:

   

3. Ellenőrizze, hogy az alkalmazás Windows-verziója elindul-e. Kattintson többször a Kattintásra gombra. A gomb szövegének úgy kell frissülnie, hogy a szám minden koppintással növekszik.

   

4. A Nézet menüben válassza a Megoldáskezelő. Az Megoldáskezelő ablakban bontsa ki a MainPage.xaml csomópontot, és nyissa meg a MainPage.xaml.cs kód mögötti fájlt.

5. Az OnCounterClicked metódusban módosítsa azt az utasítást, amely növeli a darabszámváltozót, hogy ehelyett 5-öt adjon hozzá ehhez a változóhoz:

   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. A Visual Studio eszköztárán válassza a Gyorstöltés gombot:

   

7. Váltson vissza az alkalmazásra, és válassza a Kattintásra gombot. Ellenőrizze, hogy a szám most 5-zel lett-e növelve.

   Megjegyzés:

   A Visual Studio gyakori elérésű újratöltés funkciójával módosíthatja a kódot, miközben az alkalmazás hibakeresési módban fut. A módosítások megtekintéséhez nem kell leállítania az alkalmazást. A kód módosítása mellett módosíthatja a lap XAML-jelölését is, és ezek a módosítások a futó alkalmazásban is láthatók lesznek.

8. Zárja be az alkalmazást, és térjen vissza a Visual Studióba.

Az alkalmazás létrehozása és futtatása Androidon

1. A Visual Studio eszköztárán válassza ki a Telefon word projektet.

2. Az Eszközök menüben válassza az Android, majd az Android Eszközkezelő lehetőséget. Ha a rendszer arra kéri, hogy hagyja, hogy az Android Eszközkezelő módosítsa a számítógépet, válassza az Igen lehetőséget.

   

3. Az Android Eszközkezelő ablakban válassza az + Új lehetőséget. Az Új eszköz ablakban válassza ki a Pixel 3a (+ Store) alapeszközt, válassza ki az API 30 operációs rendszert, és válassza a Létrehozás lehetőséget. Várjon, amíg a különböző kódtárak letöltődnek, és az eszköz konfigurálva van.

   

4. Az eszköz létrehozásakor térjen vissza a Visual Studióba.

5. A Visual Studio eszköztárának Hibakeresési konfiguráció legördülő listájában válassza ki az Android Emulators-profilt, és válassza ki a pixel_3a-api_30 eszközt. Ez az imént létrehozott eszköz.

   

6. Kezdje el a hibakeresést a pixel_3a-api_30 profillal. Ez a művelet létrehozza, üzembe helyezi és futtatja az alkalmazást az Android-eszközön.

   

7. Amikor az alkalmazás elindul az emulátoron (ez több percet is igénybe vehet), válassza a Kattintásra gombot, és ellenőrizze, hogy az alkalmazás pontosan ugyanúgy fut-e, mint a Windowsban.

   

8. Térjen vissza a Visual Studióba, és állítsa le a hibakeresést.

Folytatás