bpm counter

BPM Techno - Counter BPM en temps réel gratuit pour DJ

Ceci est un projet 3-en-1:

1. Un vrai produit pour DJS pour aider à identifier le BPM (battements par minute) du morceau en cours de jeu.
2. Une démo du monde réel et une aire de jeux pour Azure Static Applics Service.
3. Preuve de concept pour une application Web progressive (PWA) entraînée par un travailleur de service alimenté par Workbox.

Application Web (installable, hors ligne)

Bpmtech.no - compteur BPM en temps réel en ligne gratuit pour DJ

Démo vidéo

(Cliquez pour regarder sur YouTube)

Le flux et les ressources pour la démonstration des applications Web statiques Azure Static 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

Démarrage du serveur de développement local

 # 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

Ouvrez http: // localhost: 4280 dans votre navigateur.

Déploiement à Azure

Pour déployer ce projet sur Azure, vous devez débarquer ce dépôt sur votre propre compte GitHub. Vous aurez également besoin d'un abonnement Azure. Si vous ne l'avez pas, vous pouvez obtenir un abonnement Azure ici gratuitement avec 200 $ de crédit.

Veuillez noter que le service Azure Statis Web Apps a un niveau gratuit généreux qui est suffisant pour de nombreux types de projets personnels.

Après avoir le référentiel dans votre compte GitHub et Azure Abonnement Ready, utilisez une extension Azure Statis Web Apps pour Visual Studio Code ou Azure Portal pour créer une ressource SWA.

- ou -

Utilisez les paramètres suivants:

• Emplacement de l'application: /
• Emplacement de l'API: API
• Emplacement de sortie: construire

Que se passera-t-il:

• En quelques secondes, vous verrez le site Web déployé sur Azure avec une URL de développement comme Random-Word.AzurestaticApps.net (exemple). Vous pouvez y connecter votre propre domaine personnalisé à l'aide de l'option "Domaine personnalisé" dans le portail.

• Un fichier GitHub Actions sera créé dans le dossier .github/workflows de votre référentiel. Semblable à celui du dépôt original.

Vous êtes maintenant prêt à explorer les fonctionnalités des applications Web statiques Azure.

Déploiement automatique sur le changement de code

1. Effectuer un changement de code dans l'application. Quelque chose qui sera clairement visible sur la première page, par exemple le nom de l'application dans l'en-tête.
2. Engager et pousser les modifications à la branche main (ou à la branche que vous avez spécifiée lors de la création de ressources).
3. Accédez à la page des actions de votre dépôt pour vous assurer que le workflow est en cours d'exécution.

4. À la fin, ouvrez votre site Web dans un navigateur, vous verrez la nouvelle version.

Veuillez noter qu'il s'agit d'une application axée sur les travailleurs de service, vous verrez donc l'invite pour recharger la page.

Environnements de mise en scène

Vous pouvez consulter les demandes de traction dans un environnement de pré-production avant d'être fusionné à la branche principale.

1. Créez une branche pour votre nouvelle fonctionnalité.

git checkout -b new-feature

Effectuer un changement de code dans l'application. Quelque chose qui sera clairement visible sur la première page, par exemple changer la couleur d'arrière-plan.

2. Engager et pousser les modifications à la branche.

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

3. Accédez à votre page GitHub Repo et créez une nouvelle demande de traction de la branche.

4. Accédez à la page des actions de votre dépôt pour vous assurer que le workflow est en cours d'exécution.

5. À la fin, vous aurez une nouvelle version du site Web déployé sur Azure dans une nouvelle URL. Vous pouvez obtenir cette URL à partir de la sortie du flux de travail sur Azure ou dans l'onglet Azure Portal on Environments. GitHub Actions Bot publiera également cette URL à vos commentaires de demande de traction.

6. Maintenant, vous pouvez exécuter divers tests sur votre nouvelle version.

Si la nouvelle version semble bonne et que vous fusionnez cette demande de traction vers la succursale principale (suivie par SWA), le workflow déploiera automatiquement la nouvelle version dans cette branche et supprimeront un environnement de stadification.

Veuillez noter que les versions en cours de votre application sont actuellement accessibles publiquement par leur URL, même si votre référentiel GitHub est privé.

? Documentation

API utilisant des fonctions Azure

Vous pouvez utiliser les fonctions Azure pour créer votre propre API pour votre application Web statique. L'option la plus simple consiste à utiliser l'option de fonctions gérées: toutes les fonctions Azure que vous créez dans le répertoire api seront automatiquement déployées dans le SWA. Dans ce projet, nous utilisons la fonction feedback pour rassembler des statistiques sur des BPM corrects ou mauvais détectés.

Pour le tester même sans le jeu de musique, vous pouvez passer une valeur BPM "codé" en dur à l'application: en utilisant le paramètre BPM. Comment le tester:

1. Cliquez sur le bouton "commencer à écouter".
2. Cliquez sur le bouton "Thumbs Up".
3. Vérifiez la demande de publication réseau faite à https://bpmtech.no/api/feedback Endpoint et sa réponse.

Comment créer une nouvelle fonction API:

1. Utilisez le bouton "Créer une fonction HTTP" dans l'extension de code vs.

2. Suivez l'assistant de création.
3. Écrivez votre code.
4. Engager et pousser les modifications à la branche.
5. Votre fonction sera automatiquement déployée dans le SWA.

? Documentation

Routage

Azure SWA prend en charge le routage personnalisé qui vous permet de:

• Configurer des redirectes
• Organisez la section de navigation pour les applications à une seule page
• Configurer des en-têtes personnalisés
• Enregistrer les types de mime
• Définissez les pages personnalisées pour les erreurs HTTP
• Protéger les ressources par un contrôle d'accès basé sur les rôles (RBAC)

Vous configurez les règles dans staticwebapp.config.json que vous pouvez mettre n'importe où dans le dossier d'application du repo, il n'est pas nécessaire de le mettre dans le dossier de sortie (public)).

Comment le tester:

1. Accédez directement à / à propos de la page. Vous verrez l'application, et non l'erreur 404 en raison de la règle de report de navigation.
2. Accédez à toute ressource inexistante à partir de la liste d'exclusion de la Navigationfallback. Vous verrez la page d'erreur 404 personnalisée configurée dans cette règle.
3. Vérifiez les en-têtes de réponse. Ils contiennent "X-alimenté par X: Maxim Salnikov et Azure Static Apps" Set Set "sur cette ligne.
4. Allez sur / à propos de la page. Vous serez redirigé vers / environ à cause de cette règle.

Veuillez noter que la demande hébergée est contrôlée par un employé de service. Donc, après la première charge, le routage peut ne pas ressembler exactement à expliqué ci-dessus. Pour tester l'application sans travailleur de service, démarrez une nouvelle session de navigateur en mode privé / incognito.

? Documentation

Authentification

Avec l'aide des applications Web statiques Azure, vous pouvez protéger vos ressources d'application avec le contrôle d'accès basé sur les rôles (RBAC).

Configuration de l'authentification:

1. Vous spécifiez le (s) rôle (s) nécessaire pour accéder à des URL particulières dans le fichier staticwebapp.config.json. Il y a deux rôles intégrés: anonymous (pour tous les utilisateurs) et authenticated (pour ceux qui sont connectés).
2. Si l'utilisateur essaie d'accéder à l'URL sans le rôle requis, il obtiendra l'erreur 401. Vous voudrez peut-être configurer une redirection vers la page de connexion.
3. Pour permettre aux utilisateurs de se connecter, vous dirigez les utilisateurs vers l'une des pages de connexion des fournisseurs d'identité (Azure Active Directory, GitHub, Twitter). Par exemple, /.auth/login/twitter. (Vous pouvez également créer une URL personnalisée pour cette page à l'aide de règles de routage.). Le dossier .auth sur votre projet Azure SWA est intégré, il est appelé le dossier système qui contient des points de terminaison utiles.
4. Après avoir enregistré l'utilisation du fournisseur d'identité sélectionné et donné son consentement sur le partage des informations personnelles (e-mail ou manche de l'utilisateur), l'utilisateur sera redirigé vers l'application. Et si le rôle est correctement défini, ils auront un accès à l'URL demandée.
5. Pour donner à l'utilisateur un rôle personnalisé (par exemple, administrator ), vous utilisez l'onglet "gestion des rôles" dans le portail Azure. Cliquez sur le bouton "Inviter", remplissez le formulaire et cliquez sur "Générer". Vous recevrez un lien à envoyer à l'utilisateur pour accepter le rôle.

Vous pouvez gérer les utilisateurs et les rôles dans l'onglet "Gestion des rôles".

6. Vous pouvez lire des informations d'identification utilisateur authentifiées (par exemple pour implémenter une logique dans l'interface utilisateur) en envoyant une demande à /.auth/me endpoint. Pour vérifier les informations d'authentification des appels API, vous lisez l'en-tête x-ms-client-principal dans la demande.
7. Pour vous déconnecter, vous redirigez les utilisateurs vers la page /.auth/logout.
8. Pour supprimer des informations d'identification personnellement (e-mail ou manche utilisateur) de l'application, vous dirigez les utilisateurs vers le lien lié à un fournisseur d'identité particulier: /.auth/purge/twitter.

Démo:

1. Essayez d'accès / de la page du compte. Il est configuré pour être disponible uniquement pour les utilisateurs authenticated par cette règle. Vous serez redirigé vers la page de connexion Twitter et demandez le consentement.
2. Après vous être connecté à Twitter, vous serez redirigé vers l'application et pourrez désormais accéder / la page du compte.
3. URL Open /.Auth/me dans l'onglet séparé pour voir les informations renvoyées par le serveur.
4. Connectez-vous en allant sur /.auth/logout URL.
5. Vous pouvez répéter les étapes ci-dessus pour tester le rôle personnalisé nécessaire pour accéder à la page d'administration / administration. Dans ce cas, vous devez donner à l'utilisateur l' administrator de rôle comme décrit ci-dessus.

? Documentation

Version réactive uniquement (pas de cloud)

Dans le répertoire du projet, vous pouvez courir:

npm run start

Exécute l'application en mode développement.
Ouvrez http: // localhost: 3000 pour le voir dans le navigateur.

La page se rechargera si vous effectuez des modifications.
Vous verrez également toutes les erreurs de peluche dans la console.

Le travailleur des services n'est pas utilisé dans l'environnement de développement.

npm run build

Créez l'application pour la production dans le dossier build .
Il réagit correctement en mode de production et optimise la construction pour les meilleures performances.

La construction est minifiée et les noms de fichiers incluent les hachages.
Votre application est prête à être déployée!

Le travailleur de service prêt pour la production sera également généré.

À propos

Crédits

• La détection du BPM en temps réel est basée sur la bibliothèque réel-BPM-ANALYZER par David Lepaux
• La détection de BPM dans les fichiers est basée sur la bibliothèque-détective BPM par Carl Törnqvist
• Spectrum Analyzer est basé sur la bibliothèque d'audiomotion-analyzer par Henrique Vianna

Auteur

Maxim Salnikov. N'hésitez pas à me contacter si vous avez des questions sur le projet, PWA, les applications Web statiques Azure.