pushtape cassette
1.0.0
Kaset Pushtape adalah kerangka kerja ringan untuk membangun aplikasi web musik yang lebih baik. Buat kaset musik Anda dan render aplikasi web musik lengkap dalam hitungan detik, yang dilengkapi pemutar musik persisten.
Proyek ini menciptakan aplikasi web musik statis yang dapat diintegrasikan dengan sejumlah teknologi backend: file datar, Wordpress/Drupal, JS Frameworks, Python, dan Ruby. Elemen kunci yang mendukung ide ini adalah file cassette.json, sebuah format diskografi portabel. File ini bertindak seperti titik akhir komprehensif tunggal - dan dari titik akhir ini, javascript digunakan untuk membuat aplikasi satu halaman menggunakan berbagai perpustakaan mikro.
python dub.py atau perbarui cassette.json secara manualJika Anda menjalankan aplikasi dari subdirektori dari akar dokumen, di index.html ubah tag dasar menjadi:
<base href="/subdirectory/" />
atau sebagai alternatif memuat semua aset menggunakan jalur absolut.
$ cd pushtape-cassette
$ python dub.py
Skrip build akan secara otomatis menghasilkan cassette.json berdasarkan file di direktori kerja. Ini dimaksudkan untuk dijalankan secara lokal pada baris perintah, tetapi jika server Anda dikonfigurasi untuk menjalankan skrip python, Anda dapat mencoba menjalankannya dari browser atau menyiapkan crontab. Catatan:
releases/artist-name/release-nameJika Anda ingin menghapus hash # dari rute URL dan menggunakan History API, di index.html setel app.settings.cleanURLs ke true. Perhatikan bahwa menjalankan aplikasi dengan API Riwayat yang diaktifkan dari akar dokumen dianjurkan karena ini menangani semua masalah tautan relatif.
Catatan: Anda dapat melewati langkah 3 dan 4 jika menggunakan skrip build dub.py.
| Milik | Jenis | Keterangan |
|---|---|---|
| build terakhir | stempel waktu | Cara untuk melacak kapan file terakhir kali dibuat atau dimodifikasi. |
| halaman | obyek | Berisi pasangan kunci:nilai untuk halaman statis di situs Anda. Kuncinya mendefinisikan jalur router JS tingkat pertama, yaitu 'tentang'. Nilai berisi lokasi URL untuk dokumen penurunan harga. URL bisa bersifat relatif atau absolut. Jika server Anda mengembalikan dokumen menggunakan JSON/JSONP, setel "format" : "json". Jika Anda perlu menyertakan tautan eksternal dan melewati router JS, setel "type" : "external". |
| rilis | obyek | Berisi pasangan kunci:nilai yang menentukan rilis musik yang tersedia. Kunci mendefinisikan jalur router JS dan harus menggunakan huruf kecil tanpa spasi, yaitu judul album atau judul artis/album. Jalur yang dihasilkan sepenuhnya akan menjadi rilis/judul album atau rilis/artis/judul album. Nilai yang sesuai mendefinisikan properti untuk rilis ini. Minimal Anda harus menentukan URL untuk artwork.jpg dan note.md (relatif atau absolut, secara opsional dapat menentukan format sebagai json). Properti playlist harus berupa jalur ke file playlist JSPF yang valid, yang menentukan urutan trek dan lokasi file mp3, serta metadata lainnya. |
| Milik | Jenis | Keterangan |
|---|---|---|
| aplikasi.settings.cassettePath | rangkaian | Secara default, application.js akan memuat jalur cassette.json lokal. Anda dapat mengganti jalur ke cassette.json dengan mengatur variabel global ini sebelum memuat application.js. |
| app.settings.homePage | rangkaian | Nilai ini menentukan halaman apa yang harus dimuat secara default. Jalurnya harus terdaftar di router JS. |
| app.settings.cleanURL | boolean | Jika salah, hash # url digunakan. Jika benar, History API akan menangani URL bersih. |
Masalah yang diketahui:
Keterbatasan:
Contoh kaset.json:
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| Jalur URL | Keterangan |
|---|---|
| / | Jika tidak ada jalur yang dimasukkan, beranda default akan dimuat. |
| /[judul halaman] | Ini mem-parsing dan menampilkan penurunan harga untuk halaman seperti yang ditentukan di cassette.json. |
| /rilis | Daftar semua rilis dengan karya seni dan nama, ditautkan ke halaman rilis individual. |
| /rilis/[judul rilis] /rilis/[nama artis]/[judul rilis] | Menampilkan semua informasi untuk satu rilis: karya seni, daftar lagu yang dapat diputar, dan catatan. |
| Masalah | Tangga |
|---|---|
| Halaman kosong atau CSS/JS hilang | Periksa kembali url dasar Anda di index.html. Jika Anda kesulitan menemukan jalur yang benar, terkadang jalur server dapat disimpulkan menggunakan inspektur Chrome. |
| Masalah permintaan lintas asal (konten jarak jauh tidak dimuat) | Saat menangani permintaan lintas asal jarak jauh, JSONP yang valid harus dikembalikan dan permintaan harus diformat dengan benar. 1. Anda harus melewati ?callback=? di URL, yaitu http://example.com/cassette.json?callback=? 2: Respon dari server harus JSONP, bukan hanya JSON biasa. Secara khusus, masalah lintas asal mungkin muncul saat memuat cassette.json, jspf, note.md, dan halaman.md dari jarak jauh. Alternatifnya, Anda bisa memuat semua aset secara lokal untuk menghindari keharusan menyiapkan solusi JSONP. |
| Situs tidak diindeks oleh mesin pencari | Selain memeriksa robots.txt dan praktik terbaik lainnya, ini adalah masalah umum pada kerangka kerja yang menggunakan Javascript untuk merender konten halaman. Solusi termudah adalah dengan menggunakan layanan seperti prerender.io untuk menyimpan cache dan menyajikan halaman HTML yang dirender. Saya sarankan menginstal token prerender.io melalui Apache. Berikut ini inti tampilan .htaccess Anda (Anda harus mengubah TOKEN_VALUE dan http://example.com untuk situs Anda). |
Banyak situs musik yang cukup statis tetapi memiliki persyaratan frontend yang rumit. UX musik terbaik memungkinkan pengalaman mendengarkan musik tanpa gangguan saat melakukan tugas lain seperti membaca catatan liner, menjelajahi musik lain, dll. Biasanya ini berarti melakukan AJAX pada CMS/situs statis tradisional atau membuat solusi lengkap dari awal menggunakan JS. Hal ini dengan cepat menjadi sulit untuk dibangun dan dipelihara, terutama dalam jangka panjang. Dengan membuat kerangka kerja frontend yang terpisah, hal ini memungkinkan pemisahan masalah yang lebih baik dan menurunkan upaya jangka panjang yang diperlukan untuk membangun dan memelihara situs. Selain itu, dengan memanfaatkan JSPF dan cassette.json, sebuah format diskografi portabel, portabilitas data tidak perlu dipikirkan lagi - hal ini sudah tertanam dalam aplikasi sejak awal.
Saya memilih perpustakaan mikro karena persyaratan untuk merender aplikasi musik statis biasanya cukup sederhana, dan saya ingin menghindari ketergantungan pada kerangka Aplikasi Halaman Tunggal (SPA) pihak ketiga. Selain itu, karena saya menggunakan perpustakaan mikro, lebih mudah untuk memilih apa yang Anda inginkan. Misalnya jika Anda tidak menyukai sistem templating, perutean, atau pustaka pengikatan dua arah yang saya pilih, Anda dapat menggantinya dengan pustaka/kerangka JS pilihan Anda.
