• Buradasın

    SignalR ile Çok Platformlu Gerçek Zamanlı Chat Uygulaması Geliştirme Eğitimi

    youtube.com/watch?v=lQkuUNzDaFA

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan teknik bir eğitim içeriğidir. Eğitmen, SignalR teknolojisi kullanarak web, mobil ve UWP platformlarında çalışan gerçek zamanlı chat uygulaması geliştirme sürecini adım adım göstermektedir.
    • Video, SignalR'in ne olduğunu açıklayarak başlayıp, önce bir MVC projesi oluşturma, ChatHub sınıfı yazma ve front-end kodlaması yapma aşamalarını göstermektedir. Ardından Android, iOS ve UWP platformları için mobil uygulama geliştirme sürecine geçiş yaparak, farklı platformlarda uygulamanın nasıl çalıştırılacağını anlatmaktadır. Eğitmen, her platformda uygulamanın çalıştığını göstererek dersi sonlandırmaktadır.
    • Eğitimde ayrıca veritabanı seçenekleri (Redis, SQLite), IP adresi üzerinden bağlantı kurma, NumberLab client kullanımı ve platformlar arası bağlantı sorunlarının çözümü gibi konular da ele alınmaktadır. Eğitmen, dersin sonunda GitHub'a kodların yükleneceğini ve gelecek dersin konusunun Azure push notification olacağını belirtmektedir.
    00:12SignalR ile Gerçek Zamanlı Uygulama Geliştirme
    • Açık Akademi canlı yayında SignalR ile web uygulamasından mobil uygulamasına, UWP, Android ve iOS uygulamaları arasında etkileşimli bir chat uygulaması geliştirilecek.
    • SignalR, WebSocket protokolünü kullanarak gerçek zamanlı uygulamalar geliştirebileceğimiz bir framework olup, en basit örneği chat sistemidir.
    • E-ticaret siteleri, canlı maç skorları gibi farklı uygulamalar da SignalR ile geliştirilebilir.
    02:18Proje Hazırlığı
    • MVC projesi açıldı ve SignalR kütüphanesi projeye eklendi.
    • SignalR kütüphanesini kullanmak için README.txt dosyasını okumak ve startup class'ı oluşturmak gerekiyor.
    • Startup class'ı, uygulamanın açıldığında SignalR'ı map etmeyi ve çalıştırmayı sağlıyor.
    07:20Hub Oluşturma
    • Chat uygulaması için ChatHub adında bir hub class'ı oluşturuldu ve Hub class'ından miras alındı.
    • Hub class, SignalR'ın temel class'ı olup, view ile iletişim kurmak için köprü görevi görüyor.
    • ChatHub class'ına SendMessage adında bir metod eklendi ve bu metod username ve message parametrelerini alıyor.
    10:09Front-End Geliştirme
    • Front-end tarafı için jQuery ve SignalR kütüphaneleri projeye eklendi.
    • HTML'de mesaj girişi için bir input ve mesajları görüntülemek için bir div oluşturuldu.
    • JavaScript'te document ready fonksiyonu kullanılarak SignalR ile bağlantı kuruldu ve chat hub'a erişim sağlandı.
    14:02SignalR Hub Kullanımı
    • SignalR Hub'ı kullanırken büyük harfle yazılan C'yi küçük harfle yazmak gerekiyor, aksi takdirde hata yapabilirsiniz.
    • Chat Hub'ı üzerinden mesaj gönderme ve geri gönderme işlemleri gerçekleştirilebilir.
    • Hub'dan front-end taraftaki metodu tetiklemek için client propertisi üzerinden o metoda ulaşılabilir.
    16:03Mesaj Gönderme İşlemi
    • Hub'dan gelen mesajları ekrana append ederek kullanıcıya göstermek mümkündür.
    • Hub'ı başlatmak için connection'ın hub'ını start metoduyla başlatmak gerekiyor.
    • Enter tuşuna basıldığında chat input'tan alınan değerleri Hub'a göndermek için keydown olayı yakalanabilir.
    20:11Kodun Çalıştırılması
    • Proje için NuGet paketi yüklenip, Startup.cs dosyası oluşturulup sayfalar map edilmiştir.
    • Chat Hub sınıfı oluşturulup Hub class'ından miras alınmıştır.
    • Index.html'e jQuery ve SignalR scriptleri eklenmiştir.
    21:23Debug ve Test
    • Chat Hub'a breakpoint koyarak ve projeyi çalıştırdıktan sonra debug işlemi yapılmıştır.
    • Front-end ve back-end tarafında hem Chrome hem de Visual Studio'da debug işlemi gerçekleştirilmiştir.
    • Enter tuşuna basıldığında chat input'tan alınan değer Hub'a gönderilerek, Hub'dan tüm client'lara mesaj gönderilmiştir.
    26:00Hub Metodları
    • Hub sınıfında override edilebilecek onConnected, onDisconnected ve onReconnected metotları bulunmaktadır.
    • Bu metodlar kullanılarak "yiğit kanala girdi", "yiğit kanaldan çıktı" gibi mesajlar gösterilebilir.
    • SignalR'ın querying yapısı kullanılarak kullanıcı adı gibi veriler Hub'a eklenip kullanılabilmektedir.
    29:38Yeni Bir Proje Oluşturma
    • Eğitmen yeni bir proje açarak cross platform uygulama geliştirmeye başlıyor.
    • Proje için Android, iOS ve UWP platformlarını hedefliyor.
    • Proje için SignalR kütüphanesini yüklemek gerekiyor çünkü hem Android hem iOS hem de UWP'de sayılar kullanılacak.
    33:16SignalR ile Hub Dinleme
    • Zaman sayfaları için özel dependency yazmak gerekmiyor, sadece SignalR ile hub dinlemek yeterli.
    • SignalR class'ı için URL, hub connection ve hub proxy'ye ihtiyaç var.
    • Error ve message received olayları için özel delegeler oluşturulmalı.
    35:28Connection Class'ı Oluşturma
    • Connect class'ı, kullanıcı adı ve URL parametreleriyle hub'a bağlanmayı sağlıyor.
    • Hub connection class'ı close, connection slow, receive, reconnect, reconnecting ve state change olaylarını kullanabilir.
    • Hub'a bağlanmak için create hub proxy metodu kullanılıyor ve hub ismi belirtiliyor.
    37:32Hub'a Bağlanma ve Mesaj Gönderme
    • Hub'ı başlatmak için start metodu çağrılıyor ve bağlantı hataları için connection error metodu tetikleniyor.
    • Diğer kullanıcıların mesajlarını handle etmek için chat hub proxy on metodu kullanılıyor.
    • Mesaj göndermek için chat hub proxy invoke metodu kullanılıyor ve sendMessage metodu çağrılıyor.
    43:50URL ve Veritabanı Sorunu
    • Android'de bağlanırken localhost yerine IP adresi kullanılıyor çünkü lokal IP adresi gerekiyor.
    • Mevcut uygulamada mesajlar veritabanında tutulmuyor.
    • Veritabanında tutmak için Entity Framework, NoSQL veya Redis kullanılabilir, mobil uygulamada SQLite kullanılabilir.
    46:25Chat Uygulaması Geliştirme
    • İlk ana sayfada "Join Chat" butonu ekleniyor ve padding değeri 20 olarak ayarlanıyor.
    • İkinci sayfa olarak "Chat Page" oluşturuluyor ve bu sayfada bir entry, bir buton ve bir listview bulunuyor.
    • ListView'in item source'i olarak "message" adlı bir text kullanılıyor.
    48:53Kodlama ve Özellikler
    • Kullanıcı adı almak için bir metot yazılıyor ve chat sayfasına yönlendirme yapılıyor.
    • ObservableCollection kullanılıyor çünkü NotifyCollectionChanged interface'ı sayesinde item ekleme ve çıkarma işlemlerinde otomatik güncelleme sağlanıyor.
    • Client'a bağlantı için "client connect" metodu kullanılıyor ve kullanıcı adı ile bağlantı kuruluyor.
    53:44Uygulamanın Çalıştırılması
    • Uygulama Android, iOS ve UWP platformlarında test ediliyor.
    • Web ve mobil platformlarda sorunsuz çalışan bir chat uygulaması oluşturuluyor.
    • Tüm platformlarda mesajlaşma yapabilme özelliği test ediliyor ve her platformda başarıyla çalışıyor.
    1:02:22Sonuç ve Gelecek Dersler
    • Uygulamanın kodları GitHub'a atılacak ve indirilebilir hale getirilecek.
    • Gelecek derslerde Azure Push Notification konusu işlenecek.
    • Cognitive Service ve chatbot Louise ile yapılan derslerin videoları paylaşılacak.

    Yanıtı değerlendir

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