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.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

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

Data Connect içinde, 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 ; cd ..

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 fonksiyonu kullanarak gerekli veritabanı erişimini tamamladığına dikkat edin. 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ı şiddetle öneririz. 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, 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.
  • Üretime basitleştirilmiş dağıtım.

Yerel geliştirme için Data Connect öykünücüsünü kullanın

Bu eğitimde Data Connect şemalarını ve işlemlerini doğrudan üretime nasıl dağıtacağınız 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, CloudSQL üzerindeki canlı bir Postgres örneğine benzer şekilde davranan yerel bir PGlite örneği kurar.

Uygulamanız için şemaları ve işlemleri nasıl yazacağınızı öğ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 konsolundaki Gemini, uygulamanızın doğal dil açıklamasından Data Connect şemaları oluşturabilen bir yapay zeka aracıdır. Bu araç, özellikle daha önce ilişkisel veritabanlarıyla hiç ç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. Şemaları Data Connect tasarla sayfasından başlayın ve işlemlerin nasıl yazılacağını öğrenmek için sonraki sayfalara geçin.