MoonShine 4: Yapay Zeka Destekli Yönetim Paneli Devrimi

MoonShine 4, sürekli gelişim göstererek, admin panelleri ile çalışmak için kuralları değiştiriyor. Bu makale, açık kaynak/Laravel/Filament/admin panellerle ilgilenenler için hazırlanmıştır.

MoonShine, Laravel projeleri için açık kaynak bir admin panelidir. Sadece Laravel için değil.

Bir Kararın Hikayesi

Version dört üzerinde çalışmaya başladığımda, kolay yoldan gidebilirdim: küçük bir yeniden yapılandırma, bağımlılıkların güncellenmesi ve Tailwind’i versiyon 4’e güncellemek – ve buna MoonShine 4 demek. Güvenli. Planlı. Sıkıcı.

Ama içten içe böyle bir sürüm istemediğimi biliyordum. Heyecan verici bir şey yapmak istedim. MoonShine her sürümünde benim için bir meydan okumaydı ve bu trendi sürdürmek istedim. Sonunda yeni bir tasarım yaratma kararı alındı. Yeni tasarım için gereken fonların yalnızca küçük bir kısmını toplama rağmen.

Neler Geldi

MoonShine 4 sadece bir güncelleme değil. Ciddi bir dönüşüm:

• Yeni Tasarım – Tüm geçmiş hataları göz önünde bulundurarak yapılan UI çalışmaları
• Yeni Mimari – CRUD, herhangi bir veri tipiyle kullanılması için ayrı bir modül olarak çıkarıldı
• Tasarım Token Sistemi – Her arayüz öğesini özelleştirme yeteneği
• AI Entegrasyonu – MoonShine Forty-Five – Claude Code ile çalışma için jeneratör
• Telegram Mini Uygulaması – Hızlı entegrasyon
• 20+ Hazır Palet – Kendi paletinizi oluşturmak için bir jeneratörle birlikte
• Kapsamlı Dokümantasyon – Dokümantasyon neredeyse tamamen topluluk tarafından hazırlandı

Sürüm Tarihi 11.11

11.11 tarihi tesadüfen belirlendi. Başlangıçta sürüm 1 Kasım olarak planlanmıştı. Fakat tarihi ertelemek zorunda kaldım. Takvimde seçerken, 11.11’i gördüm. “Ne kadar havalı! Dört ‘bir’ – tam da MoonShine 4!” diye düşündüm. Bu tür anların iyi sonuçlar getireceğinden eminim.

MoonShine, Laravel framework’üne dayalı web uygulamaları için hızlı bir şekilde yönetim arayüzleri oluşturmak için geliştiricilere yardımcı olan çok işlevli bir admin panelidir. Ayrıca diğer framework’lerle de kullanılabilir.

Ultra-Hızlı Geliştirme (Zaman Tasarrufu):
MoonShine, bir admin paneli için hazır bir yapı oluşturucudur. Form, tablo ve butonları sıfırdan yazmanız gerekmez; hazır bileşenleri kullanarak projenizi hızlıca oluşturabilirsiniz.

Basit Veri Yönetimi (CRUD):
MoonShine, kullanıcılar, siparişler, makaleler ve diğer verileriniz için CRUD işlemlerini (Create, Read, Update, Delete) kolayca gerçekleştirmenizi sağlar.

AI Asistanı (Forty-Five) – Tek Bir İstemle Arayüz Oluşturma:
MoonShine’da yerleşik olan AI ajanı, bir istekle bir sayfa oluşturmanıza yardımcı olur; mesela: “Kullanıcılar listesi, filtre ve ekle butonu olan bir sayfa yap.” Bu, işinizi inanılmaz ölçüde hızlandırır.

MoonShine ve Rakipleri

En popüler Laravel admin panelleri arasındaki farkları hızlıca değerlendirin:

* Hiçbir admin panel yüksek performans almadı. Bunun nedeni tüm panellerin kötü olması değil; çünkü admin panelleri performans odaklı değil, uygulanma hızı odaklıdır.

