bpm counter

BPM Techno - Penghitung BPM real -time online gratis untuk DJ

Ini adalah proyek 3-in-1:

1. Produk nyata bagi DJ untuk membantu mengidentifikasi BPM (ketukan per menit) dari trek yang saat ini diputar.
2. Demo dunia nyata dan taman bermain untuk layanan aplikasi web statis Azure.
3. Bukti konsep untuk aplikasi web progresif (PWA) yang didorong oleh pekerja layanan bertenaga Workbox.

Aplikasi Web (dapat diinstal, siap-offline)

BPMTECH.NO - Penghitung BPM real -time online gratis untuk DJ

Demo video

(Klik untuk menonton di YouTube)

Aliran dan Sumber Daya untuk Demo Fitur Aplikasi Statis Azure

Instalasi

git clone https://github.com/webmaxru/bpm-counter.git
cd bpm-counter
npm install

# Installing tools for Static Web Apps and Azure Functions
npm install -g @azure/static-web-apps-cli
npm install -g azure-functions-core-tools@3 --unsafe-perm true

Memulai Server Pengembangan Lokal

 # Instead of CRA's "npm start" we use SWA CLI's command to start everything at once
swa start http://localhost:3000 --run " npm start " --api-location ./api

Buka http: // localhost: 4280 di browser Anda.

Menyebarkan ke Azure

Untuk menggunakan proyek ini ke Azure, Anda perlu membayar repo ini ke akun GitHub Anda sendiri. Anda juga akan membutuhkan langganan Azure. Jika Anda tidak memilikinya, Anda bisa mendapatkan langganan Azure di sini secara gratis dengan kredit $ 200.

Harap dicatat, bahwa Azure Static Web Apps Service memiliki tingkat gratis yang cukup besar yang cukup untuk banyak jenis proyek pribadi.

Setelah Anda memiliki repo di akun GitHub Anda, dan Langganan Azure siap, gunakan ekstensi aplikasi web statis Azure untuk kode studio visual atau portal Azure untuk membuat sumber daya SWA.

- atau -

Gunakan parameter berikut:

• Lokasi Aplikasi: /
• Lokasi API: API
• Lokasi Output: Bangun

Apa yang akan terjadi:

• Dalam beberapa detik, Anda akan melihat situs web yang digunakan ke Azure dengan URL pengembangan seperti acak-word.azurestaticapps.net (contoh). Anda dapat menghubungkan domain khusus Anda sendiri dengan menggunakan opsi "domain khusus" di portal.

• File tindakan GitHub akan dibuat di folder .github/workflows repo Anda. Mirip dengan yang ada di repo asli.

Anda sekarang siap untuk menjelajahi fitur aplikasi web statis Azure.

Penyebaran otomatis pada perubahan kode

1. Lakukan perubahan kode dalam aplikasi. Sesuatu yang akan terlihat jelas di halaman pertama, misalnya nama aplikasi di header.
2. Komit dan dorong perubahan ke cabang main (atau cabang yang Anda tentukan selama pembuatan sumber daya).
3. Buka halaman tindakan repo Anda untuk memastikan bahwa alur kerja sedang berjalan.

4. Setelah selesai, buka situs web Anda di browser, Anda akan melihat versi baru.

Harap dicatat, ini adalah aplikasi yang digerakkan oleh pekerja layanan, jadi Anda akan melihat prompt untuk memuat ulang halaman.

Lingkungan pementasan

Anda dapat meninjau permintaan tarik di lingkungan pra-produksi sebelum digabungkan ke cabang utama.

1. Buat cabang untuk fitur baru Anda.

git checkout -b new-feature

Lakukan perubahan kode dalam aplikasi. Sesuatu yang akan terlihat jelas di halaman pertama, misalnya mengubah warna latar belakang.

2. Berkomitmen dan dorong perubahan ke cabang.

git add .
git commit -m " New feature "
git push origin new-feature

3. Pergi ke halaman repo GitHub Anda dan buat permintaan tarik baru dari cabang.

4. Buka halaman tindakan repo Anda untuk memastikan bahwa alur kerja sedang berjalan.

5. Setelah selesai, Anda akan memiliki versi baru dari situs web yang digunakan ke Azure ke URL baru. Anda bisa mendapatkan URL ini baik dari output alur kerja di Azure atau di portal Azure di tab Lingkungan. Bot Tindakan GitHub juga akan memposting URL ini ke komentar permintaan tarik Anda.

6. Sekarang, Anda dapat menjalankan berbagai tes pada versi baru Anda.

Jika versi baru terlihat bagus dan Anda menggabungkan permintaan tarik ini ke cabang utama (dilacak oleh SWA), alur kerja akan secara otomatis menggunakan versi baru ke cabang yang dilacak ini dan menghapus lingkungan pementasan.

Harap dicatat, versi yang dipentaskan dari aplikasi Anda saat ini dapat diakses secara publik oleh URL mereka, bahkan jika repositori GitHub Anda bersifat pribadi.

? Dokumentasi

API Menggunakan Fungsi Azure

Anda dapat menggunakan fungsi Azure untuk membangun API Anda sendiri untuk aplikasi web statis Anda. Opsi yang paling sederhana adalah menggunakan opsi fungsi yang dikelola: semua fungsi Azure yang Anda buat di direktori api akan secara otomatis digunakan ke SWA. Dalam proyek ini, kami menggunakan fungsi feedback untuk mengumpulkan statistik pada BPM yang benar atau salah yang terdeteksi.

Untuk mengujinya bahkan tanpa pemutaran musik, Anda dapat melewati nilai BPM "hardcoded" ke aplikasi: dengan menggunakan parameter BPM. Cara mengujinya:

1. Klik tombol "Mulai Mendengarkan".
2. Klik tombol "Jempol ke atas".
3. Periksa permintaan posting jaringan yang dibuat ke https://bpmtech.no/api/feedback Endpoint dan responsnya.

Cara membuat fungsi API baru:

1. Gunakan tombol "Buat fungsi http" di ekstensi kode VS.

2. Ikuti Penyihir Penciptaan.
3. Tulis kode Anda.
4. Berkomitmen dan dorong perubahan ke cabang.
5. Fungsi Anda akan secara otomatis digunakan ke SWA.

? Dokumentasi

Rute

Azure SWA mendukung perutean kustom yang memungkinkan Anda untuk:

• Siapkan pengalihan
• Mengatur fallback navigasi untuk aplikasi satu halaman
• Siapkan header khusus
• Daftarkan Jenis Mime
• Tentukan halaman khusus untuk kesalahan HTTP
• Lindungi Sumber Daya oleh Kontrol Akses Berbasis Peran (RBAC)

Anda mengkonfigurasi aturan di staticwebapp.config.json yang dapat Anda letakkan di mana saja di folder aplikasi repo, tidak ada persyaratan untuk memasukkannya ke dalam folder output (publik)).

Cara mengujinya:

1. Pergi langsung ke /tentang halaman. Anda akan melihat aplikasi, bukan kesalahan 404 karena aturan fallback navigasi.
2. Pergi ke sumber daya yang tidak ada dari NavigationFallback mengecualikan daftar. Anda akan melihat halaman kesalahan Custom 404 yang dikonfigurasi dalam aturan ini.
3. Periksa header respons. Mereka berisi "X-Powered-by: Maxim Salnikov dan Azure Static Web Apps" yang ditetapkan pada baris ini.
4. Pergi ke halaman /tentang saya. Anda akan dialihkan ke /tentang karena aturan ini.

Harap dicatat, aplikasi yang di -host dikendalikan oleh pekerja layanan. Jadi setelah beban pertama, perutean mungkin terlihat tidak persis seperti yang dijelaskan di atas. Untuk menguji aplikasi tanpa pekerja layanan, mulailah sesi browser baru dalam mode pribadi/penyamaran.

? Dokumentasi

Otentikasi

Dengan bantuan aplikasi web statis Azure, Anda dapat melindungi sumber daya aplikasi Anda dengan kontrol akses berbasis peran (RBAC).

Mengatur otentikasi:

1. Anda menentukan peran yang diperlukan untuk mengakses URL tertentu dalam file staticwebapp.config.json. Ada dua peran bawaan: anonymous (untuk semua pengguna) dan authenticated (untuk mereka yang masuk).
2. Jika pengguna mencoba mengakses URL tanpa peran yang diperlukan, mereka akan mendapatkan kesalahan 401. Anda mungkin ingin mengatur pengalihan ke halaman login.
3. Untuk membiarkan pengguna masuk, Anda mengarahkan pengguna ke salah satu penyedia identitas bawaan (Azure Active Directory, Github, Twitter) halaman login. Misalnya, /.auth/login/twitter. (Anda juga dapat membuat URL khusus untuk halaman ini menggunakan aturan perutean.). Folder .auth pada proyek Azure SWA Anda adalah built-in, disebut folder sistem yang berisi beberapa titik akhir yang bermanfaat.
4. Setelah masuk menggunakan penyedia identitas yang dipilih dan memberikan persetujuan untuk berbagi informasi pribadi (email atau pegangan pengguna), pengguna akan diarahkan kembali ke aplikasi. Dan jika peran tersebut diatur dengan benar, mereka akan mendapatkan akses ke URL yang diminta.
5. Untuk memberi pengguna peran khusus (misalnya, administrator ), Anda menggunakan tab "manajemen peran" di portal Azure. Klik tombol "Undang", isi formulir dan klik "Hasilkan". Anda akan menerima tautan untuk mengirim ke pengguna untuk menerima peran tersebut.

Anda dapat mengelola pengguna dan peran dalam tab "Manajemen Peran".

6. Anda dapat membaca kredensial pengguna yang diautentikasi (misalnya untuk mengimplementasikan beberapa logika di UI) dengan mengirimkan permintaan ke /.Auth/Me Endpoint. Untuk memeriksa info otentikasi dari panggilan API, Anda membaca header x-ms-client-principal dalam permintaan.
7. Untuk keluar, Anda mengarahkan pengguna ke /.Auth/Logout halaman.
8. Untuk menghapus informasi mengidentifikasi secara pribadi (email atau pegangan pengguna) dari aplikasi, Anda mengarahkan pengguna ke tautan yang terkait dengan penyedia identitas tertentu: /.Auth/purge/twitter.

Demo:

1. Cobalah untuk mengakses /halaman akun. Ini dikonfigurasi untuk tersedia hanya untuk pengguna authenticated dengan aturan ini. Anda akan dialihkan ke halaman login Twitter dan meminta persetujuan.
2. Setelah masuk dengan Twitter, Anda akan diarahkan kembali ke aplikasi, dan sekarang dapat mengakses /halaman akun.
3. Open /.Auth/ME URL di tab terpisah untuk melihat informasi yang dikembalikan oleh server.
4. Keluar dengan pergi ke /.Auth/Logout URL.
5. Anda dapat mengulangi langkah -langkah di atas untuk menguji peran khusus yang diperlukan untuk mengakses /admin. Dalam hal ini, Anda perlu memberi pengguna administrator peran seperti yang dijelaskan di atas.

? Dokumentasi

Versi Bereaksi saja (No Cloud)

Di direktori proyek, Anda dapat menjalankan:

npm run start

Menjalankan aplikasi dalam mode pengembangan.
Buka http: // localhost: 3000 untuk melihatnya di browser.

Halaman ini akan memuat ulang jika Anda mengedit.
Anda juga akan melihat kesalahan serat di konsol.

Pekerja layanan tidak digunakan di lingkungan pengembangan.

npm run build

Membangun aplikasi untuk produksi ke folder build .
Bundelnya dengan benar bereaksi dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik.

Bangunan diminifikasi dan nama file termasuk hash.
Aplikasi Anda siap digunakan!

Pekerja layanan siap-produksi juga akan dihasilkan.

Tentang

Kredit

• Deteksi BPM real-time didasarkan pada Perpustakaan Realtime-BPM-Analyzer oleh David Lepaux
• Deteksi BPM dalam file didasarkan pada pustaka detektif BPM oleh Carl Törnqvist
• Spectrum Analyzer berbasis Audiomotion-Analyzer Library oleh Henrique Vianna

Pengarang

Maxim Salnikov. Jangan ragu untuk menghubungi saya jika Anda memiliki pertanyaan tentang proyek, PWA, aplikasi web statis Azure.