scratch www
2.2.3 Hotfix
Это веб-клиент Scratch с открытым исходным кодом! Это код большей части веб-сайта Scratch.
В частности, эта кодовая база включает в себя код для:
Проект Scratch-www имеет множество особенностей, характерных для наших серверных систем. Чтобы использовать его в своем проекте, вам придется просмотреть все места, где он выполняет серверные вызовы, и создать свои собственные серверные системы для выполнения этих функций.
С другой стороны, проект Scratch-gui предназначен для использования кем угодно без необходимости создания серверных систем, хотя он также может поддерживать серверные системы для сохранения проектов и активов.
Мы приветствуем ваш вклад в эту кодовую базу! Возможно, вы захотите начать с просмотра текущего списка открытых проблем с пометкой «Требуется помощь».
Содействие Scratch-www может быть более сложным, чем участие в Scratch-gui. Это связано с тем, что Scratch-gui можно запускать самостоятельно, без необходимости запуска каких-либо других служб, в то время как Scratch-www необходимо взаимодействовать с несколькими серверными системами, которые запускает команда Scratch (см. «Как это сочетается с другими репозиториями Scratch»). выше). Если вы новичок в работе с исходным кодом Scratch, мы предлагаем вам начать с ознакомления со Scratch-gui и его списком открытых проблем с пометкой «Требуется помощь».
Чтобы внести свой вклад, выполните стандартные шаги для участия в проекте на GitHub.
См. файл ЛИЦЕНЗИИ в этом репозитории.
Вот несколько ресурсов, которые помогут вам познакомиться с тем, как мы работаем над кодовой базой Scratch:
Важные основные технологии, используемые в этой кодовой базе, включают:
В наших тестах используются:
Убедитесь, что у вас установлено:
Важно убедиться, что все зависимости обновлены, поскольку код с нуля работает только с определенными версиями зависимостей. Вы можете обновить пакеты с помощью команды:
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 фактическим путем к файлу, который вы хотите запустить.
Наши интеграционные тесты предполагают, что работает более крупная среда, чем просто Scratch-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 заставляет Tap использовать старый стиль отчетов, что позволяет избежать ошибок с пакетом «nyc».--no-coverage — потому что мы не используем функцию отслеживания покрытия Taptimeout относится к длине всего набора тестов Tap; если вы получаете ошибку тайм-аута, возможно, вам придется отрегулировать это значение (некоторые тесты Selenium требуют некоторого времени для запуска) Интеграционные тесты можно запускать с помощью 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 или нет. Истинно, если выполняется тест:дым:соус |
SMOKE_HEADLESS | false | Запустите браузер в безголовом режиме. Хлипкий на данный момент |
SAUCE_USERNAME | None | Имя пользователя для вашей учетной записи Sauce Labs |
SAUCE_ACCESS_KEY | None | Ключ доступа к лаборатории соусов находится в настройках пользователя. |
При развертывании в промежуточной или рабочей среде код будет загружен в S3 и настроен быстро.
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 | '' | API-ключ Fastly для 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 этого репозитория и активации новой конфигурации VCL.
Большая часть файла Routes.json проста, но назначение некоторых полей неочевидно.
routeAlias помогает нам предотвратить слишком большую длину и сложность кода сравнения регулярных выражений в Fastly. Существует одно большое регулярное выражение, по которому мы быстро проверяем URL-адрес входящего запроса, чтобы узнать, может ли он ответить статическим файлом в S3; если совпадений не найдено, мы предполагаем, что нам нужно передать запрос на Scratchr2. Мы могли бы протестировать каждое регулярное выражение 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.
