Firebase Data Connect'i yerel olarak kullanmaya başlayın

Bu hızlı başlangıç kılavuzunda, üretim SQL örneği oluşturmadan uygulamanızda Firebase Data Connect'ü yerel olarak nasıl oluşturacağınızı öğreneceksiniz. Aşağıdakileri yapacaksınız:

  • Firebase Data Connect dosyasını Firebase projenize ekleyin.
  • Yerel bir örnekle çalışmak için Visual Studio Code uzantılarını içeren bir geliştirme ortamı oluşturun.
  • Ardından aşağıdakileri nasıl yapacağınızı göstereceğiz:
    • Gemini Code Assist ile VS Code uzantı araçlarını kullanarak şunları yapabilirsiniz:
      • Uygulama için şema oluşturma
      • Yerel veritabanınızı doldurmak için yönetimsel sorgular ve mutasyonlar oluşturun
      • Uygulamanız için sorgular ve mutasyonlar'ı dağıtılabilir bir bağlantılayıcıda uygulamanıza yardımcı olur.
    • Sorgularınızı ve mutasyonlarınızı yerel bir emülatörde örnek veri kullanarak test edin
    • Güçlü şekilde yazılmış SDK'lar oluşturun ve bunları uygulamanızda kullanın
    • Nihai şemanızı ve bağlayıcınızı buluta dağıtın (isteğe bağlı, Blaze planına yükseltme ile).

Yerel geliştirme akışı seçme

Data Connect, geliştirme araçlarını yüklemek ve yerel olarak çalışmak için iki yöntem sunar.

Ön koşullar

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

Yerel akış: Geliştirme ortamını ayarlama

  1. Yerel projeniz için yeni bir dizin oluşturun.

  2. Oluşturduğunuz yeni dizinde aşağıdaki komutu çalıştırın.

      curl -sL https://firebase.tools/dataconnect | bash

    Bu komut dosyası, geliştirme ortamını sizin için kurmaya ve tarayıcı tabanlı bir IDE'yi başlatmaya çalışır. Bu IDE, şemanızı yönetmenize, uygulamanızda kullanılacak sorguları ve mutasyonları tanımlamanıza ve güçlü şekilde yazılmış SDK'lar oluşturmanıza yardımcı olmak için önceden paketlenmiş VS Code uzantıları da dahil olmak üzere araçlar sağlar.

  alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

Proje dizininizi ayarlama

Yerel projenizi ayarlamak için proje dizininizi ilk kullanıma hazırlayın. IDE penceresinde, sol paneldeki Firebase simgesini tıklayarak Data Connect VS Code uzantısı kullanıcı arayüzünü açın:

  1. Google ile oturum aç düğmesini tıklayın.
  2. Firebase projesi bağla düğmesini tıklayın ve daha önce konsolda oluşturduğunuz projeyi seçin.
  3. Firebase init'i çalıştır düğmesini tıklayın.

  4. Emülatörleri başlat düğmesini tıklayın.

Şema oluşturma

Firebase proje dizininizdeki /dataconnect/schema/schema.gql dosyasında, film yorumları gibi bir konu hakkında GraphQL şeması tanımlamaya başlayın.

Şema oluşturmak için Gemini Code Assist'ü kullanma

Gemini Code Assist'ü kullanarak film yorumu uygulaması şeması oluşturmak için:

  1. Kenar çubuğunu açmak için Veri Bağlantısı VS Code uzantısı simgesini tıklayın.
  2. @data-connect ile Gemini'yi deneyin'i tıklayın. Gemini Code Assist sohbet penceresi açılır.
  3. İlgili komutları filtrelemek için sohbet arayüzünü tıklayın ve @data-connect yazmaya başlayın.

  4. /generate_schema komutunu seçin ve istemde komutu tamamlayarak Gemini'den geliştirdiğiniz uygulama için bir şema oluşturmasını isteyin.

    Örneğin:

    @data-connect /generate_schema I want to build an app to track movie reviews from multiple users

  5. Birkaç saniye sonra önerilen bir şema gösterilir. Şemayı inceleyin.

  6. Kodu schema.gql'e eklemek için:

    1. Dosyanın altına ekle düğmesini tıklayın.
    2. Alternatif olarak, kodu imleç konumunuza eklemek için sohbet yanıtının üst kısmındaki + düğmesini tıklayın.

Film

Data Connect'te GraphQL alanları sütunlarla eşlenir. Filmde id, title, imageUrl ve genre var. Data Connect, String ve UUID temel veri türlerini tanır.

