MVCSHARP Ailesi ile yazılım geliştirmeye dair makaleler

Firabase Anlık Veri İletimi Firebase Giriş

 

Merhaba arkadaşlar bugun sizler ile firebase bir giriş yapalım ve bir de yanında örnek uygulama yapalım cool

Yapacağımız uygulamayı buradan test edebilirsiniz laugh

Firebase nedir ? 

Basitçe JSON ile WebSocket üzerinden hızlıca haberleşen kullanımı kolay olan bir yapıdır ve google tarafından satın alınmıştır.

Dökümantasyona buradan ulaşabilirsiniz.

 

Fazla uzatmadan bir giriş yapalım.

Öncelikle buradan çok basit ve hızlı bir şekilde üye oluyoruz

FireBase Üyelik

Üyeliğimizi oluşturduk sisteme giriş yaptık şimdi hemen yeni bir app oluşturalım.

firebase create app

Arkadaşlar Create New App dedikten sonra ManageAPP seçeneğini tıklayalım ve ve veri akışını izleyeceğimiz ekranımıza gelelim wink

Firebase Manage APP

Arkadaşlar buraya kadar yaptıklarımız kendimize özel bi app oluşturmak ve veri alışverişini kontrol etmek içindi.

Şimdi sıra geldi mvc projemizi oluşturmaya, hemen yeni bir proje oluşturalım ve Controllerimize bir ActionResult ekleyelim tabi bu ActionResult'a bir de view gerek wink

Ben Controller'imi DemoController ActionResult'umu da OnlineChat olarak belirliyorum.

    public class DemoController : Controller
    {
        public ActionResult OnlineChat()
        {
            return View();
        }
    }

 

Kodlamaya başlamadan önce yapacağımız uygulamadan biraz bahsedelim arkadaşlar.

Uygulamamız anlık olarak chat yapmamızı sağlayan bir uygulama olacak. Mesajı gönderenin kullanıcı adı default olarak PC adı olacak.

Mesaj gönderim tarihi mesaj ve gönderen bilgisini Chat sayfamızda izleyeceğiz.

 

Html Kodlarımız incelersek mesajımızı yazacağımız bir textbox ve bu mesajı göndermemiz için bir de button mevcut , son olarak mesajlarımızı göstereceğimiz bir de Messages id'sine sahip bir div alanımız var.

Geri kalanları örneğimizin Janjanlı gözükmesi için cheeky

 

<div class="contents">
    <h1>
        Demo Online Chat
    </h1>
    <div style="height:500px;overflow:scroll" id="Messages"></div>
    <div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                <input type="text" class="searchbox form-control col-lg-8" id="msg" placeholder="Mesajınız..." style="font-style: italic;">
                <span class="input-group-btn">
                    <button class="btn btn-default" id="btnMsg" type="button">Gönder</button>
                </span>
            </div>
        </div>
    </div>

</div>

 

Firebase uygulamamızı kullanabilmemiz için scriptlerimizi referans ediyoruz

<script src='https://cdn.firebase.com/js/client/2.0.4/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

 

Şimdi yazacaklarımızı Script tagları arasına almayı unutmayın

<script type="text/javascript">
    //..............
    //Kodlarımız
    //..............
</script>

 

Evet arkadaşlar işimize PC adınızı almak ile başlayalım yukarıda da dediğimiz gibi default olarak kullanıcı adınız PC adınız olacaktı.

    var userName = '@System.Environment.MachineName';

Şimdi veritabanımızı oluşturalım, Linkimize dikkat edin arkadaşlar önceden oluşturduğumuz uygulamamızın yanına "/Messages" dedik.

   var DB= new Firebase('https://mvcsharpchat.firebaseio.com/Messages')

Şimdi gönder button'umuzun click fonksiyonunu yazalım. Arkadaşlar Fonksiyonu incelediğinizde açıklama satırları ile aşamaları tek tek anlattım.

