Azure Mobile Apps ile Xamarin.Forms uygulaması oluşturma

Bu öğreticide, Xamarin.Forms ve Azure mobil uygulaması arka ucu kullanarak platformlar arası bir mobil uygulamaya bulut tabanlı arka uç hizmetinin nasıl ekleneceği gösterilmektedir. Hem yeni bir mobil uygulama arka ucu hem de Azure'da uygulama verilerini depolayan basit bir Yapılacaklar listesi uygulaması oluşturacaksınız.

Azure Uygulaması Hizmeti'ndeki Mobile Apps özelliğini kullanarak diğer Xamarin Forms öğreticilerinden önce bu öğreticiyi tamamlamanız gerekir.

Önkoşullar

Bu öğreticiyi Mac veya Windows'da tamamlayabilirsiniz. Bu öğreticiyi tamamlamak için aşağıdakiler gerekir:

• Aşağıdaki iş yükleriyle Visual Studio 2022 .
  • ASP.NET ve web geliştirme
  • Azure geliştirme
  • .NET ile mobil Geliştirme
• Bir Azure hesabı.
• Azure CLI.
  • az login Ile oturum açın ve başlamadan önce uygun bir abonelik seçin.
• (İsteğe bağlı) Azure Geliştirici CLI'sı.
• Aşağıdaki ayarlara sahip bir Android Sanal Cihazı:
  • Telefon: Herhangi bir telefon görüntüsü - Test için Pixel 5'i kullanırız.
  • Sistem Görüntüsü: Android 11 (Google API'leri ile API 30)

Uygulamanın iOS sürümünü derlediyseniz, kullanılabilir bir Mac'iniz olmalıdır:

• XCode'u yükleme
• Xcode'u yükledikten sonra açın; böylece ek gerekli bileşenler ekleyebilir.
• Açıldıktan sonra XCode Tercihleri... seçeneğini belirleyin .>Bileşenler ve bir iOS simülatörü yükleyin.
• Windows'da öğreticiyi tamamlarsanız Mac ile Eşleştirme kılavuzunu izleyin.

Örnek uygulamayı indirme

1. Tarayıcınızda azure-mobile-apps deposunu açın.

2. Kod açılan listesini açın ve zip'i İndir'i seçin.

   

3. İndirme işlemi tamamlandıktan sonra İndirmeler klasörünüzü açın ve dosyayı bulunazure-mobile-apps-main.zip.

4. İndirilen dosyaya sağ tıklayın ve Tümünü Ayıkla... öğesini seçin.

   İsterseniz, arşivi genişletmek için PowerShell'i kullanabilirsiniz:

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

Örnekler, ayıklanan dosyaların içindeki samples klasöründe bulunur. Hızlı başlangıç örneği olarak adlandırılır TodoApp. Dosyayı çift tıklatarak örneği Visual Studio'da TodoApp.sln açabilirsiniz.

Arka ucu Azure'a dağıtma

Arka uç hizmetini dağıtmak için şunları yapacağız:

• Azure'a bir Azure Uygulaması Hizmeti ve Azure SQL Veritabanı sağlama.
• Hizmet kodunu yeni oluşturulan Azure Uygulaması Hizmetine dağıtmak için Visual Studio'yu kullanın.

Tüm adımları tamamlamak için Azure Geliştirici CLI'sini kullanma

TodoApp örneği, Azure Geliştirici CLI'sını destekleyecek şekilde yapılandırılmıştır. Tüm adımları (sağlama ve dağıtma) tamamlamak için:

1. Azure Geliştirici CLI'sını yükleyin.
2. Bir terminal açın ve dizini dosyayı içeren klasörle TodoApp.sln değiştirin. Bu dizin de içerir azure.yaml.
3. azd up'i çalıştırın.

Azure'da henüz oturum açmadıysanız tarayıcı, oturum açmanızı istemek için başlatılır. Daha sonra kullanmak üzere bir abonelik ve Azure bölgesi istenir. Ardından Azure Geliştirici CLI'si gerekli kaynakları sağlar ve hizmet kodunu seçtiğiniz Azure bölgesine ve aboneliğine dağıtır. Son olarak, Azure Geliştirici CLI'sı sizin için uygun Constants.cs bir dosya yazar.

Veritabanına doğrudan erişmek istediğinizde SQL kimlik doğrulama bilgilerini görmek için komutunu çalıştırabilirsiniz azd env get-values .

Azure Geliştirici CLI ile adımları tamamladıysanız sonraki adıma geçin. Azure Geliştirici CLI'sini kullanmak istemiyorsanız, el ile uygulanan adımlarla devam edin.

Azure'da kaynak oluşturma.

1. Bir terminal açın ve dizini dosyayı içeren klasörle TodoApp.sln değiştirin. Bu dizin de içerir azuredeploy.json.

2. Azure CLI kullanarak oturum açtığınızdan ve bir abonelik seçtiğinizden emin olun.

3. Yeni bir kaynak grubu oluşturun:

   az group create -l westus -g quickstart
   

   Bu komut, Batı ABD bölgesinde kaynak grubunu oluşturur quickstart . İstediğiniz bölgeyi seçerek orada kaynak oluşturabilirsiniz. Bu öğreticide bahsedilen her yerde aynı adı ve bölgeyi kullandığınızdan emin olun.

4. Grup dağıtımı kullanarak kaynakları oluşturun:

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

   SQL Yönetici istrator parolanız için güçlü bir parola seçin. Daha sonra veritabanına erişirken ihtiyacınız olacak.

5. Dağıtım tamamlandıktan sonra çıkış değişkenlerini alın, bunlar daha sonra ihtiyacınız olan önemli bilgileri barındırır:

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

   Örnek çıkış:

   

6. Çıkışlardaki değerlerin her birini daha sonra kullanmak üzere not edin.

Hizmet kodunu yayımlama

TodoApp.sln dosyasını Visual Studio'da açın.

1. Sağ bölmede Çözüm Gezgini'ni seçin.

2. Projeye sağ tıklayın TodoAppService.NET6 ve Başlangıç Projesi Olarak Ayarla'yı seçin.

3. Üstteki menüde Derleme>Yayımla TodoAppService.NET6'yı seçin.

4. Yayımla penceresinde Hedef: Azure'ı seçin ve İleri'ye basın.

   

5. Belirli hedef: hizmet (Windows) Azure Uygulaması'ı seçin ve İleri'ye basın.

   

6. Gerekirse oturum açın ve uygun bir Abonelik adı seçin.

7. Görünüm'un Kaynak grubu olarak ayarlandığından emin olun.

8. quickstart Kaynak grubunu genişletin, ardından daha önce oluşturulan App Service'i seçin.

   

9. Bitir'i seçin.

10. Yayımlama profili oluşturma işlemi tamamlandıktan sonra Kapat'ı seçin.

11. Hizmet Bağımlılıkları'nı bulun ve SQL Server Veritabanı'nın yanındaki üç noktayı seçin ve ardından Bağlan'ı seçin.

    

12. Azure SQL Veritabanı'ı ve ardından İleri'yi seçin.

13. Hızlı başlangıç veritabanını ve ardından İleri'yi seçin.

    

14. Dağıtımın çıktılarında yer alan SQL kullanıcı adı ve parolasını kullanarak formu doldurun ve İleri'yi seçin.

    

15. Bitir'i seçin.

16. Tamamlandığında Kapat'ı seçin.

17. Uygulamanızı daha önce oluşturduğunuz Azure Uygulaması Hizmeti'ne yayımlamak için Yayımla'yı seçin.

    

18. Arka uç hizmeti yayımlandıktan sonra bir tarayıcı açılır. URL'ye ekleyin /tables/todoitem?ZUMO-API-VERSION=3.0.0 :

    

Örnek uygulamayı yapılandırma

İstemci uygulamanızın onunla iletişim kurabilmesi için arka ucunuzun temel URL'sini bilmesi gerekir.

Hizmeti sağlamak ve dağıtmak için kullandıysanız azd up dosya Constants.cs sizin için oluşturulmuştur ve bu adımı atlayabilirsiniz.

1. TodoApp.Data Projeyi genişletin.

2. Projeye sağ tıklayınTodoApp.Data, ardından Sınıf Ekle...'yi>seçin.

3. Ad olarak girin Constants.cs ve Ekle'yi seçin.

   

4. Constants.cs.example Dosyayı açın ve içeriği kopyalayın (Ctrl-A ve ardından Ctrl-C).

5. öğesine Constants.csgeçin, tüm metni vurgulayın (Ctrl-A) ve ardından örnek dosyadaki içeriği yapıştırın (Ctrl-V).

6. değerini https://APPSERVICENAME.azurewebsites.net hizmetinizin arka uç URL'si ile değiştirin.

   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";
       }
   }
   

   Yayımla sekmesinden hizmetinizin arka uç URL'sini alabilirsiniz. Https URL'si kullandığınızdan emin olun.