Aşağıdaki snippet'i kopyalayın veya dosyada ilgili satırların yorumunu kaldırın.

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

Aşağıdaki snippet'i kopyalayın veya dosyada ilgili satırların yorumunu kaldırın.

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # This time, we omit adding a primary key because
  # you can rely on Data Connect to manage it.

  # @unique indicates a 1-1 relationship
  movie: Movie! @unique
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

movie alanının Movie türüyle eşleştirildiğini unutmayın. Data Connect, bunun Movie ile MovieMetadata arasındaki bir ilişki olduğunu anlıyor ve bu ilişkiyi sizin için yönetecektir.

Veri Bağlantısı şemaları hakkında daha fazla bilgiyi dokümanda bulabilirsiniz.

Tablolarınıza veri ekleme

IDE düzenleyici panelinde, /dataconnect/schema/schema.gql içindeki GraphQL türlerinin üzerinde CodeLens düğmelerinin göründüğünü görürsünüz. Yerel veritabanınıza veri eklemek için Veri ekle ve Çalıştır (Yerel) düğmelerini kullanabilirsiniz.

Movie ve MovieMetadata tablolarına kayıt eklemek için:

  1. schema.gql dosyasında, Movie tür beyanının üstündeki Veri ekle düğmesini tıklayın.
    Firebase Data Connect için CodeLens Veri ekle düğmesi
  2. Oluşturulan Movie_insert.gql dosyasında, üç alan için verileri sabit kodlayın.
  3. Çalıştır (Yerel) düğmesini tıklayın.
    Firebase Data Connect için CodeLens Run düğmesi
  4. Oluşturulan MovieMetadata_insert mutasyonunda istendiği gibi, MovieMetadata tablosuna bir kayıt eklemek için önceki adımları tekrarlayın ve movieId alanına Filminizin id değerini girin.

Verilerin eklendiğini hızlıca doğrulamak için:

  1. schema.gql dosyasına geri dönüp Movie tür beyanının üzerindeki Verileri oku düğmesini tıklayın.
  2. Elde edilen Movie_read.gql dosyasında, sorguyu yürütmek için Çalıştır (Yerel) düğmesini tıklayın.

Veri Bağlantısı mutasyonları hakkında daha fazla bilgiyi dokümanda bulabilirsiniz.

Sorgu tanımlama

Şimdi daha eğlenceli bir konuya geçelim: Uygulamanızda ihtiyaç duyacağınız sorguları tanımlayın. Geliştirici olarak GraphQL sorguları yerine SQL sorguları yazmaya alışkın olduğunuzdan bu durum başlangıçta biraz farklı gelebilir.

Ancak GraphQL, ham SQL'den çok daha kısa ve tür açısından güvenlidir. Ayrıca VS Code uzantımız hem sorgular hem de mutasyonlar için geliştirme deneyimini kolaylaştırır.

Gemini Code Assist kullanarak sorgu oluşturmak için:

  1. Kenar çubuğunu açmak için Veri Bağlantısı VS Code uzantısı simgesini tıklayın.
  2. @data-connect ile Gemini'yi deneyin'i tıklayın. Gemini Code Assist sohbet penceresi açılır.
  3. İlgili komutları filtrelemek için sohbet arayüzünü tıklayın ve @data-connect yazmaya başlayın.

  4. /generate_operation komutunu seçin ve istemde komutu tamamlayarak Gemini'den sorgu oluşturmasını isteyin.

    Örneğin:

    @data-connect /generate_operation List all movies with titles start with "A".

  5. Birkaç saniye sonra önerilen bir sorgu gösterilir. Sorguyu inceleyin.

  6. Kodu queries.gql'e eklemek için:

    1. Dosyanın altına ekle düğmesini tıklayın.
    2. Alternatif olarak, kodu imleç konumunuza eklemek için sohbet yanıtının üst kısmındaki + düğmesini tıklayın.

Yakındaki CodeLens düğmesini kullanarak sorguyu yürütün.

Veri Bağlantısı sorguları hakkında daha fazla bilgiyi dokümanda bulabilirsiniz.

SDK oluşturma ve bunları uygulamanızda kullanma

IDE'nin sol panelinde Firebase simgesini tıklayarak Data Connect VS Code uzantısı kullanıcı arayüzünü açın:

  1. SDK'yı uygulamaya ekle düğmesini tıklayın.

  2. Görünen iletişim kutusunda, uygulamanızın kodunu içeren bir dizin seçin. Data Connect SDK kodu oluşturulur ve buraya kaydedilir.

  3. Uygulama platformunuzu seçin, ardından SDK kodunun seçtiğiniz dizinde hemen oluşturulduğunu unutmayın.

