lyrics finder
1.0.0
Singkat - Untuk membuat aplikasi satu halaman yang sangat bergantung pada satu atau lebih API.
API yang telah saya pilih untuk digunakan adalah katalog lirik lagu Musixmatch, yang terletak di https://www.musixmatch.com/
Pengguna yang ingin mencari lirik lagu tertentu dapat melakukannya dengan menggunakan Lyric Finder.
Pengguna dapat mencari dengan artis atau lagu dan dikembalikan daftar hasil yang dapat mereka navigasi untuk menemukan lirik lagu yang mereka cari.
Halaman ini sekarang langsung di https://hfolcot.github.io/lyrics-finder/
Harap dicatat bahwa liriknya tidak dicetak secara lengkap karena lisensi
Halaman ini menggunakan Bootstrap 4.0.0 dan memanfaatkan sistem grid dan gaya lainnya.
Halaman ini menggunakan font Nunito Sans dan Corben dari Google Font, dan juga ikon dari Fontawesome.
Gaya saya sendiri lebih lanjut telah dilakukan dalam Asset/CSS/Main.CSS
Scripting memanfaatkan jQuery 3.3.1.
API yang digunakan adalah https://api.musixmatch.com/ws/1.1. Data yang dikembalikan berada dalam format JSONP dan permintaan Ajax jQuery diperlukan untuk mendapatkan data.
Ini adalah masing -masing tahap yang dapat dilakukan aplikasi - angka -angka berikut akan digunakan untuk menggambarkan di mana [tahap] setiap fungsi digunakan dan untuk tahap mana yang mengarah.
Ada juga fungsionalitas dalam setiap tahap untuk kembali ke halaman sebelumnya, melalui tombol Hasil yang jelas atau tombol kembali.
Ada tujuh fungsi utama yang digunakan dalam Lyric Finder:
Fungsi ini dipanggil segera setelah pengguna mengklik tombol pencarian. Ini memeriksa nilai tombol radio mana yang diperiksa dan menjalankan fungsi yang relevan berdasarkan ini.
Fungsi ini dipanggil pada awal semua fungsi berikut untuk menghapus data apa pun yang mungkin sudah ada dalam wadah hasil.
Fungsi ini dipanggil oleh checkradio () Jika tombol radio lagu diperiksa ketika pengguna mencari. Fungsi ini membuat permintaan $ .AJAX ke https://api.musixmatch.com/ws/1.1/track.search dengan nilai yang dimasukkan pengguna ke dalam kotak pencarian sebagai parameter q_track. Jika permintaan berhasil, Variable TrackResults dibuat yang berisi daftar trek yang dikembalikan. Ini diurutkan berdasarkan popularitas seniman yang didasarkan pada sistem peringkat Musixmatch. Kemudian untuk setiap item dari daftar ini, nama dan artis dimasukkan ke dalam wadah hasil di index.html, bersama dengan tombol yang memberi pengguna opsi untuk melihat lirik lagu yang dipilih. Ini berfungsi dengan meneruskan track_id sebagai parameter ke fungsi getlyrics () yang dipicu pada klik.
Fungsi ini dipanggil oleh checkradio () jika tombol radio artis diperiksa ketika pengguna mencari. Fungsi ini membuat permintaan $ .AJAX ke https://api.musixmatch.com/ws/1.1/artist.search dengan nilai yang dimasukkan pengguna ke dalam kotak pencarian sebagai parameter untuk q_artist.
Jika permintaan berhasil, ARTISTRESULT Variabel dibuat yang berisi daftar artis yang dikembalikan. Ini diurutkan berdasarkan popularitas berdasarkan sistem peringkat Musixmatch. Kemudian untuk setiap item dari daftar ini, artis dimasukkan ke dalam wadah hasil di index.html, bersama dengan tombol yang memberi pengguna opsi untuk melihat album oleh artis yang dipilih. Ini berfungsi dengan meneruskan artis_id sebagai parameter ke fungsi getalbumlist () yang dipicu pada klik.
Fungsi ini berjalan mirip dengan dua fungsi sebelumnya. Artist_ID diteruskan ke dalamnya dari fungsi getartist () dan ini digunakan untuk mendapatkan data album untuk artis itu. Kemudian dicetak ke elemen kontainer sebagai daftar yang berisi nama setiap album dan tombol yang memberikan opsi untuk melihat daftar trek untuk album itu. Ini akan menjalankan getTrackList () pada klik dan akan melewati album_id sebagai parameter ke fungsi itu.
Album_id disahkan ke dalam fungsi ini dan digunakan untuk membuat permintaan ke https://api.musixmatch.com/ws/1.1/album.tracks.get untuk daftar lagu di album itu. Ini kemudian akan mengembalikan daftar trek dengan opsi untuk melihat lirik, lagi dengan tombol seperti di getTrack ().
Fungsi ini dipanggil ketika tombol dalam daftar lagu diklik. ID trek dari lagu yang dipilih dilewatkan dari fungsi sebelumnya. Fungsi ini menggunakan dua panggilan AJAX terpisah. Yang pertama digunakan untuk mendapatkan data dari track. Dapatkan di API dan memetik nama trek dari ini sehingga dapat ditampilkan sebagai judul. Panggilan kedua kemudian dilakukan untuk mencocokkan.lyrics.get untuk mengembalikan lirik itu sendiri. Jika tidak ada lirik untuk dikembalikan, pesan kesalahan khusus ditampilkan di dalam elemen wadah.
Tata letak halaman telah tetap sangat mendasar untuk menjaga metode tetap jelas dan sederhana. Gambar latar belakang gelap telah digunakan yang lembut di mata dan tidak menarik perhatian pengguna. Skema warna mencoba mencocokkan gambar ini sebanyak mungkin dan dibuat dengan coolors.co. Data dikembalikan dalam tabel dengan header yang sesuai.
Kode JavaScript dijalankan di JShint dan tidak mengembalikan kesalahan. HTML dijalankan pada validator markup W3C dan tidak mengembalikan kesalahan. CSS dijalankan pada validator W3C CSS dan tidak mengembalikan kesalahan.
Selama pengujian pengguna, dicatat bahwa tidak semua lagu dalam database Musixmatch memiliki lirik dan kesalahan khusus telah ditambahkan untuk mereka yang tidak memiliki kunci lirik_body dalam hasilnya.
aset/js/spec.js dibuat dan dijalankan untuk memeriksa fungsi resetpage (); Tes ini berhasil. Untuk memastikan skrip uji benar, fungsi diedit untuk memasukkan teks dalam wadah hasil, pada titik mana tes gagal.
Sementara pengujian, ada masalah menarik yang ditemui di mana tidak ada lirik yang dikembalikan untuk lagu apa pun yang berisi tanda kutip ganda atau tunggal. Pada penyelidikan tampaknya masalah ini disebabkan oleh fungsi yang mencoba meneruskan nama lagu ke fungsi baru (getlyrics, berganti nama selama proses ini untuk mengembalikanlyrics), tetapi ketika kutipan hadir dalam nama lagu, itu membaca ini sebagai akhir dari parameter dan kesalahan karena tidak ada tanda kurung penutup. Ini diselesaikan dengan mengedit getlyrics sehingga mengambil nama lagu itu sendiri dalam panggilan terpisah daripada melewatinya dari fungsi sebelumnya.
Setiap tahap pengujian dilakukan kembali setelah fungsi baru berubah.
Untuk diuji:
(X = berfungsi seperti yang diharapkan) (o = tidak berfungsi seperti yang diharapkan)
Berikut ini adalah menguji apakah kode berfungsi seperti yang diharapkan.
| Browser/tes | Opera | Firefox | Chrome | Tepian | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 5 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 10 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 13 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 16 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Berikut ini adalah menguji apakah layar berfungsi seperti yang diharapkan.
| Browser/tes | Opera | Firefox | Chrome | Tepian | Safari |
|---|---|---|---|---|---|
| 1 | X | X | X | X | X |
| 2 | X | X | X | X | X |
| 3 | X | X | X | X | X |
| 4 | X | X | X | X | X |
| 6 | X | X | X | X | X |
| 7 | X | X | X | X | X |
| 8 | X | X | X | X | X |
| 9 | X | X | X | X | X |
| 11 | X | X | X | X | X |
| 12 | X | X | X | X | X |
| 14 | X | X | X | X | X |
| 15 | X | X | X | X | X |
| 17 | X | X | X | X | X |
Suatu masalah dicatat di Microsoft Edge di mana gambar latar tidak ditampilkan dengan benar. Ini karena posisi elemen skrip dalam kode HTML. Setelah dipindahkan ke ujung tubuh daripada di kepala gambar latar belakang yang ditampilkan dengan benar.
Masalah lain ditemukan di iPhone di mana gambar latar belakang tidak tetap diperbaiki dan tidak akan menggulir dengan halaman, yang mengarah ke halaman 'kehabisan' latar belakang ketika menggulir ke bawah sejumlah besar data yang dikembalikan. Penelitian menunjukkan bahwa ini adalah masalah yang diketahui dengan iOS. Ini diselesaikan dengan menggunakan kueri media untuk mengatur latar belakang untuk mengulangi di layar yang lebih kecil.
Menggunakan alat pengembang Google Chrome untuk menguji bagaimana setiap tahap aplikasi ditampilkan pada lebar layar yang berbeda.
X = menampilkan seperti yang diharapkan
| Tampilan Lebar Layar/Halaman | Galaxy S5 | Pixel 2 | Pixel 2XL | iPhone 5/SE | iPhone 6/7/8 | iPhone 6/7/8 Plus | iPhone X. | iPad | iPad Pro |
|---|---|---|---|---|---|---|---|---|---|
| 1 | X | X | X | X | X | X | X | X | X |
| 2 | X | X | X | X | X | X | X | X | X |
| 3 | X | X | X | X | X | X | X | X | X |
| 4 | X | X | X | X | X | X | X | X | X |
| 6 | X | X | X | X | X | X | X | X | X |
| 7 | X | X | X | X | X | X | X | X | X |
| 8 | X | X | X | X | X | X | X | X | X |
| 9 | X | X | X | X | X | X | X | X | X |
| 11 | X | X | X | X | X | X | X | X | X |
| 12 | X | X | X | X | X | X | X | X | X |
| 14 | X | X | X | X | X | X | X | X | X |
| 15 | X | X | X | X | X | X | X | X | X |
| 17 | X | X | X | X | X | X | X | X | X |
Proyek ini dibangun di Cloud9 dan didorong ke Github di mana kemudian diterbitkan di halaman GitHub di https://hfolcot.github.io/lyrics-finder/
