Atoms
Bağlayıcılar

Supabase Bağlantısı

Supabase ile web siteleriniz için kolayca bir backend yapılandırabilirsiniz—geliştirme deneyimi gerekmez.

Genel Bakış

Supabase, kullanıcıların veri depolamasını ve backend benzeri işlevler sunmasını sağlayan açık kaynaklı bir backend platformudur. Atoms ekibinizin verileri yalnızca tarayıcının belleğinde tutması ve bunun yenileme veya kapatma durumunda kaybolabilmesi sorununu çözmek için Supabase ile bağlantı kurabilirsiniz. Atoms'u Supabase ile entegre ederek web sitenizi kalıcı depolama ve gelişmiş özelliklere sahip, tam işlevli bir uygulamaya dönüştürebilirsiniz.

Daha fazla talimatı burada görebilirsiniz:

Temel Avantajlar

Geliştirme deneyimi gerektirmemesinin yanı sıra, üç temel avantajı daha vardır:

  1. Hızlı Kurulum: Backend'inizi hızla ayağa kaldırın ve geliştirme sürecinizi hızlandırın.
  2. Yüksek Ölçeklenebilirlik: Kullanıcı artışına uyum sağlar ve projenizin sınırlama olmadan genişlemesine olanak tanır.
  3. Maliyet Etkin: Küçük projeler ve girişimler için ideal ücretsiz bir katman sunar.

Supabase'i Atoms'a Bağlama

İşte Atoms'u Supabase ile bağlamak için kısa bir rehber.

  1. Atoms'ta Supabase Entegrasyonunu Başlatın

    • Ayarlar'ı açın.

    • Sol kenar çubuğundan Bağlayıcılar'ı seçin.

    • Supabase bağlayıcısını bulun ve Bağlan'a tıklayın.

    • Atoms, takip edebileceğiniz bir bağlantı kurulum arayüzü sunacaktır.

  2. Kimlik Doğrulayın ve Projenizi Yapılandırın

    Supabase hesabınızda oturum açmanızı isteyen bir açılır pencere görünecektir.

    • Açılır menüden kuruluşunuzu seçin.

    • Supabase hesabınızı yetkilendirmek için Authorize Atoms'a tıklayın. (Bağlantı saniyeler içinde tamamlanır – manuel yapılandırma gerekmez)

    • Yetkilendirme tamamlandıktan sonra şunları yapabilirsiniz:

      • Listeden mevcut bir Supabase projesi seçin veya
      • Yeni bir kuruluşu anında eklemek için +Add New One'a tıklayın. (Yönlendirmeye ihtiyacınız varsa, Atoms Assistant Supabase'i Atoms'a Bağlama konusunda size adım adım yardımcı olabilir.)
  3. Otomatik Yapılandırma

    • Projeniz seçildikten sonra Atoms, Supabase projenize otomatik olarak bağlanacaktır. Veritabanı yapınızı, tablolarınızı ve güvenlik ayarlarınızı toplayacaktır.
    • "Supabase Bağlantısıed" bildirimini gördüğünüzde backend'iniz tamamen yapılandırılmış ve kullanıma hazırdır.

Kullanıcı Kimlik Doğrulaması

Atoms'ta uygulamanızı oluşturduktan sonra kullanıcı kimlik doğrulamasını uygulamak isteyebilirsiniz. Supabase Auth, uygulamanıza kimlik doğrulama ve yetkilendirme eklemeyi kolaylaştırır. Bu süreçte Atoms sizi iki yöntemle yönlendirecektir: (1) Email and Password ve (2) Social Logins (Google).

Email and Password

  1. Supabase'i Atoms ile bağlayın

    • Geçerli bir Supabase hesabınız olduğundan emin olun.
    • Supabase hesabınızı yetkilendirmek için sohbet arayüzünün sağ üst köşesindeki yetkilendirme düğmesine tıklayın.
    • Kullanmak istediğiniz Supabase projesini seçin.
  2. Agent'lara Gereksinimlerinizi Bildirin

    • Gereksinimlerinizi sohbete girin. Örneğin, basitçe şu istemi verebilirsiniz: "Add authentication".
    • Bu, genellikle Supabase'in kimlik doğrulama sistemine bağlı temel bir giriş ve kayıt sayfası oluşturur.
  3. Test için Kullanıcı Oluşturun

    • Test kullanıcısı oluşturmak için yeni eklenen giriş/kayıt arayüzünü kullanın.
    • Kullanıcı oturumunun kalıcı olduğunu doğrulamak için sayfayı yenileyin.
    • Alternatif olarak Supabase kontrol panelinize gidin, Authentication > Users bölümüne gidin ve test için manuel olarak bir kullanıcı ekleyin.
  4. Uygulamanızı dağıtın

Social Logins (Google)

  1. Supabase Projesinde Google OAuth'u Yapılandırın

    • Supabase kontrol panelinizde Authentication sayfasına gidin.
    • Sign In/Up alt sayfasına gidin.
    • Google seçeneğini bulun ve etkinleştirmek için anahtarı açın. (Ayrıntılı Supabase yapılandırma adımları için Supabase'de Google OAuth'u Yapılandırma bölümüne veya Supabase Docs sayfasına bakın.)
  2. Agent'lara Gereksinimlerinizi Bildirin

    • Gereksinimlerinizi sohbete girin. Örneğin: "Add Google authentication".
    • Bu, giriş sayfanıza Continue with Google düğmesi ekler.
  3. Google Kimlik Doğrulamasını Test Edin

    • Giriş sayfasına gidin.
    • Continue with Google düğmesine tıklayın.
    • Bir Google hesabıyla oturum açın ve kullanıcı profilinin doğru şekilde güncellendiğini doğrulayın.
    • Kullanıcının tekrar uygulamanıza yönlendirildiğinden emin olmak için Google OAuth akışını tamamlayın.
  4. Uygulamanızı Atoms'un Uygulama Dünyası'na dağıtın

Supabase'de Google OAuth'u Yapılandırma

  1. Google Cloud Projesi Oluşturun

    • Google Cloud Console'a Erişin

    • Yeni Bir Proje Oluşturun

      • Üstteki açılır menüye tıklayın ve New Project. seçeneğini seçin.
      • Bir proje adı girin, bir faturalandırma hesabı seçin ve Create.'a tıklayın.
  2. Google OAuth Kimlik Bilgilerini Yapılandırın

    • İzin Ekranını Ayarlayın

      • Arama çubuğuna OAuth yazın ve OAuth izin ekranını açın.
      • Uygulamanızın adını, kullanıcı destek e-postasını ve gerekli diğer alanları doldurun.
      • External veya Internal seçeneğini seçin, ardından Create'a tıklayın.
    • Bir OAuth Client ID Oluşturun

      • Create OAuth Client'a tıklayın, ardından OAuth Client ID'yi seçin.
      • Application Type için Web application seçin.
      • Authorized redirect URIs alanına Supabase kontrol panelindeki callback URL'sini ekleyin.
      • Create'a tıklayın ve oluşturulan Client ID ile Client Secret değerlerini not alın.
  3. Supabase'de Google OAuth'u Yapılandırın

    • Supabase Dashboard'da Oturum Açın

    • Google OAuth'u Etkinleştirin

      • Authentication sayfasına gidin.
      • Providers bölümünde Google seçeneğini bulun ve etkinleştirin.
      • Daha önce oluşturduğunuz Client ID ve Client Secret değerlerini ilgili alanlara ekleyin.
    • Yapılandırmayı Kaydedin

      • Değişiklikleri uygulamak için Save'e tıklayın.

Veri Depolama

Web/uygulamanız için kullanıcı kimlik doğrulamasını yapılandırdıktan sonra kullanıcı verilerini de depolamak isteyebilirsiniz.

Supabase'e bağlandıktan sonra, Atoms'a veritabanına hangi verileri kaydetmek istediğinizi söylemeniz yeterlidir. Agent'lar veritabanı tablolarını otomatik olarak yapılandırır ve bunları doğrudan kullanıcı arayüzünüze entegre eder.

  1. Gereksinimlerinizi Tanımlayın

    • Gereksinimlerinizi sohbete girin. Örneğin: "Please ensure that new trip records are saved to the database".
    • Depolamak istediğiniz verileri mümkün olduğunca açık şekilde açıklayın.
    • Atoms, girdinize göre gerekli veritabanı yapısını otomatik olarak yapılandıracaktır.
  2. Atoms'ta İşlevselliği Test Edin

    • Uygulamanızda örnek veriler oluşturun; örneğin kullanıcı arayüzü üzerinden birkaç "trip records" ekleyin.
    • Verileri kaydedin ve sayfayı yenileyin. Veriler Supabase veritabanıyla senkronize edilecektir.
    • Supabase'de oturum açın ve yeni eklenen verilerin veritabanında bulunup bulunmadığını doğrulayın.
  3. Atoms ile Supabase Arasındaki Veri Senkronizasyonunu Doğrulayın

    • Supabase kontrol panelini açın ve Table Editor'a gidin.
    • Mevcut verileri değiştirin veya yeni veriler oluşturun.
    • Supabase'de yapılan değişiklikler gerçek zamanlı olarak Atoms uygulamanızla senkronize edilecektir.
    • Atoms'a geri dönün ve değiştirilen veya yeni oluşturulan verilerin doğru şekilde görüntülenip görüntülenmediğini doğrulayın.
    • Veriler başarıyla senkronize oluyorsa yapılandırmanız tamamlanmıştır.
  4. Uygulamanızı dağıtın

Edge Functions

Supabase Edge Functions, kullanıcılarınıza yakın sunucu düğümlerinde dağıtılan sunucusuz backend programlarıdır. Geleneksel sunucuları kurma ve bakımını yapma ihtiyacını ortadan kaldırır; böylece daha düşük ağ gecikmesi ve daha hızlı yanıt süreleriyle istediğiniz özel mantığı çalıştırmanızı sağlar. Çoğu web uygulamasında frontend (düğmeler, formlar, kullanıcı arayüzü) temel etkileşimleri yönetir, ancak bazı kritik işlemlerin backend'de çalıştırılması gerekir; örneğin:

  • Kullanıcı kaydından sonra otomatik olarak karşılama e-postası göndermek;
  • Form gönderildiğinde içeriği analiz etmek veya puanlamak için AI API'lerini çağırmak;
  • Ödeme sırasında üçüncü taraf ödeme ağ geçitlerini entegre etmek ve sipariş ayrıntılarını kaydetmek.

Bu işlemlerin tamamı Edge Functions aracılığıyla uygulanır.

Kullanım Örnekleri

Atoms'ta Supabase Edge Functions kullanarak şunları yapabilirsiniz:

  • Karşılama e-postaları gönderme: Yeni kullanıcılara kayıt olduktan sonra bir sonraki adımlarla ilgili yönlendirme içeren karşılama mesajını otomatik olarak e-postayla göndererek etkileşimi ve kullanıcı adaptasyonunu artırın.
  • Kullanıcı form gönderimlerini işleme: Geri bildirim, kayıt veya yorum gönderildiğinde otomatik olarak bir onay bildirimi oluşturup gönderin (ör. "Geri bildiriminizi aldık ve kısa süre içinde inceleyeceğiz") böylece kullanıcılar işlemlerinin başarıyla tamamlandığını bilir.
  • Hatırlatıcı planlama: Kullanıcıların zamanlarını yönetmelerine ve üretken kalmalarına yardımcı olmak için e-posta veya push yoluyla günlük ya da haftalık bildirimler ayarlayın (toplantılar, görevler veya etkinlikler için).
  • AI hizmetlerinden yararlanma: Kullanıcı metin girdikten sonra OpenAI gibi AI API'lerini otomatik olarak dil bilgisi kontrolü veya akıllı yeniden yazım için çağırın ve optimize edilmiş sonuçları kullanıcıya döndürün.
  • Çevrim içi ödemeleri işleme: Kullanıcılar e-ticaret veya hizmet platformunuzda ödeme başlattığında Stripe gibi ağ geçitleriyle entegre olarak işlemleri güvenli şekilde yönetin ve sipariş ayrıntılarıyla birlikte net başarı veya başarısızlık sayfaları gösterin.

Anahtar Depolama ve Yönetimi

