Flutter 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 Flutter ö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:

• Aşağıdaki araçların yüklü olduğu bir ortam:
  • Seçtiğiniz paket yöneticisiyle Node.js. Bu eğitimde, npm olduğu varsayılmaktadır.
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • Flutter komut satırı aracı.
  • FlutterFire CLI

    dart pub global activate flutterfire_cli

• Google Hesabı

Eğitim

mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

firebase deploy --only dataconnect

firebase dataconnect:execute dataconnect/seed_data.gql

firebase dataconnect:sdk:generate

class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        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 ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

flutter run

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 kontrolü 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ından başlayın ve işlemleri nasıl yazacağınızı öğrenmek için sonraki sayfalara geçin.