Normalde bir muzik playlisti hazirladigimiz zaman, arkadaki player tum muzikleri sirayla bir defa calar ve ardindan loop'a girer. Bu challenge icerisinde ise, ekledigimiz her sarkiya bir agirlik atayip, muziklerin o agirliga gore tekrarlanmasini istiyoruz. Reklam dunyasinda sikca gorulen bu uygulamaya genellikle Frequency based playlist deniyor. Ozetle, bir reklam havuzu olusturuluyor ve her reklam icin 1 ile 10 arasinda bir agirlik set ediliyor. Daha sonra, bu reklam havuzundan ornegin 300 itemlik bir reklam kusagi olusturuluyor. Ortaya cikan 300 itemlik kusak icerisindeki reklam siralamasi, reklam havuzunda set edilen agirliklara gore duzenleniyor.
Bu uygulama ile reklam kuşakları, bir image olarak varsayılıp gerekli inputlar girildikten sonra aynı şekilde reklam oynatılarak simule ediliyor. Sonrasında istatistiksel olarak 10000 kuşaktan sonra doğru sonuca var varılmadığı algoritma tarafından test ediliyor.
2022-01-16.19-41-54.mp4
2022-01-18.01-17-27.mp4
- Random advertorial generator için gerekli olan; playlist (içerisinde reklamları barındıran playlist; bu arrayde imageUrl(name), weight, oynatma yüzdeleri percentageWeight, aynı zamanda kuşak uzunluğuna göre 1 reklamda max ne kadar yer edinebileceğini belirten probWeight vs.),cumulativePlaylist (playlist weightleri 1,3,5 ise 1,4,9 olarak ele alan array), randomIndexGenerator() fonksiyonu, advertorial(reklam kuşağı arrayi), makeStatistics() fonksiyonu oluşturuldu.
- Algoritma test edildi.
- Webpack eklendi
- Layout yapısı tasarlandı.
- JS ile DOM eventleri gerçekleştirildi.
- CSS ile styling yapıldı.
- Hatalı input kontrolü ve errorState() eklendi.
- 10000kuşak generate edip istatistik oluşturulması yapıldı. ! Burada önemli olan kavram istatistik için reklam kuşağındaki durumları biraz esnek tuttum. Eğer belirli koşullar sağlamıyorsa infinite loop'a giriyordu ben de 100 kez belirli koşul sağlamazsa o zaman maalesef arrayi doğru bastırma ifadesini kullandım. ! Sonuç olarak algoritma %100 çalışmasa da hata payını minimuma indirdim.
Clone repository
$ git clone https://github.com/femresirvan/Weighted-Playlist-Generator.git
$ cd Weighted-Playlist-Generator
Dependency kurulumu ve node'un çalıştırılması
$ npm i
$ node app
- calc.js ile gerekli algoritmalar tasarlanmıştır.
- carousel.js carousel için gerekli dom eventleri.
- lists.js tablo ve liste için gerekli dom eventleri.
- form.js 2 tane form için gerekli dom eventleri.(Burada dikkat edilmesi gereken husus; diğer iki component de finishButtonHandler() ile çağrıldığı form.js'e common.js vasıtasıyla bağlanmasıdır.)
- index.js programın çalıştığı ana kısım.
- ~./dist/main.js bütün js/css dosyalarının babel ile derlendiği ve tek dosya haline getirildiği kısım.