bpm counter

BPM Techno - عداد BPM في الوقت الفعلي المجاني على الانترنت في الوقت الفعلي لـ DJ

هذا مشروع 3 في 1:

1. منتج حقيقي لـ DJs للمساعدة في تحديد BPM (Beats في الدقيقة) للمسار الذي يتم تشغيله حاليًا.
2. عرض تجريبي في العالم الحقيقي وملعب لخدمة تطبيقات الويب الثابتة Azure.
3. إثبات مفهوم تطبيق الويب التدريجي (PWA) يقوده عامل الخدمة الذي يعمل بذنب العمل.

تطبيق الويب (قابل للتثبيت ، جاهز للإنترنت)

bpmtech.no - عداد BPM في الوقت الفعلي المجاني ل DJ

عرض الفيديو

(انقر لمشاهدة على YouTube)

تدفق وموارد لتطبيقات الويب الثابتة Azure ميزات العرض التوضيحي

تثبيت

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 ، تحتاج إلى تغطية هذا الريبو إلى حساب GitHub الخاص بك. ستحتاج أيضًا إلى اشتراك Azure. إذا لم يكن لديك ذلك ، فيمكنك الحصول على اشتراك Azure هنا مجانًا بائتمان 200 دولار.

يرجى ملاحظة أن خدمة تطبيقات الويب الثابتة Azure لديها طبقة مجانية سخية وهي كافية للعديد من أنواع المشاريع الشخصية.

بعد أن يكون لديك repo في حساب github الخاص بك ، واشتراك Azure جاهز ، استخدم ملحق تطبيقات الويب الثابت Azure لرمز Visual Studio أو Azure Portal لإنشاء مورد SWA.

- أو -

استخدم المعلمات التالية:

• موقع التطبيق: /
• API الموقع: API
• موقع الإخراج: بناء

ماذا سيحدث:

• في بضع ثوان ، سترى موقع الويب تم نشره في Azure مع عنوان URL للتطوير مثل العشوائي . AzurestaticApps.net (مثال). يمكنك توصيل نطاق المجال المخصص الخاص بك باستخدام خيار "مجال مخصص" في البوابة.

• سيتم إنشاء ملف إجراءات github في مجلد .github/workflows في الريبو الخاص بك. على غرار واحد في الريبو الأصلي.

أنت الآن مستعد لاستكشاف ميزات تطبيقات الويب الثابتة Azure.

النشر التلقائي على تغيير الكود

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 Environments. سيقوم GitHub Actions Bot أيضًا بنشر عنوان URL هذا إلى تعليقات طلب السحب.

6. الآن ، يمكنك إجراء اختبارات مختلفة على نسختك الجديدة.

إذا كانت الإصدار الجديد يبدو جيدًا وقمت بدمج طلب السحب هذا على الفرع الرئيسي (الذي تم تتبعه بواسطة SWA) ، فسيقوم سير العمل تلقائيًا بنشر الإصدار الجديد إلى هذا الفرع المتتبع وحذف بيئة التدريج.

يرجى ملاحظة أن الإصدارات المرحلية من طلبك يمكن الوصول إليها حاليًا علنًا بواسطة عنوان URL الخاص بهم ، حتى لو كان مستودع GitHub خاصًا خاصًا.

؟ الوثائق

API باستخدام وظائف Azure

يمكنك استخدام وظائف Azure لإنشاء واجهة برمجة التطبيقات الخاصة بك لتطبيق الويب الثابت. الأبسط خيار هو استخدام خيار الوظائف المدارة: سيتم نشر جميع وظائف Azure التي تنشئها في دليل api تلقائيًا في SWA. في هذا المشروع ، نستخدم وظيفة feedback لجمع الإحصاءات حول BPMs الصحيحة أو الخاطئة التي تم اكتشافها.

لاختبارها حتى بدون تشغيل الموسيقى ، يمكنك تمرير قيمة BPM "المتشددين" إلى التطبيق: باستخدام معلمة BPM. كيفية اختباره:

1. انقر فوق الزر "ابدأ الاستماع".
2. انقر فوق الزر "إبهام UP".
3. تحقق من طلب نشر الشبكة المقدم إلى https://bpmtech.no/api/feedback نقطة نهاية وردها.

كيفية إنشاء وظيفة API جديدة:

1. استخدم زر "إنشاء وظيفة HTTP" في امتداد VS Code.

2. اتبع معالج الخلق.
3. اكتب الكود الخاص بك.
4. ارتكاب ودفع التغييرات إلى الفرع.
5. سيتم نشر وظيفتك تلقائيًا في SWA.

؟ الوثائق

التوجيه

تدعم Azure SWA التوجيه المخصص الذي يسمح لك بـ:

