Vue.js ve Firestore ile Çalışmaya Başlayın

Google Firebase, Firebase Realtime Database'in başarısını temel alan, ancak bazı şık özellikler ekleyen 'Firestore' (şu anda beta aşamasında) adlı yeni bir veri depolama olanağına sahiptir. Bu makalede, Vue.js ve Firestore kullanan bir web uygulamasının temellerini ayarlayacağız.

Diyelim ki yeni bir ürün için harika bir fikriniz var (örneğin, bir sonraki Twitter, Facebook veya Instagram, çünkü asla çok fazla sosyalleşemeyiz, değil mi?). Başlamak için, bu ürünün bir prototipini veya Asgari Canlı Ürününü ( MVP ) yapmak istiyorsunuz. Amaç, kullanıcılara gösterebilmeniz, geri bildirim alabilmeniz ve kullanımı analiz edebilmeniz için uygulamanın çekirdeğini olabildiğince hızlı oluşturmaktır. Ağırlıklı olarak geliştirme hızı ve hızlı yineleme üzerinde durulmuştur.

Ancak inşa etmeye başlamadan önce harika ürünümüzün bir isme ihtiyacı var. Buna "Amazeballs" diyelim. Efsane olacak - bekleyin - dary !

İşte nasıl hayal ettiğimin bir görüntüsü:

Amazeballs uygulamamız - elbette - kişisel hayatınızın sevimsiz haberlerini arkadaşlarınızla, sözde Balls'ta paylaşmakla ilgilidir. En üstte, Topları göndermek için bir form var, aşağıda arkadaşlarınızın Topları var.

Bir MVP oluştururken, size temel özellikleri hızlı bir şekilde uygulama gücü ve daha sonra özellikleri hızla ekleme ve değiştirme esnekliği sağlayan araçlara ihtiyacınız olacak. Firebase paketi (Google tarafından) ve Firestore adlı yeni gerçek zamanlı veritabanı tarafından desteklenen bir Javascript oluşturma çerçevesi olduğu için seçimim Vue.js'ye düşüyor.

Firestore'a, normal HTTP yöntemleri kullanılarak doğrudan erişilebilir; bu, onu kendi sunucularınızdan herhangi birini yönetmeniz gerekmediği, ancak yine de verileri çevrimiçi olarak depolamanız gereken tam bir hizmet olarak arka uç çözümü yapar.

Kulağa güçlü ve ürkütücü geliyor, ancak terletmeden, bu yeni web uygulamasını oluşturma ve barındırma adımlarında size rehberlik edeceğim. Bu sayfada kaydırma çubuğunun ne kadar büyük olduğuna dikkat edin; çok büyük adımlar yok. Ayrıca, kod parçacıklarının her birini bir kod deposunda nereye koyacağınızı bilmek istiyorsanız, github'da Amazeballs'ın tam olarak çalışan bir sürümünü görebilirsiniz.

Hadi başlayalım

Vue.js ile başlıyoruz. HTML ile başlayıp yavaş yavaş ona mantık eklediğinizden, Javascript'e yeni başlayanlar için harikadır. Ama küçümsemeyin; birçok güçlü özellik barındırıyor. Bu kombinasyon, onu bir ön uç çerçeve için ilk tercihim yapıyor.

Vue.js, iskele projeleri için bir komut satırı arayüzüne (CLI) sahiptir. Bunu temel hazırlıkları çabucak yapmak için kullanacağız. Önce CLI'yi kurun, ardından onu "webpack-simple" şablonuna dayalı yeni bir proje oluşturmak için kullanın.

 npm install -g vue-cli vue init webpack-simple amazeballs

Ekrandaki adımları takip ederseniz ( npm install ve npm run dev ) büyük bir Vue.js logolu bir tarayıcı açılacaktır.

Tebrikler! Kolaydı.

Sırada, bir Firebase projesi oluşturmamız gerekiyor. https://console.firebase.google.com/ adresine gidin ve bir proje oluşturun. Size sınırlı bir veritabanı (1 GB veri, günde 50 bin okuma) ve 1 GB barındırma sağlayan ücretsiz Spark planında bir proje başlar. Bu, MVP'miz için fazlasıyla yeterli ve uygulama çekiş kazandığında kolayca yükseltilebilir.

İhtiyacınız olan yapılandırmayı görüntülemek için 'Firebase'i web uygulamanıza ekleyin' üzerine tıklayın. Bu yapılandırmayı uygulamamızda kullanacağız, ancak paylaşılan durumu kullanarak güzel bir Vue.js tarzında.

Önce npm install firebase , ardından src/store.js adında bir dosya oluşturun. Bu, her Vue.js bileşeninin bileşen ağacından bağımsız olarak ona erişebilmesi için paylaşılan durumu koyacağımız noktadır. Dosyanın içeriği aşağıdadır. Devlet şimdilik sadece bazı yer tutucular içeriyor.

 import Vue from 'vue'; import firebase from 'firebase/app'; import 'firebase/firestore'; // Initialize Firebase, copy this from the cloud console // Or use mine :) var config = { apiKey: "AIzaSyDlRxHKYbuCOW25uCEN2mnAAgnholag8tU", authDomain: "amazeballs-by-q42.firebaseapp.com", databaseURL: "https://amazeballs-by-q42.firebaseio.com", projectId: "amazeballs-by-q42", storageBucket: "amazeballs-by-q42.appspot.com", messagingSenderId: "972553621573" }; firebase.initializeApp(config); // The shared state object that any vue component can get access to. // Has some placeholders that we'll use further on! export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) => console.log(message) };

Şimdi Firebase parçalarını ekleyeceğiz. Firestore'dan veri almak için bir kod parçası:

 // a reference to the Balls collection const ballsCollection = firebase.firestore() .collection('balls'); // onSnapshot is executed every time the data // in the underlying firestore collection changes // It will get passed an array of references to // the documents that match your query ballsCollection .onSnapshot((ballsRef) => { const balls = []; ballsRef.forEach((doc) => { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); store.ballsInFeed = balls; });

Ardından writeBall işlevini gerçekten bir yazma işlemi gerçekleştiren bir işlevle değiştirin:

 writeBall: (message) => ballsCollection.add({ createdOn: new Date(), author: store.currentUser, message })

İkisinin nasıl tamamen ayrıldığına dikkat edin. Bir koleksiyona eklediğinizde, bir öğe eklediğiniz için onSnapshot tetiklenir. Bu, devlet yönetimini çok daha kolay hale getirir.

Artık herhangi bir Vue.js bileşeninin kolayca erişebileceği bir paylaşılan durum nesnesine sahipsiniz. İyi kullanalım.

Mesaj Gönder!

İlk olarak, mevcut kullanıcının kim olduğunu bulalım.

Firebase, kullanıcınızı tanıma işinde size yardımcı olan kimlik doğrulama API'lerine sahiptir. Firebase Konsolunda Kimlik Doğrulama → Oturum Açma Yönteminde uygun olanları etkinleştirin. Şimdilik, çok süslü olmayan bir düğmeyle Google Login'i kullanacağım.

Firebase size herhangi bir arayüz yardımı sağlamaz, bu nedenle kendi “Google/Facebook/Twitter ile Giriş” düğmelerinizi ve/veya kullanıcı adı/şifre giriş alanlarınızı oluşturmanız gerekir. Giriş bileşeniniz muhtemelen biraz şöyle görünecektir:

 <template> <div> <button @click.prevent="signInWithGoogle">Log in with Google</button> </div> </template> <script> import firebase from 'firebase/app'; import 'firebase/auth'; export default { methods: { signInWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } } } </script>

Şimdi, oturum açma bulmacasının bir parçası daha var ve bu, mağazada currentUser değişkenini alıyor. Bu satırları store.js'nize ekleyin :

 // When a user logs in or out, save that in the store firebase.auth().onAuthStateChanged((user) => { store.currentUser = user; });

Bu üç satır nedeniyle, şu anda oturum açmış olan kullanıcı her değiştiğinde (oturum açar veya kapatır), store.currentUser da değişir. Hadi biraz Top gönderelim!

Giriş formu, mağazamızdaki writeBall işlevine bağlanan ayrı bir Vue.js bileşenidir, şöyle:

 <template> <form @submit.prevent="formPost"> <textarea v-model="message" /> <input type="submit" value="DUNK!" /> </form> </template> <script> import { store } from './store'; export default { data() { return { message: null, }; }, methods: { formPost() { store.writeBall(this.message); } }, } </script>

Mükemmel! Artık insanlar giriş yapabilir ve Top göndermeye başlayabilir. Ama bekleyin, yetkilendirmeyi kaçırıyoruz. Topları yalnızca kendiniz gönderebilmenizi istiyoruz ve Firestore Kuralları burada devreye giriyor. Bunlar, veritabanına erişim ayrıcalıklarını tanımlayan Javascript-ish kodundan oluşur. Bunları Firestore konsolu aracılığıyla girebilirsiniz, ancak bunları diskteki bir dosyadan yüklemek için Firebase CLI'yi de kullanabilirsiniz. Şu şekilde kurun ve çalıştırın:

 npm install -g firebase-tools firebase login firebase init firestore

Uygulamanız için yetki ekleyebileceğiniz firestore.rules adlı bir dosya alacaksınız. Her kullanıcının kendi toplarını ekleyebilmesini, ancak başka birinin toplarını eklemesini veya düzenlememesini istiyoruz. Aşağıdaki örnek güzel işliyor. Herkesin veritabanındaki tüm belgeleri okumasına izin verir, ancak yalnızca oturum açmışsanız ve eklenen kaynağın şu anda oturum açmış olan kullanıcıyla aynı olan bir “yazar” alanı varsa ekleyebilirsiniz.

 service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow create: if request.auth.uid != null && request.auth.uid == request.resource.data.author; } } }

Sadece birkaç satır kod gibi görünüyor, ancak çok güçlü ve çok hızlı bir şekilde karmaşık hale gelebilir. Firebase bu kısımda daha iyi araçlar üzerinde çalışıyor, ancak şimdilik istediğiniz gibi davranana kadar deneme yanılma yöntemiyle çalışıyor.

firebase deploy çalıştırırsanız, Firestore kuralları dağıtılır ve üretim verilerinizin güvenliği saniyeler içinde sağlanır.

Sunucu Mantığı Ekleme

Ana sayfanızda, arkadaşlarınızın Topları ile bir zaman çizelgesi görmek istiyorsunuz. Bir kullanıcının hangi Topları gördüğünü nasıl belirlemek istediğinize bağlı olarak, bu sorguyu doğrudan veritabanında gerçekleştirmek bir performans darboğazı olabilir. Bir alternatif, gönderilen her Ball'da etkinleştirilen ve onu yazarın tüm arkadaşlarının duvarlarına ekleyen bir Firebase Bulut İşlevi oluşturmaktır. Bu şekilde asenkron, engelleyici olmayan ve sonunda tutarlıdır. Ya da başka bir deyişle, oraya ulaşacak.

Örnekleri basit tutmak için, oluşturulan Balls'u dinleme ve mesajlarını değiştirme ile ilgili küçük bir demo yapacağım. Bunun özellikle yararlı olduğu için değil, size bulut işlevlerini çalışır duruma getirmenin ne kadar kolay olduğunu göstermek için.

 const functions = require('firebase-functions'); exports.createBall = functions.firestore .document('balls/{ballId}') .onCreate(event => { var createdMessage = event.data.get('message'); return event.data.ref.set({ message: createdMessage + ', yo!' }, {merge: true}); });

Oh, bekle, sana bu kodu nereye yazacağını söylemeyi unuttum.

 firebase init functions

Bu, bir index.js ile işlev dizinini oluşturur. Bu, kendi Bulut İşlevlerinizi yazabileceğiniz dosyadır. Ya da çok etkilendiyseniz benimkini kopyalayıp yapıştırabilirsiniz.

Bulut İşlevleri , uygulamanızın farklı bölümlerini ayırmak ve bunların eşzamansız olarak iletişim kurmasını sağlamak için size güzel bir yer sağlar. Veya mimari çizim tarzında:

Son Adım: Dağıtım

Firebase'in bunun için Barındırma seçeneği vardır ve bunu Firebase CLI aracılığıyla kullanabilirsiniz.

 firebase init hosting

Genel dizin olarak dist seçin ve ardından tüm URL'leri index.html olarak yeniden yazmak için 'Evet'i seçin. Bu son seçenek, uygulamanızdaki güzel URL'leri yönetmek için vue-router kullanmanıza olanak tanır.

Şimdi küçük bir engel var: dist klasörü, kodunuzun doğru yapısına işaret eden bir index.html dosyası içermiyor. Bunu düzeltmek için package.json dosyanıza bir npm betiği ekleyin:

 { "scripts": { "deploy": "npm run build && mkdir dist/dist && mv dist/*.* dist/dist/ && cp index.html dist/ && firebase deploy" } }

Şimdi sadece npm deploy çalıştırın ve Firebase CLI size barındırılan kodunuzun URL'sini gösterecektir!

Bu Mimari Ne Zaman Kullanılır?

Bu kurulum bir MVP için mükemmeldir. Bunu üçüncü kez yaptığınızda, ücretsiz olarak barındırılan ölçeklenebilir bir veritabanı tarafından desteklenen, dakikalar içinde çalışan bir web uygulamasına sahip olacaksınız. Hemen özellik oluşturmaya başlayabilirsiniz.

Ayrıca, büyümek için çok fazla alan var. Bulut İşlevleri yeterince güçlü değilse, örneğin Google Cloud'da docker üzerinde çalışan geleneksel bir API'ye dönebilirsiniz. Ayrıca Vue.js mimarinizi vue-router ve vuex ile yükseltebilir ve vue-cli şablonunda bulunan web paketinin gücünü kullanabilirsiniz.

Yine de hepsi gökkuşakları ve tek boynuzlu atlar değil. En kötü bilinen uyarı, müşterilerinizin hemen veritabanınızla konuşmasıdır. Ham verileri istemci için daha kolay bir biçime dönüştürmek için kullanabileceğiniz bir ara katman katmanı yoktur. Bu nedenle, müşteri dostu bir şekilde saklamanız gerekir. Müşterileriniz değişiklik istediğinde, Firebase'de veri geçişlerini çalıştırmanın oldukça zor olduğunu göreceksiniz. Bunun için her kaydı okuyan, dönüştüren ve geri yazan özel bir Firestore istemcisi yazmanız gerekir.

Veri modelinize karar vermek için zaman ayırın. Daha sonra veri modelinizi değiştirmeniz gerekirse, tek seçeneğiniz veri taşımadır.

“

Peki bu araçları kullanan proje örnekleri nelerdir? Vue.js kullanan büyük isimler arasında Laravel, GitLab ve (Hollandalılar için) nu.nl bulunmaktadır. Firestore hala beta sürümündedir, bu nedenle henüz çok fazla aktif kullanıcı yok, ancak Firebase paketi Ulusal Halk Radyosu , Shazam ve diğerleri tarafından zaten kullanılıyor. İlk beş günde bir milyondan fazla kez indirilen Unity tabanlı Road Warriors oyunu için iş arkadaşlarımın Firebase'i uyguladıklarını gördüm. Oldukça fazla yük alabilir ve web, yerel mobil, Unity vb. istemciler için çok yönlüdür.

Nereye Kaydolacağım?!

Daha fazla bilgi edinmek istiyorsanız, aşağıdaki kaynakları göz önünde bulundurun:

• Yukarıdaki kodun tamamını içeren çalışma örneği
• Vue.js, vue-router, vue-cli ile ilgili belgeler
• Firebase ile ilgili belgeler
• Firebase'i daha iyi tanımanın eğlenceli bir yolu - YouTube Blogları

Mutlu kodlama!