ZingGrid를 Supabase에 연결: 몇 분 만에 백엔드 추가-JS 튜토리얼-php.cn

ZingGrid를 Supabase에 연결: 몇 분 만에 백엔드 추가

DDD

풀어 주다： 2024-09-13 08:15:36

원래의

1076명이 탐색했습니다.

Zing 블로그에 있는 내 기사의 교차 게시물입니다.

Supabase는 오픈소스 Firebase 대안입니다. 제공되는 서비스는 다양하지만 이 기사의 목적에 따라 이것이 그리드의 간단한 백엔드 역할을 할 수 있는 방법에 대해 알아볼 것입니다.

초기 설정

그리드 구성을 시작하기 전에 Supabase 측면에서 실행해야 할 몇 가지 단계가 있습니다.

1. 계정 생성

먼저 연결할 Supabase 계정을 만들어야 합니다. 이 링크를 사용하여 Supabase에 가입할 수 있습니다. 계정이 생성되고 이메일이 확인되면 다음 단계로 진행하세요.

2. 첫 번째 프로젝트 만들기

대시보드 페이지로 이동하여 새 프로젝트를 만드세요. 프로젝트 이름과 데이터베이스 비밀번호를 꼭 적어두세요.

3. 프로젝트 정보를 적어두세요

이 시점에서 프로젝트 URL과 API 키가 표시됩니다. 나중에 코드에서 이 두 가지를 모두 ZingGrid에 제공해야 하므로 안전한 로컬 파일에 저장하세요.

4. 첫 번째 테이블 만들기

사이드 바에서 테이블 편집기 섹션을 클릭하세요. 여기에서 첫 번째 테이블을 만들 수 있습니다

Connecting ZingGrid to Supabase: Add a Backend in Minutes

첫 번째 단계는 테이블 이름을 지정하는 것입니다. 여기서는 DemoTable을 사용하겠습니다

Connecting ZingGrid to Supabase: Add a Backend in Minutes

그런 다음 열을 편집할 수 있습니다. 이 예에는 두 개의 열이 있습니다. 하나는 이름, 하나는 성입니다.

Connecting ZingGrid to Supabase: Add a Backend in Minutes

5. 일부 샘플 데이터 추가

Connecting ZingGrid to Supabase: Add a Backend in Minutes

6. 보안 설정 업데이트

이 데모를 위해 테이블에서 쉽게 읽고 쓸 수 있도록 행 수준 보안을 일시적으로 비활성화하겠습니다. 프로덕션에서는 인증을 통해 적절한 역할을 설정하려고 합니다.

⚠️ 참고: 이 설정 변경은 이 데모 목적일 뿐이며 프로덕션용이 아닙니다.

Connecting ZingGrid to Supabase: Add a Backend in Minutes

하위 베이스 어댑터 - REST API

ZingGrid는 REST API와 클라이언트 스크립트를 통해 Supabase와 상호 작용하는 두 가지 방법을 모두 지원합니다. 먼저 REST API를 사용해 보겠습니다.

아래 초기 데모 코드를 사용하여 다음을 교체하세요.

***링크*** - 앞서 적어둔 프로젝트 URL
***tableName*** - 방금 생성한 Supabase 테이블의 이름
***apiKey*** - 앞서 적어둔 Supabase API 키

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/lib/zinggrid.js"></script>
  <title>Supabase</title>
</head>
<body>
  <zing-grid
    page-size="5"
    sort
    pager
    title="Supabase"
    editor-controls
    editor-disabled-fields="id"
    src="https://***link***.supabase.co/rest/v1/***tableName***"
  >
    <zg-data adapter="supabase">
      <zg-param
        name="headers"
        value='
          {
            "Authorization": "Bearer ***apiKey***",
            "apikey": "***apiKey***"
          }'
        ></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>

로그인 후 복사

브라우저에서 해당 페이지를 보면 우리가 채운 초기 데이터가 나타나는 것을 볼 수 있습니다!

Connecting ZingGrid to Supabase: Add a Backend in Minutes

SupabaseJS 어댑터 - 클라이언트 스크립트

앱이 Supabase JavaScript 클라이언트 라이브러리(문서 사이트에서 자세한 내용을 읽을 수 있음)를 사용하는 경우 마크업 외부에 Supabase 자격 증명을 저장하여 훨씬 더 유연하게 사용할 수 있습니다.

이전 예를 수정하여 먼저 Superbase 클라이언트 객체를 생성합니다(자세한 내용은 해당 문서에서 확인하세요)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

로그인 후 복사

그런 다음 해당 클라이언트를 ZingGrid에 등록

ZingGrid.registerClient(supabaseClient);

로그인 후 복사

마지막으로 zg-data의 어댑터 속성을 supabaseJS로 설정하면 다음과 같습니다

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Supabase</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Supabase Client Library -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
  <script>
    const supabaseUrl = 'https://***link***.supabase.co/';
    const supabaseKey = '***apiKey***';
    const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    ZingGrid.registerClient(supabaseClient);
  </script>
  <zing-grid
    page-size="5"
    sort
    pager
    title="SupabaseJS"
    editor-controls
    editor-disabled-fields="id"
  >
    <zg-data adapter="supabaseJS">
      <zg-param name="dataTable" value="***tableName***"></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>

로그인 후 복사

이전과 동일하게 작업

Connecting ZingGrid to Supabase: Add a Backend in Minutes

위 내용은 ZingGrid를 Supabase에 연결: 몇 분 만에 백엔드 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!