GitHub Eylemlerini Adım Adım kullanarak Azure Statik Uygulamalarında PWA ile Blazor WebAssembly yayımlayın

In: Genel


giriiş

Çoğu kişi, satın alma, okuma, video, film vb. izlemek için mobil cihazları kullanır. Müşterileri için mobil uygulamalar oluşturmak, küçük işletmeler için çok maliyetlidir. O zaman, Progressive Web Apps, farklı olanaklarla mükemmel özelliklerle çıkıyor. PWA %100 native performans veriyor demiyorum ama iyi performans ve farklı özellikler de veriyor ve günümüzde popüler web sitelerinin ana başarısı PWA.Çünkü kendi penceresi olan bir mobil uygulama gibi çalışıyor ve cihazınızın ana ekranına benzeri uygulama ekleyebilirsiniz. ve yerel uygulamalar gibi performans sergiliyor. Bugünlerde neredeyse tüm trend uygulamalar, bazıları aşağıda olmak üzere PWA desteğine sahiptir.

  1. Görünüm
  2. Youtube
  3. Spotify
  4. AliExpress
  5. Flipkart
  6. heyecan
  7. KitapMyShow
  8. Pinterest

Aklımızda bir sonraki soru PWA nedir ve nasıl çalışır?

Aşamalı Web Uygulamaları web siteleridir, ancak uygulamalar gibi görünürler ve hissettirirler ancak bunları herhangi bir mağazadan indirmenize gerek yoktur, ziyaret ettiğinizde ana ekranınıza ekleme seçenekleriniz vardır. Bu, kullanıcıların uygulama içi pencerede tüm bilgilere ve yeteneklere erişebileceği anlamına gelir. Küçük işletmelerin katılımı ve ziyaretleri artırmalarına daha fazla yardımcı olur.

