Oluşturulan web SDK'larını kullanın

Firebase Data Connect istemci SDK'ları, sunucu tarafı sorgu 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, Data Connect işlemleri dağıtıldığında 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 taraflı SDK'ları da otomatik olarak oluşturur.

Hizmetinizde ve istemci uygulamalarınızda yinelenen güncellemeler yaptığınızda hem sunucu hem de istemci tarafı güncellemeleri dağıtıma 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.yaml dosyasında birkaç girişe bağlanır.

SDK oluşturma işlemini başlatın

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir, oluşturulan SDK'nın nereye yayınlanacağını belirtir.

package, paket adını belirtir.

packageJsonDir, paketin nereye yükleneceğini belirtir.

Bu durumda, bu eş bağımlılığının yerine getirildiğinden emin olmak için firebase@latest yükleyin.

Yolları node_modules ile göreceli yapılandır

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 dizinde veya node_modules'ye erişebilen bir alt dizinde oluşturulması 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, çalışır durumda (yeniden) yükleme iş akışlarında yararlı bir özellik olabilir.

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

CI testlerine göndermek üzere proje kaynaklarını hazırlama gibi bazı senaryolarda Firebase KSA'yı toplu güncelleme için ç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 içinde serviceId ve location, connector.yaml konumunda ise connectorId metriklerinden otomatik olarak oluşturuldu.

Kitaplıkları içe aktar

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şlevlerinin kullanıldığı 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üz her zaman 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.

Ç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"]
                              }
                   }
            }
     }
  }