bpm counter

BPM Techno - kostenloser Online -Echtzeit -BPM -Zähler für DJ

Dies ist ein 3-in-1-Projekt:

1. Ein echtes Produkt für DJs, um BPM (Schläge pro Minute) des derzeit gespielten Tracks zu identifizieren.
2. Eine reale Demo und ein Spielplatz für den Azure Static Web Apps Service.
3. Proof of Concept für eine progressive Web-App (PWA), die von Workbox-anbetriebenem Servicearbeiter angetrieben wird.

Webanwendung (installierbar, offline-fähig)

Bpmtech.no - kostenloser Online -Echtzeit -BPM -Zähler für DJ

Video Demo

(Klicken Sie hier, um auf YouTube zu sehen)

Flow und Ressourcen für die Azure Static Web Apps Funktionen Demo

Installation

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

Starten lokaler Entwicklungsserver

 # 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

Öffnen Sie http: // localhost: 4280 in Ihrem Browser.

Bereitstellung zu Azure

Um dieses Projekt für Azure bereitzustellen, müssen Sie dieses Repo auf Ihr eigenes Github -Konto verlaufen. Sie benötigen auch ein Azure -Abonnement. Wenn Sie es nicht haben, können Sie hier kostenlos mit 200 US -Dollar Azure -Abonnement abonnieren.

Bitte beachten Sie, dass der Azure statische Web -Apps -Service eine großzügige kostenlose Stufe hat, die für viele Arten von persönlichen Projekten ausreicht.

Nachdem Sie das Repo in Ihrem GitHub -Konto und Azure -Abonnement bereit haben, verwenden Sie eine Azure Static Web Apps -Erweiterung für Visual Studio Code oder Azure Portal, um eine SWA -Ressource zu erstellen.

- oder -

Verwenden Sie die folgenden Parameter:

• App Ort: /
• API -Standort: API
• Ausgangsposition: Build

Was wird passieren:

• In wenigen Sekunden sehen Sie die Website, die mit einer Entwicklungs-URL wie random-Wort.azurestaticApps.net (Beispiel) für Azure bereitgestellt wird. Sie können Ihre eigene benutzerdefinierte Domain mit der Option "benutzerdefinierte Domäne" im Portal anschließen.

• Eine GitHub -Aktionsdatei wird im Ordner .github/workflows Ihres Repo erstellt. Ähnlich wie im ursprünglichen Repo.

Sie sind jetzt bereit, die Funktionen der Azure Static Web Apps zu erkunden.

Automatische Bereitstellung zur Änderung der Codeänderung

1. Führen Sie eine Codesänderung in der Anwendung durch. Etwas, das auf der ersten Seite deutlich sichtbar ist, z. B. App -Namen im Header.
2. Verpflichten Sie und drücken Sie die Änderungen in main (oder den Zweig, den Sie während der Ressourcenerstellung angegeben haben).
3. Gehen Sie zu Aktionen Seite Ihres Repo, um sicherzustellen, dass der Workflow ausgeführt wird.

4. Öffnen Sie nach Abschluss Ihrer Website in einem Browser, Sie sehen die neue Version.

Bitte beachten Sie, dass dies eine von Service Worker gesteuerte Anwendung ist, sodass Sie die Aufforderung zum Nachladen der Seite sehen.

Staging -Umgebungen

Sie können Pull-Anfragen in der Vorproduktionsumgebung überprüfen, bevor sie in die Hauptzweide verschmolzen werden.

1. Erstellen Sie eine Filiale für Ihre neue Funktion.

git checkout -b new-feature

Führen Sie eine Codesänderung in der Anwendung durch. Etwas, das auf der ersten Seite deutlich sichtbar ist, z. B. ändern die Hintergrundfarbe.

2. Verpflichten Sie und drücken Sie die Änderungen in den Zweig.

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

3. Gehen Sie zu Ihnen Github Repo -Seite und erstellen Sie eine neue Pull -Anfrage aus der Filiale.

4. Gehen Sie zu Aktionen Seite Ihres Repo, um sicherzustellen, dass der Workflow ausgeführt wird.

5. Nach Abschluss haben Sie eine neue Version der Website, die in Azure zu einer neuen URL bereitgestellt wird. Sie können diese URL entweder vom Workflow -Ausgang auf Azure oder im Registerkarte "Azure Portal auf Umgebungen" erhalten. GitHub Actions Bot veröffentlichen diese URL auch auf Ihre Pull -Anfrage -Kommentare.

6. Jetzt können Sie verschiedene Tests auf Ihrer neuen Version durchführen.

Wenn die neue Version gut aussieht und Sie diese Pull -Anfrage in die Hauptbranche (Tracked By SWA) verschmelzen, bereitet der Workflow die neue Version automatisch in dieser Tracked Branch und löscht die Staging -Umgebung ein.

Bitte beachten Sie, dass inszenierte Versionen Ihrer Bewerbung derzeit von der URL öffentlich zugänglich sind, auch wenn Ihr Github -Repository privat ist.

? Dokumentation

API Verwenden von Azure -Funktionen

Sie können die Azure -Funktionen verwenden, um Ihre eigene API für Ihre statische Web -App zu erstellen. Die einfachste Option besteht darin, die Option Managed -Funktionen zu verwenden: Alle Azure -Funktionen, die Sie im api -Verzeichnis erstellen, werden automatisch für die SWA bereitgestellt. In diesem Projekt verwenden wir feedback -Funktion, um Statistiken zu korrekten oder falschen BPMs zu sammeln.

Um es auch ohne Musikspiel zu testen, können Sie einen "hartcodierten" BPM -Wert an die Anwendung übergeben: Mithilfe von BPM -Parameter. Wie man es testet:

1. Klicken Sie auf die Schaltfläche "Anhören starten".
2. Klicken Sie auf die Schaltfläche "Daumen hoch".
3. Überprüfen Sie die Netzwerkbeitragsanforderung an https://bpmtech.no/api/feedback -Endpunkt und deren Antwort.

So erstellen Sie eine neue API -Funktion:

1. Verwenden Sie die Schaltfläche "HTTP -Funktion erstellen" in VS -Code -Erweiterung.

2. Folgen Sie dem Zauberer der Schöpfung.
3. Schreiben Sie Ihren Code.
4. Verpflichten Sie und drücken Sie die Änderungen in den Zweig.
5. Ihre Funktion wird automatisch für die SWA bereitgestellt.

? Dokumentation

Routing

Azure SWA unterstützt kundenspezifische Routing, mit der Sie:

• Richten Sie Ausleitungen ein
• Organisieren Sie die Navigation Fallback für die einseitigen Anwendungen
• Setzen Sie benutzerdefinierte Header ein
• MIME -Typen registrieren
• Definieren Sie benutzerdefinierte Seiten für HTTP -Fehler
• Schützen Sie die Ressourcen durch eine rollenbasierte Zugriffskontrolle (RBAC)

Sie konfigurieren die Regeln in staticwebapp.config.json, die Sie überall in den Anwendungsordner des Repo einfügen können. Es besteht keine Anforderung, sie in den Ordner Ausgabe (öffentlich) zu setzen.

Wie man es testet:

1. Gehen Sie direkt zu /um Seite. Sie sehen die Anwendung, nicht Fehler 404 aufgrund der Navigations -Fallback -Regel.
2. Gehen Sie zu einer nicht existierenden Ressource aus der NavigationFallback-Liste. Sie sehen die in dieser Regel konfigurierte benutzerdefinierte 404 -Fehlerseite.
3. Überprüfen Sie die Antwortschicht. Sie enthalten in dieser Zeile "X-Kraft-BY-BY: Maxim Salnikov und Azure Static Web Apps".
4. Gehen Sie zur /umging -Seite. Sie werden wegen dieser Regel zu /umgeleitet.

Bitte beachten Sie, dass die gehostete Bewerbung von einem Servicemitarbeiter gesteuert wird. Nach der ersten Last sieht das Routing möglicherweise nicht genau wie oben erläutert aus. Um die App ohne Servicearbeiter zu testen, starten Sie eine neue Browser -Sitzung im privaten/inkognito -Modus.

? Dokumentation

Authentifizierung

Mit Hilfe von Azure Static Web Apps können Sie Ihre Anwendungsressourcen mit der rollenbasierten Access Control (RBAC) schützen.

Einrichten der Authentifizierung:

1. Sie geben die Rolle an, die für den Zugriff auf bestimmte URLs in der Datei staticwebapp.config.json zugreifen müssen. Es gibt zwei integrierte Rollen: anonymous (für alle Benutzer) und authenticated (für diejenigen, die angemeldet sind).
2. Wenn der Benutzer versucht, ohne die erforderliche Rolle auf URL zuzugreifen, wird er Fehler 401 erhalten. Möglicherweise möchten Sie eine Weiterleitung zur Anmeldeseite einrichten.
3. Um sich einzuloggen, leiten Sie Benutzer zu einem der integrierten Identitätsanbieter (Azure Active Directory, Github, Twitter) Anmeldeseiten. Zum Beispiel /.auth/login/twitter. (Mithilfe von Routing -Regeln können Sie auch eine benutzerdefinierte URL für diese Seite erstellen.) Der Ordner .auth in Ihrem Azure SWA-Projekt ist integriert. Es ist so genannter Systemordner , der einige nützliche Endpunkte enthält.
4. Nachdem Sie den ausgewählten Identitätsanbieter angemeldet und die Einwilligung zur Freigabe persönlicher Informationen (E -Mail- oder Benutzerhandel) gegeben haben, wird der Benutzer wieder in die Anwendung umgeleitet. Und wenn die Rolle korrekt eingestellt ist, erhalten sie einen Zugriff auf die angeforderte URL.
5. Um dem Benutzer eine benutzerdefinierte Rolle zu geben (z. B. administrator ), verwenden Sie "Rollenverwaltung" -Rist für "Rollenverwaltung" im Azure -Portal. Klicken Sie auf die Schaltfläche "einladen", füllen Sie das Formular aus und klicken Sie auf "Generieren". Sie erhalten einen Link zum Senden an den Benutzer, um die Rolle zu übernehmen.

Sie können die Benutzer und Rollen auf der Registerkarte "Rollenverwaltung" verwalten.

6. Sie können authentifizierte Benutzeranmeldeinformationen (z. B. eine Logik in der Benutzeroberfläche implementieren) lesen, indem Sie die Anfrage an /.Auth/Me -Endpunkt senden. Um die Authentifizierungsinformationen der API-Anrufe zu überprüfen, lesen Sie den x-ms-client-principal Header in der Anfrage.
7. Zum Anmelden leiten Sie Benutzer auf /.Auth/Logout -Seite um.
8. Um personenbezogene Informationen (E -Mail- oder Benutzerhandle) aus der Anwendung zu entfernen, leiten Sie Benutzer zu dem Link, der sich mit einem bestimmten Identitätsanbieter bezieht: /.auth/purge/twitter.

Demo:

1. Versuchen Sie, auf die Seite /Konto zuzugreifen. Es ist so konfiguriert, dass es in dieser Regel nur für authenticated Benutzer verfügbar ist. Sie werden auf die Twitter -Anmeldeseite umgeleitet und um Zustimmung gebeten.
2. Nachdem Sie sich bei Twitter angemeldet haben, werden Sie zur Anwendung zurückgeleitet und können nun auf Seite /Konto zugreifen.
3. Öffnen Sie /.Auth/Me URL in der separaten Registerkarte, um die vom Server zurückgegebenen Informationen anzuzeigen.
4. Melden Sie sich an, indem Sie zu /.Auth/Logout -URL gehen.
5. Sie können die obigen Schritte wiederholen, um die benutzerdefinierte Rolle zu testen, die für den Zugriff auf /admin -Seite erforderlich ist. In diesem Fall müssen Sie dem Benutzer wie oben beschrieben den administrator geben.

? Dokumentation

Nur React-Version (keine Cloud)

Im Projektverzeichnis können Sie ausführen:

npm run start

Führt die App im Entwicklungsmodus aus.
Öffnen Sie http: // localhost: 3000, um es im Browser anzuzeigen.

Die Seite wird neu laden, wenn Sie Änderungen vornehmen.
Sie werden auch Fellfehler in der Konsole sehen.

Der Servicearbeiter wird in der Entwicklungsumgebung nicht verwendet.

npm run build

Build die App für die Produktion im build -Ordner.
Es reagiert korrekt im Produktionsmodus und optimiert den Build für die beste Leistung.

Der Build wird abgebaut und die Dateinamen enthalten die Hashes.
Ihre App ist bereit für die Bereitstellung!

Der produktionsbereitete Servicearbeiter wird ebenfalls generiert.

Um

Credits

• Die Echtzeit-BPM-Erkennung basiert auf der Echtzeit-BPM-Analyzer-Bibliothek von David Lepaux
• Die BPM-Erkennung in den Dateien basiert auf der BPM-DEECTIVE-Bibliothek von Carl Törnqvist
• Spectrum Analyzer basiert auf der Audiomotion-Analyzer-Bibliothek von Henrique Vianna

Autor

Maxim Saltnikov. Sie können mich gerne kontaktieren, wenn Sie Fragen zum Projekt, PWA, Azure statische Web -Apps haben.