Tema Yükleme Sistemi - Proje Planlaması

🎯 Proje Vizyonu (Basit Anlatım)

Problem: Her yeni tenant (müşteri) için tema kurulumu manuel yapılıyor - dosyalar kopyalanıyor, widgetlar oluşturuluyor, ayarlar yapılıyor. Bu işlem saatler sürüyor ve hata riski yüksek.

Çözüm: Tasarımcı HTML tema hazırlıyor → Claude tema'yı analiz ediyor → Sistem otomatik olarak tüm widget'ları, ayarları, sayfaları oluşturuyor. Dakikalar içinde site hazır!

Hedef Akış:

1. HTML Tema

→

2. Claude Analiz

→

3. JSON Manifest

→

4. Panel Import

→

5. Canlı Site!

🏗️ Sistem Mimarisi

İş Akışı

Tasarımcı HTML Tema Hazırlar

Standart klasör yapısında (header, footer, sections, pages)

Claude Tema'yı Analiz Eder

HTML/CSS'i okur, widget'ları, ayarları, menüleri tespit eder

JSON Manifest Oluşturur

Tüm konfigürasyonlar, içerikler yapılandırılmış JSON'da

Admin Panel Import Eder

Tema Yükleme modülü JSON'u okur, DB'ye yazar

Site Hazır!

Widget'lar, sayfalar, ayarlar, menüler - hepsi yerinde

Sistem Bileşenleri

1. Tema Dizini (Kaynak)

public/design/templates/[tema-adi]/

HTML, CSS, JS, görseller

2. Claude Analiz Prompt'u

Özel geliştirilmiş tema okuma prompt'u

Widget tespit, ayar çıkarma, yapı analizi

3. JSON Manifest Dosyası

theme-manifest.json

Tüm konfigürasyonların tek dosyası

4. ThemeLoader Modülü

Modules/ThemeLoader/

Admin panel import/export işlemleri

5. Hedef Sistem

Widget, Settings, Menu, Page modülleri

Tenant DB'ye yazım

📄 JSON Manifest Yapısı

📝 Basit Anlatım

JSON Manifest = Temanın "tarifi". Bir site kurmak için gereken her şeyin listesi. Widget'lar, ayarlar, menüler, sayfalar - hepsi bu dosyada tanımlı. Panel bu dosyayı okuyup otomatik olarak DB'ye yazıyor.

{
  "manifest_version": "1.0",
  "theme": {
    "name": "varplas",
    "display_name": "VARPLAS Kurumsal Tema",
    "version": "1.0.0",
    "author": "Tuufi Design",
    "description": "Endüstriyel/Kurumsal firmalar için modern tema",
    "preview_url": "https://tuufi.com/design/templates/varplas/v1/",
    "screenshot": "screenshot.png"
  },

  "theme_files": {
    "layouts": [
      {"source": "index.html", "target": "layouts/app.blade.php", "type": "main_layout"},
      {"source": "header.html", "target": "layouts/partials/header.blade.php", "type": "partial"},
      {"source": "footer.html", "target": "layouts/partials/footer.blade.php", "type": "partial"}
    ],
    "pages": [
      {"source": "about.html", "target": "pages/about.blade.php", "slug": "hakkimizda"},
      {"source": "contact.html", "target": "pages/contact.blade.php", "slug": "iletisim"},
      {"source": "services.html", "target": "pages/services.blade.php", "slug": "hizmetlerimiz"}
    ],
    "assets": {
      "css": ["css/style.css", "css/responsive.css"],
      "js": ["js/main.js", "js/animations.js"],
      "images": "images/"
    }
  },

  "widgets": [
    {
      "slug": "varplas-hero-slider",
      "name": "VARPLAS Hero Slider",
      "type": "hero",
      "position": "hero",
      "has_items": true,
      "settings_schema": {
        "autoplay": {"type": "boolean", "default": true, "label": "Otomatik Oynatma"},
        "interval": {"type": "number", "default": 5000, "label": "Geçiş Süresi (ms)"},
        "show_arrows": {"type": "boolean", "default": true, "label": "Okları Göster"}
      },
      "item_schema": {
        "title": {"type": "text", "label": "Başlık", "required": true},
        "subtitle": {"type": "text", "label": "Alt Başlık"},
        "description": {"type": "textarea", "label": "Açıklama"},
        "image": {"type": "image", "label": "Arkaplan Görseli", "required": true},
        "button_text": {"type": "text", "label": "Buton Metni"},
        "button_url": {"type": "url", "label": "Buton Linki"}
      },
      "default_items": [
        {
          "title": "Plastik Sektöründe 30 Yıllık Tecrübe",
          "subtitle": "Kalite ve Güven",
          "description": "Modern üretim tesislerimizle hizmetinizdeyiz",
          "image": "images/slider/slide-1.jpg",
          "button_text": "Hakkımızda",
          "button_url": "/hakkimizda"
        }
      ],
      "content_html": "",
      "content_css": "/* Slider specific CSS */",
      "content_js": "// Slider JavaScript"
    },
    {
      "slug": "varplas-services-grid",
      "name": "VARPLAS Hizmetler Grid",
      "type": "services",
      "position": "content",
      "has_items": true,
      "settings_schema": {
        "section_title": {"type": "text", "default": "Hizmetlerimiz", "label": "Bölüm Başlığı"},
        "columns": {"type": "select", "options": [2,3,4], "default": 3, "label": "Sütun Sayısı"},
        "show_icons": {"type": "boolean", "default": true, "label": "İkonları Göster"}
      },
      "item_schema": {
        "title": {"type": "text", "label": "Hizmet Adı", "required": true},
        "description": {"type": "textarea", "label": "Açıklama"},
        "icon": {"type": "icon", "label": "İkon", "default": "fas fa-cog"},
        "image": {"type": "image", "label": "Görsel"},
        "url": {"type": "url", "label": "Detay Linki"}
      },
      "default_items": [
        {"title": "Enjeksiyon Kalıplama", "icon": "fas fa-industry", "description": "..."},
        {"title": "Ekstrüzyon", "icon": "fas fa-cogs", "description": "..."},
        {"title": "Kalıp Tasarımı", "icon": "fas fa-drafting-compass", "description": "..."}
      ]
    },
    {
      "slug": "varplas-about-section",
      "name": "VARPLAS Hakkımızda",
      "type": "about",
      "position": "content",
      "has_items": false,
      "settings_schema": {
        "title": {"type": "text", "default": "Hakkımızda", "label": "Başlık"},
        "subtitle": {"type": "text", "label": "Alt Başlık"},
        "content": {"type": "richtext", "label": "İçerik"},
        "image": {"type": "image", "label": "Görsel"},
        "stats_enabled": {"type": "boolean", "default": true, "label": "İstatistikleri Göster"},
        "years": {"type": "number", "default": 30, "label": "Yıl Sayısı"},
        "projects": {"type": "number", "default": 500, "label": "Proje Sayısı"},
        "clients": {"type": "number", "default": 200, "label": "Müşteri Sayısı"}
      }
    },
    {
      "slug": "varplas-cta-banner",
      "name": "VARPLAS CTA Banner",
      "type": "cta",
      "position": "content",
      "has_items": false,
      "settings_schema": {
        "title": {"type": "text", "label": "Başlık"},
        "description": {"type": "textarea", "label": "Açıklama"},
        "button_text": {"type": "text", "default": "İletişime Geçin", "label": "Buton Metni"},
        "button_url": {"type": "url", "default": "/iletisim", "label": "Buton Linki"},
        "background_color": {"type": "color", "default": "#1e40af", "label": "Arkaplan Rengi"},
        "background_image": {"type": "image", "label": "Arkaplan Görseli"}
      }
    },
    {
      "slug": "varplas-contact-info",
      "name": "VARPLAS İletişim Bilgileri",
      "type": "contact",
      "position": "footer",
      "has_items": false,
      "settings_schema": {
        "show_map": {"type": "boolean", "default": true, "label": "Haritayı Göster"},
        "map_embed": {"type": "textarea", "label": "Google Maps Embed Kodu"}
      }
    }
  ],

  "settings": {
    "site_info": [
      {"key": "site_name", "value": "VARPLAS Plastik", "group": "general"},
      {"key": "site_slogan", "value": "Kaliteli Plastik Çözümleri", "group": "general"},
      {"key": "site_description", "value": "30 yıllık tecrübesiyle plastik sektörünün öncüsü", "group": "general"}
    ],
    "contact": [
      {"key": "contact_phone", "value": "+90 212 xxx xx xx", "group": "contact"},
      {"key": "contact_email", "value": "info@varplas.com", "group": "contact"},
      {"key": "contact_address", "value": "İstanbul, Türkiye", "group": "contact"},
      {"key": "contact_working_hours", "value": "Pzt-Cuma: 09:00-18:00", "group": "contact"}
    ],
    "social": [
      {"key": "social_facebook", "value": "", "group": "social"},
      {"key": "social_instagram", "value": "", "group": "social"},
      {"key": "social_linkedin", "value": "", "group": "social"},
      {"key": "social_youtube", "value": "", "group": "social"}
    ],
    "theme_settings": [
      {"key": "primary_color", "value": "#1e40af", "group": "theme"},
      {"key": "secondary_color", "value": "#f59e0b", "group": "theme"},
      {"key": "header_style", "value": "sticky", "group": "theme"},
      {"key": "footer_style", "value": "dark", "group": "theme"}
    ]
  },

  "menus": [
    {
      "slug": "header-menu",
      "name": "Ana Menü",
      "location": "header",
      "items": [
        {"title": "Ana Sayfa", "url": "/", "order": 1},
        {"title": "Hakkımızda", "url": "/hakkimizda", "order": 2},
        {"title": "Hizmetlerimiz", "url": "/hizmetlerimiz", "order": 3, "children": [
          {"title": "Enjeksiyon Kalıplama", "url": "/hizmetlerimiz/enjeksiyon"},
          {"title": "Ekstrüzyon", "url": "/hizmetlerimiz/ekstruzyon"},
          {"title": "Kalıp Tasarımı", "url": "/hizmetlerimiz/kalip-tasarimi"}
        ]},
        {"title": "Ürünlerimiz", "url": "/urunlerimiz", "order": 4},
        {"title": "İletişim", "url": "/iletisim", "order": 5}
      ]
    },
    {
      "slug": "footer-menu",
      "name": "Footer Menü",
      "location": "footer",
      "items": [
        {"title": "Gizlilik Politikası", "url": "/gizlilik-politikasi"},
        {"title": "KVKK", "url": "/kvkk"},
        {"title": "Çerez Politikası", "url": "/cerez-politikasi"}
      ]
    }
  ],

  "pages": [
    {
      "title": "Hakkımızda",
      "slug": "hakkimizda",
      "template": "about",
      "widgets": ["varplas-about-section"],
      "seo": {
        "meta_title": "Hakkımızda | VARPLAS Plastik",
        "meta_description": "30 yıllık tecrübemiz ve modern tesislerimizle plastik sektörünün öncüsüyüz."
      }
    },
    {
      "title": "Hizmetlerimiz",
      "slug": "hizmetlerimiz",
      "template": "services",
      "widgets": ["varplas-services-grid"],
      "seo": {
        "meta_title": "Hizmetlerimiz | VARPLAS Plastik",
        "meta_description": "Enjeksiyon kalıplama, ekstrüzyon, kalıp tasarımı ve daha fazlası."
      }
    },
    {
      "title": "İletişim",
      "slug": "iletisim",
      "template": "contact",
      "widgets": ["varplas-contact-info"],
      "seo": {
        "meta_title": "İletişim | VARPLAS Plastik",
        "meta_description": "Bize ulaşın. Sorularınız için 7/24 hizmetinizdeyiz."
      }
    }
  ],

  "seo_defaults": {
    "site_title_suffix": " | VARPLAS Plastik",
    "default_og_image": "images/og-image.jpg",
    "robots": "index, follow",
    "sitemap_priority": {
      "home": 1.0,
      "pages": 0.8,
      "services": 0.7
    }
  }
}