Sonuç olarak, MoonShine, Filament ile birçok ortak noktaya sahip. Herkes tercihine göre bir araç seçer – hazır bileşenleri sıkı bir şekilde kullanmayı sevenler için Filament daha uygundur. Ancak MoonShine, popüler görevlere hazır çözümler sunar ve ihtiyaç duyduğunuzda özelleştirme yapmak oldukça kolaydır. Ve şimdi, MoonShine Forty-Five ile, her bileşeni bir istekte bulunarak oluşturmak mümkün.

Yeni Yapı: Kod İçinde Düzen

Kaynaklar, Sayfalar, Bileşenler ve Alanlar Nedir (Yeni Başlayanlar İçin Temeller)

MoonShine admin panelinde açılan her sayfa, bir “sayfa” olarak adlandırılır. Her sayfa, farklı bir şablon (Layout) içerir. Varsayılan olarak, giriş sayfası, CRUD sayfaları ve hata sayfaları için şablonlar mevcuttur. Sayfanın içeriği MoonShine bileşenlerinden oluşur. MoonShine’de her şey bileşenlere bölünmüştür ve her HTML etiketi bir bileşendir.

CRUD sayfaları, verilerle etkileşimde bulunur. Varsayılan olarak, veriler Eloquent modellerine dayanmaktadır ve belirli bir model için oluşturulan CRUD işlemleri sayfaları bir kaynakta gruplanır. Kaynak, belirli bir veri türünde veri alma, kaydetme ve silme işlevlerine sahiptir. CRUD sayfalarının temeli ise onları düzenleyen bir form ve tüm listeyi görüntüleyen bir tablodur. Tablo ve form, aynı zamanda MoonShine bileşenleridir.

CRUD Modülü

CRUD ile ilgili her şey ayrı bir modüle çıkarıldı. Bu, CRUD modüllerinin Laravel dışında kullanılabilmesi için yapılmıştır. Bu düşünce, MoonShine for Symfony uygulamasını yaparken ortaya çıktı. Bu CRUD modülünü alıp herhangi bir framework için oluşturabilirsiniz.

Eski Yapının Sorunu (MoonShine 3)

Versiyon 3’ten önce, her sayfanın alan setini yapılandırmanız gerekiyordu. Bu yaklaşım, kaynakların çoğalmasına neden oldu. Bu yaklaşımda, hangi sayfanın hangi alanları göstermesi ile ilgili bir çok sorun yaşandı.

MoonShine 4’teki Çözüm

Artık her kaynak oluşturduğunuzda, veri listesinin, düzenleme/oluşturma ve ayrıntılı görüntüleme için üç sayfa da oluşturuluyor. Her sayfa, olan bitenden sorumludur. Ana sayfa bileşenleri – indeks için tablo, oluşturma/düzenleme için form ve ayrıntılı sayfadaki tablo ayrı katmanlara ayrılmıştır ve gerektiğinde özelleştirilebilir.

Tailwind 4 ve Tasarım Tokenları: Sınırsız Özelleştirme

Neler Değişti

Tailwind versiyon 4’e güncellenirken çok çalışma yapıldı. Bu yeni sürüm, renk şemaları ve düzen ile çalışma fırsatları sundu. Tasarım token sistemi geliştirildi ve bu sayede görünüm hızlıca özelleştirilebiliyor.

Tasarım tokenları, bir tasarım sisteminin temel bileşenleridir: renkler, boyutlar, boşluklar ve tipografi gibi değişkenleri saklar. Bizim durumumuzda, yalnızca bir token değerini değiştirerek düzenin tüm genel değişikliklerini hızlıca yapmanız sağlanır.

protected function assets(): array
{
    return [
        InlineCss::make(
            ,
        ),
    ];
}

Paletler: 1 Dakikada Markalaşma

Problem ve Çözüm

Markalaşma, bir admin panelinin önemli bir parçasıdır. Ancak sadece logonuzu değiştirmek tüm ihtiyaçları karşılamaz. Eğer admin paneli markanın renklerini kullanırsa, bu da panellerin sanki tamamen işletme ihtiyaçları için yazılmış gibi görünmesini sağlar. Önceki sürümlerde stillerle manuel olarak ilgilenmek zorundaydınız. Şimdi ise tasarım tokenları ile tüm şablon parametrelerini değiştirebilirsiniz.

Paletler – Varsayılan ve Marka

Yeni tasarım için varsayılan siyah-beyaz palet yapmak istedik. Ancak sonunda, MoonShine’ın bir marka olduğunu anladık ve varsayılan paleti tanıdık renklerde bırakmaya karar verdik.

final class MoonShineLayout extends AppLayout
{
   protected ?string $palette = NeutralPalette::class;
}

Palet Jeneratörü

Palet jeneratörü mevcut. Burada tüm paletleri görebilirsiniz. MoonShine kurulumunda, size seçmeniz için bir palet sunulur.

Forty-Five ile Palet Oluşturma

Forty-Five ile bir istemde renk şemasını oluşturabilirsiniz ve LLM doğru dizini oluşturup sınıfı doğru şekilde kayıt eder. Ancak bunu daha sonra anlatacağım.

Yeni Tasarım: Oluşum Tarihi

Tasarım Tarihi

Yorumlarda sıkça MoonShine tasarımının kötü olduğunu belirttiler. Ancak tasarım, zevk meselesidir – herkesin beğenmesi mümkün değildir. Ancak MoonShine 3 için çok sayıda olumsuz geri bildirim alınca, tasarımda değişiklik yapma kararı aldım.

Yeni Şablon Yetenekleri

Düzen Özelleştirmesi

MoonShine’ın üçüncü versiyonunda, yan menü her zaman ekranın sol tarafına basılıydı. Artık yan menü kombinasyonları yapma yeteneğiniz var.

final class MoonShineLayout extends AppLayout
{
    protected bool $contentCentered = true;
}

Varsayılan olarak false. Eğer true olarak ayarlarsanız, içerik alanının ortalanmasını sağlarsınız.

MoonShine Forty-Five Nedir ve Neden

MoonShine Forty-Five – LLM destekli admin paneli oluşturma asistanıdır.

Çalışma Prensibi (Adım Adım)

Kurulum:

npm install -g @moonshine/forty-five

Sonrasında çalışması GitHub SpecKit ile benzerdir.

Güçlü MoonShine Projeye Ekleniyor:

forty-five init

Forty-Five Komutları

Mevcut beş komut bulunmaktadır. Hızla inceleyelim.

1. /forty-five.palettes

AI tabanlı paletler oluşturabilirsiniz. Bu komut ile oluşturulan 20 paletten bazıları MoonShine yönetimi tarafından onaylandı.

2. /forty-five.layout

Tasarımlar konusunda daha ciddi görevler yapmanızı sağlar. Bileşen yaklaşımını kullanarak sayfalar oluşturur.

3. /forty-five.components

Kullanıcı arayüzü elemanlarını hızlıca oluşturmanızı sağlar. Tablo, modal pencereler, formlar gibi her şey için hazır Blade şablonları oluşturur.

4. /forty-five.field

Özel alanlar oluşturmanıza olanak tanır. İhtiyacınıza yönelik özel alanlar tasarlamak için kullanabilirsiniz.

5. /forty-five.component

Özel bileşenler oluşturmanızı sağlar. Alanlar doğrudan model verilerine bağlı değildir.

MoonShine 4 Dokümantasyonu Üzerinde Çalışmalar

Dokümantasyon için harika bir ekip vardı. 10 gönüllüyü toplayıp, 11 kişi çalıştı.

Eklenti Mağazası – Hazır Çözümler

MoonShine 4’te, tipik görevler için hazır çözümler bulunan bir resmi pazar yeri bulunmaktadır.

Orada Neler İlginç?

Dosya Yöneticisi, işleri kolaylaştıran ve birkaç dakika içinde kurulabilen bir eklentidir.

Pazar yeri, boşuna zaman kaybetmemeniz için hazır çözümler sunmaktadır; çünkü zaman, yazılım geliştirmede parayı temsil eder.

MoonShine ile ilgili daha fazla bilgi edinmek ve pratik çalışmalar yapmak için lütfen dokümantasyona göz atın:

MoonShine Hızlı Başlangıç Kılavuzu