Kod bilmeden dinamik bir web uygulaması geliştirmek mümkün mü? Airtable (bulut veritabanı) ve Bubble (görsel uygulama geliştirici) sayesinde, hiçbir programlama diline ihtiyaç duymadan tam işlevli bir CRUD sistemi kurabilirsiniz. Bu yazıda, her iki aracı birlikte kullanarak veri tabanı oluşturma, kullanıcı arayüzü tasarlama ve veri işlemlerini hayata geçirme sürecini adım adım ele alıyoruz.
Airtable ve Bubble Nedir? Hangi Amaçla Kullanılır?
Airtable, esnek bir bulut tabanlı veritabanı ve e-tablo platformudur. Verileri organize etmek, ilişkilendirmek ve API aracılığıyla dış servislere açmak için idealdir. Bubble ise kod yazmadan web uygulamaları geliştirmenizi sağlayan no-code bir platformdur. Drag-and-drop arayüzü ile önyüz tasarlar, iş mantığını görsel editörle tanımlarsınız.
Birlikte kullanıldıklarında, Airtable güçlü bir arka uç veritabanı, Bubble ise esnek bir ön yüz ve iş mantığı katmanı görevi görür.
Adım Adım CRUD Uygulaması Geliştirme
Bir müşteri yönetim paneli örneği üzerinden ilerleyelim: Müşteri bilgilerini (ad, e-posta, telefon, şirket) Airtable'da saklayacak, Bubble ile listeleyip düzenleyeceğiz.
1. Airtable’da Veritabanını Kurma
Öncelikle Airtable'da “Müşteriler” adlı bir tablo oluşturun. Alan türlerini şu şekilde belirleyin:
- Ad (Tek satır metin)
- E-posta (E-posta)
- Telefon (Telefon)
- Şirket (Tek satır metin)
Her kayıt için otomatik oluşan “Record ID” alanını kullanacağız. Ardından, API erişimi için Airtable’ın “API token” ve “Base ID” bilgilerini not alın.
2. Bubble’da Proje Oluşturma ve Airtable API Entegrasyonu
Bubble’da yeni bir proje açın. “Plugins” sekmesinden “Airtable” eklentisini yükleyin (veya varsayılan API Workflow ile kendiniz bağlayın). API bağlantısını kurmak için:
- “API Connector” eklentisini kullanarak Airtable API endpoint’lerini tanımlayın.
- GET, POST, PATCH, DELETE istekleri için gerekli başlıkları (Authorization, Content-Type) ekleyin.
- Her işlem için bir API Workflow oluşturun.
3. Kullanıcı Arayüzünü Tasarlama
Bubble’ın görsel editöründe “Müşteri Listesi” sayfası oluşturun. “Repeating Group” bileşeni ekleyerek verileri listeleyin. Her satıra “Düzenle” ve “Sil” butonları koyun. “Yeni Müşteri Ekle” formu için “Input” alanları ve bir “Kaydet” butonu ekleyin.
4. CRUD İşlemlerini Workflow ile Bağlama
Her buton için Bubble’ın Workflow editörünü kullanarak:
- Create: Formdaki değerleri alıp Airtable’a POST isteği gönderin. Başarılı yanıtta sayfayı yenileyin.
- Read: Sayfa yüklendiğinde Airtable’dan GET isteği ile tüm kayıtları çekip Repeating Group’a doldurun.
- Update: Düzenle butonuna tıklanınca bir pop-up açın, mevcut verileri forma doldurun. Kaydedince PATCH isteği gönderin.
- Delete: Sil butonuna tıklandığında onay alıp DELETE isteği atın ve listeyi güncelleyin.
Bubble ve Airtable: Hangi Durumda Hangisi Tercih Edilmeli?
| Kriter | Airtable | Bubble |
|---|---|---|
| Veri Yönetimi | Mükemmel; ilişkisel veriler, formüller, otomasyon | Sınırlı; yerleşik veritabanı basit projeler için yeterli |
| Kullanıcı Arayüzü | Sadece tablo/form görünümü | Güçlü; tam özelleştirilebilir UI, responsive |
| API Desteği | Zengin REST API, webhook | API Connector ile dış servislere bağlanma |
| Performans | Yoğun veriyle yavaşlayabilir | Ölçeklenebilir, ancak karmaşık iş mantığında gecikmeler |
| Öğrenme Eğrisi | Düşük | Orta; görsel programlama alışkanlığı gerektirir |
Eğer projeniz yoğun veri işleme ve raporlama gerektiriyorsa Airtable’ı arka uç olarak kullanın. Karmaşık ön yüz ve iş akışları için Bubble daha uygundur. İkisini birlikte kullanarak her iki dünyanın avantajını alabilirsiniz.
No-code Projelerde Veri Tutarlılığı ve Performans İpuçları
CRUD işlemleri sırasında veri bütünlüğünü sağlamak için şu noktalara dikkat edin:
- Airtable’da “Masthead” tablosunda eşsiz kayıt ID’si kullanın.
- Bubble’da API çağrıları sonrası hata yönetimi ekleyin (örneğin, başarısız güncellemede kullanıcıya uyarı).
- Gereksiz API isteklerini azaltmak için Bubble’da “Cache” özelliğini kullanın.
- Veri tabanı işlemlerini tetiklemeden önce kullanıcı girişlerini doğrulayın (ör. e-posta formatı).
- Aynı anda birden fazla kullanıcı düzenlemesi yapıyorsa, Airtable’ın kayıt kilitlenme özelliğini (Lock) etkinleştirin.
Bu ipuçları, no-code projenizi daha güvenilir ve ölçeklenebilir hale getirecektir. Daha karmaşık state yönetimi ihtiyaçları için React useState Hook ile State Yönetimi yazımıza göz atabilirsiniz (React bilginiz varsa benzer prensipleri Bubble’da da uygulayabilirsiniz).
Sık Yapılan Hatalar ve Kaçınılması Gerekenler
- API Key’i açıkta bırakmak: Bubble uygulamanızı yayınlamadan önce API token’ı “Environment Variables” kullanarak gizleyin.
- Veri modelini önceden planlamamak: Airtable’da alan türlerini ve ilişkileri başta belirleyin; sonradan değişiklik zor olabilir.
- Bubble’ın Built-in DB’sini Airtable yerine kullanmaya kalkışmak: Basit uygulamalar için yeterli olabilir ancak ileri düzey sorgulama istiyorsanız Airtable daha iyi bir seçimdir.
- Güvenlik açıkları: Bubble’ın “Privacy” ayarlarını aktifleştirerek kullanıcıların yalnızca kendi verilerine erişmesini sağlayın.
Unutmayın, no-code araçları pek çok şeyi sizin adınıza yönetir ancak veri tutarlılığı ve güvenlik yine sizin sorumluluğunuzdadır. Büyük ölçekli projelerde daha kontrollü bir altyapı için React useEffect Cleanup Fonksiyonu ile Bellek Sızıntılarını Önleme makalemizdeki gibi temizlik prensiplerinden ilham alabilirsiniz.
Sonuç: No-code CRUD Artık Mümkün
Airtable ve Bubble kombinasyonu, kod yazmadan profesyonel bir CRUD uygulaması geliştirmek için en güçlü no-code yöntemlerinden biridir. Bu rehberdeki adımları uygulayarak kendi dinamik web projenizi kısa sürede hayata geçirebilirsiniz. İleride daha karmaşık özellikler eklemek isterseniz, no-code alanındaki yenilikleri takip etmenizi ve topluluk forumlarından destek almanızı öneririz.
Sık Sorulan Sorular
Airtable ve Bubble ile CRUD uygulaması yapmak ücretsiz mi?
Her iki platformun da ücretsiz planları bulunur, ancak sınırlı sayıda kayıt, API çağrısı veya kullanıcı içerir. Daha büyük projeler için ücretli planlara geçmeniz gerekebilir.
Hangi durumlarda sadece Bubble veya sadece Airtable kullanmalıyım?
Basit bir veri girişi ve listeleme istiyorsanız Bubble’ın kendi veritabanı yeterlidir. Ancak karmaşık sorgular, raporlar veya harici sistemlerle entegrasyon gerekiyorsa Airtable’ı arka uç olarak kullanmak daha avantajlıdır.
No-code CRUD uygulaması güvenli mi?
Evet, doğru yapılandırıldığında güvenlidir. API token’ları gizlemek, Bubble’da privacy ayarlarını yapmak ve Airtable’da kayıt düzeyinde izinler belirlemek kritik adımlardır.
API entegrasyonu için kod bilmem gerekir mi?
Bubble’ın API Connector eklentisi ile çoğu işlemi görsel arayüzden yapabilirsiniz. HTTP metodları ve JSON yapısı hakkında temel bilgi yardımcı olur, ancak kod yazmanız gerekmez.
Bubble ve Airtable dışında önerilen no-code araçlar var mı?
Evet, Supabase (açık kaynak veritabanı), Xano (backend) ve WeWeb (frontend) gibi alternatifler mevcuttur. Ancak Airtable ve Bubble, kullanım kolaylığı ve entegrasyon zenginliği açısından en popüler kombinasyonlardan biridir.
