Blazor Hybrid Proje Oluşturma(Mobil, Desktop, Web)
Merhabalar, çalıştığım firmada güncel olarak kullandığımız Blazor ile ilgili öğrendiklerimi temelden alarak paylaşmak istedim. Yapacağımız iş aslında bu yazıda Blazor Hybrid projesini ayağa kaldırmak için gerekli kurulumları yapmak ve ilk projeyi 3 platformda(Andorid, Windows ve Web) çalıştırmak olacak.
- Adım: Visual Studio Installer’den aşağıdaki kırmızı çerçeve içine aldıklarımın kurulumunu yapmanız gerekiyor.
2. Adım: komut satırına aşağıdaki kodu yazıyoruz.
dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview
Kırmızı kutucuk içinde yüklenen template’ler bizim kullanacağımız elemanlar. Biz hybrid olanı kullanacağız.
3. Adım: Projeyi oluşturmak istediğimiz yerde bir klasör oluşturalım. Tavsiyem C’nin hemen altında olması. Çünkü Android tarafta dosya isimleri uzun olmasından dolayı oluşabilecek problemleri çözmekle vakit kaybedebilirsiniz. Klasöre komut satırından giderek aşağıdaki komutu çalıştırın. Oluşturulacak projeye FirstBlazorHybridApp dosya ismini verdim.
dotnet new blazorhybrid -o FirstBlazorHybridApp
4.Adım: Oluşan dosya içerisinde Projeyi çalıştıralım. Gördüğünüz üzere bize Andorid, iOS, macOs ve Windows olmak üzere ayrı ayrı projeler ekledi. Biz aslında sadece en baştaki katmana kodlarımızı yazıyor olacağız. Diğer katmanlara da ufak tefek ayarlamalar yapmak için girmemiz gerekecek. Bu kısımda Andorid ve ve Windows projelerini çalıştırmayı deneyelim. Web kısmını en son ekliyor olacağız. Android projesine sağ tıklayarak Set as Startup Project diyelim ve çalıştıralım.
5. Adım: Android projesini bizden Android Emulator kurulumu yapmamızı istiyor. Bu kısmı tamamlıyoruz. Adım adım ben default olarak önerdiği android cihazı kurdum. Android cihaz kurulumu biraz zaman alabiliyor. Kurulum tamamlandıktan sonra tekrar çalıştıralım. Alttaki 4.görselde android cihaz içerisinde mobil uygulamamız ayağa kalktı. İsterseniz apk olarak export ederek android telefonunuza kurabilirsiniz. Bunun için yapmanız gereken Android projesine sağ tıklayarak Archive diyoruz.(Debug mod’dan çıkıp Relase olarak çalışırken yapmanız gerek). Sonrasında açılan Archive Manager kısmından Distribute diyerek Ad Hoc diyerek bir kimlik oluşturup kaydet deriz. Bize apk olarak nereye kaydetmemiz gerektiğini söyler. Bu kadar hızlı apk alabiliyoruz. Detaylar görsellerde.
6. Adım: Windows tarafını ayağa kaldıralım. Öncelikle Set as Startup Project olarak Windows projesini seçelim. Fakat bir uygulama kurmamız gerekiyor. Aşağıdaki adresten ilgili programı kurumunu yapın. Ben Dev Channel kurdum. Kurulum yapmadan hybrid olarak windows’u çalıştıramıyorsunuz. Kurulumu tamamladıktan sonra çalıştırdığınız Andorid’de gördüğümüzün benzeri bir ekran daha karşımıza çıkıyor. Bu şekilde Windows kısmını problemsiz çalıştırmış olduk.
7. Adım Blazor Web Assembly projesini entegre edelim. Projemize sağ tıklayarak Add-New Project dedikten sonra Blazor App içerisinden Blazor Web Assembly projesini seçeriz. İsimlendirmeyi Web projesi olduğu için Web olarak ekledim. Burada dikkat etmemiz gereken nokta ASP.NET Web Hosted seçili olarak ekliyorum. Bunu seçtiğimizde 3.görseldeki gibi 3 ayrı proje ekliyor. Client dediği Web Assembly dosyası yani browser’da kullanıcının göreceği kısım. Server dediği aslında bir API projesi. Shared ise ortak kullanılacak classs library. Biz projeyi ayağa kaldırırken Server’ı seçeceğiz içerisinde Client projesini de otomatik çalıştıracak.
8.Adım Şimdi projelerimizi ekledik. Fakat henüz entegre etmedik. Çalıştırdığımız zaman kendi kendine çalışır fakat biz Android ve Windows’un kullandığı gibi kullanmasını istiyoruz. Bunun için ilk olarak Web.Client projemize referans olarak ana kodlarımızı yazacağımız dosyası ekleriz. İkinci olarak Web.Client içerisindeki projeyle gelen Pages, Shared ve wwwroot içerisinde css’leri kaldırdım. (aşağıdaki 2.görsel). Bu kısımları diğer ana projeden kullanacağımız için gereksizleri siliyorum.
9.Adım: Web.Client içerisinde App.Razor dosyasını açıp aşağıdaki gibi yolları değiştiriyoruz. 1.görsel önceki hali 2.görsel sonraki hali. Bu kısım tamamlandı. Artık web.client’ın app.razor dosyası nereye gitmesi gerektiğini biliyor.
10.Adım: Web.Client içerisinde Program.cs dosyasını açıp App kısmının yolunu değiştiriyoruz. 1.görsel önceki hali. 2.görsel sonraki hali. Bu kısımda tamamdır. Artık program.cs dosyasıda doğru yolu öğrendi.
11.Adım: Web entegrasyonu için aslında son işlemi. Web.Client içerisinde css dosyasının yolunu veririz. Bunun kodlarını Android ve Windows içerisinde index.html kısmından kopyalayabilirsiniz. Not: Bazen aşağıdaki görselde body tagının altında <app> kısmı eklenmeyebiliyor. Eğer sizde eklenmediyse ekleyin.
12. Adım: Projede Web.Server’a Set as Startup diyoruz ve proje ayağa kalkıyor. Şuanda aslında çalışan Client uygulamamız ama arka planında bir API’de aktif olarak çalışıyor. Bununla ilgili ileriki yazılarımda basit örneklemeler yapıyor olacağım.
Son Adım: Veee tüm ayağa kaldırmaya çalıştırdığımız uygulamaları Android, Windows ve Web’i aynı anda çalıştırıp görelim. An itibariyle artık 3 farklı platformu tek bir yerde var olan kod ile çalıştırmış olduk.
Şuanda sadece projenin nasıl ayağa kalktığı hakkında bilgi aktarımı yaptım. İlerleyen yazılarda kod kısmına, API ile nasıl iletişim kurabileceği gibi detayları hakkında da bilgiler aktarıyor olacağım. Görüşmek üzere…
GitHub Link
https://github.com/abbaskizildag/Blazor
Kaynak
https://docs.microsoft.com/en-us/mobile-blazor-bindings/walkthroughs/build-first-hybrid-app
