scratch www
2.2.3 Hotfix
這是 Scratch 的開源 Web 用戶端！這是 Scratch 網站大部分內容的程式碼。
特別是，該程式碼庫包含以下程式碼：
scrap-www 專案的許多設計方面都針對我們的後端系統。要將它用於您自己的項目，您必須查看它進行後端呼叫的所有位置，並建立您自己的後端系統來執行這些功能。
另一方面，scratch-gui 專案被設計為任何人都可以使用，而無需創建後端系統，儘管它也可以支援用於專案和資產保存的後端系統。
我們歡迎您對此程式碼庫做出貢獻！您可能需要先瀏覽標記為「需要協助」的目前未解決問題清單。
為 scrap-www 貢獻可能比為 scrap-gui 做貢獻更困難。這是因為 scrap-gui 可以獨立運行，不需要運行任何其他服務，而 scrap-www 需要與 Scratch 團隊運行的多個後端系統進行通訊（請參閱「這如何與其他 Scratch 儲存庫配合」）多於）。如果您不熟悉 Scratch 的原始程式碼，我們建議您先熟悉 scrap-gui 及其標記為「需要協助」的未決問題清單。
要做出貢獻，請按照為 GitHub 上的專案做出貢獻的標準步驟進行操作。
請參閱此儲存庫中的許可證文件。
以下是一些資源，可幫助您熟悉我們如何處理 Scratch 程式碼庫：
此程式碼庫所使用的重要核心技術包括：
我們的測試使用：
確保您已經安裝：
確保所有依賴項都是最新的非常重要，因為 scrap-www 程式碼僅適用於特定版本的依賴項。您可以使用以下命令更新軟體包：
npm install可以安全地忽略這些警告：
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of redux@^2.0.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.7 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.這些目前存在於 static/js/lib 中。
若要將原始程式碼編譯為瀏覽器可以讀取的 HTML 和 JavaScript 套件，您可以在電腦上建立一個可以透過 Web 瀏覽器存取的臨時版本的網站。
您可以透過執行以下命令一次「建置」該網站：
npm run build或者，您可以運行一個伺服器，透過執行以下命令來在編輯檔案時重建檔案：
npm run translate
npm start注意： npm run translate建置 intl 目錄。如果沒有它，該網站將構建得很好，但可翻譯的文本字串將無法正確顯示，直到您構建了 intl。
在開發過程中， npm start會監視您對./static或./src中的檔案所做的任何更新，並觸發專案的重建。在開發中，建立儲存在記憶體中，而不是從./build目錄提供。
使用npm run build或npm start建置本機網站後，可以透過 Web 瀏覽器在瀏覽器的網址列中輸入localhost:8333來存取本機電腦上所託管的網站。
執行npm start時，請注意以下一些重要的日誌訊息：
webpack: bundle is now VALID. – 該套件已載入到記憶體中，現在可以在瀏覽器中查看。一旦npm start完成設置，以及您對文件所做的更新被重新編譯以在瀏覽器中查看後，這都會顯示。webpack: bundle is now INVALID. – 如果您看到此內容，則表示您已對仍在編譯以供瀏覽器查看的檔案進行了更新。頁面仍然可見，但他們不會看到您所做的任何更新。要停止npm start進程，該進程使您的 Web 瀏覽器可以使用該網站（在上面的「建置」中建立），請在終端機中使用^C (control-c)。
npm start可以使用以下環境變數進行配置，方法是在npm start之前的命令開頭設定它們：
| 多變的 | 預設 | 描述 |
|---|---|---|
API_HOST | https://api.scratch.mit.edu | API 請求的主機名 |
ASSET_HOST | https://assets.scratch.mit.edu | 資產請求的主機名 |
BACKPACK_HOST | https://backpack.scratch.mit.edu | 背包請求的主機名 |
PROJECT_HOST | https://projects.scratch.mit.edu | 專案請求的主機名 |
FALLBACK | '' | 舊站點的穿越位置 |
THUMBNAIL_URI | /internalapi/project/thumbnail/{}/set/ | 用於更新項目縮圖的 URI 模板，在呼叫請求時將{}替換為項目 ID |
THUMBNAIL_HOST | '' | 上傳服務的主機名 |
GTM_ID | '' | Google 追蹤程式碼管理員 ID |
GTM_ENV_AUTH | '' | Google 追蹤程式碼管理員環境和身份驗證訊息 |
NODE_ENV | null | 如果不是production ，應用程式就像開發一樣 |
PORT | 8333 | 開發伺服器連接埠 (http://localhost:XXXX) |
注意：因為預設情況下API_HOST=https://api.scratch.mit.edu ，所以請注意，預設情況下，您將在 Scratch 網站上看到真實資料並與之互動。
我們的大多數單元測試都使用 Jest 運行，但較舊的單元測試使用 TAP 框架。
要建立應用程式並執行所有單元和本地化測試，請使用以下命令：
npm test 若要使用 Jest 從命令列執行單一單元測試文件，請使用以下命令：
node_modules/.bin/jest ./test/unit/PATH/TO/FILENAME.test.js注意：將PATH/TO/FILENAME替換為您要執行的檔案的實際路徑。
我們的整合測試假設正在運行一個更大的環境，而不僅僅是 scrap-www 本身；例如，許多要求測試用戶能夠登入站點，這需要後端和資料庫支援。
預設情況下，測試會針對我們的 Staging 執行個體執行，但如果您想針對另一個位置（例如本機建置）執行測試，您可以使用 ROOT_URL 環境變數（請參閱下文）傳入不同的位置。
我們所有的整合測試都使用 Jest 作為我們的測試框架。
要從命令列運行所有整合測試：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu UNOWNED_SHARED_PROJECT_ID= # UNOWNED_UNSHARED_PROJECT_ID=# OWNED_SHARED_PROJECT_ID=# OWNED_UNSHARED_PROJECT_ID=# npm run test:integration 測試使用具有相似使用者名稱和相同密碼的多個使用者。他們使用您透過 SMOKE_USERNAME 傳入的用戶名以及相同的用戶名，並在其末尾附加 1、2、3、4、5 和 6（很快也會是更大的數字）。因此，如果您使用使用者名稱“test”，它也會使用使用者名稱“test1”、“test2”、“test3”等。 。
您可以使用任何符合此模式的使用者名稱集。每個帳戶需要共享相同的密碼，該密碼以 SMOKE_PASSWORD 形式傳入。
需要傳入幾個環境變數才能執行測試。它們中的大多數都有指向臨時伺服器的預設值。
要使用 Jest 從命令列運行單一檔案：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/jest ./test/integration/filename.test.js要使用 TAP 從命令列運行單一檔案：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/tap ./test/integration-legacy/smoke-testing/filename.js -R classic --no-coverage --timeout=3600-R classic讓 Tap 使用舊的報告樣式，這避免了「nyc」套件的錯誤--no-coverage是因為我們不使用tap的覆蓋追蹤功能timeout參數適用於整個 Tap 測試套件的長度；如果您遇到逾時錯誤，您可能需要調整此值（某些 Selenium 測試需要一段時間才能運行） 整合測試可以使用 Saucelabs 來運行，這是一種可以遠端測試多個瀏覽器/作業系統組合的線上服務。 （目前，所有測試都是為 Mac 上的 Chrome 編寫的）。
您需要一個 Saucelabs 帳戶才能使用它進行測試。如果您有，您可以找到您的存取金鑰：
若要使用 Saucelabs 執行測試，請執行以下命令：
SMOKE_USERNAME=username SMOKE_PASSWORD=password SAUCE_USERNAME=saucelabsUsername SAUCE_ACCESS_KEY=saucelabsAccessKey ROOT_URL=https://scratch.mit.edu npm run test:integration:remote注意：目前 Jest 測試無法與 Saucelabs 一起運行。
| 多變的 | 預設 | 描述 |
|---|---|---|
ROOT_URL | scratch.ly | 您想要運行測試的位置 |
SMOKE_USERNAME | None | 您登入以進行測試的 Scratch 使用者的使用者名稱 |
SMOKE_PASSWORD | None | 您用於登入進行測試的 Scratch 使用者的密碼 |
SMOKE_REMOTE | false | 是否與 Sauce Labs 進行測試。如果執行 test:sm:sauce 則為 True |
SMOKE_HEADLESS | false | 以無頭模式運行瀏覽器。此刻一片片狀 |
SAUCE_USERNAME | None | 您的 Sauce Labs 帳戶的使用者名稱 |
SAUCE_ACCESS_KEY | None | 在使用者設定下找到 Sauce Lab 的存取金鑰 |
部署到暫存或生產會將程式碼上傳到 S3 並配置 Fastly。
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| 多變的 | 預設 | 描述 |
|---|---|---|
FASTLY_SERVICE_ID | '' | bin/configure-fastly.js的 Fastly 服務 ID |
FASTLY_API_KEY | '' | bin/configure-fastly.js的 Fastly API 金鑰 |
FASTLY_ACTIVATE_CHANGES | false | 配置後啟動更改並清除所有內容 |
AWS_ACCESS_KEY_ID | '' | S3 的 AWS 存取金鑰 ID |
AWS_SECRET_ACCESS_KEY | '' | S3 的 AWS 秘密存取金鑰 |
S3_BUCKET_NAME | '' | 要部署到的 S3 儲存桶名稱 |
部署時，Fastly 的 API 用於複製活動的 VCL 配置，使用此儲存庫的routes.json檔案中的內容僅更新相關元件，並啟動新的 VCL 配置。
routes.json 檔案的大部分內容都很簡單，但有些欄位的用途並不明顯。
routeAlias幫助我們防止 Fastly 中正規表示式比較程式碼的整體長度和複雜度變得太大。有一個大型正規表示式，我們可以快速測試傳入的請求 URL，以了解它是否可以使用 S3 中的靜態檔案回應；如果未找到匹配項，我們假設需要將請求傳遞給 scrapr2。我們可以測試routes.json中的每個路由pattern正規表示式，但許多都是相似的，因此我們只採用所有routeAlias條目的唯一集，這樣更短、更快。
對於 Windows 上的開發，您可能需要使用為您提供 Unix 介面的程式。
有多種選擇可以執行此操作：
此外，您還需要安裝 Node；以下是在 WSL 上安裝 Node 的說明。
我們目前正在從 Scratch 的現有結構過渡到此 Web 用戶端。當我們過渡時，會出現一些問題，這些問題與客戶端需要如何與現有基礎設施互動才能在生產中正常運作有關。
除了遷移到使用它作為我們的 Web 用戶端之外，Scratch 還過渡到使用新的 API 後端 Scratch REST API（閉源）。由於該功能目前也在開發中且不完整，因此如果 API 端點不存在，我們將回退到使用現有的 Scratch 端點——這就是FALLBACK用武之地。
目前我們遇到的大多數問題都圍繞著FALLBACK的使用。此變數用於指定如果請求在此 Web 用戶端上下文中失敗或使用API_HOST時要回退到哪個 URL。如果流程中未指定，則不會使用，任何非透過 Web 用戶端或 API 發出的請求都將無法到達。
設定FALLBACK=https://scratch.mit.edu允許 Web 用戶端從開發環境中的 Scratch 網站檢索資料。但是，出於安全考慮，嘗試透過開發環境將資料傳送到 Scratch 是行不通的。這意味著以下內容將暫時被破壞：
此外，如果您設定FALLBACK=https://scratch.mit.edu ，請注意，點擊尚未遷移到的網站部分的連結（目前如Discuss 、 Profile 、 My Stuff等）將帶您造訪Scratch 網站本身。
