Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Merhaba arkadaşlar,

Livewire componenti içerisinde Alpine JS kullanarak SweetAlert'in nasıl kullanılabileceğine dair basit bir kod yazdım.
Kodu github'a yükledim. Merak eden arkadaşlar kodu indirip inceleyebilir.
https://github.com/boranbar/sweetalert-test-with-alpine

Anasayfada sadece basit bir Bootstrap tablosu var. Delete butonunu kullanarak silme işlemini gerçekleştirebilirsiniz SweetAlert ile.

Kurulum;
Repository 'yi git clone ile klonlayın
.env.example dosyasını kopyalayarak .env dosyasını oluşturun ve database bilgilerinizi girin
composer install komutunu çalıştırın
php artisan key:generate komutunu çalıştırın
php artisan migrate komutunu çalıştırın
php artisan db:seed komutunu çalıştırın (test etmeniz için 100 tane random user oluşturacak)
İşlem tamam. http://localhost adresinden çalıştırabilirsiniz.

NOT: Aslında doğrudan Livewire içerisinde eventler tanımlayarak ve Livewire Controller'ı içerisinde bu eventleri dinleyerek (listener) te yapılabiliyor. Ancak Alpine JS kullanarak sweet alert'i tetiklemek daha basitmiş gibi geldi. O yüzden denemek istedim.

Utanarak söylemeliyim ki ilk kez Github kullanmayı denemiş oldum. 😅 Hatalarım olmuşsa, affola.

    BoraN7 Güzel, elinize sağlık. Ben de bir iki bir şey ekleyeyim:

    PhpStorm'un .idea klasörünü de göndermişsiniz, o sadece sizin bilgisayarda olması gereken bir klasör. Kök dizinde

    git rm --cached -r .idea

    çalıştırın. Bu Github'daki .idea klasörünü silecek ama bilgisayarınızdakini ellemeyecek. Sonra .gitignore dosyanıza /.idea şeklinde girdi ekleyerek .idea klasörünün tekrar dahil olmasını engelleyin, sonra gönderin. Diğer projelerinizde de ilk işiniz .gitignore dosyasına /.idea eklemek olsun. Visual Studio Code için de /.vscode eklenmesi gerekiyor.

    Kurulum ile ilgili açıklamaları README.md dosyasına işleyin. İçinde Laravel'in kendine ait bilgileri var, onları silebilirsiniz. Github, Bitbucket, Gitlab gibi git hostları reponun ana sayfası olarak bu README.md dosyasını otomatik gösterir.

    x-on:click.prevent olayını td içindeki button'a değil td'ye vermişsiniz. Button'a verseniz daha mantıklı olur, sonuçta kullanıcı onu tıklıyor.

    AlpineJs içindeki $dispatch ile bu işlemi Vue'deki gibi tekrar kullanılabilir bir component haline getirebilirsiniz. $dispatch ve custom event şeklinde araştırma yapın. Kabaca x-on:click.prevent="$dispatch('areYouSure')" gibi bir kullanım elde etmiş oluyorsunuz.

    AlpineJS, Bootstrap ve SweetAlert'i npm paketi olarak kurup Laravel Mix ile tek dosyaya derleyebilirsiniz. Böylece tek tek sayfaya dahil etmenize gerek kalmaz:

    npm i --save-dev alpinejs bootstrap@next sweetalert2

    resources/js/app.js:

    import 'bootstrap';
    import 'alpinejs'
    import Swal from 'sweetalert2';

    resources/css/app.css:

    @import "~bootstrap/scss/bootstrap";

    welcome.blade.php içerisinde artık sadece şunları eklemeniz yeterli:

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script src="{{ mix('js/app.js') }}" defer></script>

    Geliştirme sırasında

    npm run watch

    yapacaksınız. Bu dosyaları dinleyecek, siz bir değişiklik yaptığınızda otomatik olarak tekrar app.js ve app.css olarak derleyecek.

    Production için ise npm run prod çalıştıracaksınız. Bu app.js ve app.css dosyasını derleyip sıkıştırıp küçültecek, bu şekilde de production ortamına göndereceksiniz. (Bu işlemleri CI/CD ile otomatikleştirebilirsiniz.)

    Kök dizindeki webpack.mix.js dosyasına da şunu eklerseniz:

    if (mix.inProduction()) {
        mix.version();
    }

    app.css ve app.js için versiyonlama yapılmış olur, production ortamında tarayıcı önbelleği problemi yaşamazsınız.

    Son olarak; AlpineJs kullandığınız için aslında SweetAlert bile kullanmanıza gerek yok, çok basit bir şekilde benzeri bir dialogu siz de yapabilirsiniz, daha fazla kontrole ve seçeneğe sahip olmuş olursunuz. AlpineJs ben de kullanıyorum, bu tür işleri çok basit bir şekilde yapmanızı sağlıyor. Sadece bilgi vermek amaçlı yazdım, SweetAlert kullanmak da gayet iyi bir seçenek. Ayrıca Tailwind'e de bakmanızı öneririm, ben Bootstrap'tan daha çok sevdim (ki Bootstrap'ı 2 sürümünden beri kullanan biriyim.)

      mgsmus Vakit ayırdığınız için ve de değerli yorumlarınız için çok teşekkür ederim. Yazdığınız uyarıları dikkate alarak repository'ye yeni bir commit göndererek güncelledim.
      $dispatch konusunu da araştırıp, inceleyeceğim.