Tahminimce aklınızdan veri tabanımızda hiç alan oluşturmadığımız halde direk name,msg,date diye alanları direk yazdık ve karşılıklarına da kendi değerlerimizi atadık diyebilirsiniz.

Verilerimize ulaşacağımız alanları yükleme esnasında oluşturuyoruz yani alanlarımız sabit bir şekilde olmak zorunda değil ama sabit tutmanızı tavsiye ederim.

Farklı bir veri yapısı için farklı bir veri yapısı oluşturmak daha mantıklı olur diye düşünüyorum..

    //Button tıklandığında
    $('#btnMsg').click(function (e) {

        //msg textbox'un value(içeriğini/mesajımızı)'sini msg değişkenine ata
        var msg = $("#msg").val();

        //mesajımızın boşluklarını silinip(.trim()) boş değilse kontrolü yapıyoruz
        if (msg.trim().length > 0) {
            //date değişkenimize "DateTime.Now" diyerek mesajımızı yazdığımız zamanı aktarıyoruz
            var date = '@DateTime.Now'

            //Yukarıda oluşturduğumuz databasemize verilerimizi ekliyoruz
            DB.push({
                name: userName,
                msg: msg,
                date: date
            });

            //Ekleme işlemi bittikten sonra mesaj textbox'umuzun içerisindeki mesajı siliyoruz
            $('#msg').val('');
        }
    });

 

Arkadaşlar şimdi Message div'imizin içerisine kayıtlı olaran verilerimizi çekip html olarak append edeceğimiz bir fonksiyona ihtiyacımız var.

Bu fonksiyon parametre olarak kullanıcı,mesaj ve tarih alıcak ve belirlediğimiz formatta Message div'imize append edecek.

Ekleme işlemini yaptıktan sonrada scroll'u aşağıya kaydıracak cool 

Ben kendi html yapımı oluşturdum.

    function displayChatMessage(name, text, time) {
        $("#Messages").append("<div class='contents'><time class='posted'> " + time + " </time><p> <span class='glyphicon glyphicon-user'></span><span class='label label-default tags'>" + name + "</span> </p><p><span class='glyphicon glyphicon-envelope'></span><label>" + text + "</label><div class='separator'></div></div>");
        $('#Messages')[0].scrollTop = $('#Messages')[0].scrollHeight;
    };

 

Şimdi kayıtlarımızı çekelim ama bi sınır koymak lağzım buna tüm kayıtları çekerek fazla yük bindirmeye gerek yok ben limitimi 30 olarak belirliyorum.

  var MessagesQuery = DB.endAt().limit(30);

Şimdi çektiğimiz verileri yukarıda yazdığımız ."displayChatMessage" fonksiyonumuzun da yardımı ile Message div'imize append edelim.

    MessagesQuery.on('child_added', function (snapshot) {
        var message = snapshot.val();
        displayChatMessage(message.name, message.msg, message.date);
    });

Yazdıklarımızı test edip uygulamamızı çalıştırdığımızda anlık olarak verilerimizin eklendiğini görebilirsiniz.

Firebase

Evet arkadaşlar uygulamamız bu kadar bu uygulamayı size zaten başlangışta yaptırıyor ama ben türkçe bi sunum olsun diye tekrar anlatmış oldum.

Burdan yola çıkarak birçok uygulama geliştirebilirsiniz.

Örneğin  mesaj gönderme esnasında Json ile kendi veritabanınıza mesajları kaydedebilirsiniz, kendi üyelik sisteminizi kullanarak daha kapsamlı olarak bu işlemi yapabilirsiniz.

Benim size aktardığım çok yüzeysel bir konu daha geniş olarak bende pek bilgi sahibi değilim ama işlerden fırsat buldukça üzerine gideceğim bir konudur.

Şimdilik bu kadar uygulamaya gözatmayı unutmayın.

Saygılarımla Fatih BÜLBÜL

 

Facebook Üzerinden Yorumlar