Menyambungkan ZingGrid ke Supabase: Tambah Bahagian Belakang dalam Minit

Siaran silang daripada artikel saya di blog Zing.

Supabase ialah alternatif Firebase sumber terbuka. Terdapat pelbagai perkhidmatan yang mereka tawarkan, tetapi untuk tujuan artikel ini, kami akan menyelami cara ia boleh bertindak sebagai hujung belakang yang mudah untuk grid kami.

Persediaan Awal

Terdapat beberapa langkah yang perlu kami lalui di bahagian Supabase sebelum kami boleh mula mengkonfigurasi grid kami.

1. Penciptaan Akaun

Kita perlu membuat akaun Supabase yang akan kita sambungkan dahulu. Anda boleh mendaftar untuk Supabase menggunakan pautan ini. Setelah akaun anda telah dibuat dan e-mel disahkan, teruskan ke langkah seterusnya.

2. Cipta Projek Pertama Anda

Teruskan dan pergi ke halaman papan pemuka dan buat projek baharu. Pastikan anda mencatat nama projek dan kata laluan pangkalan data.

3. Nota ke bawah Maklumat Projek

Pada ketika ini anda harus melihat URL Projek anda dan Kunci API anda. Kami perlu memberikan kedua-dua ini kepada ZingGrid dalam kod kami kemudian jadi pastikan anda menyimpannya dalam fail tempatan yang selamat.

4. Cipta Jadual Pertama Anda

Dari bar sisi klik bahagian Editor Jadual. Dari sini kita boleh mencipta jadual pertama kami

Langkah pertama ialah memberi nama jadual kami, di sini saya akan menggunakan demoTable

Kemudian kita boleh mengedit lajur, saya akan mempunyai dua lajur untuk contoh ini. Satu untuk nama pertama dan satu untuk nama keluarga.

5. Tambah Beberapa Contoh Data

6. Kemas kini Tetapan Keselamatan

Kami akan melumpuhkan Row Level Security buat sementara waktu supaya kami boleh membaca dan menulis dengan mudah daripada jadual kami untuk tujuan demo ini. Dalam pengeluaran, kami ingin menyediakan peranan yang betul dengan pengesahan.

⚠️ NOTA: Perubahan tetapan ini hanya untuk tujuan demo ini, ini tidak dimaksudkan untuk pengeluaran

Penyesuai Supabase - API REST

ZingGrid menyokong kedua-dua cara berinteraksi dengan Supabase - melalui REST API dan melalui skrip klien. Mula-mula kita akan menggunakan API REST.

Menggunakan kod demo awal di bawah, pastikan anda menggantikan yang berikut:

• ***pautan*** - URL Projek yang anda nyatakan sebelum ini
• ***tableName*** - Nama jadual Supabase yang baru anda buat
• ***apiKey*** - Kunci API Supabase yang anda nyatakan sebelum ini

  <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>


  <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>

Apabila melihat halaman itu dalam penyemak imbas, anda harus mula melihat data awal yang kami isikan datang!

Penyesuai SupabaseJS - Skrip Pelanggan

Jika apl anda menggunakan Pustaka Pelanggan JavaScript Supabase (yang anda boleh baca lebih lanjut mengenainya di tapak dokumen mereka), anda boleh menyimpan bukti kelayakan Supabase anda di luar markup anda menjadikannya lebih fleksibel.

Meminda contoh sebelumnya, kami mula-mula mencipta objek klien Superbase (lebih lanjut mengenainya dalam dokumen mereka)

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

dan kemudian daftarkan pelanggan tersebut dengan ZingGrid

ZingGrid.registerClient(supabaseClient);

Akhirnya kami menetapkan atribut penyesuai pada zg-data kepada supabaseJS dan kami mempunyai yang berikut

  <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>


  <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>

Bekerja sama seperti dahulu

Atas ialah kandungan terperinci Menyambungkan ZingGrid ke Supabase: Tambah Bahagian Belakang dalam Minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!