ARFit SDK 🛒📱

Flutter uygulamanıza 3 satırda Augmented Reality (AR) alışveriş deneyimi ekleyin!

✨ Özellikler

✅ Kolay Entegrasyon - Mevcut ürün ID'lerinizi kullanın
✅ Otomatik Analitik - Kullanıcı davranışları otomatik takip edilir
✅ Özelleştirilebilir - Buton tasarımını dilediğiniz gibi değiştirin
✅ Web & Mobil Desteği - Tüm platformlarda çalışır
✅ Sıfır Konfigürasyon - 3D modeller ARFit tarafından sağlanır

📦 Kurulum

Flutter Uygulamaları İçin

pubspec.yaml dosyanıza ekleyin:

dependencies:
  arfit_sdk: ^1.0.0

Terminalde çalıştırın:

flutter pub get

Web Siteleri İçin

HTML sayfanıza ekleyin:

<script src="https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js"></script>
<script>
  ARFit.show({
    productId: 'urun-12345',
    modelUrl: 'https://...',
    productName: 'Ürün Adı',
    apiKey: 'your_api_key'
  });
</script>

🚀 Kullanım (3 Adım)

1️⃣ SDK'yı Başlatın

Ana main.dart dosyanızda bir kez başlatın:

import 'package:flutter/material.dart';
import 'package:arfit_sdk/arfit_sdk.dart';

void main() {
  ARFitAnalytics().initialize(
    apiUrl: 'https://arfit-api.arfitcompany.workers.dev',
  );
  
  runApp(MyApp());
}

2️⃣ Ürün ID'lerinizi ARFit'e Gönderin

ARFit ekibine mevcut ürün ID'lerinizi ve ürün bilgilerinizi gönderin:

📧 Email: info@arfit.dev

Konu: Yeni Ürün AR Entegrasyonu

Ürün Bilgileri:
- Ürün ID: urun-8308622
- Ürün Adı: Eliptik Bisiklet Pro
- Kategori: Cardio
- Fiyat: 8999 TL
- Görseller: [ürün-görselleri.zip]

ARFit ekibi:

Ürünü 3D olarak tarar
Sisteme yükler
Sizin ID'nizi kullanarak kaydeder
Size "Hazır!" mesajı gönderir

3️⃣ Kendi Ürün ID'nizi Kullanın

Ürün sayfanıza AR butonu ekleyin - kendi ID'nizi kullanın:

ARFitButton(
  productId: 'urun-8308622',  // ← SİZİN ürün ID'niz
  productName: 'Eliptik Bisiklet Pro',
  modelUrl: '',  // ← Boş bırakın, otomatik çekilir
)

Hepsi bu kadar! 🎉

🌐 Web Sitesi Entegrasyonu

HTML/JavaScript İçin

1. Script'i ekleyin:

<!DOCTYPE html>
<html>
<head>
  <title>Ürün Sayfası</title>
</head>
<body>
  <h1>Samsung TV 55"</h1>
  <p>Fiyat: 45.999 TL</p>

  <!-- ARFit Widget SDK -->
  <script src="https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js"></script>
  <script>
    ARFit.show({
      productId: 'urun-tv-55',
      modelUrl: 'https://your-cdn.com/models/tv.glb',
      modelUrlIos: 'https://your-cdn.com/models/tv.usdz',
      productName: 'Samsung TV 55"',
      apiKey: 'your_api_key_here',
      bubbleText: 'Evinde AR ile gör 👆',
      primaryColor: '#0082C3'
    });
  </script>
</body>
</html>

2 saniye sonra sağ altta AR baloncuğu çıkar!

WordPress İçin

Theme Functions.php:

function add_arfit_widget() {
  if (is_product()) {
    global $product;
    ?>
    <script src="https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js"></script>
    <script>
      ARFit.show({
        productId: '<?php echo $product->get_id(); ?>',
        productName: '<?php echo $product->get_name(); ?>',
        apiKey: 'your_api_key'
      });
    </script>
    <?php
  }
}
add_action('wp_footer', 'add_arfit_widget');

