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

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. Şemaları, sorguları ve mutasyonları tasarlarken özel bir istemci SDK'sı oluşturursunuz. Bu öğeleri Data Connect hizmetinize dağıtırsınız. Ardından, bu SDK'daki yöntemleri istemci mantığınıza entegre edersiniz.

Başka bir yerde de belirttiğimiz gibi, Data Connectsorguların ve mutasyonların istemci kodu tarafından gönderilmediğini ve sunucuda yürütülmediğini unutmamak önemlidir. Bunun yerine, dağıtıldığında Data Connect işlemleri Cloud Functions gibi sunucuda depolanır. Bu nedenle, mevcut kullanıcıların (ör. uygulamanın eski sürümlerinde) deneyimini bozmamak için ilgili istemci tarafı değişikliklerini dağıtmanız gerekir.

Bu nedenle Data Connect, sunucuya dağıtılan şemalarınızı, sorgularınızı ve mutasyonlarınızı prototip oluşturmanıza olanak tanıyan bir geliştirme ortamı ve araçlar sunar. Ayrıca, prototip oluştururken istemci tarafı SDK'larını otomatik olarak oluşturur.

Hizmetinizde ve istemci uygulamalarınızda güncellemeleri yineledikten sonra hem sunucu hem de istemci tarafı güncellemeleri dağıtılmaya hazır olur.

İstemci geliştirme iş akışı nedir?

Başlangıç bölümünü incelediyseniz Data Connect için genel geliştirme akışıyla tanışmışsınızdır. Bu kılavuzda, şemanızdan Web SDK'ları oluşturma ve istemci sorguları ile mutasyonlarla çalışma hakkında daha ayrıntılı bilgi edinebilirsiniz.

Hızlı başlangıç uygulama deposuyla istemci geliştirme hakkında bilgi edinebilir ve web için codelab'imizi inceleyerek tam özellikli bir Data Connect uygulaması oluşturabilirsiniz.

Özetlemek gerekirse, oluşturulan Web SDK'larını istemci uygulamalarınızda kullanmak için aşağıdaki ön koşul adımlarını uygulamanız gerekir:

1. Firebase'i web uygulamanıza ekleyin.

Ardından:

1. Uygulama şemanızı geliştirin.
2. İstemci kodunuzu JavaScript SDK, React veya Angular kitaplıklarıyla başlatın.
3. React ve Angular için Tanstack Query paketlerini yükleyin.

4. SDK oluşturmayı ayarlayın:

   • Veri Bağlantısı VS Code uzantımızdaki SDK'yı uygulamaya ekle düğmesiyle
   • JavaScript SDK için connector.yaml'nızı veya React ya da Angular'ı güncelleyerek.

5. Kitaplıkları ve oluşturulan kodu JavaScript SDK, React veya Angular ile içe aktarın.

6. JavaScript SDK, React veya Angular ile sorgulara ve mutasyonlara yönelik çağrıları uygulayın.

7. Data Connect emülatörünü JavaScript SDK, React veya Angular ile ayarlayarak test edin.

Firebase JavaScript SDK'sı ile istemci kodu uygulama

Bu bölümde, Firebase JavaScript SDK'sını kullanarak istemcileri nasıl uygulayabileceğiniz açıklanmaktadır.

React veya Angular kullanıyorsanız alternatif kurulum talimatlarını ve çerçeveler için Data Connect SDK'ları oluşturma hakkında ek dokümanlara yönelik bağlantıları inceleyin.

Uygulamanızı başlatma

Öncelikle uygulamanızı standart Firebase sırasını kullanarak başlatın.

initializeApp({...});

Oluşturulan JavaScript SDK'sını yükleyin

Uygulamalarınızda Data Connect tarafından oluşturulan SDK'ları ayarlamak için Firebase KSA'yı kullanın. init komutu, geçerli klasördeki tüm uygulamaları algılamalı ve oluşturulan SDK'ları otomatik olarak yüklemelidir.

firebase init dataconnect:sdk

Uygulamanızı Data Connect hizmetine bağlayın.

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
// [Optionally] Configure the SDK to use Data Connect local emulator.
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

Prototip oluştururken SDK'ları güncelleme

Data Connect VS Code uzantısı yüklüyse oluşturulan SDK'lar her zaman güncel tutulur.

Data Connect VS Code uzantısını kullanmıyorsanız oluşturulan SDK'ları güncel tutmak için Firebase CLI'yı kullanabilirsiniz.

firebase dataconnect:sdk:generate --watch

