• Buradasın

    Spotify Benzeri Müzik Oynatıcı Uygulaması Geliştirme Eğitimi

    youtube.com/watch?v=iOvRsGaL7pI

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim serisinin 5. bölümüdür. Eğitmen, React ve Tailwind CSS kullanarak Spotify benzeri bir müzik oynatıcı uygulamasının geliştirilme sürecini adım adım göstermektedir.
    • Videoda, müzik oynatıcısının full screen modunun nasıl oluşturulacağı, Tailwind CSS ile tasarım yapılması ve uygulamanın cover ekranı, playlist bilgileri gibi bölümlerin kodlanması anlatılmaktadır. Eğitmen, React use full screen ve use toggle kütüphaneleri kullanarak full screen modunu aktifleştirme, player'ı ve kontrolleri komponente dönüştürme, arka plan fotoğrafı ekleme ve full screen/full screen-off butonlarını oluşturma gibi konuları ele almaktadır.
    • Eğitim, div oluşturma, CSS stilleri uygulama, veri manipülasyonu ve event listener'lar gibi teknik detayları da içermektedir. Video, bir serinin parçası olup, bir sonraki derste devam edileceği belirtilmektedir.
    Spotify Full Screen Kullanımı
    • Spotify'ın full screen özelliği, ekranı tam ekran yaparak player'ın arka plan görseli ile birlikte oynamaya devam etmesini sağlar.
    • Bu derste, Spotify'ın full screen özelliğine benzer bir özellik oluşturmak için React useFullScreen ve useToggle fonksiyonları kullanılacak.
    • Audio yönetimi için React use'u kullanılmış, full screen işlemleri için ise useFullScreen ve useToggle fonksiyonları kullanılacak.
    00:42Full Screen Fonksiyonlarının Kullanımı
    • Full screen özelliği için bir div reflenecek ve bu alan full screen olacak şekilde ayarlanacak.
    • useFullScreen fonksiyonu ile bir show ve toggle parametresi kullanılarak full screen durumu kontrol edilecek.
    • Full screen butonuna basıldığında toggle otomatik olarak true'a çekilecek ve alan full screen olacak.
    01:58Full Screen Player Komponenti
    • Full screen olacak kısmın hep gözükmemesi için bottom barın altında değil, ayrı bir full screen player komponenti oluşturulacak.
    • Full screen player komponenti, isFullScreen parametresi true olduğunda çalışacak şekilde import edilecek.
    • Full screen player komponentine toggle parametresi geçirilecek ve buton ile toggle çalıştırılacak.
    03:29Müzik Yönetimi
    • Full screen yapıldığında çalan müziğin devam etmesi gerekiyor.
    • Current müzik bilgisi için useSelector fonksiyonu kullanılarak player'dan current çekilecek.
    • Full screen yapıldığında player'ın alt kısmına uyarlanması gerekiyor, ancak bu işlem videoda tamamlanmadı.
    05:29Player Komponenti Oluşturma
    • Oyuncu komponenti için state ve controls özellikleri ekleniyor.
    • Oluşturulan player komponenti başarıyla yönetilebiliyor, durdurulabiliyor ve başlatılabiliyor.
    • Player'ın boyutu 64x64 piksel olarak ayarlanıyor ve Tailwind CSS ile genişlik 16 piksel olarak belirleniyor.
    08:43Arka Plan Ekleme
    • Player'a arka plan eklemek için "current image" kullanılıyor.
    • Arka plan için "absolute inset" ve "background-image" özellikleri kullanılıyor.
    • Arka plan için "cover" ve "bg-center" özellikleri ile tam kaplama sağlanıyor.
    13:13İkonlar ve Düzenleme
    • Sol ve sağ taraftaki ikonlar için "flex-justify-between" ve "items-center" özellikleri kullanılıyor.
    • Volume ikonu ve full screen ikonu ekleniyor.
    • İkonlar için "absolute bottom right" özelliği ile sağ alt köşeye yerleştiriliyor.
    17:08Full Screen Toggle
    • Full screen toggle için buton oluşturuluyor.
    • Full screen ikonu için "full-screen-off" ikonu oluşturuluyor.
    • Cover'ın boyutu 95x95 piksel olarak ayarlanıyor.
    19:19Spotify Arayüzü Tasarımı
    • Cover div'i oluşturulup absolute position ile ekranın alt kısmına yerleştiriliyor.
    • Current image için div oluşturulup flex items center ve gapx dört değerleri atanıyor.
    • H3 içerisinde current title yazdırılıyor ve data'dan şarkılar import ediliyor.
    22:08Stil Ayarları
    • Şarkıların boyutları ve font özellikleri ayarlanıyor.
    • Tıklama olaylarında prevent default yerine stop propagation kullanılıyor.
    • On change olayında once fonksiyonu kullanılarak tıklama olayları kontrol ediliyor.
    27:20Spotify Logosu ve Ek Bilgiler
    • Spotify logosu için 16x16 boyutunda bir div oluşturuluyor.
    • Oynayan şarkı bilgileri için h6 div'i ekleniyor.
    • Albüm ismi ve orijinal soundtrack bilgileri gösteriliyor.
    32:22Dersin Sonu ve Öneriler
    • Full screen özelliği başarıyla tamamlanıyor.
    • İzleyicilerden seriyi takip etmeleri ve starlamaları isteniyor.
    • İzleyicilerden prototipteki reklamlara günde bir kere tıklamaları ve bir sonraki derste görüşmek üzere veda ediliyor.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor