datacamp light
v2.5.0
Roadmap | Dokumente
Fügen Sie das Skript zu Ihrer HTML-Seite hinzu (ein Beispiel finden Sie in examples/standalone-example.html ):
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >Das ist es! Wenn Ihre App nach dem ersten Laden der Seite DataCamp Light-Übungen hinzufügt (z. B. in React-Apps), rufen Sie die folgende Funktion auf, um diese neuen Übungen zu initialisieren:
initAddedDCLightExercises ( ) ;Sie können die JavaScript-Bibliothek auch in einer Antwort von stackoverflow.com verwenden, indem Sie das Übungs- und Skript-Tag als Snippet einfügen.
Nachdem Sie die JavaScript-Bibliothek eingebunden haben, können Sie mit dem Schreiben von HTML-Blöcken im folgenden Format beginnen. Diese werden dynamisch in Übungen umgewandelt.
< 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 > Wie wir im Beispiel sehen können, ist die gesamte Übung in einem einzigen <div> -Element mit zwei Datenattributen data-datacamp-exercise und data-lang enthalten. Das erste Attribut data-datacamp-exercise gibt an, dass <div> als DataCamp Light-Übung behandelt werden soll, während das andere Attribut data-lang angibt, welche Programmiersprache verwendet werden soll. Die akzeptierten Werte für data-lang sind r und python . Es gibt auch ein optionales Attribut data-height , mit dem Sie die Höhe des Div in px festlegen können (die Mindesthöhe beträgt 300px ) oder die Größe entsprechend der Anzahl der Beispielcodezeilen festlegen kann: data-height="auto" .
Code vor der Übung wird ausgeführt, wenn die R/Python-Sitzung initialisiert wird. Sie können damit Datensätze, Pakete usw. für Studierende vorab laden. Sie können dies angeben, indem Sie ein <code> -Tag definieren, das Ihren Initialisierungscode enthält, und das data-type wie folgt auf pre-exercise-code festlegen:
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > In unserem Beispiel initialisieren wir die (eher nutzlose) Variable b mit dem Wert 6 .
Um den Beispielcode festzulegen, der anfänglich im Code-Editor vorhanden sein wird, sollte ein <code> -Tag definiert werden, das den Beispielcode enthält, und das data-type sollte wie folgt auf sample-code gesetzt werden:
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Unser Beispiel zeigt lediglich ein paar Kommentare zusammen mit einigen Zeilenumbrüchen. Die JavaScript-Bibliothek kümmert sich auch darum, führende Einrückungen zu entfernen, sodass Sie sich darüber keine Sorgen machen müssen.
Um den Lösungscode festzulegen, sollte ein <code> -Tag definiert werden, das den Lösungscode enthält, und das data-type sollte wie folgt auf solution gesetzt werden:
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Mit einem Submission Correctness Test wird überprüft, ob der vom Benutzer übermittelte Code die Aufgabe richtig löst. Ausführliche Informationen hierzu finden Sie in der Dokumentation zu R und in der Dokumentation zu Python. Sie können den SCT angeben, indem Sie ein <code> -Tag definieren, das Ihren SCT-Code enthält, und das data-type wie folgt auf sct setzen:
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > In unserem Beispiel prüft die erste Zeile, ob der Benutzer die Variable a deklariert hat und ob ihr Wert mit dem des Lösungscodes übereinstimmt. In der zweiten Zeile wird überprüft, ob die print aufgerufen wird und abschließend wird eine Erfolgsmeldung angegeben, die dem Benutzer angezeigt wird, wenn die Übung erfolgreich abgeschlossen wurde.
Um einen Hinweis anzugeben, sollte ein Tag definiert werden, das den Hinweis enthält, und das data-type sollte wie folgt auf hint gesetzt werden:
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > Es ist möglich, dass der Hinweis beispielsweise <code> -Tags enthält, wie es in unserem Beispiel der Fall ist.
data-show-run-button -Attribut hinzu, um die Schaltfläche „Ausführen“ immer anzuzeigen, damit Ihre Besucher den Code ausprobieren können, ohne ihn einzureichen.data-no-lazy-loading Attribut hinzu, um alle Übungen zu laden, sobald die Seite geladen wird, anstatt darauf zu warten, dass der Benutzer nach unten scrollt. Dies kann zu Leistungsproblemen führen, kann jedoch Kompatibilitätsprobleme mit iFrame-basierten Seiten beheben.[ data-datacamp-exercise ] {
visibility : hidden;
} div s mit dem data-datacamp-exercise Attribut werden in eine Minimalversion der Lernschnittstelle von DataCamp konvertiert (für das echte Angebot können Sie www.datacamp.com besuchen). Es enthält einen Sitzungsmanager, der eine Verbindung zu den Servern von DataCamp herstellt, um eine R- oder Python-Sitzung bereitzustellen, als ob Sie auf Ihrem lokalen System arbeiten würden. Die R- und Python-Rechnerumgebungen verfügen über die beliebtesten Pakete:
Wenn Sie ein Paket verwenden möchten, das nicht verfügbar ist, erstellen Sie ein Problem und wir können es installieren (es ist nicht möglich, Pakete zur Laufzeit zu installieren).
Wenn Sie einen Beitrag leisten möchten, großartig! Sie können zunächst diesen Abschnitt der Readme-Datei lesen, um sich einen Überblick über die technischen Details dieses Projekts zu verschaffen. Zum größten Teil ist es als Standard-React/Redux-Projekt (in TypeScript geschrieben) strukturiert. Wenn Sie also mit einem dieser Projekte nicht vertraut sind, sollten Sie sich vielleicht ein wenig informieren.
Um DataCamp Light zu entwickeln, müssen Sie die App lokal ausführen. Dieses Repository enthält einige Beispielübungen zum Testen.
Klonen Sie zunächst dieses Repository, installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Wenn Sie Änderungen vornehmen, wird die Seite mit Ihrem neuen Code neu geladen.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
Der Ordner vendor/ “ enthält minimierten Code einiger interner DataCamp-Pakete, die derzeit nicht öffentlich gehostet werden.
Bitte lesen Sie diese beiden Dokumente, bevor Sie mit der Durchführung von Tests beginnen:
Testdateien werden als {moduleName}.spec.js benannt.
npm test Da es sich bei einem Reduzierer um eine reine Funktion handelt, ist es nicht so kompliziert, ihn zu testen. Sie müssen einen Startwert verwenden, um einen Scheinzustand zu erstellen. Anschließend können Sie es zusammen mit der Aktion, die Sie testen möchten, als Argument an den Reduzierer übergeben.
Verwenden Sie Snapshot-Tests, um sicherzustellen, dass sich Komponenten nicht versehentlich ändern (siehe src/components/Footer.spec.ts für ein Beispiel). Andere Tests können für Komponenten durchgeführt werden, in denen Logik enthalten ist.
Das Testen von Middleware ist etwas aufwändiger, da sie Nebenwirkungen hat. Sie können Epics mit dem rxjs-marbles -Framework testen, da sie Observable-Streams transformieren. Ein Beispiel finden Sie src/autocomplete.spec.ts .
Wir verwenden Prettier, um die Formatierung konsistent zu halten. Dadurch werden Ihre Dateien (JS, TS, CSS, JSON) in einem Pre-Commit-Hook formatiert. Wenn Sie möchten, können Sie auch prettier --write filename aufrufen, um eine Datei manuell zu aktualisieren.
Es gibt auch Plugins für Editoren wie prettier-vscode , die beim Speichern automatisch formatieren können.
Ich empfehle, Plugins für diese Prüfer in Ihrem Editor zu installieren. TSLint und Stylelint werden auch im Entwicklungsbefehl ausgeführt, daher werden dort auch ihre Warnungen angezeigt.
Wir haben diese Commit-Nachrichtenkonvention verwendet, weil sie Emojis enthält und Emojis ? sind.
Die Entwicklung erfolgt hauptsächlich im development .
Commits für den development lösen einen Build in der DataCamp-Entwicklungsumgebung aus und erzeugen hier einen Build:
https://cdn.datacamp.com/dcl-react-dev.js.gz
Als Nächstes übertragen Commits an den beta -Zweig eine Veröffentlichung in die Staging-Umgebung:
https://cdn.datacamp.com/dcl-react-staging.js.gz
Wenn wir schließlich ein Release erstellen, wird ein Update in die Produktionsumgebung übertragen. Dies sollte eine stabile Version von DataCamp Light sein:
https://cdn.datacamp.com/dcl-react.js.gz
Commits für diesen Zweig lösen einen Build aus, der in der DataCamp Dev-Umgebung bereitgestellt wird. Commits für den Hauptzweig beta werden erstellt und im Staging bereitgestellt. Wenn ein Release erstellt wird, wird dieser Build für die Produktion bereitgestellt.
Natürlich TypeScript. Stellen Sie sicher, dass Sie ein geeignetes Plugin für Ihren Editor installieren, falls dieser nicht im Lieferumfang enthalten ist.
redux-observable für beobachtbare Middleware
typescript-fsa für einfache, typsichere Aktionsersteller
typescript-fsa-reducers für supersaubere Reduzierer