Shopify İçin

Theme Liquid:

{% if product %}
<script src="https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js"></script>
<script>
  ARFit.show({
    productId: '{{ product.id }}',
    productName: '{{ product.title }}',
    apiKey: 'your_api_key'
  });
</script>
{% endif %}

💡 Nasıl Çalışır?

1. Kullanıcı AR butonuna tıklar veya baloncuğu görür
   ↓
2. SDK sizin ürün ID'nizi gönderir: "urun-8308622"
   ↓
3. ARFit sunucusu bu ID için 3D modeli bulur
   ↓
4. AR görüntüleyici açılır ve modeli gösterir

Siz sadece mevcut ürün ID'lerinizi kullanırsınız!

🎨 Özelleştirme

Flutter - Buton Stilini Değiştirin

ARFitButton(
  productId: 'urun-12345',  // Kendi ID'niz
  productName: 'Koşu Bandı X200',
  modelUrl: '',
  buttonText: 'AR ile İncele',
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.purple,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
)

Flutter - Floating AR Baloncuğu

Stack(
  children: [
    // Ürün sayfanız...
    
    ARFitFloatingButton(
      productId: 'urun-12345',
      productName: 'Koşu Bandı X200',
      modelUrl: '',
      showDelay: Duration(seconds: 2),
    ),
  ],
)

Web - Baloncuk Özelleştirme

ARFit.show({
  productId: 'urun-12345',
  modelUrl: 'https://...',
  productName: 'Ürün Adı',
  apiKey: 'your_api_key',
  
  // Özelleştirme
  bubbleText: 'AR ile dene! 🔥',
  bubbleDelay: 3000,  // 3 saniye
  position: 'bottom-left',  // veya top-right, top-left, bottom-right
  primaryColor: '#FF0000'  // Kırmızı
});

📊 Analitik Dashboard

Tüm kullanım istatistiklerinizi görüntüleyin:

👉 Dashboard'a Git

Hangi ürünler daha çok AR ile görüntüleniyor
AR kullanımı sepet dönüşümünü ne kadar artırıyor
Kullanıcı davranış analitiği
Platform dağılımı (iOS, Android, Web)
Gerçek zamanlı aktivite akışı

💼 Örnek Entegrasyon

Flutter - E-Ticaret Ürün Listesi

class ProductCard extends StatelessWidget {
  final Product product;
  
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: [
          Image.network(product.imageUrl),
          Text(product.name),
          Text('${product.price} ₺'),
          
          // AR butonu - Kendi ürün ID'nizi kullanın
          ARFitButton(
            productId: product.id,  // ← Kendi veritabanınızdaki ID
            productName: product.name,
            modelUrl: '',
          ),
          
          AddToCartButton(product: product),
        ],
      ),
    );
  }
}

Flutter - Ürün Detay Sayfası

Scaffold(
  body: SingleChildScrollView(
    child: Column(
      children: [
        ProductImageGallery(product: product),
        ProductInfo(product: product),
        
        // AR butonu
        Padding(
          padding: EdgeInsets.all(16),
          child: ARFitButton(
            productId: product.id,  // ← Mevcut ID sisteminiz
            productName: product.name,
            modelUrl: '',
          ),
        ),
        
        ProductDescription(product: product),
        AddToCartButton(product: product),
      ],
    ),
  ),
)

Web - React Entegrasyonu

import { useEffect } from 'react';

function ProductPage({ product }) {
  useEffect(() => {
    // ARFit Widget yükle
    const script = document.createElement('script');
    script.src = 'https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js';
    script.onload = () => {
      window.ARFit.show({
        productId: product.id,
        productName: product.name,
        apiKey: process.env.REACT_APP_ARFIT_API_KEY
      });
    };
    document.body.appendChild(script);
    
    return () => document.body.removeChild(script);
  }, [product]);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price} ₺</p>
      {/* AR baloncuğu otomatik çıkacak */}
    </div>
  );
}

