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 yerel olarak Firebase Data Connect oluşturmayı öğreneceksiniz. Bu kurstan sonra:

  • Firebase projenize Firebase Data Connect ekleyin.
  • Yerel bir örnekle çalışmak için Visual Studio Code uzantılarını içeren bir geliştirme ortamı ayarlayın.
  • Ardından, aşağıdakileri nasıl yapacağınızı göstereceğiz:
    • VS Code uzantısı araçlarını Gemini Code Assist ile kullanarak:
      • Uygulama için şema oluşturma
      • Yerel veritabanınızı doldurmak için yönetimle ilgili sorgular ve mutasyonlar oluşturun.
      • Uygulamanız için sorgu ve mutasyonları dağıtılabilir bir bağlayıcıda uygulamanıza yardımcı olma
    • Sorgularınızı ve mutasyonlarınızı yerel bir emülatöre karşı örnek verilerle test etme
    • Güçlü şekilde türlenmiş SDK'lar oluşturma ve bunları uygulamanızda kullanma
    • Son şemanızı ve bağlayıcınızı buluta dağıtın (isteğe bağlıdır ve Blaze planına yükseltme gerektirir).

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.

Geliştirme ortamını kurma

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

  2. Data Connect geliştirme ortamı ve tarayıcı tabanlı IDE ayarlamak için oluşturduğunuz yeni dizinde aşağıdaki komutu çalıştırın.

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

    Bu komut dosyası yükleme işlemini dener. Yüklü IDE, şemanızı yönetmenize ve uygulamanızda kullanılacak sorguları ve mutasyonları tanımlamanıza yardımcı olmak için önceden paketlenmiş VS Code uzantıları da dahil olmak üzere araçlar sağlar.

Proje dizininizi oluşturma