Derleme ardışık düzenlerinde SDK oluşturma

CI/CD derleme süreçlerinde Data Connect SDK'ları oluşturmak için Firebase CLI'yi kullanabilirsiniz.

firebase dataconnect:sdk:generate

Kitaplıkları içe aktarma

İstemci kodunuzu başlatmak için iki grup içe aktarma işlemi gerekir: genel Data Connect içe aktarma işlemleri ve belirli, oluşturulmuş SDK içe aktarma işlemleri.

Genel içe aktarmalara dahil edilen ConnectorConfig nesnesine dikkat edin.

// 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 '@dataconnect/generated';

JavaScript SDK'sından sorguları kullanma

Oluşturulan kodda önceden tanımlanmış sorgu referansları bulunur. Tek yapmanız gereken bunları içe aktarmak ve yürütme işlevini çağırmak.

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@dataconnect/generated';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

SDK sorgu yöntemlerini çağırma

Bu işlem kısayolu işlevlerinin kullanıldığı bir örneği aşağıda bulabilirsiniz:

import { listMovies } from '@dataconnect/generated';
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 değişiklikler, sorgu yürüttüğünüz her seferde 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`

Numaralandırma alanlarındaki değişiklikleri işleme

Bir uygulamanın şeması, numaralandırmalar içerebilir ve bu numaralandırmalara GraphQL sorgularınızla erişilebilir.

Uygulamanın tasarımı değiştiğinde yeni enum destekli değerler ekleyebilirsiniz. Örneğin, uygulamanızın yaşam döngüsünün ilerleyen aşamalarında AspectRatio enum'una bir FULLSCREEN değeri eklemeye karar verdiğinizi varsayalım.

Data Connect iş akışında, sorgularınızı ve SDK'larınızı güncellemek için yerel geliştirme araçlarını kullanabilirsiniz.

Ancak, istemcilerinizin güncellenmiş bir sürümünü yayınlamadan önce, daha önce dağıtılmış eski istemciler bozulabilir.

Esnek uygulama örneği

Her zaman enum değerleri üzerinde bir switch ifadesine default dalı veya enum değerleriyle karşılaştırma yapan bir if/else if bloğuna else dalı ekleyin. Bu, JavaScript/TypeScript dili tarafından zorunlu kılınmaz ancak yeni enum değerleri eklendiğinde istemci kodunu sağlam hale getirmenin yoludur.

const queryResult = await getOldestMovie();

if (queryResult.data) {
  // we can use a switch statement's "default" case to check for unexpected values
  const oldestMovieAspectRatio = queryResult.data.originalAspectRatio;
  switch (oldestMovieAspectRatio) {
      case AspectRatio.ACADEMY:
      case AspectRatio.WIDESCREEN:
      case AspectRatio.ANAMORPHIC:
        console.log('This movie was filmed in Academy, widescreen or anamorphic aspect ratio!');
        break;
      default:
        // the default case will catch FULLSCREEN, UNAVAILABLE or _UNKNOWN
        // it will also catch unexpected values the SDK isn't aware of, such as CINEMASCOPE
        console.log('This movie was was NOT filmed in Academy, widescreen or anamorphic.');
        break;
  }

  // alternatively, we can check to see if the returned enum value is a known value
  if (!Object.values(AspectRatio).includes(oldestMovieAspectRatio)) {
    console.log(`Unrecognized aspect ratio: ${oldestAspectRatio}`);
  }
} else {
  console.log("no movies found!");
}

JavaScript SDK'sından mutasyonları kullanma

Mutasyonlara sorgularla aynı şekilde erişilebilir.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@dataconnect/generated';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

Data Connect emülatörüne bağlanma

Dilerseniz connectDataConnectEmulator işlevini çağırıp Data Connect örneğini ileterek emülatöre bağlanabilirsiniz. Örneğin:

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

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ı yorum satırı yapın.

Not: getDataConnect işlevini çağırmak yalnızca Data Connect emülatörüne bağlanmak istiyorsanız gereklidir. Aksi takdirde, oluşturulan SDK sizin için otomatik olarak DataConnect nesnesinin bir örneğini oluşturur.

React ve Angular için istemci kodu uygulama

Firebase Data Connect, Invertase'deki iş ortaklarımızdan edinilebilen kitaplıkları kullanarak React ve Angular için kancalar içeren bir SDK oluşturur: TanStack Query Firebase.

Bu kitaplık, uygulamalarınızda Firebase ile eşzamansız görevlerin işlenmesini büyük ölçüde kolaylaştıran bir dizi kanca sağlar.

Uygulamanızı başlatma

Öncelikle, diğer tüm Firebase web uygulamalarında olduğu gibi, uygulamanızı standart Firebase sırasını kullanarak başlatın.

initializeApp({...});

TanStack Query Firebase paketlerini yükleyin

Projenizde TanStack Query için paketler yükleyin.

Tepki ver

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

Angular

ng add @angular/fire

React veya Angular SDK'nızı oluşturun

Daha önce açıklandığı gibi, standart web SDK'sında olduğu gibi Firebase araçları, şemanıza ve işlemlerinize göre SDK'ların otomatik olarak oluşturulmasını sağlar.

Projenize yeni React veya Angular eklediyseniz oluşturulan SDK'ları ek çerçeve bağlamalarını içerecek şekilde yeniden yapılandırmak için firebase init dataconnect:sdk komutunu tekrar çalıştırın.

Kitaplıkları içe aktarma

React veya Angular istemci kodunuzu başlatmak için dört grup içe aktarma işlemi gerekir: genel Data Connect içe aktarma işlemleri, genel TanStack içe aktarma işlemleri ve JS ile React tarafından oluşturulan SDK'larınız için özel içe aktarma işlemleri.

Genel içe aktarma işlemlerine dahil edilen ConnectorConfig türüne dikkat edin.

Tepki ver

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@dataconnect/generated/react";

Angular

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@dataconnect/generated/angular";

React veya Angular istemcinizde sorgu ve mutasyon kullanma

Kurulum tamamlandıktan sonra, oluşturulan SDK'daki yöntemleri dahil edebilirsiniz.

Aşağıdaki snippet'te, oluşturulan SDK'dan alınan React için use önekli useListAllMovies yöntemine ve Angular için inject önekli injectListAllMovies yöntemine dikkat edin.

Tepki ver

Oluşturulan SDK'daki tüm bu işlemler (hem sorgular hem de mutasyonlar) TanStackQuery bağlamalarını çağırır:

• Sorgular, TanStack useDataConnectQuery kancasını çağırır ve döndürür.
• Değişiklikler, TanStack useDataConnectMutation kancasını çağırır ve döndürür.

import { useListAllMovies } from '@dataconnect/generated/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
}

Angular

Not: ng add @angular/fire bu işlemi sizin için otomatik olarak yapar. Ancak manuel olarak ayarlamayı tercih ederseniz aşağıdaki kodu kullanarak yapabilirsiniz:

import { injectAllMovies, connectorConfig } from '@dataconnect/generated/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

React ve Angular ile otomatik yeniden yükleme sorgularını kullanma

Veriler değiştiğinde sorguları otomatik olarak yeniden yüklenecek şekilde yapılandırabilirsiniz.

Tepki ver

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

Angular

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

Data Connect emülatörüne bağlanma

İsteğe bağlı olarak, connectDataConnectEmulator işlevini çağırıp oluşturduğunuz kancaya Data Connect örneğini ileterek emülatöre bağlanabilirsiniz. Örneğin:

Tepki ver

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListAllMovies } from '@dataconnect/generated/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

Angular

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

Üretim kaynaklarına geçmek için emülatöre bağlanma satırlarını yorum satırı yapın.

Not: getDataConnect işlevini çağırmak yalnızca Data Connect emülatörüne bağlanmak istiyorsanız gereklidir. Aksi takdirde, oluşturulan SDK sizin için otomatik olarak DataConnect nesnesinin bir örneğini oluşturur.

SDK'daki veri türleri

Data Connect sunucusu, yaygın GraphQL veri türlerini temsil eder. Bunlar, SDK'da aşağıdaki gibi gösterilir.

Data Connect Türü	TypeScript
Zaman damgası	dize
Tarih	dize
UUID	dize
Int64	dize
Çift	Sayı
Kayan	Sayı

Prototip oluştururken SDK'ları güncelleme

Data Connect VS Code uzantısı yüklüyse oluşturulan SDK'lar her zaman güncel tutulur.

Data Connect VS Code uzantısını kullanmıyorsanız oluşturulan SDK'ları güncel tutmak için Firebase CLI'yı kullanabilirsiniz.

firebase dataconnect:sdk:generate --watch

Derleme ardışık düzenlerinde SDK oluşturma

CI/CD derleme süreçlerinde Data Connect SDK'ları oluşturmak için Firebase CLI'yi kullanabilirsiniz.

firebase dataconnect:sdk:generate