Sorgunuzu bir uygulamadan çağırmak için SDK'ları kullanma

ListMovies sorgunuza çağrı uygulamak için Data Connect tarafından oluşturulan SDK'yı kullanabilirsiniz. Ardından, Data Connect emülatörünü kullanarak bu sorguyu yerel olarak yürütebilirsiniz.

Web

  1. Firebase'i web uygulamanıza ekleyin.

  2. React uygulamanızın ana dosyasında:

    • Oluşturduğunuz SDK'yı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde donatma
    • Data Connect yöntemlerini çağıramaz.
    import React from 'react';
import ReactDOM from 'react-dom/client';

import { connectDataConnectEmulator } from 'firebase/data-connect';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

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

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Swift

  1. Firebase'i iOS uygulamanıza ekleyin.

  2. Oluşturulan SDK'yı kullanmak için Xcode'da bağımlılık olarak yapılandırın.

    Xcode'un üst gezinme çubuğunda Dosya > Paket Bağımlılıkları Ekle > Yerel Ekle'yi seçin ve oluşturulan Package.swift dosyasını içeren klasörü seçin.

  3. Uygulamanızın ana temsilcisinde:

    • Oluşturduğunuz SDK'yı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde donatma
    • Data Connect yöntemlerini çağıramaz.
    import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

// Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}

Kotlin Android

  1. Firebase'i Android uygulamanıza ekleyin.

  2. Oluşturulan SDK'yı kullanmak için Data Connect'ü Gradle'de bağımlılık olarak yapılandırın.

    app/build.gradle.kts'nizde plugins ve dependencies öğelerini güncelleyin.

    plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. Uygulamanızın ana etkinliğinde:

    • Oluşturduğunuz SDK'yı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde donatma
    • Data Connect yöntemlerini çağıramaz.
    import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }


class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}

Flutter

  1. Firebase'i Flutter uygulamanıza ekleyin.
  2. flutterfire CLI'yi dart pub global activate flutterfire_cli yükleyin.
  3. flutterfire configure'ü çalıştırın.
  4. Uygulamanızın ana işlevinde:
    • Oluşturduğunuz SDK'yı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde donatma
    • Data Connect yöntemlerini çağıramaz.
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ListView.builder(
                  scrollDirection: Axis.vertical,
                  itemBuilder: (context, index) => Card(
                      child: Text(
                    snapshot.data!.data.movies[index].title,
                  )),
                  itemCount: snapshot.data!.data.movies.length,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

Şemanızı ve sorgunuzu üretime dağıtma

Uygulamanızda yerel kurulumunuzu tamamladıktan sonra şemanızı ve bağlayıcınızı buluta dağıtabilirsiniz. Cloud SQL örneği oluşturmak için Blaze plan projesine ihtiyacınız vardır.

  1. Firebase konsolunun Veri Bağlantısı bölümüne gidin ve ücretsiz deneme sürümü Cloud SQL örneği oluşturun.

  2. IDE'ye entegre Terminal'de firebase init dataconnect komutunu çalıştırın ve konsolda yeni oluşturduğunuz Bölge/Hizmet Kimliği'ni seçin.

  3. "dataconnect/dataconnect.yaml dosyası zaten var, üzerine yazılsın mı?" sorusunu gördüğünüzde "Y" seçeneğini belirleyin.

  4. IDE penceresindeki VS Code uzantısı kullanıcı arayüzünde Üretime dağıt düğmesini tıklayın.

  5. Dağıtıldıktan sonra şemanın, işlemlerin ve verilerin buluta yüklendiğini doğrulamak için Firebase konsoluna gidin. Şemayı görüntüleyebilir ve işlemlerinizi konsolda da çalıştırabilirsiniz. PostgreSQL için Cloud SQL örneği, oluşturulan nihai şeması ve verileriyle güncellenir.

Sonraki adımlar

Dağıtılan projenizi inceleyin ve daha fazla araç keşfedin:

  • Firebase konsolunda veritabanınıza veri ekleyin, şemalarınızı inceleyip değiştirin ve Data Connect hizmetinizi izleyin.

Dokümanlar bölümünden daha fazla bilgi edinebilirsiniz. Örneğin, hızlı başlangıç kılavuzunu tamamladığınız için: