bpm counter

BPM Techno- DJ 용 무료 온라인 실시간 BPM 카운터

이것은 3-in-1 프로젝트입니다.

1. DJ가 현재 재생하는 트랙의 BPM (분당 비트)을 식별하는 데 도움이되는 실제 제품입니다.
2. Azure 정적 웹 앱 서비스를위한 실제 데모 및 놀이터.
3. WorkBox 구동 서비스 작업자가 주도하는 PWA (Progressive Web App)의 개념 증명.

웹 응용 프로그램 (설치 가능, 오프라인 준비)

BPMTECH.NO- ​​DJ 용 무료 온라인 실시간 BPM 카운터

비디오 데모

(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에 배포

이 프로젝트를 Azure에 배포하려면이 리포지트를 자신의 Github 계정으로 포크해야합니다. Azure 구독도 필요합니다. 당신이 가지고 있지 않다면, 당신은 200 달러의 크레딧으로 여기에서 무료로 Azure 구독을받을 수 있습니다.

Azure 정적 웹 앱 서비스에는 많은 유형의 개인 프로젝트에 충분한 넓은 무료 계층이 있습니다.

GitHub 계정에 Repo가 있고 Azure Subscription Ready가 준비된 후 Visual Studio Code 또는 Azure Portal 용 Azure STATIC Web Apps Extension을 사용하여 SWA 리소스를 만듭니다.

- 또는 -

다음 매개 변수를 사용하십시오.

• 앱 위치 : /
• API 위치 : API
• 출력 위치 : 빌드

일어날 일 :

• 몇 초 안에 웹 사이트가 Random-Word.azurestaticapps.net 과 같은 개발 URL을 사용하여 Azure에 배포 된 것을 볼 수 있습니다 (예). 포털에서 "사용자 정의 도메인"옵션을 사용하여 고유 한 사용자 정의 도메인을 연결할 수 있습니다.

• github 조치 파일은 repo의 .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에 배포됩니다. Azure의 워크 플로 출력 또는 환경 탭의 Azure Portal 에서이 URL을 얻을 수 있습니다. GitHub Actions Bot은이 URL을 풀 요청 주석에 게시합니다.

6. 이제 새 버전에서 다양한 테스트를 실행할 수 있습니다.

새 버전이 좋아 보이고이 풀 요청을 메인 (SWA에 의해 추적)에 병합하면 워크 플로우는 새 버전을이 추적 브랜치에 자동으로 배포하고 삭제 스테이징 환경을 삭제합니다.

GitHub 저장소가 비공개 인 경우에도 응용 프로그램의 단계별 버전은 URL에 의해 공개적으로 액세스 할 수 있습니다.

? 선적 서류 비치

AZURE 기능을 사용하는 API

Azure 함수를 사용하여 정적 웹 앱을 위해 자신의 API를 구축 할 수 있습니다. 가장 간단한 옵션은 관리 된 기능 옵션을 사용하는 것입니다. api 디렉토리에서 작성한 모든 Azure 함수는 SWA에 자동으로 배포됩니다. 이 프로젝트에서는 feedback 기능을 사용하여 정확하거나 잘못된 BPMS 감지에 대한 통계를 수집합니다.

음악을 재생하지 않고도 테스트하려면 BPM 매개 변수를 사용하여 "하드 코드 된"BPM 값을 애플리케이션에 전달할 수 있습니다. 테스트 방법 :

1. "듣기 시작"버튼을 클릭하십시오.
2. "Thumbs Up"버튼을 클릭하십시오.
3. https://bpmtech.no/api/feedback endpoint 및 그 응답에 작성된 네트워크 게시물 요청을 확인하십시오.

새 API 기능을 만드는 방법 :

1. Code Extension에서 "HTTP 기능 작성"버튼을 사용하십시오.

2. 창조 마법사를 따르십시오.
3. 코드를 작성하십시오.
4. 변경을 지점으로 커밋하고 밀어 넣으십시오.
5. 기능은 자동으로 SWA에 배포됩니다.

? 선적 서류 비치

라우팅

Azure SWA는 다음을 수행 할 수있는 사용자 정의 라우팅을 지원합니다.

• 리디렉션을 설정하십시오
• 단일 페이지 응용 프로그램의 내비게이션 폴백을 구성하십시오
• 사용자 정의 헤더를 설정합니다
• MIME 유형을 등록하십시오
• HTTP 오류에 대한 사용자 정의 페이지를 정의하십시오
• 역할 기반 액세스 제어 (RBAC)로 리소스 보호

Repo의 애플리케이션 폴더의 어느 곳에서나 적용 할 수있는 staticwebapp.config.json의 규칙을 구성하면 출력 (공개) 폴더에 넣을 필요가 없습니다.

테스트 방법 :

1. 페이지로 직접 이동하십시오. 내비게이션 폴백 규칙으로 인해 오류 404가 아닌 응용 프로그램이 표시됩니다.
2. NavigationFallback Exclude List에서 존재하지 않는 리소스로 이동하십시오. 이 규칙에서 사용자 정의 404 오류 페이지가 구성됩니다.
3. 응답 헤더를 확인하십시오. 이 라인에 "X-Powered-By : Maxim Salnikov 및 Azure 정적 웹 앱"이 포함되어 있습니다.
4. /aboutme 페이지로 이동하십시오. 이 규칙 때문에 당신은 /에 대한 방향을 바꿀 것입니다.

호스팅 된 응용 프로그램은 서비스 작업자에 의해 제어됩니다. 따라서 첫 번째 하중 후에는 라우팅이 위에서 설명한 것과 똑같지 않을 수 있습니다. 서비스 작업자가없는 앱을 테스트하려면 개인/인코크 모드에서 새로운 브라우저 세션을 시작하십시오.

? 선적 서류 비치

입증

Azure 정적 웹 앱의 도움으로 RBAC (Role-Based Access Control)로 애플리케이션 리소스를 보호 할 수 있습니다.

인증 설정 :

1. staticwebapp.config.json 파일에서 특정 URL에 액세스하는 데 필요한 역할을 지정합니다. anonymous (모든 사용자를위한)과 authenticated (로그인 한 사람들을 위해)의 두 가지 내장 역할이 있습니다.
2. 사용자가 필요한 역할없이 URL에 액세스하려고하면 오류 401이 나타납니다. 로그인 페이지로 리디렉션을 설정할 수 있습니다.
3. 사용자가 로그인 할 수 있도록 사용자가 내장 ID 제공 업체 (Azure Active Directory, Github, Twitter) 로그인 페이지 중 하나를 사용자 지정합니다. 예를 들어, /.auth/login/twitter. (라우팅 규칙을 사용 하여이 페이지에 대한 사용자 정의 URL을 만들 수도 있습니다.). Azure SWA 프로젝트의 .auth .
4. 선택한 ID 제공자를 사용하여 로그인하고 개인 정보 공유 (이메일 또는 사용자 핸들)에 동의 한 후 사용자는 응용 프로그램으로 다시 리디렉션됩니다. 역할이 올바르게 설정되면 요청 된 URL에 액세스 할 수 있습니다.
5. 사용자에게 사용자 정의 역할 (예 : administrator )을 제공하려면 Azure Portal에서 "역할 관리"탭을 사용합니다. "초대"버튼을 클릭하고 양식을 채우고 "생성"을 클릭하십시오. 역할을 수락하기 위해 사용자에게 보낼 링크를 받게됩니다.

"역할 관리"탭에서 사용자와 역할을 관리 할 수 ​​있습니다.

6. /.auth/me endpoint에 요청을 보내서 인증 된 사용자 자격 증명 (예 : UI에서 일부 논리 구현)을 읽을 수 있습니다. API 호출의 인증 정보를 확인하려면 요청에서 x-ms-client-principal 헤더를 읽습니다.
7. 로그 아웃하려면 사용자를 /.auth/logout 페이지로 리디렉션합니다.
8. 응용 프로그램에서 개인 식별 정보 (이메일 또는 사용자 핸들)를 제거하려면 사용자를 특정 Identity 제공 업체 (/.auth/purge/twitter)와 관련된 링크로 안내합니다.

데모:

1. 액세스 /계정 페이지를 시도하십시오. 이 규칙에 따라 authenticated 사용자 만 사용할 수 있도록 구성됩니다. 트위터 로그인 페이지로 리디렉션되고 동의를 요청합니다.
2. Twitter에 로그인하면 응용 프로그램으로 다시 리디렉션되며 이제 페이지에 액세스 할 수 있습니다.
3. 별도의 탭에서 /.auth/me url을 열어 서버에서 반환 한 정보를 확인하십시오.
4. /.auth/Logout URL로 이동하여 로그 아웃하십시오.
5. 위의 단계를 반복하여 /관리자 페이지에 액세스하는 데 필요한 사용자 정의 역할을 테스트 할 수 있습니다. 이 경우 위에서 설명한대로 사용자에게 역할 administrator 제공해야합니다.

? 선적 서류 비치

반응 전용 버전 (클라우드 없음)

프로젝트 디렉토리에서는 다음을 실행할 수 있습니다.

npm run start

개발 모드에서 앱을 실행합니다.
브라우저에서 http : // localhost : 3000을 엽니 다.

편집하면 페이지가 다시로드됩니다.
콘솔에 보풀 오류가 표시됩니다.

서비스 작업자는 개발 환경에서 사용되지 않습니다.

npm run build

build 폴더에 생산을위한 앱을 빌드합니다.
생산 모드에서 올바르게 반응하고 최상의 성능을 위해 빌드를 최적화합니다.

빌드는 미니어지고 파일 이름에는 해시가 포함됩니다.
앱을 배포 할 준비가되었습니다!

생산 준비 서비스 작업자도 생성됩니다.

에 대한

크레딧

• 실시간 BPM 탐지는 David Lepaux의 Realtime-BPM-Analyzer 라이브러리를 기반으로합니다.
• 파일의 BPM 감지는 Carl Törnqvist의 BPM 검출 라이브러리를 기반으로합니다.
• Spectrum Analyzer는 Henrique Vianna의 Audiomotion-Analyzer 라이브러리 기반입니다

작가

Maxim Salnikov. 프로젝트, PWA, Azure 정적 웹 앱에 대해 궁금한 점이 있으면 저에게 연락하십시오.