• إعداد إعادة التوجيه
• قم بتنظيم احتياطي للملاحة للتطبيقات ذات الصفحة الواحدة
• قم بإعداد رؤوس مخصصة
• تسجيل أنواع MIME
• تحديد الصفحات المخصصة لأخطاء HTTP
• حماية الموارد من خلال التحكم في الوصول القائم على الدور (RBAC)

تقوم بتكوين القواعد في staticwebapp.config.json التي يمكنك وضعها في أي مكان في مجلد التطبيق في الريبو ، لا يوجد أي شرط لوضعه في المجلد (العام) المخرج).

كيفية اختباره:

1. انتقل مباشرة إلى /حول الصفحة. سترى التطبيق ، وليس خطأ 404 بسبب قاعدة عودة التنقل.
2. انتقل إلى أي مورد غير موجود من القائمة المستبعدة للملاحة. سترى صفحة الخطأ 404 المخصصة التي تم تكوينها في هذه القاعدة.
3. تحقق من رؤوس الاستجابة. وهي تحتوي على "X-Powered-By: Maxim Salnikov و Azure Static Web Apps" على هذا الخط.
4. انتقل إلى صفحة /abounme. سيتم إعادة توجيهك إلى /بسبب هذه القاعدة.

يرجى ملاحظة أن التطبيق المستضاف يتم التحكم فيه بواسطة عامل خدمة. لذلك بعد الحمل الأول ، قد لا يبدو التوجيه كما هو موضح أعلاه. لاختبار التطبيق بدون عامل خدمة ، ابدأ جلسة متصفح جديدة في وضع الخاص/التخفي.

؟ الوثائق

المصادقة

بمساعدة تطبيقات الويب الثابتة Azure ، يمكنك حماية موارد التطبيق الخاصة بك من خلال التحكم في الوصول القائم على الدور (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. يمكنك قراءة بيانات اعتماد المستخدم المصادقة (على سبيل المثال لتنفيذ بعض المنطق في واجهة المستخدم) عن طريق إرسال طلب إلى /. للتحقق من معلومات المصادقة لمكالمات API ، تقرأ رأس x-ms-client-principal في الطلب.
7. لتسجيل الخروج ، يمكنك إعادة توجيه المستخدمين إلى /.
8. لإزالة المعلومات الشخصية (البريد الإلكتروني أو مقبض المستخدم) من التطبيق ، تقوم بتوجيه المستخدمين إلى الرابط المرتبط بمزود هوية معين: /.auth/purge/twitter.

العرض التوضيحي:

1. حاول الوصول إلى صفحة /حساب. تم تكوينه ليكون متاحًا فقط للمستخدمين authenticated من خلال هذه القاعدة. سيتم إعادة توجيهك إلى صفحة تسجيل الدخول إلى Twitter وطلبت الموافقة.
2. بعد تسجيل الدخول مع Twitter ، سيتم إعادة توجيهك إلى التطبيق ، والآن يمكنك الوصول إلى صفحة /حساب.
3. Open /.Auth/ME url في علامة التبويب المنفصلة لمعرفة المعلومات التي يتم إرجاعها بواسطة الخادم.
4. تسجيل الخروج عن طريق الذهاب إلى /.
5. يمكنك تكرار الخطوات أعلاه لاختبار الدور المخصص اللازم للوصول /صفحة المسؤول. في هذه الحالة ، تحتاج إلى إعطاء المستخدم administrator الدور كما هو موضح أعلاه.

؟ الوثائق

رد الفعل فقط (بدون سحابة)

في دليل المشروع ، يمكنك تشغيل:

npm run start

يدير التطبيق في وضع التطوير.
افتح http: // localhost: 3000 لمشاهدته في المتصفح.

سيتم إعادة تحميل الصفحة إذا قمت بإجراء تعديلات.
سترى أيضًا أي أخطاء في وحدة التحكم في وحدة التحكم.

عامل الخدمة ليس قيد الاستخدام في بيئة التطوير.

npm run build

يبني التطبيق للإنتاج إلى مجلد build .
تتفاعل حزمها بشكل صحيح في وضع الإنتاج وتحسن البناء للحصول على أفضل أداء.

تم تصنيع البناء ويتضمن أسماء الملفات التجزئة.
تطبيقك جاهز للنشر!

كما سيتم إنشاء عامل خدمة جاهز للإنتاج.

عن

الاعتمادات

• يعتمد اكتشاف BPM في الوقت الفعلي على مكتبة David Lepaux في الوقت الفعلي BPM-ANALYZER
• يعتمد اكتشاف BPM في الملفات على مكتبة BPM-Detective بواسطة Carl Törnqvist
• يستند محلل SPECTRUM إلى مكتبة Audiomotion-Analyzer بواسطة Henrique Vianna

مؤلف

ماكسيم سالنيكوف. لا تتردد في الاتصال بي إذا كان لديك أي أسئلة حول المشروع ، PWA ، Azure Static Web Apps.