scratch www
2.2.3 Hotfix
นี่คือเว็บไคลเอ็นต์โอเพ่นซอร์สของ Scratch! นี่คือโค้ดสำหรับเว็บไซต์ Scratch ส่วนใหญ่
โดยเฉพาะอย่างยิ่ง codebase นี้มีโค้ดสำหรับ:
โปรเจ็กต์ scratch-www มีแง่มุมต่างๆ มากมายในการออกแบบโดยเฉพาะสำหรับระบบแบ็กเอนด์ของเรา หากต้องการใช้กับโปรเจ็กต์ของคุณเอง คุณจะต้องดูตำแหน่งทั้งหมดที่เรียกใช้แบ็กเอนด์ และสร้างระบบแบ็กเอนด์ของคุณเองเพื่อทำหน้าที่เหล่านั้น
ในทางกลับกัน โครงการ scratch-gui ได้รับการออกแบบมาให้ทุกคนสามารถใช้งานได้ โดยไม่จำเป็นต้องสร้างระบบแบ็กเอนด์ แม้ว่าจะสามารถรองรับระบบแบ็กเอนด์สำหรับโปรเจ็กต์และการบันทึกสินทรัพย์ได้ด้วย
เรายินดีรับการมีส่วนร่วมของคุณใน codebase นี้! คุณอาจต้องการเริ่มต้นด้วยการเรียกดูรายการปัญหาที่เปิดอยู่ในปัจจุบันที่มีป้ายกำกับว่า "ต้องการความช่วยเหลือ"
การมีส่วนร่วมกับ scratch-www อาจทำได้ยากกว่าการมีส่วนร่วมกับ scratch-gui นี่เป็นเพราะว่า scratch-gui สามารถรันได้ด้วยตัวเอง โดยไม่จำเป็นต้องใช้บริการอื่นใดในการทำงาน ในขณะที่ scratch-www จำเป็นต้องสื่อสารกับระบบแบ็กเอนด์หลายระบบที่ทีม Scratch รันอยู่ (ดู "สิ่งนี้จะเข้ากับ repos อื่น ๆ ของ Scratch ได้อย่างไร" ข้างบน). หากคุณยังใหม่ต่อการมีส่วนร่วมกับซอร์สโค้ดของ Scratch เราขอแนะนำให้คุณเริ่มต้นด้วยการทำความคุ้นเคยกับ scratch-gui และรายการปัญหาที่เปิดอยู่ซึ่งมีป้ายกำกับว่า "ต้องการความช่วยเหลือ"
หากต้องการมีส่วนร่วม โปรดทำตามขั้นตอนมาตรฐานสำหรับการมีส่วนร่วมในโครงการบน GitHub
ดูไฟล์ LICENSE ใน repo นี้
ต่อไปนี้เป็นแหล่งข้อมูลบางส่วนที่จะช่วยให้คุณทำความคุ้นเคยกับวิธีที่เราทำงานบนโค้ดเบส Scratch:
เทคโนโลยีหลักที่สำคัญที่โค้ดเบสนี้ใช้ ได้แก่:
การทดสอบของเราใช้:
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง:
สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าการอ้างอิงทั้งหมดเป็นข้อมูลล่าสุด เนื่องจากโค้ด scratch-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 ที่เบราว์เซอร์สามารถอ่านได้ คุณสามารถสร้างเวอร์ชันชั่วคราวของไซต์บนเครื่องของคุณที่คุณสามารถเข้าถึงได้ผ่านเว็บเบราว์เซอร์ของคุณ
คุณสามารถ "สร้าง" ไซต์ได้ครั้งเดียวโดยเรียกใช้:
npm run buildหรือคุณสามารถเรียกใช้เซิร์ฟเวอร์ที่สร้างไฟล์ใหม่ในขณะที่คุณแก้ไขได้โดยการรันคำสั่ง:
npm run translate
npm start หมายเหตุ: npm run translate จะสร้างไดเร็กทอรี intl ไซต์จะสร้างขึ้นได้ดีหากไม่มีมัน แต่สตริงข้อความที่แปลได้จะไม่แสดงอย่างถูกต้องจนกว่าคุณจะสร้าง intl
ในระหว่างการพัฒนา npm start จะเฝ้าดูการอัปเดตใดๆ ที่คุณทำกับไฟล์ในรูปแบบ ./static หรือ ./src และทริกเกอร์การสร้างโปรเจ็กต์ใหม่ ในการพัฒนา บิลด์จะถูกจัดเก็บไว้ในหน่วยความจำ และไม่ได้ให้บริการจากไดเร็กทอรี ./build build
เมื่อคุณสร้างไซต์ท้องถิ่นแล้ว โดยใช้ npm run build หรือ npm start เว็บเบราว์เซอร์จะเข้าถึงไซต์ที่โฮสต์บนเครื่องของคุณได้โดยการป้อน localhost:8333 ลงในแถบที่อยู่ของเบราว์เซอร์
เมื่อเรียกใช้ npm start ต่อไปนี้เป็นข้อความบันทึกที่สำคัญที่ควรระวัง:
webpack: bundle is now VALID. – บันเดิลถูกโหลดลงในหน่วยความจำแล้ว และขณะนี้สามารถดูได้ในเบราว์เซอร์ ซึ่งจะแสดงทั้งเมื่อ npm start เสร็จสิ้นการตั้งค่า และเมื่อการอัปเดตที่คุณทำกับไฟล์ได้รับการคอมไพล์ใหม่เพื่อดูในเบราว์เซอร์webpack: bundle is now INVALID. – หากคุณเห็นสิ่งนี้ แสดงว่าคุณได้อัปเดตไฟล์ที่ยังคงถูกคอมไพล์เพื่อการดูผ่านเบราว์เซอร์ เพจต่างๆ จะยังคงดูได้ แต่จะไม่เห็นการอัปเดตใดๆ ที่คุณทำไว้ หากต้องการหยุดกระบวนการ npm start ซึ่งทำให้ไซต์พร้อมใช้งานสำหรับเว็บเบราว์เซอร์ของคุณ (สร้างไว้ด้านบนใน "การสร้าง") ให้ใช้ ^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 สำหรับการอัปเดตภาพขนาดย่อของโครงการ {} จะถูกแทนที่ด้วยรหัสโครงการเมื่อเรียกใช้คำขอ |
THUMBNAIL_HOST | '' | ชื่อโฮสต์สำหรับบริการผู้อัปโหลด |
GTM_ID | '' | รหัสเครื่องจัดการแท็กของ Google |
GTM_ENV_AUTH | '' | Google เครื่องจัดการแท็ก env และข้อมูลการตรวจสอบสิทธิ์ |
NODE_ENV | null | หากไม่ใช่ production แอปจะทำหน้าที่เหมือนกับการพัฒนา |
PORT | 8333 | พอร์ตสำหรับ devserver (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 ด้วยเส้นทางจริงไปยังไฟล์ที่คุณต้องการเรียกใช้
การทดสอบการรวมของเราถือว่าสภาพแวดล้อมที่ใหญ่กว่ากำลังทำงานอยู่มากกว่าแค่ scratch-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 เป็นเพราะเราไม่ได้ใช้คุณสมบัติการติดตามความครอบคลุมของการแตะtimeout ใช้สำหรับความยาวของชุดทดสอบการแตะทั้งหมด หากคุณได้รับข้อผิดพลาดการหมดเวลา คุณอาจต้องปรับค่านี้ (การทดสอบซีลีเนียมบางรายการใช้เวลาดำเนินการสักครู่) การทดสอบการรวมระบบสามารถทำได้โดยใช้ Saucelabs ซึ่งเป็นบริการออนไลน์ที่สามารถทดสอบการผสมผสานเบราว์เซอร์/ระบบปฏิบัติการหลายรายการจากระยะไกล (ปัจจุบันการทดสอบทั้งหมดเขียนขึ้นเพื่อใช้กับ Chrome บน Mac)
คุณจะต้องมีบัญชี 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:smoke:sauce |
SMOKE_HEADLESS | false | เรียกใช้เบราว์เซอร์ในโหมดโง่ ขุยๆ ณ.ตอนนี้ |
SAUCE_USERNAME | None | ชื่อผู้ใช้สำหรับบัญชี Sauce Labs ของคุณ |
SAUCE_ACCESS_KEY | None | รหัสการเข้าถึงสำหรับ Sauce Labs พบได้ในการตั้งค่าผู้ใช้ |
การปรับใช้เป็นการชั่วคราวหรือการใช้งานจริงจะอัปโหลดโค้ดไปยัง S3 และกำหนดค่าอย่างรวดเร็ว
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| ตัวแปร | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|
FASTLY_SERVICE_ID | '' | ID บริการที่รวดเร็วสำหรับ bin/configure-fastly.js |
FASTLY_API_KEY | '' | คีย์ API ที่รวดเร็วสำหรับ bin/configure-fastly.js |
FASTLY_ACTIVATE_CHANGES | false | เปิดใช้งานการเปลี่ยนแปลงและล้างข้อมูลทั้งหมดหลังจากกำหนดค่า |
AWS_ACCESS_KEY_ID | '' | รหัสคีย์การเข้าถึง AWS สำหรับ S3 |
AWS_SECRET_ACCESS_KEY | '' | รหัสการเข้าถึงความลับ AWS สำหรับ S3 |
S3_BUCKET_NAME | '' | ชื่อบัคเก็ต S3 ที่จะปรับใช้ |
เมื่อปรับใช้ API ของ Fastly จะถูกใช้เพื่อโคลนการกำหนดค่า VCL ที่ใช้งานอยู่ อัปเดตเฉพาะองค์ประกอบที่เกี่ยวข้องด้วยเนื้อหาจากไฟล์ routes.json ของ Repo นี้ และเปิดใช้งานการกำหนดค่า VCL ใหม่
ไฟล์ Routes.json ส่วนใหญ่ตรงไปตรงมา แต่บางฟิลด์อาจไม่ชัดเจนในวัตถุประสงค์
routeAlias ช่วยให้เรารักษาความยาวโดยรวมและความซับซ้อนของโค้ดเปรียบเทียบ regex ใน Fastly ไม่ให้ใหญ่เกินไป มี Regex ขนาดใหญ่แห่งหนึ่งซึ่งเราได้ทดสอบ URL คำขอขาเข้าอย่างรวดเร็วเพื่อดูว่าสามารถตอบกลับด้วยไฟล์คงที่ใน S3 ได้หรือไม่ หากไม่พบรายการที่ตรงกัน เราถือว่าเราต้องส่งคำขอไปยัง scratchr2 เราสามารถทดสอบ regex pattern เส้นทางทุกรายการใน routes.json ได้ แต่มีหลายรายการที่คล้ายกัน ดังนั้นเราจึงใช้ชุดที่ไม่ซ้ำกันของรายการ routeAlias ทั้งหมด ซึ่งสั้นกว่าและเร็วกว่าแทน
สำหรับการพัฒนาบน Windows คุณอาจจำเป็นต้องใช้โปรแกรมที่มีอินเทอร์เฟซ Unix ให้กับคุณ
มีหลายทางเลือกในการทำเช่นนี้:
นอกจากนี้คุณจะต้องติดตั้ง Node; คำแนะนำในการติดตั้ง Node บน WSL มีดังนี้
ขณะนี้เรากำลังอยู่ในกระบวนการเปลี่ยนมาใช้เว็บไคลเอ็นต์นี้จากโครงสร้างที่มีอยู่ของ Scratch เมื่อเราเปลี่ยนผ่าน จะมีปัญหาบางอย่างระหว่างทางที่เกี่ยวข้องกับวิธีที่ลูกค้ารายนี้จำเป็นต้องโต้ตอบกับโครงสร้างพื้นฐานที่มีอยู่เพื่อให้ทำงานได้อย่างถูกต้องในการผลิต
นอกเหนือจากการย้ายไปใช้สิ่งนี้เป็นเว็บไคลเอ็นต์ของเราแล้ว Scratch ยังเปลี่ยนไปใช้แบ็กเอนด์ API ใหม่ Scratch REST API (ซอร์สแบบปิด) เนื่องจากขณะนี้อยู่ระหว่างการพัฒนาและไม่สมบูรณ์ เราจึงถูกกำหนดให้ถอยกลับไปใช้ตำแหน่งข้อมูล Scratch ที่มีอยู่ หากไม่มีตำแหน่งข้อมูล API ซึ่งเป็นที่ที่ FALLBACK เข้ามา
ปัญหาส่วนใหญ่ที่เราพบในปัจจุบันเกี่ยวข้องกับการใช้ FALLBACK ตัวแปรนี้ใช้เพื่อระบุ URL ที่จะถอยกลับหากคำขอล้มเหลวภายในบริบทของเว็บไคลเอ็นต์นี้ หรือเมื่อใช้ API_HOST หากไม่ได้ระบุในกระบวนการ จะไม่ถูกนำมาใช้ และคำขอใดๆ ที่ไม่ได้ทำผ่านเว็บไคลเอ็นต์หรือ API จะไม่สามารถเข้าถึงได้
การตั้งค่า FALLBACK=https://scratch.mit.edu อนุญาตให้เว็บไคลเอ็นต์ดึงข้อมูลจากเว็บไซต์ Scratch ในสภาพแวดล้อมการพัฒนาของคุณ อย่างไรก็ตาม เนื่องจากข้อกังวลด้านความปลอดภัย การพยายามส่งข้อมูลไปยัง Scratch ผ่านสภาพแวดล้อมการพัฒนาของคุณจะไม่ทำงาน ซึ่งหมายความว่าสิ่งต่อไปนี้จะใช้งานไม่ได้ในขณะนี้:
นอกจากนี้ หากคุณตั้งค่า FALLBACK=https://scratch.mit.edu โปรดทราบว่าการคลิกลิงก์ไปยังส่วนของเว็บไซต์ที่ยังไม่ได้ย้ายข้อมูล (ปัจจุบัน เช่น Discuss , Profile , My Stuff ฯลฯ) จะนำคุณไปยัง เว็บไซต์ Scratch นั้นเอง
