• Buradasın

    ASP.NET MVC ve SignalR ile Mobil Cihazlarla Interaktif Web Uygulaması Geliştirme Eğitimi

    youtube.com/watch?v=cNUoSkL4RXE

    Yapay zekadan makale özeti

    • Bu video, Doğan Grubu'nda takım lideri olarak çalışan ve 20 yıllık deneyime sahip Bora Kaşmer tarafından sunulan kapsamlı bir yazılım eğitim içeriğidir. Eğitmen, özellikle .NET teknolojisi ile 5-6 yıldır çalışmaktadır.
    • Eğitim, ASP.NET MVC ve SignalR teknolojilerini kullanarak mobil cihazlarla interaktif bir web uygulaması geliştirme sürecini adım adım göstermektedir. Video, QR barkod oluşturma, mobil cihazlarla peer-to-peer bağlantı kurma, device orientation ile cihaz hareketlerini algılama ve robot kontrolü gibi konuları kapsamaktadır. İçerik, Visual Studio'da proje oluşturma, kütüphane ekleme, Hub class'ı oluşturma, JavaScript ve C# kodlama, ve gerçek zamanlı veri aktarımı gibi teknik konuları içermektedir.
    • Eğitim boyunca, mobil cihazlardan taranacak QR barkodların nasıl oluşturulacağı, server-side ve client-side arasındaki iletişimin nasıl sağlanacağı, mobil cihazların hareketlerinin (alfa, beta, gama) JavaScript ile nasıl yakalanacağı ve bu hareketlerin bir "super kahraman" (robot) üzerinde nasıl uygulanacağı detaylı olarak anlatılmaktadır. Ayrıca, CDN kullanımı, disk optimizasyonu, SEO optimizasyonu ve farklı sistemlerden veri aktarımı gibi performans ve ölçeklendirme konuları da ele alınmaktadır.
    00:07Sunum ve Giriş
    • Bora Kaşmer, Doğan Grubu'nda takım lideri olarak çalışmakta ve yaklaşık 20 yıllık deneyime sahip.
    • Günün konusu, mobil cihazlarla HTML5, SignalR teknolojilerini kullanarak interaktif bir web uygulaması yazmak.
    • Bora Kaşmer'in blogu (bora-kaşmer.com) ve Twitter hesabı (@coderbora) üzerinden farklı teknolojilerle ilgili bilgiler ve katıldığı etkinlikler paylaşılıyor.
    01:20Proje Tanıtımı
    • ASP.NET MVC boş bir web formu açılıp "codersbarkod" adı veriliyor.
    • Proje, bir QR barkod oluşturup cep telefonundan taratılarak iki sistem arasında bağlantı kurulacak ve web sayfasının arkasındaki süper kahramanın cep telefonuna hareket ettirilmesi amaçlanıyor.
    • Proje lokal olarak IIS üzerinden çalıştırılacak ve zamanı varsa publish edilecek.
    02:24Gerekli Kütüphanelerin İndirilmesi
    • Projede SignalR kütüphanesi kullanılacak, ayrıca jQuery güncel versiyonu da indirilecek.
    • SignalR kütüphanesi için ASP.NET SignalR 2.2.0 stabil versiyonu indiriliyor.
    • SignalR'ın OWIN teknolojisini kullanarak .NET teknolojileri arasında iletişimi sağladığı ve performansı artırıldığı belirtiliyor.
    07:14Proje Yapısı ve HTML İçeriği
    • Sayfada "Barkod tarayın" yazısını içeren bir imaj ve QR barkodun yerleştirileceği bir span oluşturuluyor.
    • Web sayfası, admin olarak laptopta açılan kısım olacak, diğer kullanıcılar ise cep telefonu ile okuyan kişiler olacak.
    • İki sistem arasında bağlantı kurabilmesi için bir connection ID oluşturulacak ve bu ID QR barkodun içine yerleştirilecek.
    11:05SignalR ve jQuery İlişkisi
    • SignalR jQuery'ye ihtiyaç duyuyor, eğer jQuery olsaydı yukarıda olabilirdi çünkü jQuery'ye ihtiyaç duymuyor ve kendi içinde lightwight jQuery'i var.
    • Magic Script adında kendi uydurmuş bir script var ve bu çok önemli bir yapı.
    • Soket teknolojilerinde endpoint ve adreslerinin oluşması gerekiyor ve runtime'da bu endpoint noktaları dinamik olarak oluşuyor.
    12:44SignalR Hub Class'ı
    • SignalR ile ilgili bir connect yapılması gerekiyor ki connection id alınıp kullanılabilir.
    • Server side SignalR'lar için hub class yapmak gerekiyor ve bu class'a bağlanılacak.
    • İlk yazılacak şey public class Product olacak ve bu class override edilecek.
    14:25SignalR'ın Çalışma Prensibi
    • Server side tarafında hub class'ı var ve burada send message gibi bir metod bulunuyor.
    • SignalR ile server side'dan client side'daki bir function'ı tetikleyebilirsiniz.
    • Soket teknolojisini kullanarak long pooling, iframe veya websocket gibi farklı yollar kullanılabilir ve bu teknoloji client'ın browserına göre değişebiliyor.
    15:14Client-Server İletişimi
    • Server side'dan client side'daki bir function'ı tetikleyip ilgili parametreyi gönderebilirsiniz.
    • Peer-to-peer iletişim için spesifik bir yapı kullanılacak.
    • On connect kısmına connection id'yi alıp bağlanan kişiye gönderilecek.
    17:21Asenkron İşlemler
    • Connection işlemi ne kadar süre alacağı belli olmadığı için asenkron yapmak gerekiyor.
    • Asenkron yapmak için async ve await kullanılıyor.
    • Bu yapı thread'in gelişmiş versiyonu olarak tanımlanabilir.
    18:16Client Side Bağlantı
    • Client side'da server side'daki sınıfın adı (Product) küçük harfle yazılacak çünkü SignalR küçük harfe çeviriyor.
    • Client side'da bağlantı için dolar connection hub login ve connection hub start kullanılacak.
    • Bağlantı başarılı ve başarısız durumlarında konsola log yazılacak.
    21:40QR Barkod Oluşturma İşlemi
    • Connection ID alındıktan sonra QR barkodu yazdırmak için server side tarafındaki metodu çağırılacak.
    • jQuery post kullanılarak "create barkod" adlı metoda connection ID parametresi ile çağrı yapılacak.
    • Server side tarafta create barkod metodu yazılacak ve bu metot QR barkodu oluşturacak.
    23:24Server Side Kodu
    • Create barkod metodu public string olarak tanımlanacak ve connection ID parametresi alacak.
    • Google'ın QR barkod oluşturma servisi kullanılacak.
    • QR barkod için URL oluşturulacak ve boyut parametreleri (width=550, height=550) belirlenecek.
    25:54Web Request ile QR Barkod Oluşturma
    • WebRequest kullanılarak Google servisine request yapılacak.
    • Response alınan stream, Image.FromStream ile dönüştürülecek.
    • QR barkod imajı "qr barkod" klasörüne GUID ile unique bir isimle kaydedilecek.
    29:00İmajın Döndürülmesi
    • Oluşturulan QR barkod imajının yolu string olarak döndürülecek.
    • İmajın kaydedildiği yolu döndürmek için string.Format kullanılacak.
    • İmaj, lbl mesaj kontrolünün HTML'sine basılacak.
    33:36QR Barkod Projesi ve Optimizasyon Sorunları
    • Konuşmacı, bir proje üzerinde çalıştığını ve bazı hatalarla karşılaştığını belirtiyor.
    • Bir milyon kişi aynı anda resim çektiğinde harddiskin tavan yaptığı ve çılgın bir veri akışı oluşturduğu sorunu anlatıyor.
    • QR barkodları için optimizasyon yapmanın önemini vurguluyor.
    36:10Kod Optimizasyonu
    • QR barkodları CDNLere kaydedilmeli ve sadece kendilerinin oluşturduğu imajları silmelileri öneriyor.
    • İmajın gerçekten sayfaya geldiğini bildikten sonra silmenin kritik bir adım olduğunu belirtiyor.
    • Kodların internetten veya bloglardan alınabileceğini, ancak tam olarak çalışmayabileceğini söylüyor.
    37:12Kod Düzenlemesi
    • İmaj gönderme stringine değer ve ayraç ekleyerek imajın ismini gönderiyor.
    • İmajın uzun halini split ile ayırarak sadece imaj ismini alıyor.
    • İmajın yüklendiğini beklemek için bir CSS sınıfı ekleyerek (class="barkod") imajı bulmayı planlıyor.
    39:15Sunucu Tarafında İmaj Silme
    • İmaj yüklendikten sonra JavaScript ile sunucuya post isteği göndererek imaj silme işlemi yapılıyor.
    • Sunucu tarafında "deleteImage" fonksiyonu oluşturuluyor.
    • DirectoryInfo sınıfını genişleterek "empty" adında bir metod yazarak dosyayı silme işlemi yapılıyor.
    45:03QR Barkod Testi
    • QR barkod oluşturulduğunda ve görüntülenmesi test ediliyor.
    • Telefonla QR barkodunun okunup okunamayacağı test edilecek.
    • İmajları Azure'a aktarmak için bir yayın yapılması gerektiği belirtiliyor.
    46:19ASP.NET Projesi Kurulumu
    • Konuşmacı, ASP.NET projesi oluştururken port numarası olarak 92'yi kullanacağını belirtiyor.
    • Windows 8 ve üstü sürümlerde bazı ayarları 40'a çekmek gerektiğini, aksi takdirde sorunlar yaşanabileceğini söylüyor.
    • Güvenlik için bazı ayarların yapılması gerektiğini vurguluyor.
    48:20IP Adresi Bulma
    • Projeyi çalıştırabilmek için önce IP adresini bulması gerektiğini belirtiyor.
    • IP adresini bulmak için 172.21.5.7 adresini kopyalıyor.
    • Projeyi çalıştırırken localhost yerine IP adresini kullanacağını belirtiyor.
    49:27Control Page Oluşturma
    • Control Page sayfası oluşturmak için bir action method yazacağını belirtiyor.
    • Control Page'in connection id parametresi alacağını açıklıyor.
    • MVC'de routing'un önemini vurgulayarak, SEO açısından URL'lerin anlamlı olması gerektiğini belirtiyor.
    52:32Peer-to-Peer Bağlantı Mantığı
    • Mobil cihazın bağlandığı an index sayfasında "mobil bağlandı" fonksiyonunun tetikleneceğini açıklıyor.
    • Bağlantı kurulduğunda arka fonun değişeceğini ve süper kahramanın uçacağını belirtiyor.
    • Farklı bir servisten bir metodu tetikleyerek arka rengi değiştireceğini söylüyor.
    54:00Move Robot Metodu
    • Komutları toplamak için "move robot" adında bir metod oluşturacağını belirtiyor.
    • Bu metodun komut ve connection id parametrelerini alacağını açıklıyor.
    • Peer-to-peer bağlantıda spesifik bir client'a komut göndermek için connection id'nin gerekli olduğunu vurguluyor.
    56:55Genel Yapının Tasarlanması
    • Control Page ile bağlantı kurulduğunda move robot metodunun çağrılacağını belirtiyor.
    • Move robot metodunun client'ın move function ile ilgili komutu tetikleyeceğini açıklıyor.
    • Genel yapıyı çizerek, mobil cihazdan okutulduğunda hangi komutların çalışacağını açıklıyor.
    57:55SignalR Kullanımı ve Move Robot Metodu
    • Move robot metodu, command ve connection id bekliyor.
    • Connection id, kontrol sayfasından QR barkod okutulduğunda geliyor.
    • Move robot metodu çalıştığında, SignalR'daki move robotu tetikleniyor ve bu da Clyde'daki move robot fonksiyonunu çalıştırıyor.
    58:43SignalR'un Önemi ve Kullanım Alanları
    • Bu yapı bir servis gibi düşünülebilir ve IP'sindeki products metodu herhangi bir yerden tetiklenebilir.
    • Aynı tabloya farklı kaynaklardan veri yazıldığında (örneğin 80 yerden), veri yazıldığında sayfası açık olan client'lara sunmak istendiğinde SignalR kullanışlıdır.
    • Database trigger ile bir servis yazıp, veri değiştiğinde SignalR'ın metodlarına parametre göndererek tüm bağlı client'lara veriyi aynı anda gönderebilirsiniz.
    59:56Farklı Projelerden SignalR Kullanımı
    • SignalR'ın güzel yanı aynı proje içinde değil, farklı projelerden de tetiklenebilmesi.
    • Farklı bir database'den veya başka bir uygulamadan da bu yapıya erişilebilir.
    • Web servisi yazıp database'den trigger ettirerek, servise request yapıp parametre göndererek SignalR'ın metodlarına ulaşılabilir.
    1:02:23SignalR Kullanımı İçin Kod Yazımı
    • Index sayfasında proxy connection oluşturmak için hub connection kullanılıyor.
    • Hub connection için URL belirtiliyor ve başka bir sunucuda olsaydı oradaki IP'si yazılabilirdi.
    • Hub proxy ile SignalR sınıfındaki metodu tetiklemek için proxy oluşturuluyor.
    1:06:01Asenkron İşlem ve Kullanım Alanları
    • Dış bir sistemden erişim olduğunda asenkron yapı kullanılmalı, aksi takdirde beklenmesi gerekiyor.
    • Tek yönlü iletişim için (örneğin cep telefonundan web'e) tek bir yol üzerinden işlem yapılıyor.
    • Peer to peer (çift yönlü) iletişim de yapılabilir, örneğin bilgisayara karşı satranç oynama gibi senaryolarda.
    1:10:34JavaScript ve CSS Kullanımı
    • JavaScript ile ilgili sorulara yanıt veriliyor, server-side'dan JavaScript'e geçişte sorun yaşanmıyor.
    • Bootstrap ve jQuery gibi kütüphanelerin kullanımı anlatılıyor, konuşmacı kendisini front-end uzmanı olarak tanımlamıyor.
    • Cep telefonu ekranı paylaşımı için özel bir uygulama kullanılıyor.
    1:12:23Mobil Cihaz Bağlantısı
    • IP adresi 21.57'e bağlanma işlemi gösteriliyor.
    • Bağlantı başarılı olduğunda "connect" mesajı görülebiliyor.
    • Mobil cihaz ekranı paylaşımı için Mobizen uygulaması kullanılıyor.
    1:17:13HTML5 ve Cihaz Hareketi
    • HTML5'in cihaz hareketini algılama özelliğinden bahsediliyor.
    • Cihaz hareketi için gama, beta ve alpha değerleri kullanılıyor.
    • Gama ön-arka hareketi, beta sağa-sola hareketi, alpha ise pusula hareketini ifade ediyor.
    1:19:46JavaScript Kodlama
    • Mobil cihazın device orientation özelliğini destekleyip desteklemediğini kontrol ediyor.
    • Window'da device orientation event'i kontrol ediliyor.
    • Device orientation event'i için addEventListener fonksiyonu kullanılıyor ve event data'sı alınıyor.
    1:22:27Kod Yazımı ve Yönlendirme
    • Konuşmacı, kod yazarken Sublime text editörünü kullandığını ve Google'dan bir şey aldığını belirtiyor.
    • Yönlendirme için bir metod yazıyor ve üç parametre gönderiyor.
    • Pusulanın ibresi gibi hareket eden bir HTML5 yazısı oluşturuyor ve Bootstrap konteyner içinde imajı yerleştiriyor.
    1:24:06Connection ID ve Komut Gönderimi
    • Connection ID'nin önemli olduğunu ve spesifik bağlantıya komut yollamak için gerekli olduğunu açıklıyor.
    • Sayfayı unuttuğunu belirterek, farklı yöntemlerle yapabileceğini söylüyor.
    • Koordinatları tam sayıya çevirmek için alt çizgi kullanıyor, böylece ekrana yazarken küsuratlı değerler görünmemesi için.
    1:26:12CSS ve Hareket Etme
    • CSS ile hareket ettiren değerleri gösteriyor ve webkit transform özelliğini kullanarak logoyu gerçek değerinde hareket ettiriyor.
    • Script kısmında fonksiyonu nasıl çağıracağını anlatıyor.
    • Ekranı hareket ettirme örneği gösteriyor ve sağa sola hareket ettirme işlemini gösteriyor.
    1:27:37Hareket Koşulları ve Reflektör Uygulaması
    • Sekiz değerini geçtiğinde sağa, eksi sekiz değerini geçtiğinde sola hareket ettirme koşullarını açıklıyor.
    • Reflektör uygulamasının çok mükemmel olduğunu ve telefon ekranını televizyona yansıtabildiğini belirtiyor.
    • Airdrop ile sekiz eksi dokuz tane ekranı aynı anda paylaşabileceğini ve interaktif oyunlar yapabileceğini söylüyor.
    1:29:23Kod Optimizasyonu ve Robot Hareketi
    • Bir kere write yapıldığında sekiz değerini geçince çok sayıda write göndermemek için optimize etme gerektiğini belirtiyor.
    • Sağ hareket için "right" komutunu, sol hareket için "left" komutunu gönderiyor.
    • Robotun sadece bir şeyi hareket ettirdiğini, esasında mobildeki bir nesne hareketi olmadığını açıklıyor.
    1:33:33Animate Kullanımı ve Sonuç
    • Animate kullanarak sağa hareket için left kısmına 1000 değerini ve 4000 milisaniyede hareket etmesini belirtiyor.
    • Clear özelliği ile bir animasyon işi varsa temizlenmesini sağlıyor.
    • Bootstrap'ın web2 transform özelliği ile hareket ettirdiğini ve rotate3 özelliğinin var olduğunu belirtiyor.
    1:36:15Kod Düzenlemeleri ve Hataların Çözümü
    • Kullanıcı, kod düzenlemeleri yaparak hareket komutlarını (left, right, stop) ekliyor ve konsola yazdırıyor.
    • Kodlarda bazı hatalar tespit ediliyor, özellikle stop komutunun her zaman devreye girmesi sorunu çözülüyor.
    • Ekran paylaşımında sorunlar yaşanıyor ancak sonunda düzeltiliyor.
    1:38:32Kodun Çalıştırılması ve Sorun Giderme
    • Konsol açılarak kodun çalışması test ediliyor, sağ ve sol hareket komutları doğru şekilde çalışırken stop komutunda sorunlar görülüyor.
    • Hub connection kodunda her komutta bağlantı tekrar yapılması sorunu tespit ediliyor ve düzeltiliyor.
    • Stop komutunun her zaman devreye girmesi sorunu çözülüyor.
    1:46:34Sistem Mantığı ve Çalışma Prensibi
    • Sistemde sağa sola hareket komutları, orientation değeri belli bir değerden büyük olduğunda tetikleniyor.
    • Homecontrol'deki move metodu çağrılıyor ve singlelar sınıfı tetiklenerek bağlı olan client robotu hareket ettiriliyor.
    • Bu sistem labirent oyunları, sinema yer gösterme gibi çeşitli uygulamalarda kullanılabilir.
    1:49:01Performans ve Uygulama Alanları
    • Sistem tek client için çalıştırıldığında CPU kullanımı çok fazla artmıyor.
    • Server tarafında çok sayıda kişiye (bir milyon kişiye kadar) cevap verme imkanı sunuyor.
    • Azure üzerinde çalıştırılabilir ve HTTPS ile güvenliği artırılabilir, ayrıca Twitter ve Facebook ile entegrasyon yapılabilir.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor