Firebase Data Connect istemci SDK'ları, sunucu tarafı sorgularınızı ve mutasyonlarınızı doğrudan bir Firebase uygulamasından çağırmanıza olanak tanır. Data Connect hizmetinize dağıttığınız şemaları, sorguları ve mutasyonları tasarlarken paralel olarak özel bir istemci SDK'sı oluşturursunuz. Ardından, bu SDK'daki yöntemleri istemci mantığınıza entegre edersiniz.
Başka bir yerde de belirttiğimiz gibi, Data Connectsorgularının ve mutasyonlarının istemci kodu tarafından gönderilmediğini ve sunucuda yürütülmediğini belirtmek önemlidir. Bunun yerine, dağıtılan Data Connect işlemleri Cloud Functions gibi sunucuda depolanır. Bu nedenle, mevcut kullanıcıların (ör. eski uygulama sürümlerinde) uygulamayı kullanamamasını önlemek için istemci tarafında ilgili değişiklikleri dağıtmanız gerekir.
Bu nedenle Data Connect, sunucu üzerinde dağıtılan şemalarınızı, sorgularınızı ve mutasyonlarınızı prototip haline getirmenizi sağlayan bir geliştirici ortamı ve araçları sunar. Ayrıca, siz prototip oluştururken istemci tarafı SDK'ları otomatik olarak oluşturur.
Hizmetinizde ve istemci uygulamalarınızda güncellemeleri iteratif olarak uyguladığınızda hem sunucu hem de istemci tarafı güncellemeleri dağıtılmaya hazır olur.
Web SDK'nızı oluşturma
Çoğu Firebase projesinde olduğu gibi, Firebase Data Connect istemci kodunuz üzerinde yerel bir proje dizininde çalışırsınız. Hem Data Connect VS Code uzantısı hem de Firebase CLI, istemci kodu oluşturmak ve yönetmek için önemli yerel araçlardır.
SDK oluşturma seçenekleri, projenizi başlattığınızda oluşturulan dataconnect.yamldosyasındaki çeşitli girişlere göre ayarlanır.
SDK oluşturma işlemini başlatma
connector.yaml dosyanıza outputDir, package ve (web SDK'sı için) packageJsonDir dosyalarınızı ekleyin.
generate:
javascriptSdk:
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
outputDir, oluşturulan SDK'nın nereye çıktı vermesi gerektiğini belirtir.
package, paket adını belirtir.
packageJsonDir, paketin nereye yükleneceğini belirtir.
Bu durumda, bu eş bağımlığın karşılandığından emin olmak için firebase@latest'ü yükleyin.
Yolları node_modules'e göre yapılandırın
Web SDK'sı için Data Connect, SDK'nızı yüklemek üzere npm link'u kullandığından, oluşturulan SDK'nızın node_modules yolunuzla aynı düzeyde bir dizine veya node_modules'ye erişebilen bir alt dizine yazılması gerekir.
Diğer bir deyişle, oluşturulan SDK'nızın düzgün çalışması için firebasedüğüm modülüne erişmesi gerekir.
Örneğin, node_modules dosyanız my-app/ klasöründeyse js-email-generated'ın üst klasörü node_modules'ten içe aktarabilmesi için çıkış dizininiz my-app/js-email-generated olmalıdır.
my-app/
dataconnect/
connector/
connector.yaml
node_modules/
firebase/
js-email-generated/
// connector.yaml
connectorId: "my-connector"
generate:
javascriptSdk:
outputDir: "../../js-email-generated"
package: "@myapp/my-connector"
Alternatif olarak, modüllerinizin kökte barındırıldığı bir monorepo'nuz varsa çıkış dizininizi monorepo'nuzdaki herhangi bir klasöre yerleştirebilirsiniz.
my-monorepo/
dataconnect/
connector/
connector.yaml
node_modules/
firebase/
my-app/
js-email-generated/
package.json
// connector.yaml
connectorId: "my-connector"
generate:
javascriptSdk:
outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated
Prototip oluşturma aşamasında SDK'ları güncelleme
Data Connect VS Code uzantısı ve Data Connect emülatörüyle etkileşimli olarak prototip oluşturuyorsanız şemaları, sorguları ve mutasyonları tanımlayan .gql dosyalarını değiştirirken SDK kaynak dosyaları otomatik olarak oluşturulur ve güncellenir. Bu özellik, sıcak (yeniden) yükleme iş akışlarında yararlı olabilir.
.gql güncellemelerini izleyebilir ve SDK kaynaklarının otomatik olarak güncellenmesini sağlayabilirsiniz.
Alternatif olarak, .gql dosyaları değiştiğinde SDK'ları yeniden oluşturmak için KSA'yı kullanabilirsiniz:
firebase dataconnect:sdk:generate --watch
Entegrasyon ve üretim sürümleri için SDK'lar oluşturma
Proje kaynaklarını CI testlerine gönderilecek şekilde hazırlama gibi bazı senaryolarda toplu güncelleme için Firebase CLI'yi çağırabilirsiniz.
Bu durumlarda firebase dataconnect:sdk:generate simgesini kullanın.
Müşteri kodunu ayarlama
Data Connect uygulamanızı başlatma
Öncelikle, standart Firebase sırasını kullanarak uygulamanızı başlatın.
initializeApp({...});
Data Connect web SDK'sını başlatma
Data Connect'i ayarlamak için kullandığınız bilgileri kullanarak Data Connect örneğinizi başlatın (tüm bilgiler Firebase konsolunun Data Connect sekmesinde bulunur).
ConnectorConfig nesnesi
SDK için bir bağlayıcı yapılandırma nesnesi gerekir.
Bu nesne, dataconnect.yaml'deki serviceId ve location ile connector.yaml'deki connectorId'ten otomatik olarak oluşturulur.
Kitaplıkları içe aktarma
Müşteri kodunuzu başlatmak için gereken iki içe aktarma grubu vardır: genel Data Connect içe aktarma işlemleri ve belirli, oluşturulmuş SDK içe aktarma işlemleri.
// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';
// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';
Web istemcilerinizin prototipini oluşturma ve test etme
İstemcileri yerel bir emülatör kullanacak şekilde ayarlama
Data Connect emülatörünü Data Connect VS Code uzantısından veya CLI'den kullanabilirsiniz.
Uygulamayı, emülatöre bağlanacak şekilde ayarlama işlemi her iki senaryo için de aynıdır.
import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name
const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`
// Make calls from your app
Üretim kaynaklarına geçmek için emülatöre bağlanma satırlarını yorumlayın.
Örnek alma
getDataConnect çağrısı yalnızca Data Connect emülatörüne bağlanmak istiyorsanız gereklidir.
Aksi takdirde, oluşturulan SDK sizin için otomatik olarak bir DataConnect nesnesi örneği oluşturur.
İstemci tarafında sorguları kullanma
Oluşturulan kod, önceden tanımlanmış sorgu referanslarıyla birlikte gelir. Tek yapmanız gereken bunları içe aktarıp çalıştırmaktır.
import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';
const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);
SDK sorgu yöntemlerini çağırma
Aşağıda bu işlem kısayol işlevlerini kullanan bir örnek verilmiştir:
import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out // to the server.
listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}
Değişikliklere abone olma
Değişikliklere abone olabilirsiniz (bu abonelik, bir sorgu yürüttüğünüzde güncellenir).
const listRef = listAllMoviesRef();
// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
updateUIWithMovies(data.movies);
});
await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`
İstemci tarafında mutasyonları kullanma
Mutasyonlara sorgularla aynı şekilde erişilebilir.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
Web SDK'sındaki veri türleri
Data Connect sunucusu, yaygın GraphQL veri türlerini temsil eder. Bunlar SDK'da aşağıdaki gibi gösterilir.
| Veri Bağlantısı Türü | TypeScript |
|---|---|
| Zaman damgası | dize |
| Tarih | dize |
| UUID | dize |
| Int64 | dize |
| Çift | Sayı |
| Kayan | Sayı |
Çerçevelerle ilgili dikkat edilmesi gereken noktalar
Angular
Kod oluştururken Angular CLI, bağımlılık optimizasyon kodu nedeniyle yeni değişiklikleri algılamaz. Bu sorunu düzeltmek için angular.json dosyanızı değiştirmeniz gerekir.
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}