Azure Mobile Apps ile Windows (UWP) uygulaması oluşturma

Makale
10/23/2023

Bu öğreticide, Azure Mobile Apps ve Azure mobil uygulama arka ucu kullanarak bir Evrensel Windows Platformu (UWP) masaüstü uygulamasına 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.

Bu öğretici, Azure Uygulaması Hizmeti'nde Mobile Apps özelliğini kullanma hakkındaki diğer tüm Windows (UWP) öğreticileri için gereklidir.

Önkoşullar

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
- Evrensel Windows Platformu 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ı.

Bu öğretici yalnızca bir Windows sisteminde tamamlanabilir.

Örnek uygulamayı indirme

Tarayıcınızda azure-mobile-apps deposunu açın.
Kod açılan listesini açın ve zip'i İndir'i seçin.
İndirme işlemi tamamlandıktan sonra İndirmeler klasörünüzü açın ve dosyayı bulunazure-mobile-apps-main.zip.
İ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.

Screenshot of the file explorer for the solution.

Arka ucu Azure'a dağıtma

Dekont

Arka ucu zaten başka bir hızlı başlangıçtan dağıttıysanız, aynı arka ucu kullanabilir ve bu adımı atlayabilirsiniz.

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:

Azure Geliştirici CLI'sını yükleyin.
Bir terminal açın ve dizini dosyayı içeren klasörle TodoApp.sln değiştirin. Bu dizin de içerir azure.yaml.
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.

Bir terminal açın ve dizini dosyayı içeren klasörle TodoApp.sln değiştirin. Bu dizin de içerir azuredeploy.json.
Azure CLI kullanarak oturum açtığınızdan ve bir abonelik seçtiğinizden emin olun.
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.
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.
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ış:
Çı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.

Sağ bölmede Çözüm Gezgini'ni seçin.
Projeye sağ tıklayın TodoAppService.NET6 ve Başlangıç Projesi Olarak Ayarla'yı seçin.
Üstteki menüde Derleme>Yayımla TodoAppService.NET6'yı seçin.
Yayımla penceresinde Hedef: Azure'ı seçin ve İleri'ye basın.
Belirli hedef: hizmet (Windows) Azure Uygulaması'ı seçin ve İleri'ye basın.
Gerekirse oturum açın ve uygun bir Abonelik adı seçin.
Görünüm'un Kaynak grubu olarak ayarlandığından emin olun.
quickstart Kaynak grubunu genişletin, ardından daha önce oluşturulan App Service'i seçin.
Bitir'i seçin.
Yayımlama profili oluşturma işlemi tamamlandıktan sonra Kapat'ı seçin.
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.
Azure SQL Veritabanı'ı ve ardından İleri'yi seçin.
Hızlı başlangıç veritabanını ve ardından İleri'yi seçin.
Dağıtımın çıktılarında yer alan SQL kullanıcı adı ve parolasını kullanarak formu doldurun ve İleri'yi seçin.
Bitir'i seçin.
Tamamlandığında Kapat'ı seçin.
Uygulamanızı daha önce oluşturduğunuz Azure Uygulaması Hizmeti'ne yayımlamak için Yayımla'yı seçin.
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.

TodoApp.Data Projeyi genişletin.
Projeye sağ tıklayınTodoApp.Data, ardından Sınıf Ekle...'yi>seçin.
Ad olarak girin Constants.cs ve Ekle'yi seçin.
Constants.cs.example Dosyayı açın ve içeriği kopyalayın (Ctrl-A ve ardından Ctrl-C).
öğ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).

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.

Dosyayı kaydedin. (Ctrl-S).

Örnek uygulamayı derleme ve çalıştırma

Çözüm gezgininde klasörü genişletin windows .
Projeye sağ tıklayın TodoApp.UWP ve Başlangıç Projesi Olarak Ayarla'yı seçin.
Üst çubukta Herhangi bir CPU yapılandırması ve TodoApp.UWP hedefini seçin:
Projeyi derlemek ve çalıştırmak için F5 tuşuna basın.

Uygulama başlatıldıktan sonra, metin kutusu içeren boş bir liste görürsünüz. Şunları yapabilirsiniz:

Metin girin, ardından öğeyi eklemek için simgeye basın + .
Herhangi bir öğeyi tamamlandı olarak işaretlemek için onay kutusunu ayarlayın veya temizleyin.
Hizmetten verileri yeniden yüklemek için yenileme simgesine basın.

Sonraki adımlar

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