🆕 Yeni Ürün Ekleme Süreci

Email Atın: info@arfit.dev
Ürün Bilgilerini Gönderin:
- Ürün ID (sizin sisteminizdeki)
- Ürün adı
- Görseller (farklı açılardan)
- Ölçüler (varsa)
Bekleyin: ARFit ekibi 3D modelini oluşturur (2-5 gün)
Onay Alın: "Ürün hazır!" mesajı gelir
Kullanın: Kodunuza sadece kendi ID'nizi ekleyin

3D tarama ve model oluşturma tamamen ARFit sorumluluğundadır!

🔑 API Key Alma

Web entegrasyonu için API Key gereklidir:

Email gönderin: info@arfit.dev
Şirket bilgilerinizi paylaşın
API Key alın: company_xxxxxxxxxxxxx
Kodunuzda kullanın

Flutter SDK için API Key opsiyoneldir (analytics için önerilir).

❓ Sıkça Sorulan Sorular

Mevcut ürün ID sistemimizi değiştirmemiz gerekir mi?

Hayır! Kendi ID sisteminizi kullanmaya devam edin. ARFit, sizin ID'lerinizi kullanarak 3D modelleri eşleştirir.

Her ürün için AR desteği eklemeli miyiz?

Hayır, sadece AR ile gösterilmesini istediğiniz ürünler için ARFit SDK'yı kullanın. Diğer ürünler normal çalışmaya devam eder.

3D model güncellenirse ne olur?

ARFit tarafında güncellenir, sizin kodunuzda hiçbir değişiklik gerekmez. Kullanıcılar otomatik olarak yeni modeli görür.

Web ve mobil aynı anda çalışır mı?

Evet! Aynı API Key ile hem Flutter uygulamanızda hem web sitenizde kullanabilirsiniz. Tüm veriler tek dashboard'da birleşir.

Hangi 3D model formatlarını destekliyorsunuz?

Android/Web: GLB (GLTF Binary)
iOS: USDZ (Universal Scene Description)

ARFit otomatik olarak doğru formatı kullanır.

🐛 Sorun Giderme

Flutter - "SDK not initialized" hatası

// main.dart'ta initialize() çağrısını kontrol edin
ARFitAnalytics().initialize(
  apiUrl: 'https://arfit-api.arfitcompany.workers.dev',
);

Web - "ARFit is not defined" hatası

Script yüklenmemiş, URL'i kontrol edin:

<script src="https://pub-827d9f89399f4d8e81df052ffe4b21ba.r2.dev/arfit-widget.js"></script>

"Model bulunamadı" hatası

Ürün ID'sinin doğru olduğundan emin olun
ARFit ekibine ürünün sisteme eklendiğini teyit edin
Email: info@arfit.dev

Baloncuk çıkmıyor

Console'da hata var mı kontrol edin (F12)
bubbleDelay ayarını kontrol edin
Script doğru yüklendi mi kontrol edin

📱 Platform Desteği

Platform	Flutter SDK	Web Widget	Notlar
Android	✅	✅	ARCore gerektirir
iOS	✅	✅	ARKit gerektirir
Web	⚠️	✅	WebXR destekli tarayıcılar
Desktop	❌	✅	Önizleme modu

🤝 Destek & İletişim

📧 Email: info@arfit.dev
🌐 Website: https://arfit.dev
📊 Dashboard: https://arfit-api.arfitcompany.workers.dev/dashboard
💬 Demo: https://arfit.dev

📄 Lisans

MIT License

🎯 Örnek Projeler

Flutter Demo: https://arfit.dev
Web Widget Demo: Yakında
WordPress Plugin: Yakında
Shopify App: Yakında

🙏 Teşekkürler

ARFit SDK'yı kullandığınız için teşekkürler! ⭐️

Sorunuz mu var? info@arfit.dev