7. Dosyayı kaydedin. (Ctrl-S).

Android uygulamasını derleme ve çalıştırma

1. Çözüm gezgininde klasörü genişletin xamarin-forms .

2. Projeye sağ tıklayın TodoApp.Forms.Android ve Başlangıç Projesi Olarak Ayarla'yı seçin.

3. Üst çubukta Herhangi bir CPU yapılandırması'nı ve TodoApp.Forms.Android hedefini seçin:

   

4. Bunun yerine Android Öykünücüsü'yü görürseniz bir Android öykünücüsü oluşturmamışsınızdır. Daha fazla bilgi için bkz . Android öykünücü kurulumu. Yeni bir Android öykünücüsü oluşturmak için:

   • Araçlar>Android Android>Aygıt Yöneticisi'ı seçin.
   • + Yeni'yi seçin.
   • Sol tarafta aşağıdaki seçenekleri belirleyin:
     • Ad: quickstart
     • Temel Cihaz: Piksel 5
     • İşlemci: x86_64
     • İşletim sistemi: Android 11.0 - API 30
     • Google API'leri: denetlendi
   • Oluştur'u belirleyin.
   • Gerekirse lisans sözleşmesini kabul edin. Ardından görüntü indirilir.
   • Başlangıç düğmesi göründüğünde Başlat'a basın.
   • Hyper-V donanım hızlandırması istenirse devam etmeden önce donanım hızlandırmayı etkinleştirmek için belgeleri okuyun. Öykünücü, donanım hızlandırmayı etkinleştirmeden yavaş olacaktır.

   İpucu

   Devam etmeden önce Android öykünücünüzü başlatın. Bunu yapmak için Android Aygıt Yöneticisi açıp seçtiğiniz öykünücünün yanındaki Başlat tuşuna basabilirsiniz.

