Gercek Zamanli Web Uygulamalari

Fatih Acet

@fatihacet

Ben Kimim?

Fatih Acet

Frontend Engineer at GitLab

@fatihacet

fatih@acet.me

fatihacet.com

gitlab.com/fatihacet

github.com/fatihacet

Sunum Akisi

1. Nedir?

2. Neden?

3. Nasil?

4. Sorular?

http://f.acet.me/vote

Gercek Zamanli Web Uygulamasi Nedir?

Kullanicinin sisteme girisinden itibaren gerceklesen onemli degisikliklerin kullaniciya aninda gosterildigi uygulamalardir. 

Uygulama kendisini belli araliklar ile veya tam olarak gerceklestigi anda guncellemek ile yukumludur.

Gercek Zamanli Web Uygulamasi Nedir?

Gercek Zaman = Data

Gercek zamandan bahsedebilmek icin data'ya ihtiyacimiz vardir ve bu data'nin gercek zamanli olabilmesi icin kabul edilebilir bir zaman araliginda karsi tarafa iletilmesi gerekmektedir. Aksi halde data'nin guncelligini yitirmesi soz konusudur.

Gercek Zamanli Web Uygulamasi Nedir?

I am not sure I believe that there is a such thing as "realtime apps" anymore? Apps either update instantly and smoothly or they appear broken. It is much more of an expectation, than an "exciter".

Max Williams (@maxthelion) - CEO, Pusher

Uygulamanin Gercek Zamanli olmasi neden onemlidir?

- Daha iyi bir kullanici deneyimi

- Gelismelerden aninda haberdar olma avantaji

- Uygulamanin canli oldugu hissiyati

- Etkilesim verimliligi Google Analytics

- Interaksiyon devamliligi Retweet, reply

- Uygulamanin daha cok kullanilmasi

Gercek zamanli uygulamalar nasil onem kazandi?

- Sosyal medyanin yaygin kullanimi

- Artan kullanici deneyimi ve beklenti

- Gelisen Web Teknolojileri

- Her gecen gun artan Open Source cozumler ve Third Party Service'ler

- IoT ve akilli aletler

Nasil yapabiliriz?

Neden Third Party Service'ler?

- Uygulamanin kendisine konstantre olmak

- Maintenance'ini yapmak zorunda olmamak

- Scaling'i ile ugrasmak zorunda olmamak

- Community'den faydalanmak

- Backward Compatibility sorunlari ile ugrasmamak

- Ekleyecekleri yeni ozellikleri kullanabiliyor olmak

- Native Mobile API destegi

Meteor.js

- Full Stack JavaScript Platform

- Kendine ait bir gelistirme ekosistemine sahip

- Acik kaynakli

- Web ve Mobile destekliyor

- Meteor Hosting

- Meteor CLI

- Atmosphere paket repository'si

https://meteor.com

Firebase

- Realtime backend as a Service

- Realtime database

- Firebase CLI Tool

- Authentication

- Storage

- Hosting

- Firebase Console

- Firebase Analytics

- Web, iOS, Android

https://firebase.google.com

Firebase

  <script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',
      databaseURL: '<your-database-url>',
      storageBucket: '<your-storage-bucket>'
    };
    firebase.initializeApp(config);
  </script>

Oncelikle Firebase Console'dan yeni bir proje olusturup API Key'lerimizi almamiz gerekiyor. Asagidaki kod Firebase App'imizin ilk adimi.

Firebase

Firebase'in bize verdigi Realtime DB'ye ulasmak icin

  var database = firebase.database();

DB'ye yeni bir data eklemek icin

  database.ref('users').set({ username: 'fatihacet' });

  database.ref('logins').push({ time: Date.now(), userId: 1 });

Firebase

DB'deki data'yi okumak icin

  database.ref('users').on('value', function(snapshot) {
    console.log(snapshot.val());
  });

DB'deki data'nin degisikliginden haberdar olmak icin

  database.ref('users').on('child_added', function(snapshot) {
    console.log(snapshot.val());
  });

Firebase

- value

- child_added

- child_removed

- child_updated

- child_moved

Realtime data event'leri

Firebase

Firebase CLI

  $ npm install -g firebase-tools

  $ firebase init # Yeni bir Firebase projesi olusturur

  $ firebase list # Firebase projelerinizi listeler

  $ firebase serve # Local gelistirme ortami saglar

  $ firebase deploy # Uygulamanizi Firebase sunucusuna deploy eder

Sorular?

Tesekkurler <3