datacamp light
v2.5.0
Roteiro | Documentos
Adicione o script à sua página HTML (há um exemplo em examples/standalone-example.html ):
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >É isso! Se seu aplicativo adicionar exercícios DataCamp Light após o carregamento inicial da página (por exemplo, em aplicativos React), chame a função a seguir para inicializar esses novos exercícios:
initAddedDCLightExercises ( ) ;Você também pode usar a biblioteca JavaScript em uma resposta stackoverflow.com incluindo o exercício e a tag de script como um snippet.
Após incluir a biblioteca JavaScript, você pode começar a escrever blocos HTML no formato abaixo. Eles serão convertidos dinamicamente em exercícios.
< div data-datacamp-exercise data-lang =" r " >
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >
< div data-type =" hint " > Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > . </ div >
</ div > Como podemos ver no exemplo, todo o exercício está contido em um único elemento <div> com dois atributos de dados data-datacamp-exercise e data-lang . O primeiro atributo data-datacamp-exercise indica que o <div> deve ser tratado como um exercício DataCamp Light, enquanto o outro atributo data-lang especifica qual linguagem de programação deve ser usada. Os valores aceitos para data-lang são r e python . Existe também um atributo opcional data-height que pode definir a altura em px da div (a altura mínima é 300px ) ou definir o tamanho de acordo com a quantidade de linhas de código de amostra: data-height="auto" .
O código pré-exercício é executado quando a sessão R/Python é inicializada. Você pode usá-lo para pré-carregar conjuntos de dados, pacotes, etc. para alunos. A maneira de especificar isso é definindo uma tag <code> contendo seu código de inicialização e definindo o atributo data-type como pre-exercise-code como este:
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > Em nosso exemplo inicializamos a variável (bastante inútil) b com valor 6 .
Para definir o código de amostra que estará presente inicialmente no editor de código, uma tag <code> deve ser definida contendo o código de amostra e o atributo data-type deve ser definido como sample-code assim:
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Nosso exemplo mostra simplesmente alguns comentários junto com algumas novas linhas. A biblioteca JavaScript também se encarrega de remover o recuo inicial, então não há necessidade de se preocupar com isso.
Para definir o código da solução, uma tag <code> deve ser definida contendo o código da solução e o atributo data-type deve ser definido como solution assim:
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Um Teste de Correção de Envio é usado para verificar se o código enviado pelo usuário resolve corretamente o exercício. Para obter informações detalhadas sobre isso, você pode consultar a documentação do R e a documentação do Python. A maneira de especificar o SCT é definindo uma tag <code> contendo seu código SCT e definindo o atributo data-type como sct assim:
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > No nosso exemplo a primeira linha verifica se o usuário declarou a variável a e se o seu valor corresponde ao do código da solução. A segunda linha verifica se a função print foi chamada e por último é especificada uma mensagem de sucesso que será mostrada ao usuário quando o exercício for concluído com sucesso.
Para especificar uma dica, uma tag deve ser definida contendo a dica e o atributo data-type deve ser definido como hint assim:
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > É possível que a dica contenha, por exemplo, tags <code> como é o caso do nosso exemplo.
data-show-run-button para sempre mostrar o botão "Executar", para que seus visitantes possam testar o código sem enviá-lo.data-no-lazy-loading para carregar todos os exercícios assim que a página for carregada, em vez de esperar que o usuário role para baixo até eles. Isso pode causar problemas de desempenho, mas pode corrigir problemas de compatibilidade com páginas baseadas em iFrame.[ data-datacamp-exercise ] {
visibility : hidden;
} div s com o atributo data-datacamp-exercise são convertidos em uma versão mínima da interface de aprendizagem do DataCamp (para ver o negócio real, você pode visitar www.datacamp.com). Ele contém um gerenciador de sessão que se conecta aos servidores do DataCamp para fornecer uma sessão R ou Python como se você estivesse trabalhando em seu sistema local. Os ambientes de computação R e Python apresentam os pacotes mais populares:
Se quiser usar um pacote que não está disponível, crie um issue e podemos instalá-lo (não é possível instalar pacotes em tempo de execução).
Se você gostaria de contribuir, ótimo! Você pode começar lendo esta seção do leia-me para ter uma ideia dos detalhes técnicos deste projeto. Na maior parte, ele é estruturado como um projeto React/Redux padrão (escrito em TypeScript), portanto, se você não estiver familiarizado com um deles, talvez queira ler um pouco.
Para desenvolver o DataCamp Light, você precisará executar o aplicativo localmente. Este repositório inclui alguns exemplos de exercícios para testá-lo.
Comece clonando este repositório, instalando as dependências e iniciando o servidor de desenvolvimento. Conforme você faz alterações, a página será recarregada com seu novo código.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
A pasta vendor/ inclui código minificado de alguns pacotes internos do DataCamp que não estão hospedados publicamente no momento.
Por favor, leia estes dois documentos antes de começar a implementar qualquer teste:
Os arquivos de teste são nomeados como {moduleName}.spec.js .
npm test Como um redutor é uma função pura, não é tão complicado testá-lo. Você precisa usar uma semente para criar um estado simulado. Então você pode passá-lo para o redutor como argumento junto com a ação que deseja testar.
Use o teste de instantâneo para garantir que os componentes não sejam alterados acidentalmente (consulte src/components/Footer.spec.ts para obter um exemplo). Outros testes podem ser feitos para componentes que possuem lógica dentro deles.
Testar middleware é um pouco mais complicado, pois eles têm efeitos colaterais. Você pode testar Epics com a estrutura rxjs-marbles pois eles transformam fluxos observáveis. Consulte src/autocomplete.spec.ts para obter um exemplo.
Usamos Prettier para manter a formatação consistente. Isso formatará seus arquivos (JS, TS, CSS, JSON) em um gancho de pré-confirmação. Se desejar, você também pode chamar prettier --write filename para atualizar um arquivo manualmente.
Existem também plug-ins para editores, como prettier-vscode , que pode formatar automaticamente ao salvar.
Eu recomendo instalar plugins para esses verificadores em seu editor. TSLint e Stylelint também são executados no comando de desenvolvimento, então você verá seus avisos aparecerem lá também.
Estamos usando esta convenção de mensagem de commit porque ela tem emoji e emoji são?.
O desenvolvimento é feito principalmente no ramo development .
Os commits no branch development acionam uma compilação no ambiente de desenvolvimento do DataCamp e produzem uma compilação aqui:
https://cdn.datacamp.com/dcl-react-dev.js.gz
Em seguida, confirme com o branch beta e envie uma versão para o ambiente de teste:
https://cdn.datacamp.com/dcl-react-staging.js.gz
Finalmente, quando criamos uma versão, uma atualização é enviada para o ambiente de produção. Esta deve ser uma versão estável do DataCamp Light:
https://cdn.datacamp.com/dcl-react.js.gz
As confirmações para esta ramificação acionam uma construção que é implementada no ambiente DataCamp Dev. Os commits para o branch principal, beta , são construídos e implantados no teste. Quando uma versão é criada, essa compilação é implantada na produção.
TypeScript, é claro. Certifique-se de instalar um plugin apropriado para o seu editor, caso ele não venha com um.
redux-observável para middleware observável
typescript-fsa para criadores de ações fáceis e com digitação segura
typescript-fsa-reducers para redutores superlimpos
