Sử dụng SDK web đã tạo

SDK phía máy khách Firebase Data Connect cho phép bạn gọi các truy vấn và đột biến phía máy chủ trực tiếp từ một ứng dụng Firebase. Bạn tạo một SDK phía máy khách tuỳ chỉnh song song khi thiết kế các lược đồ, truy vấn và đột biến mà bạn triển khai cho dịch vụ Data Connect. Sau đó, bạn tích hợp các phương thức từ SDK này vào logic của ứng dụng.

Như chúng tôi đã đề cập ở nơi khác, điều quan trọng cần lưu ý là các truy vấn và đột biến không được mã ứng dụng gửi và thực thi trên máy chủ.Data Connect Thay vào đó, khi được triển khai, các thao tác Data Connect sẽ được lưu trữ trên máy chủ như Cloud Functions. Điều này có nghĩa là bạn cần triển khai các thay đổi tương ứng phía máy khách để tránh làm gián đoạn người dùng hiện tại (ví dụ: trên các phiên bản ứng dụng cũ).

Đó là lý do Data Connect cung cấp cho bạn một môi trường phát triển và công cụ cho phép bạn tạo mẫu các lược đồ, truy vấn và đột biến được triển khai trên máy chủ. Nền tảng này cũng tự động tạo SDK phía máy khách trong khi bạn tạo mẫu.

Khi bạn đã lặp lại các bản cập nhật cho dịch vụ và ứng dụng khách, cả bản cập nhật phía máy chủ và phía máy khách đều đã sẵn sàng triển khai.

Quy trình phát triển ứng dụng là gì?

Nếu đã làm theo hướng dẫn Bắt đầu, bạn sẽ được giới thiệu quy trình phát triển tổng thể cho Data Connect. Trong hướng dẫn này, bạn sẽ tìm thấy thông tin chi tiết hơn về cách tạo Web SDK từ giản đồ của mình và cách xử lý các truy vấn và đột biến của ứng dụng.

Bạn có thể tìm hiểu về hoạt động phát triển ứng dụng bằng một kho lưu trữ ứng dụng khởi động nhanh và tạo một ứng dụng Data Connect đầy đủ tính năng bằng cách làm theo lớp học lập trình của chúng tôi cho web.

Tóm lại, để sử dụng Web SDK được tạo trong các ứng dụng khách, bạn sẽ làm theo các bước tiên quyết sau:

1. Thêm Firebase vào ứng dụng web của bạn.

Sau đó:

1. Phát triển giản đồ ứng dụng.
2. Khởi chạy mã ứng dụng bằng JavaScript SDK hoặc các thư viện React hoặc Angular.
3. Đối với React và Angular, hãy cài đặt các gói Tanstack Query

4. Thiết lập quy trình tạo SDK:

   • Với nút Thêm SDK vào ứng dụng trong tiện ích Data Connect VS Code của chúng tôi
   • Bằng cách cập nhật connector.yaml cho JavaScript SDK hoặc React hoặc Angular.

5. Nhập thư viện và mã đã tạo bằng JavaScript SDK, hoặc React hoặc Angular.

6. Triển khai các lệnh gọi đến truy vấn và đột biến bằng JavaScript SDK, hoặc React hoặc Angular.

7. Kiểm thử bằng cách thiết lập trình mô phỏng Data Connect bằng JavaScript SDK, hoặc React hoặc Angular.

Triển khai mã ứng dụng bằng Firebase SDK JavaScript

Phần này trình bày cách bạn có thể triển khai các ứng dụng bằng SDK Firebase JavaScript.

Nếu bạn đang sử dụng React hoặc Angular, hãy xem hướng dẫn thiết lập thay thế và các đường liên kết đến tài liệu bổ sung về tạo SDK Data Connect cho các khung.

Khởi chạy ứng dụng

Trước tiên, hãy khởi chạy ứng dụng bằng trình tự Firebase tiêu chuẩn.

initializeApp({...});

Cài đặt SDK JavaScript đã tạo

Sử dụng CLI Firebase để thiết lập SDK Data Connect đã tạo trong ứng dụng của bạn. Lệnh init sẽ phát hiện tất cả ứng dụng trong thư mục hiện tại và tự động cài đặt các SDK đã tạo.

firebase init dataconnect:sdk

Kết nối ứng dụng của bạn với dịch vụ Data Connect.

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
// [Optionally] Configure the SDK to use Data Connect local emulator.
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

Cập nhật SDK trong quá trình tạo mẫu

Nếu bạn đã cài đặt tiện ích Data Connect VS Code, thì tiện ích này sẽ luôn cập nhật các SDK đã tạo.