🤖 Claude Analiz Prompt'u

📝 Basit Anlatım

Claude'a özel bir "talimat seti" (prompt) vereceğiz. Bu prompt sayesinde Claude herhangi bir HTML temayı okuyabilecek, analiz edebilecek ve yukarıdaki JSON formatında çıktı üretebilecek.

Prompt Yapısı (Ana Bölümler)

1. Sistem Talimatları

- Sen bir tema analiz uzmanısın
- Verilen HTML dosyalarını oku ve analiz et
- JSON Manifest formatında çıktı üret
- WidgetManagement sistemini bil

2. Analiz Kuralları

- HTML'de tekrarlayan yapıları (section, card) tespit et → Widget adayı
- İkon + başlık + açıklama paterni → Services/Features widget
- Slider/Carousel yapısı → Hero Slider widget
- Form alanları → Contact widget
- Footer bölümleri → Footer widget

3. Widget Tespit Kuralları

- <section> tagları genellikle widget sınırlarını belirler
- Tekrarlayan <div class="card"> → has_items: true
- Tek içerik bloğu → has_items: false
- CSS class isimlerinden widget adı türet

4. Ayar Çıkarma Kuralları

- Metinler → text tipinde setting
- Görseller → image tipinde setting
- Renkler (CSS'den) → color tipinde setting
- Boolean seçenekler → boolean tipinde setting
- Sayısal değerler → number tipinde setting

5. Çıktı Formatı

- Geçerli JSON formatı (syntax hatasız)
- Türkçe label'lar
- Anlamlı slug'lar (tema-adi-widget-tipi)
- Default değerler mevcut içerikten

Örnek Analiz Prompt'u (Taslak)

# TEMA ANALİZ PROMPT'U

Sen bir HTML tema analiz uzmanısın. Görevin, verilen HTML tema dosyalarını
inceleyip JSON Manifest formatında çıktı üretmek.

## GÖREV
1. Tema klasöründeki tüm HTML dosyalarını oku
2. Sayfa yapısını analiz et (header, footer, sections)
3. Widget adaylarını tespit et
4. Ayarlanabilir alanları belirle
5. JSON Manifest oluştur

## WİDGET TESPİT KURALLARI

### has_items: true Olacaklar (Tekrarlı Yapılar)
- Slider/Carousel (birden fazla slide)
- Hizmet kartları (grid içinde tekrarlayan cards)
- Ekip üyeleri (tekrarlayan person cards)
- Referanslar/Markalar (logo listesi)
- Blog kartları (tekrarlayan article cards)
- Galeri (tekrarlayan image cards)

### has_items: false Olacaklar (Tek Yapılar)
- Hakkımızda bölümü (tek content block)
- CTA banner (tek mesaj + buton)
- İletişim bilgileri (tek form veya info block)
- Hero (slider değilse, tek görsel + text)

## AYAR TİPLERİ

| HTML İçerik | Setting Tipi | Örnek |
|-------------|--------------|-------|
| Metin | text | Başlık, alt başlık |
| Uzun metin | textarea | Açıklama, paragraf |
| HTML içerik | richtext | Zengin metin editörü |
| Görsel | image | Arkaplan, ikon |
| Link | url | Buton linki |
| Renk | color | Arkaplan rengi |
| Sayı | number | Sütun sayısı, süre |
| Açık/Kapalı | boolean | Göster/Gizle |
| Seçim | select | Stil seçimi |

## JSON ÇIKTI FORMATI
[Yukarıdaki JSON Manifest yapısı]

## ÖRNEK ANALİZ
Girdi: <section class="hero-slider">...</section>
Çıktı: Widget (slug: tema-hero-slider, has_items: true, item_schema: {...})

---
Şimdi verilen tema dosyalarını analiz et ve JSON Manifest üret.

🎛️ ThemeLoader Admin Panel Modülü

📝 Basit Anlatım

Admin panelde yeni bir modül olacak: "Tema Yükleyici". Bu modül sayesinde JSON manifest dosyasını yükleyip tek tıkla tüm site kurulumunu yapabileceksiniz.

Modül Özellikleri

✓

Manifest Yükleme

JSON dosyası upload veya URL'den çekme

✓

Önizleme

Import öncesi nelerin oluşturulacağını görme

✓

Seçmeli Import

Sadece widgetları, sadece ayarları vs. seçebilme

✓

Çakışma Yönetimi

Mevcut verilerle çakışırsa ne yapılacağı

✓

Geri Alma (Rollback)

Hatalı import'u geri alabilme

✓

İlerleme Takibi

Import sürecini canlı izleme

Modül Dosya Yapısı

Modules/ThemeLoader/
├── app/
│   ├── Http/
│   │   └── Livewire/
│   │       ├── ThemeLoaderComponent.php      # Ana liste
│   │       ├── ThemeImportComponent.php      # Import wizard
│   │       └── ThemePreviewComponent.php     # Önizleme
│   ├── Models/
│   │   └── ThemeImportLog.php                # Import geçmişi
│   └── Services/
│       ├── ThemeLoaderService.php            # Ana servis
│       ├── ManifestParser.php                # JSON parse
│       ├── WidgetImporter.php                # Widget import
│       ├── SettingsImporter.php              # Ayar import
│       ├── MenuImporter.php                  # Menü import
│       └── PageImporter.php                  # Sayfa import
├── database/
│   └── migrations/
│       └── tenant/
│           └── create_theme_import_logs.php
├── resources/
│   └── views/
│       └── admin/
│           └── livewire/
│               ├── theme-loader.blade.php
│               ├── theme-import.blade.php
│               └── theme-preview.blade.php
└── routes/
    └── admin.php

UI Taslağı (Import Wizard)

1 Manifest Yükle

2 Önizle

3 Seç

4 Import

📄

JSON Manifest Dosyasını Sürükleyin

veya dosya seçmek için tıklayın

Desteklenen: .json

veya URL'den yükle

🗄️ Veritabanı İşlemleri

🔧 Teknik Detay

Import sırasında hangi tablolara ne yazılacak? Her bileşen için ayrı import servisi çalışacak ve ilgili tablolara kayıt ekleyecek.

Bileşen	Tablo (Tenant DB)	Yazılacak Alanlar	Kaynak (JSON)
Widget Instance	`tenant_widgets`	widget_id, settings, display_title, position	widgets[]
Widget Items	`widget_items`	tenant_widget_id, content, order	widgets[].default_items[]
Ayarlar	`settings_values`	setting_id, value	settings.*[]
Menüler	`menus`	name, slug, location	menus[]
Menü Öğeleri	`menu_items`	menu_id, title, url, parent_id, order	menus[].items[]
Sayfalar	`pages`	title, slug, content, template	pages[]
SEO	`seo_settings`	model_type, model_id, meta_*	pages[].seo, seo_defaults
Import Log	`theme_import_logs`	manifest_data, status, created_ids	Tüm manifest

⚠️ Önemli: Central DB

widgets tablosu Central DB'de. Yeni widget template'i oluşturulacaksa (content_html, settings_schema, item_schema) bu Central'a yazılmalı. ThemeLoader önce Central'da widget template var mı kontrol eder, yoksa oluşturur.

📋 İmplementasyon Adımları

FAZ 1

Temel Altyapı

1 JSON Manifest şema tanımını finalize et

2 Modules/ThemeLoader modülünü oluştur

3 ManifestParser servisini yaz

4 theme_import_logs migration oluştur

5 Admin route ve temel view oluştur

FAZ 2

Import Servisleri

1 WidgetImporter - Widget template + instance

2 SettingsImporter - Site ayarları

3 MenuImporter - Menü yapıları

4 PageImporter - Sayfa oluşturma

5 SeoImporter - SEO ayarları

6 AssetImporter - CSS/JS/Görsel kopyalama

FAZ 3

Admin Panel UI

1 ThemeLoaderComponent - Liste sayfası

2 ThemeImportComponent - Import wizard

3 ThemePreviewComponent - Önizleme

4 Progress tracking (Livewire events)

FAZ 4

Claude Entegrasyonu

1 Tema analiz prompt'unu geliştir

2 Örnek temalarla test et

3 Prompt'u iyileştir (iteratif)

4 Dokümentasyon hazırla

FAZ 5

Test & Optimizasyon

1 VARPLAS teması ile tam test

2 Rollback mekanizması test

3 Edge case'leri ele al

4 Production deployment

🎯 Prompt Geliştirme Stratejisi

📝 Basit Anlatım

Prompt = Claude'a verilen "talimat seti". Doğru prompt ile Claude herhangi bir HTML temayı okuyup JSON manifest üretebilir. Prompt'u geliştirmek için iteratif (deneme-yanılma) yaklaşım kullanacağız.

İteratif Geliştirme Süreci

Temel Prompt Oluştur

Basit kurallar, JSON şeması, örnek çıktı

Test Teması ile Dene

VARPLAS temasını Claude'a ver, çıktıyı incele

Hataları Tespit Et

Eksik widget, yanlış ayar, hatalı format

Prompt'u İyileştir

Kuralları netleştir, örnekler ekle

Tekrarla

Mükemmel sonuç alana kadar 2-4 tekrar

Prompt Bileşenleri

Rol Tanımı

"Sen bir tema analiz uzmanısın..."

Görev Tanımı

HTML oku → Widget tespit et → JSON üret

Kurallar

Widget tespit kriterleri, ayar tipleri

Çıktı Formatı

JSON şeması, field açıklamaları

Örnekler

Girdi HTML → Çıktı JSON örnekleri

🚀 Hemen Başlayalım - İlk Adımlar

1. Karar Verilecekler

? JSON Manifest şeması onaylı mı?

? ThemeLoader modülü hangi tenant için? (Central/Tenant)

? Widget template'leri Central'da mı oluşturulsun?

? Tema dosyaları nereye kopyalansın?

2. İlk Yapılacaklar

→ VARPLAS teması için örnek JSON Manifest oluştur

→ Tema analiz prompt'unun ilk versiyonunu yaz

→ Prompt'u VARPLAS ile test et

→ ThemeLoader modül yapısını oluştur