PWA’dan büyük avantajlar

  • Daha az veri kullanımı
  • Performansı artırır
  • Daha hızlı yükleme süreleri
  • İlgi çekici kullanıcı deneyimi
  • Önbelleğe alınmış verilerle çevrimdışı çalışma
  • anında yükleniyor
  • Ağ hızından bağımsız
  • Bir tarayıcı penceresi değil, kendi penceresini çalıştırma
  • Cihaz ana ekranına, başlat menüsüne, dock’a yerel uygulamalar gibi ekleyin
  • Bildirimler (Kullanıcı uygulamayı kullanmasa bile arka uç sunucusundan bildirim alma(çevrimdışı)

  • Uygulamayı arka planda otomatik olarak güncelleme

Çoğu uygulama için anında iletme bildirimi, müşterilerin yeni ürünler ve güncellenmiş ürünlerle ilgisini çekmenin ana başarısıdır.

Bazı gerçek dünya örnekleri

  • Mağazaya yeni bir ürün geldiğinde, kullanıcılara bir bildirim göndererek kullanıcıyı bilgilendireceğiz, insanlar bu bildirime ve sitemizi ziyaret etmeye tepki gösterecek. Ürün fiyat indirimi, kullanımlara bildirim gönderecek, daha sonra satın alabilirler.

  • Blogger iseniz, yayınladığınız veya güncellediğiniz bazı içerikler, kullanıcıya bildirim göndereceğiz, ardından okuyucu gelecektir.

Çünkü ben dahil herkes ürünü veya blogu düzenli olarak ziyaret etmiyor. meşgul nedeni, bildirim gönderirseniz, içeriğinize veya sitenize bakmaları gerekebilir.

Bildirim tüm platformları destekliyor mu?

Evet, hemen hemen tüm platformları destekler.

Bu gösterimde, Ön Uç çerçevesi, PWA ile Blazor Web Derlemesi ve CI-CD için Github Eylemleri ile Cosmos Veritabanı ile arka uç Azure İşlevleri’dir.

Hadi başlayalım,

Github Deposu Oluştur

Github’a git
önceden oluşturulmuş vanilya temel şablonu
Blazor ve Azure İşlevleri için ve “yeni bir depo oluşturmak için bu şablonu kullan’ı tıklayın, yeniden yönlendirmeden sonra depo adınızı verin ve depo oluştur’u tıklayın. Depo oluşturma işleminden sonra, geliştirme adında yeni bir şube oluşturun ve ardından geliştirme şube klonunu yerel olarak alın ve klonlanmış yola gidin, ardından klonlanmış yolda yeni bir Boş Çözüm oluşturun.

Bir proje oluşturmadan önce Aç
Azure Portalı

ve yeni bir Azure Statik Uygulaması oluşturun ve daha önce oluşturduğumuz GitHub deposuyla yapılandırın. “Kaynak oluştur” u tıklayın ve “Statik Web Uygulaması (Önizleme)” seçeneğini seçin ve Abonelik ve Kaynak Grubu’nu seçin, ardından Ad, Bölge verin ve varsayılan olarak Github seçilidir ve GitHub’ınıza giriş yapın ve daha önce oluşturduğunuz depoyu seçin ve seçin ana şube.

Proje oluşturulduktan sonra, web uygulamanızın canlı bir URL’sini alacak ve sitenize tıklayıp göz atacaksınız.

Şimdi, Visual Studio’ya dönün ve Solution Explorer’a sağ tıklayın ve Add New Project >>’e tıklayın, yeni pencerede Blazor WebAssembly App’i seçin ve PWA ve kimlik doğrulama türü için PWA onay kutusunu işaretleyin Yok ve yapılandırmanız gereken başka bir İstemci olarak isim verin Hareketler.

PWA onay kutusunu işaretlemeyi unuttuysanız, daha sonra manuel olarak ekleyebilirsiniz.

Şimdi Index.razor sayfasında bir şeyler tasarlayın ve uygulamanızı yerel olarak çalıştırın, ürünleri listelemek için kartlar oluşturdum

Ardından, Same Solutions’da Azure Functions App’i ekleyin, Solution’a sağ tıklayın ve Add New Project >> Azure Functions’ı seçin ve adlandırılmış API verin.

Arka uç için verilere ihtiyacımız var, bu nedenle şimdi Azure Portal’a geri dönün ve yeni bir Azure Cosmos Veritabanı oluşturun. Azure Portal’da Veritabanları altında yeni bir kaynak oluşturun Azure Cosmos Veritabanı’nı seçin ve bir hesap adı verin ve API’yi (Cosmos veritabanı sorgu için farklı API’leri destekler) ve Konum’u seçin, ardından Kapasite Modu Sunucusuzdur, Önizlemededir ancak bu önizlemeyi sever’i seçin. Çünkü yalnızca kullandığınızda faturalandırılır ve içindeki Sunucular hakkında daha fazla ayrıntı
Microsoft dev blog ve hesap türü. Şimdi oluştur düğmesine tıklayabilirsiniz.

Veritabanı oluşturulduktan sonra, Depolama Gezgini’ni kullanarak Depolama’yı açın veya
Depolama Gezgini
Verileri Görüntülemek ve Düzenlemek için Ardından yeni bir veritabanı ve kapsayıcı oluşturun.

Şimdi tüm uygulamaların resimleri olduğunu düşünün. Bu yüzden o görüntüleri de saklamamız gerekiyor ama Cosmos veritabanını seçiyoruz, bu çok maliyetli. Yani biraz blob depolamaya ihtiyacımız var. Azure Cosmos veritabanı şunları sağlar:
meta verileri sorgulama yeteneği
ve blob deposunda depolanan bloblara bağlantılar. Depolama Hesabı oluşturmak için>> kaynaklara gidin ve Kaynak oluştur>> Depolama Hesabı’nı seçin ve hesap adını verin, ardından oluştur’a tıklayın. Bundan sonra yeni bir Kapsayıcı oluşturun ve Blob erişim düzeyini ayarlayın, böylece web uygulamasından yalnızca siz etkileşime girebilirsiniz, aksi takdirde okumanıza izin vermez. Yine, görüntüleri yüklemek için blob depolama Anahtarlarını alın ve Azure Blob Storage’da bir Görüntü kapsayıcısı oluşturun.

Her şey kurulum Azure’da yapılır. Şimdi Visual Studio’ya dönün ve Ürün Eklemek için yeni bir Azure İşlevi oluşturun. Bunun için Çözüm Gezgini’ne gidin ve Sağ Tıklayın API projelendirin ve pencerede add >> new Function >> öğesini seçin, AddProduct.cs adlı HTTP Tetikleyicisini seçin. Bu fonksiyonda önce imajı blob depolamada ekliyoruz, ardından Azure Blob Storage’da Mutlak url ve Ürün ekliyoruz. Ürün ekleme kodu aşağıdadır.

Cosmos veritabanından ve blobdan tuttuğumuz Bağlantı dizelerini ekleyin, bunları local.setting.json dosyanıza ekleyin. Canlı yayına geçerken bağlantı dizesini Statik Web Uygulaması Yapılandırmasında saklamamız gerekir.

Şimdi, veritabanına eklenen ürünleri almak için başka bir HttpTrigger ekleyin. Bunun için Solution Explorer’a gidin ve Add >> Azure Functions >> Select HTTP Trigger Set adlı GetProducts’a sağ tıklayın.Kod aşağıdadır.

Şimdi uygulamayı Api’yi çalıştırın ve konsol kontrolünde, tüm işlevler çalışıyor

Tamam, şimdi istemcimiz ve API’lerimiz yerel olarak iyi çalışıyor, üretime geçme zamanı, zaten tüm dağıtım kurulumunu yapılandırdık. Şimdi kodu içine itin gelişim şube ve yeni bir Çekme Talebi oluşturun. GitHub testi otomatik olarak çalıştırdıktan sonra, test başarılı olursa yöneticiye veya bakıcıya posta ve GitHub bildirimi yoluyla birleştirmeyi bildirir.

İsteği birleştirmek için tıkladıktan sonra, canlı uygulamanızın aşama sürümünü yeni değişikliklerle birlikte otomatik olarak gösterir.

Ana daldaki değişikliklerden sonra Github eylemleri otomatik olarak Azure’da oluşturulmaya ve dağıtılmaya başlar.

Statik Web Uygulaması oluştururken varsayılan eylem otomatik olarak oluşturulur. Dağıtım için Azure’dan bir dağıtım anahtarına ve Eylemdeki Anahtar gizli anahtarlarını ayarlar altında depolamaya ihtiyacınız vardır. Statik Web Uygulaması ana sayfasından alabilirsiniz.

Hayatta inşa etmek ve dağıtmak birkaç dakika sürer, Siteler dakikadan daha kısa sürede kapanır.

Şimdi uygulamanın aşağıda canlı olup olmadığını kontrol edin

Azure İşlevinde, Azure Portal’da çalışan Azure İşlevini görme seçeneğimiz var.

Şimdi Github’a dönün ve .github klasörünü >> iş akışları >> açın ve .yml dosyasına tıklayın. Bu, kaynak grubu ile Azure Statik Web Sitesi arasındaki yapılandırma veya işlem hattı yapılandırmasıdır. Proje adını farklı bir adla oluşturduysanız, uygulama_konumundaki yapılandırmaları güncelleyin.

yerel ayar dosyasına bir Veritabanı bağlantı dizesi ekledik, Şimdi Statik Web Uygulaması Yapılandırmasında aynı veya yeni veritabanı bağlantı dizesine ihtiyacımız var. Bunun için Azure Portal’ı açın >> statik web uygulamalarına gidin >> yapılandırma ve yeni anahtar değerleri tıklayın ve ekle’yi tıklayın. Anahtar adı, yerel olarak verdiğiniz şeyi vermelidir, aksi takdirde Azure İşlevi veritabanıyla iletişim kuramaz

Tüm geliştirmeyi yaptık, şimdi uygulamayı kontrol edin ve API’ler iyi çalışıyor. İlk kontrol istemci uygulaması çalışıyor ve çalışıyor veya çalışmıyor. Evet, çalıştırıyor ayrıca PWA’yı da destekliyor ve yerel olarak da kuruyor.

Çalıştığını test etmek için AddProduct Function App kullanarak yeni ürün ekleyin. mükemmel çalışıyor, veriler Cosmos Database ve Blob’a eklendi.

Ardından, canlı API’lerimizin Postman’de çalışıp çalışmadığını kontrol edin, çünkü GetProduct API’sini yalnızca Gönderme İsteğini de destekleyecek şekilde ayarladık.

Web uygulamasını tamamladık, şimdi orada başka hangi olasılıkları görebiliriz.

Bildirim desteği

Abone olan tüm kullanıcılara bildirim gönderebiliriz. Kullanıcı belirteçlerini kaydetmek ve abone bildirimi istemek için İstemci ve Sunucunuzda bazı ayarları yapılandırmanız gerekir, ayrıca sunucu tarafından bildirim göndermek için bazı anahtarlara ihtiyacımız var. PWA bildirimleri göndermek için VAPID anahtarlarına, VAPID anahtarını oluşturmak için size farklı çevrimiçi araçlara ve NPM paketlerine ihtiyacımız var. Kullanıcı abone olduktan sonra kullanıcı tarafından bazı kullanıcı anahtarları alıyoruz, bildirim göndermek için bunları Veritabanına kaydetmemiz gerekiyor.

Makine Öğrenimi / Yapay Zeka

Günümüzde, kullanıcı örneği Instagram için özelleştirilmiş bir deneyim sunmak için arka planda Makine öğrenimi desteğine sahip tüm uygulamalar. Cosmos veritabanı, tüm gelişmiş analizleri ve eksiksiz Azure Machin Learning Desteklerini ve Apache Spark ve daha fazlası gibi Farklı Makine Öğrenimi Araçları Desteklerini tamamen destekler.

Güvenlik ve Kimlik Doğrulama

Azure AD ve AuthO kimlik doğrulamasını Azure İşlevleri ile uygulamanızda da kullanabilirsiniz. Hassas verilere anonim olarak izin vermek yerine Azure İşlevleri ile uygulamanızda Kimlik Doğrulamaları yapılandırabilir ve auth belgesini Cosmos DB’de depolayabilirsiniz.

Oradaki Azure varsayılan danışmanında, uygulamanın ne kadar güvenli olduğu ve Hangi alanın maliyeti ve diğer seçenekleri azaltabileceği konusunda sizi bilgilendirmek için.

Web Uygulaması Tasarımı

Mobil uygulamalar için Web Uygulaması çözünürlüklerini de göz önünde bulundurmalısınız çünkü PWA uygulamalarını da vereceğiz, Mobil tasarım iyi değilse, kullanıcılar PWA uygulamanızı kullanmayacaktır. Dışında farklı Ekran Çözünürlükleri ve Ekran boyutları var. Tasarımcı tasarıma odaklanmalıdır.

Analitik / Öngörüler

Statik Web Uygulaması için, mevcut App Insights Uygulamasını ekleyebilir ve yeni App Insights oluşturabilir ve onunla yapılandırabilirsiniz. böylece sitede kaç kullanıcının olduğunu kolayca görebilirsiniz, The App Insights birçok analiz seçeneği sunar.

önbellek

Önbelleğin site performansını iyileştirmesi ve gelişmiş analitik için kullanıcıyı izlemesi için Redis Cache’yi Web Uygulamasına kolayca entegre edebiliriz. Azure’un kendisi, bir Redis önbellek veritabanı oluşturma ve onu mevcut Web uygulamanızla yapılandırma seçeneğine sahiptir.



Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]