Yerel projenizi ayarlamak için proje dizininizi başlatın. IDE penceresindeki sol panelde 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 konsolda daha önce oluşturduğunuz projeyi seçin.
  3. Run firebase init (Firebase'i başlat) 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, örneğin film incelemeleriyle ilgili bir GraphQL şeması tanımlamaya başlayın.

Şema oluşturmak için Gemini Code Assist aracını kullanın

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

  1. Kenar çubuğunu açmak için Data Connect VS Code uzantısı simgesini tıklayın.
  2. @FirebaseDataConnect ile Gemini'ı deneyin'i tıklayın. Gemini Code Assist Sohbet penceresi açılır.
  3. Sohbet arayüzünü tıklayın ve ilgili komutları filtrelemek için @FirebaseDataConnect yazmaya başlayın.
  4. /generate_schema komutunu seçin ve istemde, geliştirdiğiniz uygulama için Gemini'dan şema oluşturmasını isteyerek komutu tamamlayın.

    Örneğin:

    @FirebaseDataConnect /generate_schema I want to build an app to track movie reviews from multiple users
    
  5. Birkaç dakika sonra önerilen bir şema gösterilir. Şemayı inceleyin.

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

    1. Dosyanın en altına ekle düğmesini tıklayın.
    2. İsterseniz kodu imlecinizin bulunduğu yere eklemek için sohbet yanıtının üst kısmındaki + düğmesini tıklayın.

Film

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

Aşağıdaki snippet'i kopyalayın veya dosyada ilgili satırların yorum işaretini 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 yorum işaretini 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şlendiğini unutmayın. Data Connect, bu ilişkinin Movie ile MovieMetadata arasında olduğunu anlar ve bu ilişkiyi sizin için yönetir.

Dokümanlarda Data Connect şemaları hakkında daha fazla bilgi edinin.

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 bölümünde, Movie türü bildiriminin üstündeki Veri ekle düğmesini tıklayın.
    Firebase Data Connect için CodeLens veri ekleme düğmesi
  2. Oluşturulan Movie_insert.gql dosyasında, üç alan için verileri sabit kodlayın.
  3. Run (Local) [Çalıştır (Yerel)] düğmesini tıklayın.
    Firebase Data Connect için CodeLens Çalıştır düğmesi
  4. MovieMetadata tablosuna kayıt eklemek için önceki adımları tekrarlayın. Oluşturulan MovieMetadata_insert mutasyonunda istendiği gibi, movieId alanına filminizin id değerini girin.

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

  1. schema.gql'ya geri dönün ve Movie türü bildiriminin üzerindeki Verileri oku düğmesini tıklayın.
  2. Oluşan Movie_read.gql dosyasında, sorguyu yürütmek için Run (Local) (Çalıştır (Yerel)) düğmesini tıklayın.

Dokümanlarda Data Connect mutasyonları hakkında daha fazla bilgi edinin.

Sorgu tanımlama

Şimdi daha eğlenceli bir kısma geçiyoruz: Uygulamanızda ihtiyacınız olacak sorguları tanımlayın. Geliştirici olarak GraphQL sorguları yerine SQL sorguları yazmaya alışkın olduğunuz için bu durum ilk baş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 Data Connect VS Code uzantısı simgesini tıklayın.
  2. @FirebaseDataConnect ile Gemini'ı deneyin'i tıklayın. Gemini Code Assist Sohbet penceresi açılır.
  3. Sohbet arayüzünü tıklayın ve ilgili komutları filtrelemek için @FirebaseDataConnect yazmaya başlayın.
  4. /generate_operation komutunu seçin ve istemde komutu tamamlayarak Gemini'dan bir sorgu oluşturmasını isteyin.

    Örneğin:

    @FirebaseDataConnect /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'ya eklemek için:

    1. Dosyanın en altına ekle düğmesini tıklayın.
    2. İsterseniz kodu imlecinizin bulunduğu yere 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.

Dokümanlarda Data Connect sorguları hakkında daha fazla bilgi edinin.

SDK'lar 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şturulup 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ı kullanın.

Data Connect tarafından oluşturulan SDK'yı kullanarak ListMovies sorgunuza bir çağrı uygulayabilirsiniz. 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şturulan SDK'nızı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde yapılandırma
    • Data Connect yöntemlerini çağırın.
    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 File > Add Package Dependencies > Add Local'ı (Dosya > Paket Bağımlılıkları Ekle > Yerel Ekle) seçin ve oluşturulan Package.swift'yi içeren klasörü belirleyin.

  3. Uygulamanızın ana temsilcisinde:

    • Oluşturulan SDK'nızı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde yapılandırma
    • Data Connect yöntemlerini çağırın.
    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 Gradle'da Data Connect öğesini bağımlılık olarak yapılandırın.

    plugins ve dependencies öğelerini app/build.gradle.kts hizmetinizde 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şturulan SDK'nızı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde yapılandırma
    • Data Connect yöntemlerini çağırın.
    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'yı yükleyin dart pub global activate flutterfire_cli.
  3. Koşu flutterfire configure.
  4. Uygulamanızın ana işlevinde:
    • Oluşturulan SDK'nızı içe aktarın
    • Uygulamanızı Data Connect emülatörüne bağlanacak şekilde yapılandırma
    • Data Connect yöntemlerini çağırın.
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 üretimde dağıtma

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

  1. Firebase konsolunun Veri Bağlantısı bölümüne gidin ve ücretsiz deneme 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 Region/Service ID'yi (Bölge/Hizmet Kimliği) seçin.

  3. "File dataconnect/dataconnect.yaml already exists, Overwrite?" (dataconnect/dataconnect.yaml dosyası zaten var, üzerine yazılsın mı?) istemiyle karşılaştığınızda "Y" seçeneğini belirleyin.

  4. IDE penceresinde, VS Code Extension kullanıcı arayüzünde Üretime dağıt düğmesini tıklayın.

  5. Dağıtım tamamlandıktan sonra şemanın, işlemlerin ve verilerin buluta yüklendiğini doğrulamak için Firebase konsoluna gidin. Şemayı görüntüleyebilmeniz ve işlemlerinizi konsolda da çalıştırabilmeniz gerekir. PostgreSQL için Cloud SQL örneği, son dağıtılan oluşturulan şema ve verilerle güncellenir.

Sonraki adımlar

Dağıtılan projenizi inceleyin ve diğer araçları keşfedin:

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

Belgelerden daha fazla bilgi edinebilirsiniz. Örneğin, hızlı başlangıcı tamamladığınız için: