bpm counter

BPM Techno - เคาน์เตอร์ BPM แบบเรียลไทม์ออนไลน์ฟรีสำหรับ DJ

นี่คือโครงการ 3-in-1:

1. ผลิตภัณฑ์จริงสำหรับดีเจเพื่อช่วยในการระบุ BPM (เต้นต่อนาที) ของแทร็กที่กำลังเล่นอยู่
2. การสาธิตในโลกแห่งความเป็นจริงและสนามเด็กเล่นสำหรับบริการเว็บแอป Azure Static
3. หลักฐานแนวคิดสำหรับแอปพลิเคชันเว็บแบบก้าวหน้า (PWA) ขับเคลื่อนโดยผู้ปฏิบัติงานบริการที่ขับเคลื่อนด้วยกล่องทำงาน

เว็บแอปพลิเคชัน (ติดตั้งได้พร้อมกัน)

bpmtech.no - ตัวนับ BPM แบบเรียลไทม์ออนไลน์ฟรีสำหรับ DJ

ตัวอย่างวิดีโอ

(คลิกเพื่อดูบน YouTube)

โฟลว์และทรัพยากรสำหรับแอปแอพ Azure Static Web มีการสาธิต

การติดตั้ง

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

เริ่มต้นเซิร์ฟเวอร์การพัฒนาท้องถิ่น

 # 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

เปิด http: // localhost: 4280 ในเบราว์เซอร์ของคุณ

ปรับใช้กับ Azure

ในการปรับใช้โครงการนี้กับ Azure คุณต้องแยก repo นี้ไปยังบัญชี GitHub ของคุณเอง คุณจะต้องสมัครสมาชิก Azure หากคุณไม่มีมันคุณสามารถรับสมัคร Azure ได้ที่นี่ฟรีด้วยเครดิต $ 200

โปรดทราบว่า Azure Static Web Apps Service มีระดับฟรีที่เพียงพอซึ่งเพียงพอสำหรับโครงการส่วนบุคคลหลายประเภท

หลังจากที่คุณมี repo ในบัญชี GitHub ของคุณและ Azure สมัครสมาชิกพร้อมให้ใช้ส่วนขยายแอปแอพ Azure Static Web สำหรับรหัสสตูดิโอ Visual หรือ Azure Portal เพื่อสร้างทรัพยากร SWA

- หรือ -

ใช้พารามิเตอร์ต่อไปนี้:

• ตำแหน่งแอพ: /
• ตำแหน่ง API: API
• ตำแหน่งเอาท์พุท: สร้าง

จะเกิดอะไรขึ้น:

• ในไม่กี่วินาทีคุณจะเห็นเว็บไซต์ที่นำไปใช้กับ Azure ด้วย URL การพัฒนาเช่น คำแบบสุ่ม AzurestaticApps.net (ตัวอย่าง) คุณสามารถเชื่อมต่อโดเมนที่กำหนดเองของคุณเองกับตัวเลือก "โดเมนที่กำหนดเอง" ในพอร์ทัล

• ไฟล์การกระทำของ GitHub จะถูกสร้างขึ้นในโฟลเดอร์ .github/workflows ของ repo ของคุณ คล้ายกับหนึ่งใน repo ดั้งเดิม

ตอนนี้คุณพร้อมที่จะสำรวจคุณสมบัติเว็บแอป Azure Static

การปรับใช้อัตโนมัติเมื่อเปลี่ยนรหัส

1. ทำการเปลี่ยนแปลงรหัสใด ๆ ในแอปพลิเคชัน สิ่งที่จะมองเห็นได้ชัดเจนในหน้าแรกเช่นชื่อแอพในส่วนหัว
2. กระทำและผลักดันการเปลี่ยนแปลงไปยังสาขา main (หรือสาขาที่คุณระบุในระหว่างการสร้างทรัพยากร)
3. ไปที่หน้าการกระทำของ repo ของคุณเพื่อให้แน่ใจว่าเวิร์กโฟลว์กำลังทำงานอยู่

4. เมื่อเสร็จสิ้นให้เปิดเว็บไซต์ของคุณในเบราว์เซอร์คุณจะเห็นเวอร์ชันใหม่

โปรดทราบว่านี่เป็นแอปพลิเคชันที่ขับเคลื่อนด้วยบริการดังนั้นคุณจะเห็นพรอมต์ในการโหลดหน้าใหม่

สภาพแวดล้อมการจัดเตรียม

คุณสามารถตรวจสอบคำขอดึงในสภาพแวดล้อมก่อนการผลิตก่อนที่พวกเขาจะถูกรวมเข้ากับสาขาหลัก

1. สร้างสาขาสำหรับคุณสมบัติใหม่ของคุณ

git checkout -b new-feature

ทำการเปลี่ยนแปลงรหัสใด ๆ ในแอปพลิเคชัน สิ่งที่จะมองเห็นได้ชัดเจนในหน้าแรกเช่นเปลี่ยนสีพื้นหลัง

2. มุ่งมั่นและผลักดันการเปลี่ยนแปลงไปยังสาขา

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

3. ไปที่หน้า GitHub Repo และสร้างคำขอดึงใหม่จากสาขา

4. ไปที่หน้าการกระทำของ repo ของคุณเพื่อให้แน่ใจว่าเวิร์กโฟลว์กำลังทำงานอยู่

5. เมื่อเสร็จสิ้นคุณจะมีเว็บไซต์เวอร์ชันใหม่ที่ปรับใช้กับ Azure ไปยัง URL ใหม่ คุณสามารถรับ URL นี้ได้จากเอาท์พุทเวิร์กโฟลว์บน Azure หรือในแท็บ Azure Portal on Environment GitHub Actions Bot จะโพสต์ URL นี้ลงในความคิดเห็นคำขอดึงของคุณ

6. ตอนนี้คุณสามารถเรียกใช้การทดสอบต่าง ๆ ในเวอร์ชันใหม่ของคุณ

หากเวอร์ชันใหม่ดูดีและคุณรวมคำขอดึงนี้เข้ากับสาขาหลัก (ติดตามโดย SWA) เวิร์กโฟลว์จะปรับใช้เวอร์ชันใหม่ไปยังสาขาที่ติดตามนี้โดยอัตโนมัติและลบสภาพแวดล้อมการจัดเตรียม

โปรดทราบว่าแอปพลิเคชันรุ่นที่จัดฉากของคุณสามารถเข้าถึงได้ในปัจจุบันโดย URL ของพวกเขาแม้ว่าที่เก็บ GitHub ของคุณเป็นส่วนตัว

- เอกสาร

API โดยใช้ฟังก์ชั่น Azure

คุณสามารถใช้ฟังก์ชั่น Azure เพื่อสร้าง API ของคุณเองสำหรับแอปพลิเคชันเว็บแบบคงที่ ตัวเลือกที่ง่ายที่สุดคือการใช้ตัวเลือกฟังก์ชั่นการจัดการ: ฟังก์ชั่น Azure ทั้งหมดที่คุณสร้างในไดเรกทอรี api จะถูกปรับใช้กับ SWA โดยอัตโนมัติ ในโครงการนี้เราใช้ฟังก์ชั่น feedback เพื่อรวบรวมสถิติเกี่ยวกับการตรวจพบ BPM ที่ถูกต้องหรือผิด

ในการทดสอบแม้จะไม่มีการเล่นเพลงคุณสามารถส่งค่า BPM "hardcoded" ไปยังแอปพลิเคชัน: โดยใช้พารามิเตอร์ BPM วิธีทดสอบ:

1. คลิกปุ่ม "เริ่มฟัง"
2. คลิกปุ่ม "ยกนิ้วขึ้น"
3. ตรวจสอบคำขอโพสต์เครือข่ายที่ทำกับ https://bpmtech.no/api/feedback ปลายทางและการตอบสนอง

วิธีสร้างฟังก์ชั่น API ใหม่:

1. ใช้ปุ่ม "สร้าง HTTP FUNCTION" ในส่วนขยายรหัส VS

2. ติดตามตัวช่วยสร้างการสร้าง
3. เขียนรหัสของคุณ
4. มุ่งมั่นและผลักดันการเปลี่ยนแปลงไปยังสาขา
5. ฟังก์ชั่นของคุณจะถูกนำไปใช้กับ SWA โดยอัตโนมัติ

- เอกสาร

การกำหนดเส้นทาง

Azure SWA รองรับการกำหนดเส้นทางที่กำหนดเองซึ่งช่วยให้คุณสามารถ:

• ตั้งค่าการเปลี่ยนเส้นทาง
• จัดระเบียบการนำทางทางเลือกสำหรับแอปพลิเคชันหน้าเดียว
• ตั้งค่าส่วนหัวที่กำหนดเอง
• ลงทะเบียนประเภท MIME
• กำหนดหน้าที่กำหนดเองสำหรับข้อผิดพลาด http
• ปกป้องทรัพยากรโดยการควบคุมการเข้าถึงตามบทบาท (RBAC)

คุณกำหนดค่ากฎใน StaticWebApp.config.json ซึ่งคุณสามารถใส่ได้ทุกที่ในโฟลเดอร์แอปพลิเคชันของ repo ไม่มีข้อกำหนดที่จะใส่ไว้ในโฟลเดอร์เอาท์พุท (สาธารณะ))

วิธีทดสอบ:

1. ไปที่หน้าโดยตรง /เกี่ยวกับ คุณจะเห็นแอปพลิเคชันไม่ใช่ข้อผิดพลาด 404 เนื่องจากกฎทางเลือกนำทาง
2. ไปที่ทรัพยากรที่ไม่มีอยู่จริงจากรายการไม่รวม NavigationFallback คุณจะเห็นหน้าข้อผิดพลาดที่กำหนดเองที่กำหนดค่าไว้ในกฎนี้
3. ตรวจสอบส่วนหัวการตอบกลับ พวกเขามี "X-powered-by: Maxim Salnikov และ Azure Static Web Apps" ตั้งอยู่บนบรรทัดนี้
4. ไปที่ /เกี่ยวกับหน้า คุณจะถูกเปลี่ยนเส้นทางไป /เกี่ยวกับเนื่องจากกฎนี้

โปรดทราบว่าแอปพลิเคชันที่โฮสต์ถูกควบคุมโดยพนักงานบริการ ดังนั้นหลังจากโหลดครั้งแรกการกำหนดเส้นทางอาจดูไม่เหมือนที่อธิบายไว้ข้างต้น ในการทดสอบแอพโดยไม่มีผู้ให้บริการให้เริ่มเซสชันเบราว์เซอร์ใหม่ในโหมดส่วนตัว/ไม่ระบุตัวตน

- เอกสาร

การรับรองความถูกต้อง

ด้วยความช่วยเหลือของแอพพลิเคชั่นเว็บ Azure Static คุณสามารถปกป้องทรัพยากรแอปพลิเคชันของคุณด้วยการควบคุมการเข้าถึงตามบทบาท (RBAC)

การตั้งค่าการรับรองความถูกต้อง:

1. คุณระบุบทบาทที่จำเป็นในการเข้าถึง URL เฉพาะในไฟล์ StaticWebApp.config.json มีสองบทบาทในตัว: anonymous (สำหรับผู้ใช้ทั้งหมด) และ authenticated (สำหรับผู้ที่เข้าสู่ระบบ)
2. หากผู้ใช้พยายามเข้าถึง URL โดยไม่มีบทบาทที่จำเป็นพวกเขาจะได้รับข้อผิดพลาด 401 คุณอาจต้องการตั้งค่าการเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ
3. เพื่อให้ผู้ใช้เข้าสู่ระบบคุณนำผู้ใช้ไปยังหนึ่งในผู้ให้บริการข้อมูลประจำตัวในตัว (Azure Active Directory, GitHub, Twitter) หน้าเข้าสู่ระบบ ตัวอย่างเช่น /.auth/login/twitter (คุณยังสามารถสร้าง URL ที่กำหนดเองสำหรับหน้านี้โดยใช้กฎการกำหนดเส้นทาง) โฟลเดอร์ .auth ในโครงการ Azure SWA ของคุณอยู่ในตัวมันเรียกว่า โฟลเดอร์ระบบ ซึ่งมีจุดสิ้นสุดที่มีประโยชน์
4. หลังจากเข้าสู่ระบบในการใช้ผู้ให้บริการข้อมูลประจำตัวที่เลือกและให้ความยินยอมในการแบ่งปันข้อมูลส่วนบุคคล (อีเมลหรือมือจับผู้ใช้) ผู้ใช้จะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชัน และหากมีการตั้งค่าบทบาทอย่างถูกต้องพวกเขาจะได้รับการเข้าถึง URL ที่ร้องขอ
5. เพื่อให้ผู้ใช้มีบทบาทที่กำหนดเอง (ตัวอย่างเช่น administrator ) คุณใช้แท็บ "การจัดการบทบาท" ในพอร์ทัล Azure คลิกที่ปุ่ม "เชิญ" กรอกแบบฟอร์มและคลิก "สร้าง" คุณจะได้รับลิงค์เพื่อส่งไปยังผู้ใช้เพื่อรับบทบาท

คุณสามารถจัดการผู้ใช้และบทบาทในแท็บ "การจัดการบทบาท"

6. คุณสามารถอ่านข้อมูลรับรองผู้ใช้ที่ได้รับการรับรองความถูกต้อง (เช่นการใช้ตรรกะบางอย่างใน UI) โดยส่งคำขอไปยังจุดสิ้นสุด /.auth/me ในการตรวจสอบข้อมูลการรับรองความถูกต้องของการโทร API คุณอ่านส่วนหัว x-ms-client-principal ในคำขอ
7. หากต้องการออกจากระบบคุณเปลี่ยนเส้นทางผู้ใช้ไปยัง /.auth/logout หน้า
8. ในการลบข้อมูลการระบุข้อมูลส่วนตัว (อีเมลหรือที่จับผู้ใช้) ออกจากแอปพลิเคชันคุณนำผู้ใช้ไปยังลิงก์ที่เกี่ยวข้องกับผู้ให้บริการข้อมูลประจำตัวเฉพาะ: /.auth/purge/twitter

การสาธิต:

1. ลองเข้าถึง /หน้าบัญชี ได้รับการกำหนดค่าให้ใช้งานเฉพาะสำหรับผู้ใช้ authenticated ตามกฎนี้ คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ Twitter และขอความยินยอม
2. หลังจากเข้าสู่ระบบด้วย Twitter คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันและตอนนี้สามารถเข้าถึง /หน้าบัญชีได้
3. Open /.auth/me URL ในแท็บแยกต่างหากเพื่อดูข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์
4. ออกจากระบบโดยไปที่ /.auth/logout url
5. คุณสามารถทำซ้ำขั้นตอนด้านบนเพื่อทดสอบบทบาทที่กำหนดเองที่จำเป็นในการเข้าถึง /ผู้ดูแลระบบ ในกรณีนี้คุณต้องให้ administrator บทบาทตามที่อธิบายไว้ข้างต้น

- เอกสาร

เวอร์ชันตอบสนองเท่านั้น (ไม่มีคลาวด์)

ในไดเรกทอรีโครงการคุณสามารถเรียกใช้:

npm run start

รันแอพในโหมดการพัฒนา
เปิด http: // localhost: 3000 เพื่อดูในเบราว์เซอร์

หน้าจะโหลดซ้ำหากคุณทำการแก้ไข
คุณจะเห็นข้อผิดพลาดผ้าสำลีในคอนโซล

พนักงานบริการไม่ได้ใช้งานในสภาพแวดล้อมการพัฒนา

npm run build

สร้างแอพสำหรับการผลิตไปยังโฟลเดอร์ build
มันรวมกันอย่างถูกต้องตอบสนองในโหมดการผลิตและปรับการสร้างเพื่อประสิทธิภาพที่ดีที่สุด

บิลด์มีขนาดเล็กและชื่อไฟล์รวมถึงแฮช
แอพของคุณพร้อมที่จะนำไปใช้งานแล้ว!

ผู้ปฏิบัติงานบริการพร้อมผลิตจะถูกสร้างขึ้น

เกี่ยวกับ

การให้เครดิต

• การตรวจจับ BPM แบบเรียลไทม์ขึ้นอยู่กับห้องสมุด RealTime-BPM-Analyzer โดย David Lepaux
• การตรวจจับ BPM ในไฟล์นั้นขึ้นอยู่กับไลบรารี BPM ที่ตรวจจับโดย Carl Törnqvist
• เครื่องวิเคราะห์สเปกตรัมเป็นห้องสมุด Audiomotion-Analyzer โดย Henrique Vianna

ผู้เขียน

Maxim Salnikov อย่าลังเลที่จะติดต่อฉันหากคุณมีคำถามใด ๆ เกี่ยวกับโครงการ PWA, Azure Static Web Apps