Günümüzde mobil uygulama geliştiricileri için abonelik modelinin sunduğu gelirleri takip etmek, yalnızca standart bir dashboardla sınırlı kalmamalı. RevenueCat’ın yerleşik arayüzü işe yarıyor olsa da, verilerinizi kendi tasarımınıza göre şekillendirebilmek, filtreleyebilmek ya da ekip içi araçlara entegre edebilmek için API’ye ihtiyaç duyarsınız. Bu noktada devreye RevenueCat’ın sunduğu Charts API giriyor. Sadece bir HTML dosyasıyla, herhangi bir build sistemi ya da npm bağımlılığı olmadan çalışan bir abonelik paneli oluşturmak mümkün — ve şimdi size bunu nasıl yapabileceğinizi adım adım anlatacağız.
RevenueCat’ın Charts API’si, uygulamalarınızdaki abonelik verilerini programatik olarak almanızı sağlıyor. Bu API, aylık tekrarlayan gelir (MRR), aktif abone sayısı, deneme dönüşüm oranları ve churn gibi kritik metriklere gerçek zamanlı erişim sunuyor. Peki,Charts API tam olarak neler sunuyor? API’nin temel üç endpointi bulunuyor: Proje genelindeki abonelik sağlığına dair anlık bir görünüm sunan /metrics/overview, belirli bir metriğe ait zaman serisi verilerini getiren /charts/{chart_name}, ve mevcut filtre ve segment seçeneklerini listeleyen /charts/{chart_name}/options. Öne çıkan chart isimleri arasında revenue, mrr, active_subscriptions, new_customers ve churned_subscriptions bulunuyor. Bu endpointlere resolution (günlük, haftalık, aylık), start_time ve end_time gibi parametreler göndererek verileri istediğiniz şekilde filtreleyebilirsiniz.
RevenueCat API’sine Nasıl Erişilebilir?
Charts API’yi kullanmanın ilk adımı, RevenueCat panelinden doğru kimlik bilgilerini almaktır. Ancak burada dikkat edilmesi gereken önemli bir nokta var: API anahtarınızı doğrudan tarayıcıdan çağırmak CORS hatasına yol açar. RevenueCat, gizli anahtarlarınızın müşteri tarafında kullanılmasını engellemek için Access-Control-Allow-Origin başlığını yanıtlarında göndermez. Bu nedenle, API anahtarınızı gizli tutmak için bir proxy servisi kullanmanız gerekir.
En basit çözüm, Netlify Functions gibi bir sunucu tarafı aracılığıyla API anahtarınızı göndermektir. Örneğin, bir Netlify fonksiyonu oluşturup yerel ortam değişkenlerinde saklayabilir ve tarayıcıdan yapılan talepleri bu fonksiyon üzerinden yönlendirebilirsiniz. Bu yaklaşım, hem CORS sorununu çözer hem de API anahtarınızın güvenliğini sağlar. Proje kimliğinizi bulmak da ilk etapta kafa karıştırıcı olabiliyor; RevenueCat panelindeki URL’de yer alan proj_XXXXXXXXXXXX kısmı proje kimliğinizi temsil ediyor.
CORS Hatasını Anlamak ve Çözmek
Tarayıcıdan doğrudan RevenueCat API’sine erişmeye çalıştığınızda karşılaşacağınız hata şu şekildedir: TypeError: Failed to fetch ve No CORS headers. Blocked. Bu hata, RevenueCat’ın tasarımından kaynaklanıyor ve aslında doğru bir güvenlik uygulamasıdır. API’nin gizli anahtar gerektirmesi ve bu anahtarın müşteri tarafında bulunmaması gerektiği için CORS başlıkları eklenmez. Çözüm, API taleplerini bir proxy üzerinden yönlendirmektir.
Bir Netlify fonksiyonu örneği şu şekilde çalışır:
exports.handler = async (event) => {
const { path, params } = JSON.parse(event.body);
const url = ` URLSearchParams(params)}`;
const res = await fetch(url, {
headers: {
'Authorization': `Bearer ${process.env.RC_API_KEY}`,
'Content-Type': 'application/json'
}
});
return {
statusCode: res.status,
body: JSON.stringify(await res.json())
};
};Bu fonksiyon, tarayıcıdan gelen talepleri alır, RevenueCat API’sine yetkilendirerek gönderir ve yanıtı JSON formatında geri döndürür. Böylece gizli anahtar hiçbir zaman müşteri tarafında açığa çıkmamış olur.
Proje Kimliğinizi ve API Anahtarınızı Doğru Şekilde Ayarlamak
RevenueCat’da API anahtarınızı oluştururken dikkat edilmesi gereken birkaç önemli adım var. İlk olarak, RevenueCat panelindeki Settings → API Keys bölümünden yeni bir v2 anahtarı oluşturmanız gerekiyor. Bu anahtarın charts_metrics:charts:read yetkisine sahip olması zorunlu. Ayrıca, v1 anahtarları Charts API ile uyumlu olmadığından, mutlaka v2 anahtarı kullanmalısınız. API anahtarınızı oluşturduktan sonra, proje kimliğinizi de doğru şekilde belirlemeniz gerekiyor. Proje kimliği, RevenueCat panelindeki URL’de yer alan proj_XXXXXXXXXXXX kısmıdır ve proje bazlıdır — tüm platformları (iOS, Android, web) kapsar.
RevenueCat v2 API’si, yetkilendirme için Bearer önekini zorunlu kılar. Eğer bu önek kullanılmazsa, API 401 hatasıyla yanıt verir ve hata mesajında nedeni net olarak belirtilmez. Bu da geliştiricilerin sıkça karşılaştığı bir durumdur. Bu nedenle, API entegrasyonu yaparken Authorization: Bearer YOUR_API_KEY formatına dikkat etmek büyük önem taşıyor.
Tek HTML Dosyasıyla Canlı Abonelik Paneli Oluşturmak
Tek bir HTML dosyasıyla çalışan bir abonelik paneli oluşturmak, karmaşık build süreçlerinden kaçınmanın en basit yollarından biri. Bu yaklaşım, özellikle hızlı prototipler oluşturmak veya küçük projeleri dağıtmak için ideal. Örneğin, RevenueCat’ın sunduğu demo projesi, doğrudan API’ye yapılan yanlış çağrıları algılayarak kullanıcıya CORS hatasını gösteriyor ve doğru çözümü sunuyor. Bu demo aynı zamanda, API yanıtlarını almak için nasıl bir proxy kullanılması gerektiğini de açıklıyor.
Veri çekme süreci, basit bir fetch çağrısıyla başlıyor. Ancak bu çağrı, doğrudan RevenueCat API’sine yapılmamalı, yerine proxy üzerinden yönlendirilmelidir. Örneğin:
async function fetchOverview(projectId) {
const res = await fetch('/api/rc-proxy', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
path: `/projects/${projectId}/metrics/overview`
})
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}Bu fonksiyon, proje kimliğinizi alarak RevenueCat API’sinden anlık abonelik verilerini çekecek ve ardından bu verileri kullanıcı arayüzünde görüntüleyecektir. Sonuç olarak, RevenueCat’ın Charts API’si ile tek bir HTML dosyası kullanarak tamamen özelleştirilebilir bir abonelik paneli oluşturmak mümkün. Bu yaklaşım, verilerinizi ekip içi araçlara entegre etmek, Slack bildirimleri oluşturmak veya basitçe kendi dashboard’unuzu kurmak için mükemmel bir çözüm sunuyor. API’nin sunduğu esneklik ve proxy aracılığıyla yapılan güvenli entegrasyon sayesinde, abonelik verilerinizi istediğiniz şekilde yönetebilir ve görselleştirebilirsiniz.
Yapay zeka özeti
Learn how to create a live subscription dashboard using RevenueCat’s Charts API. Fetch MRR, churn, and conversion data with a single HTML file and avoid CORS issues with a serverless proxy.
