bpm counter

BPM Techno-免費在線實時BPM DJ櫃檯

這是一個3合1項目：

1. DJ是一種真正的產品，可以幫助識別當前播放的曲目BPM（每分鐘節拍）。
2. 現實世界的演示和Azure靜態Web應用程序服務的操場。
3. 由工作箱驅動的服務工作者驅動的漸進Web應用程序（PWA）的概念驗證。

Web應用程序（可安裝，脫機準備）

bpmtech.no-免費的在線實時BPM DJ計數器

視頻演示

（點擊在YouTube上觀看）

Azure靜態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，您需要將此存儲庫分配給您自己的GitHub帳戶。您還需要Azure訂閱。如果您沒有它，則可以在這裡免費獲得Azure訂閱，並獲得200美元的信用。

請注意，Azure靜態Web Apps服務具有寬敞的免費層，足以容納許多類型的個人項目。

在GitHub帳戶中擁有存儲庫並準備好Azure訂閱後，請使用Azure靜態Web應用程序擴展為Visual Studio Code或Azure Portal來創建SWA資源。

- 或者 -

使用以下參數：

• 應用位置： /
• API位置： API
• 輸出位置：構建

會發生什麼：

• 在幾秒鐘內，您將看到網站部署到Azure，並具有開發URL，例如Random-Word.azurestaticapps.net （示例）。您可以使用門戶中的“自定義域”選項將自己的自定義域連接到它。

• 將在您的存儲庫的.github/workflows文件夾中創建一個github操作文件。類似於原始存儲庫中的一個。

您現在準備探索Azure靜態Web應用程序功能。

自動部署代碼更改

1. 在應用程序中進行任何代碼更改。在第一頁上可以清晰可見的內容，例如標題中的應用程序名稱。
2. 提交並將更改推向main分支（或您在資源創建期間指定的分支）。
3. 轉到存儲庫的操作頁面，以確保工作流程正在運行。

4. 完成後，在瀏覽器中打開您的網站，您將看到新版本。

請注意，這是一個服務工作者驅動的應用程序，因此您將看到重新加載頁面的提示。

分期環境

您可以在將其合併到主要分支之前，在預生產環境中查看拉的請求。

1. 為您的新功能創建分支。

git checkout -b new-feature

在應用程序中進行任何代碼更改。在第一頁上可以清晰可見的內容，例如更改背景顏色。

2. 提交並將更改推向分支。

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

3. 轉到GitHub回購頁面，然後從分支機構創建一個新的拉請請求。

4. 轉到存儲庫的操作頁面，以確保工作流程正在運行。

5. 完成後，您將有一個新版本的網站部署到Azure到新的URL。您可以從Azure上的Workflow輸出或環境卡上的Azure門戶中獲取此URL。 GitHub Actions Bot還將將此URL發佈到您的拉請請求評論中。

6. 現在，您可以對新版本進行各種測試。

如果新版本看起來不錯，並且您將此拉的請求合併到主（SWA跟踪）分支，則工作流將自動將新版本部署到此軌道上的分支和刪除登台環境中。

請注意，即使您的github存儲庫是私人的，您的URL目前都可以通過其URL公開訪問您的應用程序。

？文件

使用Azure功能的API

您可以使用Azure功能為靜態Web應用程序構建自己的API。最簡單的選項是使用託管功能選項：您在api目錄中創建的所有Azure函數將自動部署到SWA。在此項目中，我們使用feedback功能來收集有關檢測到的正確或錯誤的BPM的統計信息。

為了測試它，即使沒有音樂播放，您也可以將“硬編碼” BPM值傳遞給應用程序：使用BPM參數。如何測試它：

1. 單擊“開始聆聽”按鈕。
2. 單擊“豎起大拇指”按鈕。
3. 檢查網絡發布請求，向https://bpmtech.no/api/feedback端點及其響應。

如何創建新的API函數：

1. 在VS代碼擴展中使用“創建HTTP函數”按鈕。

2. 跟隨創建嚮導。
3. 寫您的代碼。
4. 提交並將更改推向分支。
5. 您的功能將自動部署到SWA。

？文件

路由

Azure SWA支持自定義路由，使您可以：

• 設置重定向
• 組織單頁應用程序的導航退縮
• 設置自定義標題
• 註冊MIME類型
• 為HTTP錯誤定義自定義頁面
• 通過基於角色的訪問控制（RBAC）保護資源

您可以在staticwebapp.config.json中配置規則，您可以將其放置在repo的應用程序文件夾中的任何位置，因此不需要將其放入輸出（public）文件夾中）。

如何測試它：

1. 直接轉到 /關於頁面。您會看到該應用程序，而不是錯誤404，因為導航後備規則。
2. 從navigationfallback排除列表中轉到任何不存在的資源。您將看到此規則中配置的自定義404錯誤頁面。
3. 檢查響應標題。它們在此行上包含“ X-Power-by：Maxim Salnikov和Azure靜態Web應用程序”。
4. 轉到 /aboutme頁面。由於此規則，您將被重定向到 /大約。

請注意，託管申請由服務工作者控制。因此，在第一個負載後，路由可能看起來並不像上面所述。要在沒有服務工作者的情況下測試應用程序，請以私有/隱身模式開始新的瀏覽器會話。

？文件

驗證

在Azure靜態Web應用程序的幫助下，您可以使用基於角色的訪問控制（RBAC）保護應用程序資源。

設置身份驗證：

1. 您指定在staticwebapp.config.json文件中訪問特定URL所需的角色。有兩個內置角色： anonymous （適用於所有用戶）和authenticated （對於登錄的人）。
2. 如果用戶試圖無需角色訪問URL，則他們將獲得錯誤401。您可能需要將重定向設置為登錄頁面。
3. 要讓用戶登錄，您將用戶引導到內置身份提供商之一（Azure Active Directory，GitHub，Twitter）登錄頁面。例如，/.auth/login/twitter。 （您還可以使用路由規則為此頁面創建自定義URL。）。您的Azure SWA項目上的文件夾.auth是內置的，它是所謂的系統文件夾，其中包含一些有用的端點。
4. 登錄使用選定的身份提供商並同意共享個人信息（電子郵件或用戶句柄）的同意後，將將用戶重定向到應用程序。如果正確設置了角色，他們將獲得對請求的URL的訪問。
5. 要為用戶提供自定義角色（例如， administrator ），您可以在Azure門戶中使用“角色管理”選項卡。單擊“邀請”按鈕，填寫表格，然後單擊“生成”。您將收到一個鏈接，以發送給用戶接受該角色。

您可以在“角色管理”選項卡中管理用戶和角色。

6. 您可以通過將請求發送到/.auth/me端點來讀取已驗證的用戶憑據（例如，在UI中實現一些邏輯）。要查看API調用的身份驗證信息，請在請求中讀取x-ms-client-principal標頭。
7. 要註銷，您將用戶重定向到/.auth/logout頁面。
8. 要從應用程序中刪除個人識別信息（電子郵件或用戶句柄），您可以將用戶引導到與特定身份提供商相關的鏈接：/.auth/purge/twitter。

演示：

1. 嘗試訪問 /帳戶頁面。它配置為僅適用於經過authenticated用戶，該規則可用於。您將被重定向到Twitter登錄頁面並徵得同意。
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的實時BPM-Analyzer庫。
• 文件中的BPM檢測基於CarlTörnqvist的BPM檢測庫
• Spectrum分析儀基於Henrique Vianna的Audiomotion-Analyzer庫

作者

Maxim Salnikov。如果您對該項目，PWA，Azure靜態Web應用程序有任何疑問，請隨時與我聯繫。