Nếu không sử dụng tiện ích Data Connect VS Code, bạn có thể dùng Firebase CLI để cập nhật các SDK đã tạo.

firebase dataconnect:sdk:generate --watch

Tạo SDK trong quy trình tạo

Bạn có thể dùng Firebase CLI để tạo Data Connect SDK trong các quy trình tạo CI/CD.

firebase dataconnect:sdk:generate

Nhập thư viện

Bạn cần có 2 nhóm dữ liệu nhập để khởi tạo mã ứng dụng: dữ liệu nhập Data Connect chung và dữ liệu nhập SDK cụ thể, được tạo.

Lưu ý đối tượng ConnectorConfig có trong các lần nhập chung.

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@dataconnect/generated';

Sử dụng các truy vấn từ SDK JavaScript

Mã được tạo sẽ đi kèm với các Query Ref được xác định trước. Bạn chỉ cần nhập và gọi thực thi trên các lớp đó.

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@dataconnect/generated';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

Gọi phương thức truy vấn SDK

Sau đây là một ví dụ về cách sử dụng các hàm lối tắt cho thao tác này:

import { listMovies } from '@dataconnect/generated';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out
// to the server.
  listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

Đăng ký nhận thông báo khi có thay đổi

Bạn có thể đăng ký nhận thông báo về các thay đổi (thông báo sẽ được cập nhật bất cứ khi nào bạn thực hiện một truy vấn).

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

Xử lý các thay đổi đối với trường liệt kê

Lược đồ của một ứng dụng có thể chứa các giá trị liệt kê mà các truy vấn GraphQL của bạn có thể truy cập.

Khi thiết kế của ứng dụng thay đổi, bạn có thể thêm các giá trị được hỗ trợ của enum mới. Ví dụ: giả sử sau này trong vòng đời của ứng dụng, bạn quyết định thêm giá trị FULLSCREEN vào enum AspectRatio.

Trong quy trình Data Connect, bạn có thể sử dụng công cụ phát triển cục bộ để cập nhật các truy vấn và SDK.

Tuy nhiên, trước khi bạn phát hành phiên bản mới của ứng dụng khách, các ứng dụng khách cũ đã triển khai có thể bị lỗi.

Ví dụ về cách triển khai có khả năng phục hồi

Luôn thêm nhánh default vào câu lệnh switch trên các giá trị enum hoặc nhánh else vào khối if/else if so sánh với các giá trị enum. Ngôn ngữ JavaScript/TypeScript không bắt buộc điều này, nhưng đây là cách giúp mã ứng dụng đáng tin cậy trong trường hợp các giá trị enum mới được thêm vào.

const queryResult = await getOldestMovie();

if (queryResult.data) {
  // we can use a switch statement's "default" case to check for unexpected values
  const oldestMovieAspectRatio = queryResult.data.originalAspectRatio;
  switch (oldestMovieAspectRatio) {
      case AspectRatio.ACADEMY:
      case AspectRatio.WIDESCREEN:
      case AspectRatio.ANAMORPHIC:
        console.log('This movie was filmed in Academy, widescreen or anamorphic aspect ratio!');
        break;
      default:
        // the default case will catch FULLSCREEN, UNAVAILABLE or _UNKNOWN
        // it will also catch unexpected values the SDK isn't aware of, such as CINEMASCOPE
        console.log('This movie was was NOT filmed in Academy, widescreen or anamorphic.');
        break;
  }

  // alternatively, we can check to see if the returned enum value is a known value
  if (!Object.values(AspectRatio).includes(oldestMovieAspectRatio)) {
    console.log(`Unrecognized aspect ratio: ${oldestAspectRatio}`);
  }
} else {
  console.log("no movies found!");
}

Sử dụng các đột biến từ SDK JavaScript

Bạn có thể truy cập vào các đột biến theo cách tương tự như truy vấn.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@dataconnect/generated';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

Kết nối với trình mô phỏng Data Connect

Bạn có thể kết nối với trình mô phỏng bằng cách gọi connectDataConnectEmulator rồi truyền vào thực thể Data Connect, như sau:

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

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

// Make calls from your app

Để chuyển sang tài nguyên phát hành công khai, hãy nhận xét các dòng để kết nối với trình mô phỏng.

Lưu ý: Bạn chỉ cần gọi getDataConnect nếu muốn kết nối với trình mô phỏng Data Connect. Nếu không, SDK được tạo sẽ tự động tạo một phiên bản của đối tượng DataConnect cho bạn.

Triển khai mã ứng dụng cho React và Angular

Firebase Data Connect cung cấp một SDK được tạo với các hook cho React và Angular bằng cách sử dụng các thư viện có sẵn từ các đối tác của chúng tôi tại Invertase, TanStack Query Firebase.

Thư viện này cung cấp một bộ các lệnh gọi giúp bạn dễ dàng xử lý các tác vụ không đồng bộ với Firebase trong ứng dụng của mình.

Khởi chạy ứng dụng

Trước tiên, giống như mọi ứng dụng web Firebase, hãy khởi chạy ứng dụng của bạn bằng trình tự Firebase tiêu chuẩn.

initializeApp({...});

Cài đặt các gói TanStack Query Firebase

cài đặt các gói cho TanStack Query trong dự án của bạn.

Thể hiện cảm xúc

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

Angular

ng add @angular/fire

Tạo SDK React hoặc Angular

Tương tự như SDK web tiêu chuẩn, như mô tả trước đó, công cụ Firebase xử lý việc tự động tạo SDK dựa trên giản đồ và các thao tác của bạn.

Nếu bạn vừa thêm React hoặc Angular vào dự án của mình, hãy chạy lại firebase init dataconnect:sdk để định cấu hình lại các SDK đã tạo nhằm đưa các liên kết khung bổ sung vào.

Nhập thư viện

Bạn cần có 4 nhóm dữ liệu nhập để khởi động mã ứng dụng React hoặc Angular: dữ liệu nhập Data Connect chung, dữ liệu nhập TanStack chung và dữ liệu nhập cụ thể cho JS và SDK được tạo bằng React.

Lưu ý loại ConnectorConfig có trong các lượt nhập chung.

Thể hiện cảm xúc

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@dataconnect/generated/react";

Angular

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@dataconnect/generated/angular";

Sử dụng các truy vấn và đột biến trong ứng dụng React hoặc Angular

Sau khi hoàn tất quá trình thiết lập, bạn có thể kết hợp các phương thức từ SDK đã tạo.

Trong đoạn mã sau, hãy lưu ý phương thức có tiền tố use useListAllMovies cho React và phương thức có tiền tố inject injectListAllMovies cho Angular, cả hai đều từ SDK đã tạo.

Thể hiện cảm xúc

Tất cả các thao tác như vậy trong SDK đã tạo, cả truy vấn và đột biến, đều gọi các liên kết TanStackQuery:

• Truy vấn gọi và trả về hook useDataConnectQuery TanStack
• Các đột biến gọi và trả về hook useDataConnectMutation TanStack

import { useListAllMovies } from '@dataconnect/generated/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
}

Angular

Lưu ý: ng add @angular/fire sẽ tự động thực hiện việc này cho bạn, nhưng nếu chọn thiết lập theo cách thủ công, bạn có thể thực hiện bằng mã sau:

import { injectAllMovies, connectorConfig } from '@dataconnect/generated/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

Sử dụng các truy vấn tải lại tự động bằng React và Angular

Bạn có thể định cấu hình các truy vấn để tự động tải lại khi dữ liệu thay đổi.

Thể hiện cảm xúc

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

Angular

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

Kết nối với trình mô phỏng Data Connect

Bạn có thể kết nối với trình mô phỏng bằng cách gọi connectDataConnectEmulator rồi truyền phiên bản Data Connect vào hook đã tạo, như sau:

Thể hiện cảm xúc

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListAllMovies } from '@dataconnect/generated/react';

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

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

Angular

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

Để chuyển sang tài nguyên phát hành công khai, hãy nhận xét các dòng để kết nối với trình mô phỏng.

Lưu ý: Bạn chỉ cần gọi getDataConnect nếu muốn kết nối với trình mô phỏng Data Connect. Nếu không, SDK được tạo sẽ tự động tạo một phiên bản của đối tượng DataConnect cho bạn.

Các loại dữ liệu trong SDK

Máy chủ Data Connect đại diện cho các kiểu dữ liệu GraphQL phổ biến. Các loại này được biểu thị trong SDK như sau.

Loại Data Connect	TypeScript
Dấu thời gian	chuỗi
Ngày	chuỗi
mã nhận dạng duy nhất (UUID)	chuỗi
Int64	chuỗi
Giường đôi	Số điện thoại
Nổi	Số điện thoại

Cập nhật SDK trong quá trình tạo mẫu

Nếu bạn đã cài đặt tiện ích Data Connect VS Code, thì tiện ích này sẽ luôn cập nhật các SDK đã tạo.

Nếu không sử dụng tiện ích Data Connect VS Code, bạn có thể dùng Firebase CLI để cập nhật các SDK đã tạo.

firebase dataconnect:sdk:generate --watch

Tạo SDK trong quy trình tạo

Bạn có thể dùng Firebase CLI để tạo Data Connect SDK trong các quy trình tạo CI/CD.

firebase dataconnect:sdk:generate