5. Projeyi derlemek ve çalıştırmak için F5 tuşuna basın.

Uygulama başlatıldıktan sonra öykünücüye öğe eklemek için boş bir liste ve metin kutusu görürsünüz. Şunları yapabilirsiniz:

• Kutuya metin girin, sonra yeni öğe eklemek için Enter tuşuna basın.
• Tamamlanmış bayrağı ayarlamak veya temizlemek için bir öğe seçin.
• Hizmetten verileri yeniden yüklemek için yenileme simgesine basın.

iOS uygulamasını derleme ve çalıştırma

1. Çözüm gezgininde klasörü genişletin xamarin-forms .

2. Projeye sağ tıklayın TodoApp.Forms.iOS ve Başlangıç Projesi Olarak Ayarla'yı seçin.

3. Üst çubukta i Telefon Simülatörü yapılandırması'nı ve TodoApp.Forms.iOS hedefini seçin:

   

4. i Telefon Simülatörünü seçin

5. Projeyi derlemek ve çalıştırmak için F5 tuşuna basın.

Uygulama başlatıldıktan sonra öykünücüye öğe eklemek için boş bir liste ve metin kutusu görürsünüz. Şunları yapabilirsiniz:

• Kutuya metin girin, sonra yeni öğe eklemek için Enter tuşuna basın.
• Tamamlanmış bayrağı ayarlamak veya temizlemek için bir öğe seçin.
• Hizmetten verileri yeniden yüklemek için yenileme simgesine basın.

Sorun giderme

Visual Studio 2022 ile birlikte gelen uzak simülatör XCode 13.3 ile uyumsuz. Aşağıdaki hata iletisini alırsınız:

Bu soruna geçici bir çözüm olarak:

• Uzak simülatörü devre dışı bırakın (Araçlar / Seçenekler / iOS Ayarlar / Windows için Uzak Simülatör seçeneğinin işaretini kaldırın). İşareti kaldırıldığında simülatör Windows yerine Mac'te çalışır. Daha sonra Windows'da hata ayıklayıcısını vb. kullanırken doğrudan Mac'inizde simülatörle etkileşim kurabilirsiniz.
• Yukarıdaki gibi uzak simülatörü devre dışı bırakın, böylece simülatör Mac'te çalışır. Ardından, Windows'tan Mac masaüstüne bağlanmak için bir uzak masaüstü uygulaması kullanın. Uzak masaüstü seçenekleri Arasında Devolutions Uzak Masaüstü Yöneticisi (hızlı ve ücretsiz sürüm var) ve VNC istemcileri (daha yavaş ve ücretsiz) bulunur.
• Simülatör yerine test etmek için fiziksel bir cihaz kullanın. Kimlik doğrulama öğreticisini tamamlamak için ücretsiz bir sağlama profili edinebilirsiniz.

Sonraki adımlar

Uygulamaya kimlik doğrulaması ekleyerek öğreticiye devam edin.