Birçok uygulama, üçüncü taraf hizmetlere (ör. Stripe, OpenAI) bağlanmak için anahtarlara veya API kimlik bilgilerine ihtiyaç duyar. Supabase bağlandığında Atoms, bu gizli bilgileri yönetmek ve kullanmak için güvenli bir yol sunar. Atoms'un Supabase ile entegrasyonu sayesinde, bir işlev gizli bir bilgiye ihtiyaç duyduğunda Atoms bunu otomatik olarak algılar ve gerekli değeri girmenizi ister. Yalnızca Agent'ın "Add API Key" düğmesine tıklayıp anahtarınızı girersiniz; ardından Atoms bunu şifreler ve Supabase'in Edge Functions Secrets Manager'ında depolar. Çalışma zamanında bu anahtarlar işleve güvenli şekilde enjekte edilir ve kimlik bilgilerinin düz metin olarak depolanması önlenir.

Backend İşlevleri Ekleme ve Dağıtma

Supabase'e bağlandıktan sonra Agent'a neye ihtiyacınız olduğunu söyleyin:

  • İsteğinizi sohbete yazın. Örneğin: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."

  • Agent kodu oluşturduktan sonra iki düğme görünür: Add API Key ve View in Edge Function.

  • Add API Key'e tıklayın.

  • API anahtarınızı girin ve Send'e tıklayın.

  • View in Edge Function'a tıklayın.

  • Supabase Edge Function sayfasına yönlendirileceksiniz.

    Güvenlik Notu: Tüm anahtarlar şifrelenir ve Supabase'de saklanır; Atoms bunlara erişemez.

SSS

Uygulamama Supabase backend özelliklerini nasıl eklerim?

Supabase'i uygulamanıza üç basit adımda entegre edin:

  • Supabase hesabınızı yetkilendirmek için sohbet arayüzünün sağ üst köşesindeki yetkilendirme düğmesine tıklayın.
  • Kullanmak istediğiniz Supabase projesini seçin ve bağlayın.
  • Gereksinimlerinizi sohbette paylaşın; Agent'lar bağlı Supabase projenize göre özellikler geliştirecektir.
Supabase sosyal girişleri destekliyor mu?

Supabase aşağıdakiler dahil çeşitli kimlik doğrulama yöntemlerini destekler:

  • Email and Password.
  • Passwordless Authentication: Tek kullanımlık parolalar (OTP) veya magic link gibi seçenekler.
  • Social Logins: Google, Twitter ve GitHub gibi üçüncü taraf sağlayıcı desteği.
  • Phone Authentication.
  • Single Sign-On (SSO): SAML SSO desteği.
  • Anonymous Login: Kullanıcıların anonim olarak giriş yapmasına olanak tanır.
Uygulamam için ayrı bir Supabase projesi oluşturmam gerekiyor mu?

Mevcut bir Supabase projesini seçebilir veya yeni bir tane oluşturabilirsiniz. Her sohbet aynı anda yalnızca bir projeye bağlanabilir.

Supabase'e bağlandıktan sonra projemi remix yaparsam bağlantı korunur mu?

Remix işleminden sonra bağlantı kesilir ve yeniden kurulması gerekir. Ayrıca, diğer kullanıcılar tarafından paylaşılan Uygulama Dünyası'ndaki bir uygulama Supabase'e bağlıysa diğer kullanıcılar onu Remix yapamaz.

Bir Supabase veritabanını birden fazla Atoms projesi için kullanabilir miyim?

Evet, bir Supabase veritabanını birden fazla Atoms projesi için kullanabilirsiniz. Ancak bağlantıları ve yapılandırmaları dikkatlice yönetmeniz gerekir.

Projem neden Supabase kuruluşları altında görünmüyor?

Ücretsiz Supabase planında, yedi gün üst üste etkinlik olmayan herhangi bir proje otomatik olarak duraklatılır. Atoms Organizations listesinde, duraklatılmış projelerinizi görüntülemek için Inactive filtresine geçin.

Supabase'e bağlanmaya çalışırken neden \

Supabase, her kuruluş ile bir Atoms hesabı arasında bire bir OAuth bağlaması uygular. Eğer “Test” kuruluşu başka bir Atoms kullanıcısı tarafından zaten yetkilendirildiyse, bunu farklı bir hesapla bağlamaya yönelik sonraki tüm girişimler bu hatayla reddedilir. Bunu düzeltmek için Supabase Dashboard kenar çubuğunda Settings → API → OAuth Apps yolunu açın, o kuruluşa ait mevcut Atoms OAuth iznini silin, ardından Atoms'a dönüp kendi hesabınızla yeniden bağlanın.

Bu sayfa faydalı oldu mu?

İlgili Makaleler