Supabase Backend as a Service · บทเรียน

เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase

ติดตั้งไคลเอ็นต์ Supabase JavaScript เริ่มต้นใช้งานด้วย URL โปรเจกต์และคีย์แบบไม่ระบุตัวตน จากนั้นส่งคำขอแรกเพื่อยืนยันการเชื่อมต่อ

เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase เป็นบทเรียน Supabase Backend as a Service ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Supabase Backend as a Service และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Supabase Backend as a Service มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

From Dashboard to Code

Dashboard done — now you talk to Supabase from code using its client library. For JavaScript and TypeScript, reach for supabase-js.

Installing the Client

Add the official supabase-js package to your project with your package manager.

npm install @supabase/supabase-js

Where to Find Your Keys

Under Project Settings > API you will find your Project URL, the browser-safe anon key, and the service_role key for servers only.

Creating the Client

Call createClient once with your URL and anon key, then reuse that single instance everywhere in your app.

import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
  'https://your-project.supabase.co',
  'your-anon-key'
);

Keep Secrets in Env Vars

Never hardcode keys in committed code — read them from environment variables instead.

const url = process.env.SUPABASE_URL;
const key = process.env.SUPABASE_ANON_KEY;
console.log('Configured:', Boolean(url && key));

Your First Query

Run your first query with select. The client returns a data array and an error object, never throwing on its own.

const { data, error } = await supabase
  .from('todos')
  .select('*');
if (error) console.error(error.message);
else console.log(data);

Always Handle the Error

Supabase will not throw on a failed query, so check error every time before you touch data.

function handle(result) {
  if (result.error) return 'Failed: ' + result.error;
  return 'Got ' + result.data.length + ' rows';
}
console.log(handle({ data: [1, 2], error: null }));

Inserting Data

Write a row with insert, passing an array of objects. Add select to get the inserted rows back.

const { data, error } = await supabase
  .from('todos')
  .insert([{ title: 'Learn Supabase', done: false }])
  .select();

Client vs Server Keys

The anon key is guarded by Row-Level Security and safe in the browser. The service_role key bypasses RLS, so keep it server-only.

Confirming the Connection

Quick health check: select a single row. Real data or a clear permission error (not a network error) means your client is wired correctly.

Reusing One Instance

Export your configured client from one module and import it everywhere. A single instance avoids duplicate connections and config drift.

Quick Check

Test your understanding of connecting with the client.

Recap

Recap: you installed supabase-js, built a client from env vars, ran your first select and insert, and learned why anon keys are browser-safe.

คำถามที่พบบ่อย

บทเรียน “เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Supabase Backend as a Service ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Supabase Backend as a Service มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase”

ติดตั้งไคลเอ็นต์ Supabase JavaScript เริ่มต้นใช้งานด้วย URL โปรเจกต์และคีย์แบบไม่ระบุตัวตน จากนั้นส่งคำขอแรกเพื่อยืนยันการเชื่อมต่อ คุณปฏิบัติ Supabase Backend as a Service ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Supabase Backend as a Service หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Supabase Backend as a Service บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “เชื่อมต่อแอปของคุณกับไคลเอ็นต์ Supabase” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Supabase Backend as a Service นี้ได้ไหม

ได้ บทเรียน Supabase Backend as a Service ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Supabase Backend as a Service