For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /tr/docs/web/first-feature.md (or send Accept: text/markdown).
İlk özelliğinizi oluşturun
Şemadan yayınlanmış ekrana uçtan uca bir yürüyüş.
Başlangıç seviyesinde izlenecek yol
Önkoşullar: Aşağıdaki iki başlangıç kılavuzunu okuyun, Web yerel kurulumunu tamamlayın ve bu monorepo'yu düzenleyicinizde kökünden açın. Web ayarları apps/web/.env.local'ye aittir; Next.js, .env kökünü okumaz. Varsayılan sahte modda /dashboard, veritabanı olmayan bir demodur; /auth'nin taşınan bir veritabanına ihtiyacı var.
Kısa terimler: Çalışma alanı, bir ekibin ayrı kullanıcıları, verileri ve ayarlarıdır. Sunucu güvenilir arka uçtur; sağlayıcı anahtarlarını tarayıcı ve telefon kodundan uzak tutun. Geçiş, tabloları oluşturan veya güncelleyen sürümlü bir veritabanı değişikliğidir. Yapay zeka modeli yanıt veren motordur; model kataloğu, sunucunun mevcut model kimlikleri ve fiyatlarının listesidir. Sağlayıcı yapay zeka, e-posta veya faturalandırma hizmeti gibi bir dış hizmettir. Yetki, bir çalışma alanının bir özelliği kullanmasına olanak tanıyan bir yetkidir. Web kancası, bir hizmetin başka bir hizmetin URL'sine gönderdiği bir mesajdır.
1. Depo kökünde VS Code'u açın ve kodlama aracınızdan apps/web/app/reports/page.tsx ve apps/web/src/reports.ts oluşturmasını isteyin. Rapor alanlarını ve izin verilen rolleri verin; sunucu tarafı üyelik kontrolleri ve workspaceId tarafından filtrelenen bir sorgu gerektirir.
2. /reports'yi oturum açmış bir üye olarak açın ve yalnızca çalışma alanının kayıtlarının göründüğünü doğrulayın.
3. Oturumu kapatarak ikinci bir çalışma alanı hesabı kullanmayı deneyin; eğer ikisinden biri kayıtları okuyabiliyorsa, sunucu kontrolünü durdurun ve düzeltin.
Özel kod için, sağlanan prompts/README.md ile başlayın ve en yakın istemi kopyalayın: Bir uygulama ekranı için prompts/new-app-screen.md veya genel bir sayfa için prompts/new-landing-page.md. Sunucu, veritabanı veya sağlayıcı çalışması için kodlama temsilcinize bu kılavuzun görevini verin ve ondan AGENTS.md, .ai/PROJECT_CONTEXT.md ve eşleşen .ai/ aynalarını okumasını isteyin; burada adı geçen kaynak dosyaların tamamını inceleyin; düzenlemeden önce dosyaları ve kontrolleri listeleyin; çalışma alanı sahipliğini ve yalnızca sunucuya ait sırları koruyun; ve size farkı göstereceğim. İstediğiniz davranışı, giriş ve çıkış alanlarını, izin verilen rolleri, beklenen başarıyı ve hataları ve test hesabını, sağlayıcıyı veya cihazı ona bildirin. Örnek değerleri kullanın; asla gerçek bir sırrı yapıştırmayın.
Rotayı oluştur
apps/web/app/ altına bir sayfa ekleyin. Oturumunu ve aktif çalışma alanı çözümlemesini yeniden kullanabilmek için kontrol panelinden veya içerik rotasından başlayın. Bir rota, klasörü page.tsx içerdiğinde mevcuttur; korumalı okumalar için bir Sunucu Bileşeni kullanın.
apps/web/app/reports/page.tsx
apps/web/src/reports.ts
.ai/apps/web/app/reports/page.md
.ai/apps/web/src/reports.mdErişimi ve kurtarmayı doğrulayın
Anonim erişimi, geçerli bir üyeyi, başka bir çalışma alanının üyesini, iptal edilen bir oturumu ve gerekli rolü test edin. Bir kurtarma eylemiyle boş ve başarısız yükleme durumlarını ekleyin. Rotayı genel site haritasının dışında tutun ve ön ekini robotların izin vermediği yerlere ekleyin.
Kaydı modelleyin
Her ürün kaydı veritabanı şemasında başlar. packages/db içinde workspaceId sütunlu bir tablo ekleyin, migrasyonu üretin ve okuma ya da yazmadan önce workspace'i çözen repository yardımcılarını yazın.
// packages/db/src/schema.ts
export const ideas = pgTable("idea", {
id: uuid().primaryKey(),
workspaceId: uuid().notNull().references(() => workspaces.id),
title: text().notNull(),
createdAt: timestamp().defaultNow(),
});
corepack pnpm --filter @supastack/db db:generateEylemi yetkilendirin
Oturumu, workspace'i ve entitlement'ı bu sırayla çözen bir server action oluşturun. Girdiyi bir zod şemasıyla doğrulayın, mutasyonu repository üzerinden çalıştırın ve arayüzün render edebileceği tiplendirilmiş bir sonuç döndürün.
Sıra önemlidir: workspace sahipliğini kontrol etmeden önce yazan bir mutasyon sınırı çoktan geçmiş demektir. Sahipliği sunucuda türetin — tarayıcının gönderdiği workspace id'ye asla güvenmeyin.
Yüzeyi oluşturun
Sayfayı paylaşılan bileşenler ve token'larla kurun — kit'in block'ları ve ui-web primitifleri yaygın desenleri kapsar. Yükleme, hata ve boş durumlarını ele alın; yalnızca mutlu yolu render eden bir özellik bitmemiştir.