Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Mustafa Küçük tarafından sunulan kapsamlı bir yazılım geliştirme eğitimidir. Eğitmen, Spotify Web API'si kullanarak bir müzik uygulamasının tüm geliştirme sürecini adım adım göstermektedir.
- Eğitim, Spotify API entegrasyonundan başlayarak uygulama oluşturma, token alma, playlist oluşturma, son dinlediğim şarkıları gösterme, en çok dinlenen şarkıları ve sanatçıları listeleme, playback kontrolü gibi özelliklerin kodlanması sürecini kapsamaktadır. Video, React framework kullanılarak bir kullanıcı arayüzü geliştirme sürecini de içermektedir.
- Eğitim boyunca çeşitli hatalarla karşılaşıldığı ve bunların çözümleri gösterildiği, API dökümantasyonunun nasıl okunacağı ve uygulama geliştirme sürecindeki pratik bilgiler paylaşıldığı belirtilmektedir. Ayrıca, kullanıcı giriş kontrolü, veri filtreleme seçenekleri ve kullanıcı arayüzünün düzenlenmesi gibi konular da ele alınmaktadır.
- Spotify Web API ile Uygulama Geliştirme
- Mustafa Küçük, Spotify Web API kullanarak bir uygulama geliştirecek ve sadece API entegrasyonunu gösterecek.
- Geliştirilen uygulama, Spotify'ın web app'i kullanılarak Replify uygulamasının klonu olarak tasarlanmıştır.
- 00:40Uygulamanın Özellikleri
- Ana sayfada kullanıcı Spotify ile giriş yapacak ve pop-up üzerinden kullanıcı adı ve şifresini girecek.
- Uygulama "Top Artist" alanı ile kullanıcıların en çok dinlediği sanatçılarını, "Top Tracks" alanı ile en çok dinledikleri şarkıları gösterecek.
- "Residents" kısmında dinlediği son şarkılar, "Playlist" alanında kullanıcıların oluşturmuş olduğu playlistleri görebilecek ve yeni playlist oluşturabilecek.
- "Playback" alanı ile kullanıcı şu an dinlediği şarkıyı görebilecek, duraklatabilecek ve ileri-geri geçiş yapabilecek.
- 02:25Spotify API Dökümantasyonu
- Spotify API dökümantasyonunda JavaScript client side için geliştirilmiş bir kütüphane bulunmaktadır.
- API'de playlist ile ilgili çeşitli metotlar bulunmakta: playlist getirme, playlist içindeki şarkıları getirme, kullanıcı playlistlerini getirme ve playlist oluşturma.
- 03:48Uygulama Oluşturma ve API Entegrasyonu
- API entegrasyonu için önce authorization işlemi yapılması gerekiyor, kullanıcı giriş işlemini yapacak.
- Spotify developer dashboard üzerinden uygulama oluşturuldu ve client id ile client secret alındı.
- Uygulama ayarlarında yönlendirme bağlantısı (redirect URI) belirlenerek, kullanıcı giriş yaptıktan sonra Spotify'ın uygulamaya yönlendireceği adres tanımlandı.
- 07:00Proje Yapısı ve Devam Planı
- Proje "reels" adında bir klasör oluşturuldu ve içinde router ve komponentler yer aldı.
- Ana sayfada route view, playback, top artist ve diğer bölümler için komponentler oluşturuldu.
- API entegrasyonu için access token'ın kullanıcı girişinden sonra nasıl alınacağı ve authorization code flow'unun nasıl uygulanacağı konusunda çalışmalar devam edecek.
- 11:10Spotify Oturum Açma İşlemi
- Kullanıcı, Spotify oturum açma işlemi için bir click event metodu yazıyor ve kullanıcıyı Spotify'ın oturum açma bağlantısına yönlendiriyor.
- Yönlendirme URL'sine gerekli parametreler (response_type, code, direction, state, scope, client_id, redirect_uri) ekleniyor.
- URL parametreleri querystring formatına dönüştürülerek kullanıcı Spotify'ın oturum açma sayfasına yönlendiriliyor.
- 14:56Show Dialog Parametresi
- Show dialog parametresi, kullanıcıya Spotify'ın arayüzünü gösterip göstermeyeceği için kullanılıyor.
- Eğer show dialog false olarak ayarlanırsa veya tanımlanmazsa, kullanıcı doğrudan Spotify'ın oturum açma ekranına yönlendirilir.
- Eğer show dialog true olarak ayarlanırsa, kullanıcı önce Spotify'ın ekranına gider ve onay verir.
- 15:33Access Token Alma İşlemi
- Komponent yüklendiğinde çalışan onMounted hook metodu kullanılıyor.
- Spotify'ın geri yönlendirme URL'sinden gelen kod parametresi ile access token alınıyor.
- Kod parametresi gs.getQueryParams() fonksiyonu ile alınıyor.
- 18:01Axios İstek Atma
- Axios kütüphanesi kullanılarak Spotify API'sine post isteği atılıyor.
- İstekte client_id, client_secret, code, redirect_uri ve grant_type parametreleri gönderilmesi gerekiyor.
- İstekte header kısmında Content-Type ve Authorization bilgilerinin de gönderilmesi gerekiyor.
- 21:57Hata Çözümü
- İstekte oluşan hata için query-string paketi kuruluyor.
- Parametreler query-stringify metodundan geçirilerek istekte kullanılıyor.
- Video çekiminde saat 23:41 (sabah 7:00) civarında uykusuzluk nedeniyle bazı hatalar yapıldığı belirtiliyor.
- 23:47Spotify API'ye Erişim Token Alma
- Kullanıcı, Spotify API'ye erişim token'ı almak için sayfayı yeniliyor ve yanıt alıyor.
- Token alındıktan sonra, bu token kullanılarak Spotify API'ye istek yapılabilir.
- Token'ın süresi dolunca tekrar token almak gerekiyor, bu yüzden token'ı tarayıcının yerel depolamasına kaydetmek gerekiyor.
- 25:19Tarayıcı Kontrolü ve Token Kaydetme
- Kullanıcı, tarayıcıda parametre yoksa Spotify'a istek atılmasını engellemek için if koşulu kullanıyor.
- Token alındıktan sonra, local storage set item ile tarayıcının yerel depolamasına kaydediliyor.
- Token'ı kaydettikten sonra, kullanıcı tekrar giriş yapmaya çalıştığında token'ı alabiliyor.
- 26:31.env Dosyası Oluşturma
- Kullanıcı, client id, client secret gibi bilgileri tekrar tekrar yazmak yerine .env dosyası oluşturuyor.
- .env dosyasında bu bilgiler saklanıyor ve gerektiğinde çağrılabilir.
- .env dosyalarında yapılan değişikliklerin uygulanması için uygulama yeniden başlatılmalı.
- 29:16Playlistleri Çekme
- Kullanıcı, Spotify API'sini kullanarak playlistleri çekmeye başlıyor.
- Öncelikle Spotify API'si için instance oluşturulmalı ve set access token metodu ile kullanıcı token'ı gönderilmeli.
- Playlistleri çekmek için "playlist.getPlaylists()" metodu kullanılabilir.
- 32:03Spotify Web App'i Çalıştırma
- Kullanıcı Spotify web app'i çalıştırmaya çalışıyor ancak hata alıyor ve doğru import etmediğini fark ediyor.
- Doğru import yapıldıktan sonra app çalışır ve Spotify'dan playlist isteği atılıyor.
- Access token gönderilmeden hata alındı, token gönderildikten sonra playlist başarıyla çekildi.
- 33:30Playlist'i Listeleme
- Playlist verilerini listelemek için v-for döngüsü kullanılıyor.
- Response verileri playlist ref'e atanıyor ve playlist elemanları döndürülüyor.
- Item komponenti oluşturulup prop olarak veri gönderiliyor.
- 35:23Item Komponenti ve Veri Gösterimi
- Item komponentine propertiler kabul etmek için define props kullanılıyor.
- Playlist verilerinin title, description ve image bilgileri item komponentinde gösteriliyor.
- Görsel bilgisi olmayan playlistler için hata yönetimi yapılıyor.
- 39:47Playlist Oluşturma
- Create playlist fonksiyonu ekleniyor ve kullanıcıdan playlist ismi alınıyor.
- Spotify API'sine playlist oluşturma isteği gönderiliyor.
- Scope hatası alındıktan sonra kullanıcıdan daha fazla izin isteniyor.
- 47:56Kod Duzenlemesi ve Refaktörlük
- Kod tekrarını önlemek için services klasörü oluşturuluyor.
- Spotify fonksiyonları services/spotify.js dosyasına taşınıyor.
- Import işlemleri düzenlenerek kod daha düzenli hale getiriliyor.
- 51:08Spotify API ile Playlist Oluşturma
- Kullanıcı, Spotify API'si ile playlist oluşturma işlemini kodlamaktadır.
- "create playlist" metodu oluşturulup, "get playlist" metodu ile mevcut playlistlerin listelenmesi sağlanmaktadır.
- Playlist oluşturulduktan sonra pop-up penceresi kapatılıyor ve liste yenilenmektedir.
- 55:50Son Dinlenen Şarkılar (Recent Tracks)
- Kullanıcının son dinlediği şarkıları göstermek için "get my recent tracks" metodu kullanılmaktadır.
- Son dinlenen şarkıların isimleri, sanatçıları ve görselleri props ile alınmaktadır.
- Şarkıların dinlenme tarihleri date filter ile ayarlanmaktadır.
- 1:05:59Top Tracks ve Top Artists Alanları
- Önceki bölümde playlist ve recent tracks kısımları tamamlanmış durumdadır.
- Kalan kısımlar olarak top tracks ve top artists alanları bulunmaktadır.
- Top tracks için playlist komponenti kullanılarak kodlama yapılmaktadır.
- 1:08:40Spotify API ile Top Tracks Verilerini Çekme
- Spotify API'nin "get my top tracks" metodu kullanılarak en çok dinlenen şarkılar çekiliyor ve bu metod özel parametre almıyor.
- Görseller çekme sorunu yaşanıyor ve bu sorun albüm görselleri yerine track görselleri çekme hatası nedeniyle oluşuyor.
- Görselleri doğru şekilde çekmek için props data altında type kontrolü yapılıyor ve albüm veya track görselleri çekiliyor.
- 1:13:56Zaman Aralığı Filtreleme
- Top tracks verilerini tarih aralığına göre filtrelemek için "time range" parametresi kullanılıyor.
- "Short term" (4 haftalık), "medium term" (6 aylık) ve "long term" (tüm zamanlar) seçenekleri mevcut.
- Zaman aralığı filtresi uygulanarak farklı dönemlerde en çok dinlenen şarkılar görüntülenebiliyor.
- 1:18:12Top Artists Verilerini Çekme
- Top tracks kodu kopyalanıp "top artists" için düzenlenerek en çok dinlenen sanatçılar çekiliyor.
- Görselleri çekmek için "artist" olarak belirtiliyor ve doğru şekilde görüntüleniyor.
- Filtreleme seçenekleri (short term, medium term, long term) sanatçılar için de çalışarak farklı dönemlerde en çok dinlenen sanatçılar görüntülenebiliyor.
- 1:20:34Spotify Entegrasyonu
- Eğitmen, videoyu duraklatıp tekrar devam ederek, Spotify entegrasyonunu tamamlamak için "Playback View" adlı komponenti kullanıyor.
- Spotify servisine bağlanarak şu anki çalan şarkıyı almak için "current playing track" metodu kullanıyor.
- İlk denemede "permissions missing" hatası alındı, bu nedenle scope'ları düzeltmek için gerekli izinleri ekliyor.
- 1:23:03Şarkı Bilgilerini Gösterme
- Şu anki çalan şarkıyı başarıyla alabildikten sonra, "is_playing" parametresi şarkının çalıp çalmadığını, "item.name" parametresi şarkının ismini, "item.artists" parametresi sanatçıları gösteriyor.
- Şarkının görselini "item.album.images[0]" parametresinden alarak ekranda gösteriyor.
- Şarkı çalıyorsa "pause" ikonu, duraklatılmışsa "play" ikonu göstermek için koşullu ifadeler kullanıyor.
- 1:27:00Oynatma Kontrolleri
- Play/pause butonuna basıldığında Spotify'da şarkının durumunu değiştirmek için "pause" ve "play" metodlarını kullanıyor.
- Şarkı durumunu güncellemek için "toggleStatus" fonksiyonu oluşturuyor.
- Önceki ve sonraki şarkıya geçmek için "skip_to_previous" ve "skip_to_next" metodlarını ekliyor.
- 1:33:20Kullanıcı Doğrulama
- Kullanıcı giriş yapmadan bazı sayfalara erişimi engellemek için router ayarlarını değiştiriyor.
- Kullanıcının giriş yapmadığında "localStorage" üzerinden "access token" kontrolü yaparak giriş sayfasına yönlendiriyor.
- Giriş yapmış kullanıcılar için "Login" butonunu "You are logged in" mesajıyla değiştiriyor.
- 1:38:25Dersin Sonu
- Konuşmacı, dersin uzun sürdüğünü belirtiyor.
- Ders videosunu kırpıp yüklemeye başlayacağını söylüyor.
- Video sabaha kadar YouTube'a yükleneceğini ve izleyicilere iyi bakmalarını tavsiye ediyor.