Uygulamanızı Supabase İstemcisine Bağlama
Supabase JavaScript istemcisini kurun, proje URL'niz ve anonim anahtarınızla başlatın ve bağlantıyı doğrulamak için ilk isteğinizi gönderin.
Uygulamanızı Supabase İstemcisine Bağlama, CoddyKit'te ücretsiz bir Supabase Backend as a Service dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Supabase Backend as a Service öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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-jsWhere 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.
Sıkça Sorulan Sorular
“Uygulamanızı Supabase İstemcisine Bağlama” dersi ücretsiz mi?
Evet — “Uygulamanızı Supabase İstemcisine Bağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Supabase Backend as a Service kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Supabase Backend as a Service kursu toplamda 4 dersten oluşur.
“Uygulamanızı Supabase İstemcisine Bağlama” dersinde ne öğreneceğim?
Supabase JavaScript istemcisini kurun, proje URL'niz ve anonim anahtarınızla başlatın ve bağlantıyı doğrulamak için ilk isteğinizi gönderin. Supabase Backend as a Service ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Supabase Backend as a Service öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Supabase Backend as a Service, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Uygulamanızı Supabase İstemcisine Bağlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Supabase Backend as a Service dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Supabase Backend as a Service dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- BaaS ve Supabase'e Giriş
- İlk Projenizi Kurma
- Supabase Panosuna Genel Bakış
- Uygulamanızı Supabase İstemcisine Bağlama