Fatih Acet
Sr. Frontend Engineer at GitLab
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
By Fatih Acet