Pierwsze kroki z Firebase SQL Connect w Flutterze

W tym krótkim wprowadzeniu utworzysz i wdrożysz małą przykładową bazę danych oraz uzyskasz do niej dostęp z frontendu we Flutterze.

Wymagania wstępne

Aby ukończyć to krótkie wprowadzenie, potrzebujesz:

  • Środowisko z zainstalowanymi tymi narzędziami:
    • Node.js z wybranym menedżerem pakietów. W tym samouczku zakładamy, że używasz npm.
    • Wiersz poleceń Firebase: 
      npm i -g firebase-tools@latest
    • Narzędzie wiersza poleceń Flutter tool.
    • Interfejs wiersza poleceń FlutterFire 
      dart pub global activate flutterfire_cli
  • konto Google,

Samouczek

Samouczek

1. Zainicjuj projekt

Utwórz nowy katalog i zainicjuj w nim projekt w Firebase. Gdy pojawi się prośba, wybierz te opcje:

  • Utwórz nowy projekt w Firebase.
  • Nie twórz schematu za pomocą Gemini (w tym samouczku użyjesz gotowego przykładowego schematu).
  • Utwórz nową instancję Cloud SQL.
  • Utwórz szablon Flutter.
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. Sprawdź przykładowe definicje GraphQL

W SQL Connect wszystkie schematy i operacje bazy danych definiujesz za pomocą GraphQL. Gdy zainicjujesz projekt, interfejs wiersza poleceń Firebase utworzy kilka przykładowych definicji, które pomogą Ci zacząć.

 dataconnect/schema/schema.gql (fragment) 
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 (fragment) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

3. Wdróż schematy i operacje

Za każdym razem, gdy wprowadzisz zmiany w schematach bazy danych, zapytaniach lub mutacjach, musisz wdrożyć je, aby zmiany zaczęły obowiązywać w bazie danych.

 
firebase deploy --only dataconnect

4. Wypełnij bazę danych przykładowymi danymi

Te dane początkowe pozwolą Ci sprawdzić przykładową aplikację. Pamiętaj że w tym kroku wykonujesz dowolny kod GraphQL, co jest dozwolone w przypadku zadań administracyjnych.

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. Wygeneruj pakiet SDK klienta w Dart

To polecenie używa definicji GraphQL do wygenerowania biblioteki Dart przeznaczonej specjalnie dla Twojej bazy danych. Używasz tej biblioteki w aplikacji klienckiej do wykonywania wszystkich operacji na bazie danych.

Dodając definicje do connector.yaml, możesz generować biblioteki dla wielu platform, w tym Kotlin na Androida, Swift na iOS i JavaScript na potrzeby internetu.

 
firebase dataconnect:sdk:generate
 Automatycznie wygenerowany pakiet SDK w Dart (fragment) 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. Skonfiguruj aplikację we Flutterze

Uruchom te polecenia, aby skonfigurować aplikację we Flutterze do korzystania z projektu w Firebase.

Gdy pojawi się prośba w poleceniu flutterfire, wybierz utworzony wcześniej projekt w Firebase i platformy, na które chcesz kierować reklamy.

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. Napisz przykładowego klienta we Flutterze

Zastąp zawartość pliku flutter_app/lib/main.dart tą prostą aplikacją we Flutterze.

Zwróć uwagę, że aplikacja wykonuje niezbędny dostęp do bazy danych za pomocą funkcji z wygenerowanego pakietu SDK.

 
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());
}

8. Wypróbuj aplikację

Uruchom serwer programistyczny, aby zobaczyć przykładową aplikację w działaniu.

 
flutter run

Dalsze kroki

Wypróbuj rozszerzenie SQL Connect do VS Code

Podczas programowania z użyciem SQL Connect zdecydowanie zalecamy korzystanie z rozszerzenia SQL Connect do VS Code. Nawet jeśli nie używasz Visual Studio Code jako głównego środowiska programistycznego rozszerzenie udostępnia kilka funkcji, które ułatwiają tworzenie schematów i operacji

  • Serwer języka GraphQL, który zapewnia sprawdzanie składni i sugestie autouzupełniania specyficzne dla SQL Connect
  • Przyciski CodeLens w wierszu kodu, które umożliwiają odczytywanie i zapisywanie danych z plików definicji schematu oraz wykonywanie zapytań i mutacji z plików definicji operacji.
  • Automatyczne synchronizowanie wygenerowanych pakietów SDK z definicjami GraphQL.
  • Uproszczona konfiguracja emulatora lokalnego.
  • Uproszczone wdrażanie w środowisku produkcyjnym.

Używaj emulatora SQL Connect do programowania lokalnego

W tym samouczku pokazaliśmy, jak wdrożyć SQL Connect schematy i operacje bezpośrednio w środowisku produkcyjnym, ale prawdopodobnie nie będziesz chcieć wprowadzać zmian w bazie danych w środowisku produkcyjnym podczas aktywnego programowania aplikacji. Zamiast tego skonfiguruj SQL Connect emulator i programuj w nim, a nie w środowisku produkcyjnym. Emulator konfiguruje lokalną instancję PGlite, która działa podobnie do instancji PostgreSQL w Cloud SQL.

Dowiedz się, jak pisać schematy i operacje dla aplikacji

Podczas tworzenia aplikacji za pomocą SQL Connect projektowanie schematów i operacji jest jednym z pierwszych i najważniejszych zadań programistycznych.

  • Gemini w konsoli Firebase to narzędzie AI które może generować schematy SQL Connect na podstawie opisu aplikacji w języku naturalnym. To narzędzie może pomóc Ci szybko zacząć, zwłaszcza jeśli nigdy wcześniej nie pracowałeś(-aś) z relacyjnymi bazami danych.
  • Możesz też pisać schematy bazy danych, zapytania i mutacje bezpośrednio za pomocą GraphQL. Zacznij od wskazówek w Projektowanie SQL Connect schematów, a następnie przejdź do kolejnych stron, aby dowiedzieć się, jak pisać operacje.