datacamp light
v2.5.0
Feuille de route | Documents
Ajoutez le script à votre page HTML (il y a un exemple dans examples/standalone-example.html ) :
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >C'est ça! Si votre application ajoute des exercices DataCamp Light après le chargement initial de la page (par exemple, dans les applications React), appelez la fonction suivante pour initialiser ces nouveaux exercices :
initAddedDCLightExercises ( ) ;Vous pouvez également utiliser la bibliothèque JavaScript dans une réponse stackoverflow.com en incluant la balise d'exercice et de script sous forme d'extrait.
Après avoir inclus la bibliothèque JavaScript, vous pouvez commencer à écrire des blocs HTML au format ci-dessous. Ceux-ci seront convertis dynamiquement en exercices.
< 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 > Comme nous pouvons le voir dans l'exemple, l'ensemble de l'exercice est contenu dans un seul élément <div> avec deux attributs de données data-datacamp-exercise et data-lang . Le premier attribut data-datacamp-exercise indique que le <div> doit être traité comme un exercice DataCamp Light, tandis que l'autre attribut data-lang spécifie quel langage de programmation doit être utilisé. Les valeurs acceptées pour data-lang sont r et python . Il existe également un attribut facultatif data-height qui peut définir la hauteur en px du div (la hauteur minimale est 300px ) ou définir la taille en fonction du nombre d'exemples de lignes de code : data-height="auto" .
Le code de pré-exercice est exécuté lorsque la session R/Python est initialisée. Vous pouvez l'utiliser pour précharger des ensembles de données, des packages, etc. pour les étudiants. La façon de spécifier cela consiste à définir une balise <code> contenant votre code d'initialisation et à définir l'attribut data-type sur pre-exercise-code comme ceci :
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > Dans notre exemple nous initialisons la (plutôt inutile) variable b avec la valeur 6 .
Pour définir l'exemple de code qui sera présent initialement dans l'éditeur de code, une balise <code> doit être définie contenant l'exemple de code et l'attribut data-type doit être défini sur sample-code comme ceci :
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Notre exemple montre simplement quelques commentaires accompagnés de quelques nouvelles lignes. La bibliothèque JavaScript s'occupe également de supprimer l'indentation de début, vous n'avez donc pas à vous en soucier.
Pour définir le code de la solution, une balise <code> doit être définie contenant le code de la solution et l'attribut data-type doit être défini sur solution comme ceci :
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Un test d'exactitude de la soumission est utilisé pour vérifier si le code soumis par l'utilisateur résout correctement l'exercice. Pour des informations détaillées à ce sujet, vous pouvez consulter la documentation de R et la documentation de Python. La façon de spécifier le SCT consiste à définir une balise <code> contenant votre code SCT et à définir l'attribut data-type sur sct comme ceci :
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > Dans notre exemple, la première ligne vérifie si l'utilisateur a déclaré la variable a et si sa valeur correspond à celle du code de la solution. La deuxième ligne vérifie si la fonction print est appelée et enfin un message de réussite est spécifié qui sera affiché à l'utilisateur lorsque l'exercice sera terminé avec succès.
Pour spécifier un indice, une balise doit être définie contenant l'indice et l'attribut data-type doit être défini sur hint comme ceci :
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > Il est possible que l'indice contienne par exemple des balises <code> comme c'est le cas dans notre exemple.
data-show-run-button pour toujours afficher le bouton « Exécuter », afin que vos visiteurs puissent essayer le code sans le soumettre.data-no-lazy-loading pour charger tous les exercices dès que la page est chargée, au lieu d'attendre que l'utilisateur les fasse défiler vers le bas. Cela peut entraîner des problèmes de performances, mais peut résoudre des problèmes de compatibilité avec les pages basées sur iFrame.[ data-datacamp-exercise ] {
visibility : hidden;
} div avec l'attribut data-datacamp-exercise sont convertis en une version minimale de l'interface d'apprentissage de DataCamp (pour la vraie affaire, vous pouvez visiter www.datacamp.com). Il contient un gestionnaire de session qui se connecte aux serveurs de DataCamp pour fournir une session R ou Python comme si vous travailliez sur votre système local. Les environnements informatiques R et Python proposent les packages les plus populaires :
Si vous souhaitez utiliser un package qui n'est pas disponible, créez un problème et nous pourrons l'installer (il n'est pas possible d'installer des packages au moment de l'exécution).
Si vous souhaitez contribuer, c'est génial ! Vous pouvez commencer par lire cette section du readme pour avoir une idée des détails techniques de ce projet. Pour l'essentiel, il est structuré comme un projet React/Redux standard (écrit en TypeScript), donc si vous n'êtes pas familier avec l'un d'entre eux, vous voudrez peut-être lire un peu.
Pour développer DataCamp Light, vous devrez exécuter l'application localement. Ce référentiel comprend quelques exemples d'exercices pour le tester.
Commencez par cloner ce référentiel, installer les dépendances et démarrer le serveur de développement. Au fur et à mesure que vous apportez des modifications, la page se rechargera avec votre nouveau code.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
Le dossier vendor/ comprend le code minifié de certains packages DataCamp internes qui ne sont pas hébergés publiquement pour le moment.
Veuillez lire ces deux documents avant de commencer à implémenter des tests :
Les fichiers de test sont nommés {moduleName}.spec.js .
npm test Puisqu’un réducteur est une fonction pure, ce n’est pas si compliqué de le tester. Vous devez utiliser une graine pour créer un état fictif. Ensuite, vous pouvez le transmettre au réducteur comme argument avec l'action que vous souhaitez tester.
Utilisez les tests d'instantanés pour vous assurer que les composants ne changent pas par accident (voir src/components/Footer.spec.ts pour un exemple). D'autres tests peuvent être effectués pour les composants contenant une logique.
Le test des middlewares est un peu plus complexe car ils ont des effets secondaires. Vous pouvez tester Epics avec le framework rxjs-marbles car ils transforment les flux observables. Voir src/autocomplete.spec.ts pour un exemple.
Nous utilisons Prettier pour maintenir la cohérence du formatage. Cela formatera vos fichiers (JS, TS, CSS, JSON) sur un hook de pré-validation. Si vous le souhaitez, vous pouvez également appeler prettier --write filename pour mettre à jour un fichier manuellement.
Il existe également des plugins pour les éditeurs, comme prettier-vscode qui peuvent se formater automatiquement lors de la sauvegarde.
Je recommande d'installer des plugins pour ces dames dans votre éditeur. TSLint et Stylelint sont également exécutés dans la commande de développement, vous verrez donc également leurs avertissements apparaître ici.
Nous utilisons cette convention de message de validation car elle contient des emoji et les emoji sont ?.
Le développement se fait principalement sur la branche development .
Les commits dans la branche development déclenchent une build sur l'environnement de développement DataCamp et produisent une build ici :
https://cdn.datacamp.com/dcl-react-dev.js.gz
Ensuite, les commits dans la branche beta envoient une version vers l'environnement de test :
https://cdn.datacamp.com/dcl-react-staging.js.gz
Enfin, lorsque nous créons une version, une mise à jour est poussée vers l'environnement de production. Il doit s'agir d'une version stable de DataCamp Light :
https://cdn.datacamp.com/dcl-react.js.gz
Les validations dans cette branche déclenchent une build déployée sur l'environnement de développement DataCamp. Les commits sur la branche principale, beta , sont construits et déployés en préparation. Lorsqu'une version est créée, cette version est déployée en production.
TypeScript, bien sûr. Assurez-vous d'installer un plugin approprié pour votre éditeur, s'il n'en est pas livré avec.
redux-observable pour un middleware observable
typescript-fsa pour des créateurs d'actions simples et sécurisés
typescript-fsa-reducers pour des réducteurs super propres
