scratch www
2.2.3 Hotfix
هذا هو عميل الويب مفتوح المصدر الخاص بـ Scratch! هذا هو الرمز الخاص بالكثير من مواقع Scratch.
على وجه الخصوص، تتضمن قاعدة التعليمات البرمجية هذه تعليمات برمجية لـ:
يحتوي مشروع "Scratch-www" على الكثير من جوانب تصميمه الخاصة بأنظمتنا الخلفية. لاستخدامها في مشروعك الخاص، سيتعين عليك إلقاء نظرة على جميع الأماكن التي تجري فيها مكالمات الواجهة الخلفية، وإنشاء أنظمة الواجهة الخلفية الخاصة بك لأداء هذه الوظائف.
من ناحية أخرى، تم تصميم مشروع Scratch-gui ليكون قادرًا على استخدامه من قبل أي شخص، دون الحاجة إلى إنشاء أنظمة خلفية، على الرغم من أنه يمكنه أيضًا دعم الأنظمة الخلفية لحفظ المشروع والأصول.
نحن نرحب بمساهماتك في قاعدة التعليمات البرمجية هذه! قد ترغب في البدء بتصفح القائمة الحالية للمشكلات المفتوحة التي تحمل عنوان "المساعدة المطلوبة".
قد تكون المساهمة في الصفر www أكثر صعوبة من المساهمة في الصفر واجهة المستخدم الرسومية. وذلك لأنه يمكن تشغيل تطبيقcratch-gui من تلقاء نفسه، دون الحاجة إلى تشغيل أي خدمات أخرى، بينما يحتاج تطبيقcratch-www إلى التواصل مع العديد من أنظمة الواجهة الخلفية التي يديرها فريق Scratch (راجع "كيف يتناسب هذا مع مستودعات Scratch الأخرى" فوق). إذا كنت جديدًا في المساهمة في الكود المصدري لـ Scratch، فنقترح عليك أن تبدأ بالتعرف على أداة Scratch-gui وقائمة المشكلات المفتوحة التي تحمل عنوان "المساعدة المطلوبة".
للمساهمة، يرجى اتباع الخطوات القياسية للمساهمة في مشروع على GitHub.
راجع ملف الترخيص في هذا الريبو.
فيما يلي بعض الموارد لمساعدتك في التعرف على كيفية عملنا على قاعدة بيانات 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 .
بمجرد إنشاء الموقع المحلي، باستخدام 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 Tag Manager |
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 بالمسار الفعلي للملف الذي ترغب في تشغيله.
تفترض اختبارات التكامل الخاصة بنا أن هناك بيئة أكبر تعمل من مجرد نقطة الصفر www بمفردها؛ على سبيل المثال، يتطلب الكثير أن يتمكن المستخدم الاختباري من تسجيل الدخول إلى الموقع، الأمر الذي يتطلب دعم الواجهة الخلفية وقاعدة البيانات.
افتراضيًا، يتم تشغيل الاختبارات مقابل مثيل التدريج الخاص بنا، ولكن يمكنك المرور في موقع مختلف باستخدام متغير البيئة 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 يجعل النقر يستخدم أسلوب إعداد التقارير القديم، مما يتجنب حدوث خطأ في الحزمة "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 | اختبارات مع مختبرات صلصة أم لا. صحيح في حالة إجراء اختبار:دخان:صلصة |
SMOKE_HEADLESS | false | قم بتشغيل المتصفح في وضع مقطوعة الرأس. قشاري في الوقت الراهن |
SAUCE_USERNAME | None | اسم المستخدم لحساب Sauce Labs الخاص بك |
SAUCE_ACCESS_KEY | None | تم العثور على مفتاح الوصول إلى Sauce Labs ضمن إعدادات المستخدم |
سيؤدي النشر إلى التدريج أو الإنتاج إلى تحميل التعليمات البرمجية إلى S3 وتكوين Fastly.
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| عامل | تقصير | وصف |
|---|---|---|
FASTLY_SERVICE_ID | '' | معرف خدمة Fastly لـ bin/configure-fastly.js |
FASTLY_API_KEY | '' | مفتاح Fastly 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 للنشر فيه |
عند النشر، يتم استخدام واجهة برمجة تطبيقات Fastly لاستنساخ تكوين VCL النشط، وتحديث المكون ذي الصلة فقط بمحتوى من ملف routes.json الخاص بهذا الريبو، وتنشيط تكوين VCL الجديد.
يعد الكثير من ملفات Routes.json واضحة ومباشرة، لكن بعض الحقول ليست واضحة في غرضها.
يساعدنا routeAlias في الحفاظ على الطول والتعقيد الإجماليين لرمز مقارنة regex في Fastly من أن يصبح كبيرًا جدًا. يوجد تعبير عادي واحد كبير قمنا باختبار عنوان URL للطلب الوارد عليه سريعًا لمعرفة ما إذا كان يمكنه الرد بملف ثابت في S3؛ إذا لم يتم العثور على أي تطابق، فإننا نفترض أننا بحاجة إلى تمرير الطلب إلى Scratchr2. يمكننا اختبار كل تعبير عادي pattern المسار في routes.json .json، ولكن الكثير منها متشابه، لذلك بدلاً من ذلك نأخذ المجموعة الفريدة من جميع إدخالات routeAlias ، وهي أقصر وأسرع.
للتطوير على Windows، ربما ستحتاج إلى استخدام برنامج يوفر لك واجهة Unix.
هناك عدة خيارات للقيام بذلك:
بالإضافة إلى ذلك، سوف تحتاج إلى تثبيت Node؛ فيما يلي تعليمات لتثبيت Node على WSL.
نحن حاليًا بصدد الانتقال إلى عميل الويب هذا من البنية الحالية لبرنامج Scratch. أثناء عملية الانتقال، ستكون هناك بعض المشكلات على طول الطريق والتي تتعلق بكيفية تفاعل هذا العميل مع البنية التحتية الحالية للعمل بشكل صحيح في الإنتاج.
علاوة على الانتقال إلى استخدام هذا كعميل الويب الخاص بنا، ينتقل Scratch أيضًا إلى استخدام واجهة API خلفية جديدة، وهي Scratch REST API (مصدر مغلق). وبما أن هذا أيضًا قيد التطوير حاليًا وغير مكتمل، فقد تم إعدادنا للعودة إلى استخدام نقاط نهاية Scratch الحالية في حالة عدم وجود نقطة نهاية API - وهنا يأتي FALLBACK .
تدور معظم المشكلات التي نواجهها حاليًا حول استخدام FALLBACK . يتم استخدام هذا المتغير لتحديد عنوان URL الذي سيتم الرجوع إليه في حالة فشل الطلب في سياق عميل الويب هذا، أو عند استخدام API_HOST . إذا لم يتم تحديده في العملية، فلن يتم استخدامه، ولن يكون من الممكن الوصول إلى أي طلب لم يتم تقديمه من خلال عميل الويب أو واجهة برمجة التطبيقات.
يتيح إعداد FALLBACK=https://scratch.mit.edu لعميل الويب استرداد البيانات من موقع Scratch على الويب في بيئة التطوير الخاصة بك. ومع ذلك، وبسبب المخاوف الأمنية، فإن محاولة إرسال البيانات إلى Scratch من خلال بيئة التطوير الخاصة بك لن تنجح. وهذا يعني أنه سيتم كسر الأشياء التالية في الوقت الحالي:
بالإضافة إلى ذلك، إذا قمت بتعيين FALLBACK=https://scratch.mit.edu ، فكن على علم بأن النقر على الروابط إلى أجزاء من موقع الويب لم يتم ترحيلها بعد (حاليًا مثل Discuss Profile My Stuff وما إلى ذلك) سينقلك إلى موقع سكراتش نفسه.
