React kullanarak Firebase Data Connect'i kullanmaya başlama

Bu hızlı başlangıç kılavuzunda küçük bir örnek veritabanı oluşturup dağıtacak ve bu veritabanına bir React ön ucundan erişeceksiniz.

Ön koşullar

Bu hızlı başlangıç kılavuzunu tamamlamak için aşağıdakilere ihtiyacınız vardır:

  • NPM'li bir Node.js ortamı.
  • Google Hesabı

Eğitim

Eğitim

1. Yeni bir Firebase projesi oluşturma

Firebase konsolunda yeni bir Firebase projesi oluşturarak başlayın. Ardından, projeyi Blaze planına yükseltin.

2. Projenizi ilk kullanıma hazırlayın

Yeni bir dizin oluşturun ve içinde bir Firebase projesi başlatın. İstendiğinde aşağıdaki seçenekleri belirleyin:

  • Önceki adımda oluşturduğunuz projeyi seçin.
  • Gemini ile şema oluşturmayın (bu eğitimde, önceden oluşturulmuş bir örnek şema kullanacaksınız).
  • Yeni bir Cloud SQL örneği oluşturun.
  • React şablonu oluşturun.
 
mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Örnek GraphQL tanımlarını inceleyin

Data Connect'da, tüm veritabanı şemalarınızı ve işlemlerinizi GraphQL kullanarak tanımlarsınız. Projenizi başlattığınızda Firebase CLI, başlamanıza yardımcı olmak için bazı örnek tanımlar oluşturdu.

 dataconnect/schema/schema.gql (excerpt) 
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
 dataconnect/example/queries.gql (excerpt) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. Şemalarınızı ve işlemlerinizi dağıtma

Veritabanı şemalarınızda, sorgularınızda veya mutasyonlarınızda değişiklik yaptığınızda, değişikliklerinizin veritabanında geçerli olması için bunları dağıtmanız gerekir.

 
npx -y firebase-tools@latest deploy --only dataconnect

5. Veritabanını örnek verilerle doldurma

Bu başlangıç verileri, örnek uygulamayı test ederken inceleyebileceğiniz bir şey sunar. Bu adımda, yönetim görevleri için izin verilen rastgele GraphQL'i yürüttüğünüzü unutmayın.

 
npx -y firebase-tools@latest \
         dataconnect:execute dataconnect/seed_data.gql

6. JavaScript istemci SDK'sı oluşturma

Bu komut, GraphQL tanımlarınızı kullanarak özellikle veritabanınız için tür tanımlarıyla birlikte bir JavaScript kitaplığı oluşturur. Tüm veritabanı işlemlerini gerçekleştirmek için bu kitaplığı istemci uygulamanızda kullanırsınız.

connector.yaml'ya tanımlar ekleyerek Android için Kotlin, iOS için Swift ve Flutter dahil olmak üzere birden fazla platform için kitaplıklar oluşturabilirsiniz.

 
npx -y firebase-tools@latest dataconnect:sdk:generate
 Otomatik olarak oluşturulan React SDK'sı (alıntı) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

7. Web uygulaması oluşturma

Firebase projenize yeni bir web uygulaması eklemek için bu komutları çalıştırın.

 
npx -y firebase-tools@latest \
          apps:create web react-example
npx -y firebase-tools@latest \
          apps:sdkconfig web \
          -o web-app/src/firebase-config.json
cd web-app
npm i firebase \
            @tanstack/react-query \
            @tanstack-query-firebase/react

8. Örnek bir React istemcisi yazma

web-app/src/App.jsx içeriğini bu basit React uygulamasıyla değiştirin.

Uygulamanın, oluşturulan SDK'daki bir işlevi kullanarak gerekli veritabanı erişimini tamamladığını unutmayın. React için oluşturulan SDK, durum yönetimini işlemek üzere TanStack Query'yi kullanır.

 
import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

9. Web uygulamasını deneyin

Örnek uygulamayı çalışırken görmek için geliştirme sunucusunu başlatın.

 
npm run dev

Sonraki adımlar

Visual Studio Code uzantısını deneyin

Data Connect ile geliştirme yaparken Visual Studio Code uzantısını kullanmanızı önemle tavsiye ederiz. Visual Studio Code'u birincil geliştirme ortamınız olarak kullanmasanız bile uzantı, şema ve işlem geliştirmeyi daha kolay hale getiren çeşitli özellikler sunar:

  • Data Connect'ya özel söz dizimi denetimi ve otomatik tamamlama önerileri sağlayan bir GraphQL dil sunucusu
  • Şema tanımı dosyalarınızdan veri okumanıza ve yazmanıza, ayrıca işlem tanımlarınızdan sorgu ve mutasyon yürütmenize olanak tanıyan, kodunuzla aynı satırda bulunan CodeLens düğmeleri.
  • Oluşturulan SDK'larınızı GraphQL tanımlarınızla otomatik olarak senkronize tutun.
  • Basitleştirilmiş yerel emülatör kurulumu.
  • Üretim ortamına basitleştirilmiş dağıtım.

Yerel geliştirme için Data Connect emülatörünü kullanma

Bu eğitimde Data Connect şemalarının ve işlemlerinin doğrudan üretime nasıl dağıtılacağı gösterilse de uygulamanızı aktif olarak geliştirirken üretim veritabanınızda değişiklik yapmak istemeyebilirsiniz. Bunun yerine, Data Connect emülatörünü ayarlayın ve geliştirme çalışmalarınızı üretim yerine emülatör üzerinde yapın. Emülatör, Cloud SQL'deki canlı bir PostgreSQL örneğine benzer şekilde davranan yerel bir PGLite örneği oluşturur.

Uygulamanız için şemalar ve işlemler yazmayı öğrenin

Data Connect ile uygulama geliştirirken şemalarınızın ve işlemlerinizin tasarımı, tamamlayacağınız ilk ve en önemli geliştirme görevlerinden biridir.

  • Firebase konsolunda Gemini, uygulamanızın doğal dildeki açıklamasından Data Connect şemaları oluşturabilen bir yapay zeka aracıdır. Bu araç, özellikle daha önce ilişkisel veritabanlarıyla çalışmadıysanız çok hızlı bir şekilde başlamanıza yardımcı olabilir.
  • Alternatif olarak, GraphQL kullanarak doğrudan veritabanı şemaları, sorgular ve mutasyonlar yazabilirsiniz. Tasarım Data Connect şemaları sayfasıyla başlayın ve işlemleri nasıl yazacağınızı öğrenmek için sonraki sayfalara geçin.