scratch www
2.2.3 Hotfix
Este é o cliente web de código aberto do Scratch! Este é o código de grande parte do site Scratch.
Em particular, esta base de código inclui código para:
O projeto scratch-www tem muitos aspectos de seu design que são específicos de nossos sistemas backend. Para usá-lo em seu próprio projeto, você teria que examinar todos os locais onde ele faz chamadas de back-end e criar seus próprios sistemas de back-end para executar essas funções.
O projeto scratch-gui, por outro lado, foi projetado para poder ser usado por qualquer pessoa, sem a necessidade de criar sistemas backend, embora também possa suportar sistemas backend para economia de projetos e ativos.
Agradecemos suas contribuições para esta base de código! Você pode começar navegando na lista atual de problemas em aberto rotulados como "procura-se ajuda".
Contribuir para o scratch-www pode ser mais difícil do que contribuir para o scratch-gui. Isso ocorre porque o scratch-gui pode ser executado sozinho, sem precisar de nenhum outro serviço para funcionar, enquanto o scratch-www precisa se comunicar com vários sistemas backend que a equipe do Scratch executa (veja "Como isso se encaixa com outros repositórios do Scratch" acima). Se você é novo na contribuição para o código-fonte do Scratch, sugerimos que você comece se familiarizando com o scratch-gui e sua lista de problemas em aberto rotulados como "procura-se ajuda".
Para contribuir, siga as etapas padrão para contribuir com um projeto no GitHub.
Veja o arquivo LICENSE neste repositório.
Aqui estão alguns recursos para ajudá-lo a se familiarizar com como estamos trabalhando na base de código do Scratch:
As tecnologias principais significativas que esta base de código usa incluem:
Nossos testes usam:
Certifique-se de ter instalado:
É importante certificar-se de que todas as dependências estão atualizadas porque o código scratch-www só funciona com versões específicas das dependências. Você pode atualizar os pacotes usando o comando:
npm installEsses avisos podem ser ignorados com segurança:
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.Eles existem atualmente em static/js/lib .
Para compilar o código-fonte em pacotes HTML e JavaScript que os navegadores podem ler, você pode criar uma versão temporária do site em sua máquina que pode ser acessada por meio de seu navegador.
Você pode "construir" o site uma única vez, executando:
npm run buildOu você pode executar um servidor que reconstrói os arquivos conforme você os edita, executando os comandos:
npm run translate
npm start NOTA: npm run translate cria o diretório intl. O site será construído sem ele, mas as strings de texto traduzíveis não serão exibidas corretamente até que você crie o intl.
Durante o desenvolvimento, npm start observa qualquer atualização feita nos arquivos em ./static ou ./src e aciona uma reconstrução do projeto. No desenvolvimento, a compilação é armazenada na memória e não é veiculada no diretório ./build .
Depois de criar o site local, usando npm run build ou npm start , o site hospedado em sua máquina local poderá ser acessado por um navegador da Web digitando localhost:8333 na barra de endereço do navegador.
Ao executar npm start , aqui estão algumas mensagens de log importantes para ficar atento:
webpack: bundle is now VALID. – O pacote foi carregado na memória e agora pode ser visualizado no navegador. Isso aparecerá quando npm start tiver concluído sua configuração e também quando as atualizações feitas nos arquivos forem recompiladas para visualização no navegador.webpack: bundle is now INVALID. – Se você vir isso, significa que você fez atualizações nos arquivos que ainda estão sendo compilados para visualização no navegador. As páginas ainda estarão visíveis, mas não verão nenhuma atualização que você fez ainda. Para interromper o processo npm start que está disponibilizando o site para o seu navegador (criado acima em "To Build"), use ^C (control-c) no terminal.
npm start pode ser configurado com as seguintes variáveis de ambiente, definindo-as no início do comando, antes de npm start :
| Variável | Padrão | Descrição |
|---|---|---|
API_HOST | https://api.scratch.mit.edu | Nome do host para solicitações de API |
ASSET_HOST | https://assets.scratch.mit.edu | Nome do host para solicitações de ativos |
BACKPACK_HOST | https://backpack.scratch.mit.edu | Nome do host para solicitações de mochila |
PROJECT_HOST | https://projects.scratch.mit.edu | Nome do host para solicitações de projeto |
FALLBACK | '' | Local de passagem para site antigo |
THUMBNAIL_URI | /internalapi/project/thumbnail/{}/set/ | Modelo de URI para atualização de miniaturas de projetos, {} é substituído pelo ID do projeto ao invocar uma solicitação |
THUMBNAIL_HOST | '' | Nome do host do serviço de upload |
GTM_ID | '' | ID do Gerenciador de tags do Google |
GTM_ENV_AUTH | '' | Informações de ambiente e autenticação do Gerenciador de tags do Google |
NODE_ENV | null | Se não for production , o aplicativo atua como desenvolvimento |
PORT | 8333 | Porta para devserver (http://localhost:XXXX) |
NOTA: Porque por padrão API_HOST=https://api.scratch.mit.edu , esteja ciente de que, por padrão, você verá e interagirá com dados reais no site do Scratch.
A maioria dos nossos testes de unidade são executados usando Jest, mas os testes de unidade mais antigos usam a estrutura TAP.
Para construir a aplicação e executar todos os testes unitários e de localização, use o comando:
npm test Para executar um único arquivo de teste de unidade na linha de comando usando Jest, use o comando:
node_modules/.bin/jest ./test/unit/PATH/TO/FILENAME.test.js NOTA: substitua PATH/TO/FILENAME pelo caminho real para o arquivo que você deseja executar.
Nossos testes de integração assumem que um ambiente maior está sendo executado do que apenas o scratch-www sozinho; por exemplo, muitos exigem que um usuário de teste seja capaz de fazer login no site, o que requer back-end e suporte de banco de dados.
Por padrão, os testes são executados em nossa instância de teste, mas você pode passar em um local diferente com a variável de ambiente ROOT_URL (veja abaixo) se quiser executar os testes em outro local - por exemplo, sua compilação local.
Todos os nossos testes de integração usam Jest como estrutura de teste.
Para executar todos os testes de integração na linha de comando:
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 Os testes usam vários usuários com nomes de usuário semelhantes e a mesma senha. Eles usam o nome de usuário que você passa com SMOKE_USERNAME, bem como o mesmo nome de usuário com 1, 2, 3, 4, 5 e 6 (em breve também serão números mais altos) anexados ao final. Portanto, se você usar o nome de usuário "test", também usará o nome de usuário "test1", "test2", "test3", etc. Certifique-se de ter criado contas com este padrão e use a mesma senha para todas as contas envolvidas.
Você pode usar qualquer conjunto de nomes de usuário que se enquadre nesse padrão. Cada conta precisa compartilhar a mesma senha, que é transmitida como SMOKE_PASSWORD.
Várias variáveis de ambiente precisam ser passadas para que os testes sejam executados. A maioria deles tem padrões que apontam para o servidor temporário.
Para executar um único arquivo na linha de comando usando Jest:
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/jest ./test/integration/filename.test.jsPara executar um único arquivo na linha de comando usando 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 faz com que o tap use o antigo estilo de relatório, o que evita um erro com o pacote "nyc"--no-coverage é porque não usamos o recurso de rastreamento de cobertura do taptimeout é para a duração de todo o conjunto de testes de toque; se você estiver recebendo um erro de tempo limite, pode ser necessário ajustar esse valor (alguns dos testes do Selenium demoram um pouco para serem executados) Os testes de integração podem ser executados usando o Saucelabs, um serviço online que pode testar remotamente várias combinações de navegador/sistema operacional. (Atualmente, todos os testes são escritos para uso no Chrome no Mac).
Você precisará de uma conta Saucelabs para usá-lo para testes. Se você tiver uma, poderá encontrar sua chave de acesso:
Para executar testes usando Saucelabs, execute o comando:
SMOKE_USERNAME=username SMOKE_PASSWORD=password SAUCE_USERNAME=saucelabsUsername SAUCE_ACCESS_KEY=saucelabsAccessKey ROOT_URL=https://scratch.mit.edu npm run test:integration:remoteNOTA: Atualmente os testes Jest não serão executados com Saucelabs.
| Variável | Padrão | Descrição |
|---|---|---|
ROOT_URL | scratch.ly | Local onde você deseja executar os testes |
SMOKE_USERNAME | None | Nome de usuário do usuário do Scratch com o qual você está se conectando para testar |
SMOKE_PASSWORD | None | Senha do usuário do Scratch com o qual você está entrando para testar |
SMOKE_REMOTE | false | Testes com Sauce Labs ou não. Verdadeiro se estiver executando test:smoke:sauce |
SMOKE_HEADLESS | false | Execute o navegador no modo headless. Fraco no momento |
SAUCE_USERNAME | None | Nome de usuário da sua conta Sauce Labs |
SAUCE_ACCESS_KEY | None | Chave de acesso para Sauce Labs encontrada em Configurações do usuário |
A implantação em teste ou produção fará upload do código para o S3 e configurará rapidamente.
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| Variável | Padrão | Descrição |
|---|---|---|
FASTLY_SERVICE_ID | '' | ID de serviço Fastly para bin/configure-fastly.js |
FASTLY_API_KEY | '' | Chave de API Fastly para bin/configure-fastly.js |
FASTLY_ACTIVATE_CHANGES | false | Ative as alterações e limpe tudo após configurar |
AWS_ACCESS_KEY_ID | '' | ID da chave de acesso AWS para S3 |
AWS_SECRET_ACCESS_KEY | '' | Chave de acesso secreta da AWS para S3 |
S3_BUCKET_NAME | '' | Nome do bucket S3 para implantação |
Ao implantar, a API do Fastly é usada para clonar a configuração VCL ativa, atualizar apenas o componente relevante com o conteúdo do arquivo routes.json deste repositório e ativar a nova configuração VCL.
Grande parte do arquivo Routes.json é simples, mas alguns campos não são óbvios em sua finalidade.
routeAlias nos ajuda a evitar que o comprimento geral e a complexidade do código de comparação de regex no Fastly fiquem muito grandes. Há um grande regex que testamos rapidamente o URL da solicitação recebida para saber se ele pode responder com um arquivo estático no S3; se nenhuma correspondência for encontrada, presumimos que precisamos passar a solicitação para scratchr2. Poderíamos testar cada regex pattern de rota em routes.json , mas muitos são semelhantes, então, em vez disso, pegamos apenas o conjunto exclusivo de todas as entradas routeAlias , que é mais curto e rápido.
Para desenvolvimento em Windows, você provavelmente precisará usar um programa que forneça uma interface Unix.
Existem várias opções para fazer isso:
Além disso, você precisará instalar o Node; aqui estão as instruções para instalar o Node no WSL.
No momento, estamos no processo de transição da estrutura existente do Scratch para este cliente web. À medida que fazemos a transição, surgirão alguns problemas relacionados à forma como esse cliente precisa interagir com a infraestrutura existente para funcionar corretamente na produção.
Além de migrar para usá-lo como nosso cliente web, o Scratch também está fazendo a transição para usar um novo back-end de API, Scratch REST API (código fechado). Como isso também está em desenvolvimento e incompleto, estamos configurados para voltar a usar endpoints Scratch existentes se um endpoint API não existir – que é onde entra o FALLBACK .
A maioria dos problemas que temos atualmente gira em torno do uso de FALLBACK . Esta variável é usada para especificar em qual URL recorrer caso uma solicitação falhe no contexto deste cliente web ou ao usar o API_HOST . Se não for especificado no processo, não será utilizado e qualquer solicitação que não seja feita por meio do cliente web ou da API ficará inacessível.
Definir FALLBACK=https://scratch.mit.edu permite que o cliente web recupere dados do site Scratch em seu ambiente de desenvolvimento. Entretanto, por questões de segurança, tentar enviar dados para o Scratch através do seu ambiente de desenvolvimento não funcionará. Isso significa que as seguintes coisas serão quebradas por enquanto:
Além disso, se você definir FALLBACK=https://scratch.mit.edu , esteja ciente de que clicar em links para partes do site ainda não migradas (atualmente como Discuss , Profile , My Stuff , etc.) o levará para o próprio site do Scratch.
