Bubble, görsel bir arayüzle web uygulamaları geliştirmenize olanak tanıyan güçlü bir no-code platformudur. Ancak gerçek dünyadaki uygulamalar genellikle harici servislerden veri almayı veya onlara veri göndermeyi gerektirir. REST API entegrasyonu, Bubble uygulamanızı dış dünyaya bağlamanın en yaygın yoludur. Bu adım adım rehberde, Bubble'da API çağrıları yapmayı, yanıtları işlemeyi ve yaygın hataları yönetmeyi öğreneceksiniz.
1. Bubble'da API Entegrasyonunun Temelleri
Bubble, API iş akışlarını yönetmek için iki ana bileşen sunar: API Connector (önceden tanımlı entegrasyonlar) ve Backend Workflows (özel API çağrıları). API Connector, dış hizmetlerin API'lerini Bubble'ın veri türlerine eşlemenizi sağlar. Örneğin, bir kullanıcı listesini çekmek için bir API çağrısı tanımlayabilir ve dönen JSON'u Bubble'ın veritabanına otomatik olarak kaydedebilirsiniz.
API Connector'ı kullanmadan önce, hedef API'nin kimlik doğrulama yöntemini (API Key, OAuth, Basic Auth) ve istek/yanıt formatını (genellikle JSON) bildiğinizden emin olun. Çoğu modern API, API Key ile basit bir yetkilendirme sunar.
2. Adım Adım API Çağrısı Oluşturma
2.1. API Connector Ekleme
Bubble editöründe Plugins sekmesine gidin, Add plugin butonuna tıklayın ve API Connector'ı yükleyin. Ardından plugin ayarlarına girerek yeni bir API ekleyin. Buraya API adını, temel URL'yi (base URL) ve isteğe bağlı başlıkları (headers) girin (örneğin, Authorization: Bearer YOUR_TOKEN).
2.2. API Çağrısı Tanımlama
API Connector'da Add another API seçeneğiyle yeni bir çağrı oluşturun. Şu bilgileri girin:
- API Name: Çağrınıza anlamlı bir isim (örn. "GetUsers").
- Path: API'nin göreceli yolu (örn.
/users). - HTTP Method: GET, POST, PUT, DELETE vb.
- Headers: Ek başlıklar (içerik türü, token vb.).
- Parameters: Sorgu parametreleri varsa (örn.
?page=1).
Örnek: Bir kullanıcı listesi çekmek için GET /users çağrısı. Dönen yanıtı test etmek için Call butonuna tıklayın. Bubble yanıtın bir önizlemesini gösterecektir.
2.3. Yanıtı Veri Türüne Eşleme
Başarılı bir çağrı sonrası, Create a data type from this call seçeneğiyle dönen JSON yapısını Bubble'ın özel veri türüne dönüştürebilirsiniz. Bubble otomatik olarak alanları algılar ve eşler. Bu, API'den gelen verileri uygulamanızdaki diğer veri türleriyle ilişkilendirmenizi sağlar.
3. Backend Workflows ile API Çağrıları
API Connector statik çağrılar için idealdir, ancak dinamik veri göndermek veya kullanıcı etkileşimine yanıt vermek için Backend Workflows kullanmanız gerekir. Backend Workflows, sunucu tarafında çalışan iş akışlarıdır. Bir workflow oluşturup tetikleyici (trigger) olarak Schedule API Workflow seçeneğini kullanabilirsiniz.
Örneğin, bir form gönderildiğinde API'ye POST isteği yapmak için:
- Sayfadaki bir butona Start/trigger a workflow ekleyin.
- Workflow'da Call API eylemini seçin ve daha önce API Connector'da tanımladığınız çağrıyı seçin.
- İstek gövdesini (body) form verileriyle doldurun (örneğin,
{"name": "User's Name"}). - Yanıtı işleyip uygulama veritabanına kaydedebilir veya kullanıcıya bildirim gösterebilirsiniz.
4. Hata Yönetimi ve İpuçları
API entegrasyonlarında karşılaşılan yaygın sorunlar:
- Yetkilendirme hataları: API anahtarının geçerliliğini kontrol edin. Bubble'da environment variables (ortam değişkenleri) kullanarak hassas bilgileri şifreleyin.
- Veri eşleme hataları: JSON yanıtındaki alan adlarıyla Bubble veri türü alanlarının birebir eşleştiğinden emin olun. Gerekirse Data transformation eklentisiyle veriyi dönüştürün.
- Rate limiting: API'nin belirli bir süre içinde kaç istek kabul ettiğini öğrenin. Bubble workflow'larınızda gecikme (Pause/Resume) ekleyerek aşım riskini azaltın.
- Zaman aşımı: Bubble ücretsiz planlarında istek süresi saniyelerle sınırlıdır. Büyük veriler için pagination (sayfalama) kullanarak istekleri bölün.
API hatalarını kullanıcıya göstermek yerine, bir hata modülü oluşturup kullanıcı dostu mesajlar gösterin. Örneğin, "Servis şu anda kullanılamıyor. Lütfen daha sonra tekrar deneyin."
5. İleri Düzey: Webhook ve Otomasyon
Bubble, webhook'lar aracılığıyla anlık bildirimler alabilir veya gönderebilir. Örneğin, bir ödeme sistemi entegre etmek için gelen webhook'u işleyebilirsiniz. Bu konuda daha fazla bilgi için n8n ile Webhook Entegrasyonu yazımıza göz atabilirsiniz. Ayrıca, farklı no-code araçların entegrasyon yeteneklerini karşılaştırmak isterseniz Bubble vs Xano karşılaştırması işinize yarayacaktır.
6. Son Söz
Bubble'da REST API entegrasyonu, başlangıçta karmaşık görünse de API Connector ve Backend Workflows ile oldukça erişilebilir hale gelir. Adımları dikkatlice uygulayarak uygulamanızı harici servislerle zenginleştirebilirsiniz. Unutmayın: Her API farklıdır, bu nedenle her zaman dokümantasyonu okuyun ve test çağrıları yaparak doğrulayın. Başarılı entegrasyonlar!
Sık Sorulan Sorular
Bubble'da API çağrısı yapmak için kod bilmek gerekir mi?
Hayır, Bubble'ın API Connector ve Backend Workflows özellikleri tamamen görseldir. Sadece API uç noktasını, yöntemi ve parametreleri girmeniz yeterlidir. Kod yazmadan dış servislerle veri alışverişi yapabilirsiniz.
Bubble API Connector ile kaç farklı API çağrısı tanımlayabilirim?
Bubble ücretsiz planında sınırsız API çağrısı tanımlayabilirsiniz, ancak aylık API istek sayısı planınıza bağlıdır (ücretsiz planda ayda 2000 istek gibi). Daha fazla istek için ücretli planlara geçmeniz gerekir.
API yanıtını otomatik olarak Bubble veritabanına nasıl kaydederim?
API Connector'da bir çağrı tanımladıktan sonra 'Create a data type from this call' seçeneğini kullanın. Bubble, JSON yanıtını analiz eder ve uygun alanlara sahip bir veri türü oluşturur. Ardından Backend Workflow ile bu veriyi veritabanına kaydedebilirsiniz.
Bubble'da API kimlik doğrulaması nasıl yapılır?
API Connector'da 'Add headers' bölümüne giderek Authorization başlığını ekleyin. Çoğu API için 'Bearer YOUR_TOKEN' formatı yeterlidir. OAuth gibi karmaşık yöntemler için Bubble'ın OAuth2 eklentisini kullanabilirsiniz.
Bubble'da hatalı API çağrısı durumunda ne yapmalıyım?
Hata durumunda önce API Connector'da test çağrısı yaparak yanıtı kontrol edin. Ardından Backend Workflow'da 'API call error' tetikleyicisi ekleyerek hatayı yakalayabilir ve kullanıcıya anlamlı bir mesaj gösterebilirsiniz.
