datacamp light
v2.5.0
ロードマップ |ドキュメント
スクリプトを HTML ページに追加します ( examples/standalone-example.htmlに例があります)。
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >それでおしまい！アプリが最初のページの読み込み後に DataCamp Light 演習を追加する場合 (React アプリなど)、次の関数を呼び出して、それらの新しい演習を初期化します。
initAddedDCLightExercises ( ) ;演習と script タグをスニペットとして含めることにより、stackoverflow.com の回答で JavaScript ライブラリを使用することもできます。
JavaScript ライブラリを組み込んだ後、以下の形式で HTML ブロックの記述を開始できます。これらは動的に演習に変換されます。
< 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 >この例でわかるように、演習全体は 2 つのデータ属性data-datacamp-exerciseとdata-langを持つ単一の<div>要素に含まれています。最初の属性data-datacamp-exercise 、 <div> DataCamp Light 演習として扱う必要があることを示し、他の属性data-lang使用するプログラミング言語を指定します。 data-langに受け入れられる値はrとpythonです。また、オプションの属性data-heightもあり、これは div の高さをpxで設定したり (最小高さは300px )、サンプル コードの行数に応じてサイズを設定したりできます: data-height="auto" 。
実行前コードは、R/Python セッションが初期化されるときに実行されます。これを使用して、学生向けにデータセット、パッケージなどを事前にロードできます。これを指定する方法は、次のように、初期化コードを含む<code>タグを定義し、 data-type属性をpre-exercise-codeに設定することです。
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >この例では、(かなり役に立たない) 変数b値6で初期化します。
コード エディターに最初に表示されるサンプル コードを設定するには、サンプル コードを含む<code>タグを定義し、 data-type属性を次のようにsample-codeに設定する必要があります。
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >この例では、いくつかのコメントといくつかの改行を単純に示しています。 JavaScript ライブラリは先頭のインデントの削除も処理するため、それについて心配する必要はありません。
ソリューション コードを設定するには、ソリューション コードを含む<code>タグを定義し、次のようにdata-type属性をsolutionに設定する必要があります。
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >提出正確性テストは、ユーザーが提出したコードが演習を適切に解決できるかどうかを確認するために使用されます。詳細については、R のドキュメントと Python のドキュメントを参照してください。 SCT を指定する方法は、SCT コードを含む<code>タグを定義し、次のようにdata-type属性をsctに設定することです。
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >この例では、最初の行は、ユーザーが変数a宣言したかどうか、およびその値がソリューション コードの値と一致するかどうかをチェックします。 2 行目では、 print関数が呼び出されているかどうかを確認し、最後に、演習が正常に完了したときにユーザーに表示される成功メッセージを指定します。
ヒントを指定するには、ヒントを含むタグを定義し、次のようにdata-type属性をhintに設定する必要があります。
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div >この例の場合のように、ヒントにたとえば<code>タグが含まれる可能性があります。
data-show-run-button属性を追加すると、常に「実行」ボタンが表示されるため、訪問者はコードを送信せずにコードを試すことができます。data-no-lazy-loading属性を追加すると、ユーザーが下にスクロールするのを待たずに、ページが読み込まれるとすぐにすべての演習がロードされます。これによりパフォーマンスの問題が発生する可能性がありますが、iFrame ベースのページとの互換性の問題は解決できます。[ data-datacamp-exercise ] {
visibility : hidden;
} data-datacamp-exercise属性を持つdivは、DataCamp の学習インターフェイスの最小バージョンに変換されます (実際の操作については、www.datacamp.com にアクセスしてください)。これには、DataCamp のサーバーに接続して、ローカル システムで作業しているかのように R または Python セッションを提供するセッション マネージャーが含まれています。 R および Python コンピューティング環境には、最も人気のあるパッケージが含まれています。
利用できないパッケージを使用したい場合は、問題を作成してください。インストールできます (実行時にパッケージをインストールすることはできません)。
貢献したい場合は、素晴らしいです!まずは Readme のこのセクションを読んで、このプロジェクトの技術的な詳細を理解してください。ほとんどの場合、標準の React/Redux プロジェクト (TypeScript で書かれた) として構造化されているため、これらのプロジェクトに慣れていない場合は、少し読んでみるとよいでしょう。
DataCamp Light を開発するには、アプリをローカルで実行する必要があります。このリポジトリには、テスト用のサンプル演習がいくつか含まれています。
このリポジトリのクローンを作成し、依存関係をインストールし、開発サーバーを起動することから始めます。変更を加えると、ページが新しいコードで再ロードされます。
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
vendor/フォルダーには、現在公開されていない一部の内部 DataCamp パッケージの縮小コードが含まれています。
テストの実装を開始する前に、次の 2 つのドキュメントをお読みください。
テスト ファイルの名前は{moduleName}.spec.jsです。
npm test レデューサーは純粋な関数であるため、テストはそれほど複雑ではありません。模擬状態を作成するにはシードを使用する必要があります。次に、それをテストするアクションとともに引数としてリデューサーに渡すことができます。
スナップショット テストを使用して、コンポーネントが誤って変更されないことを確認します (例については、 src/components/Footer.spec.ts参照)。内部にロジックを持つコンポーネントに対して他のテストを実行することもできます。
ミドルウェアのテストは副作用があるため、少し複雑になります。 Epic は Observable ストリームを変換するため、 rxjs-marblesフレームワークを使用してテストできます。例については、 src/autocomplete.spec.tsを参照してください。
書式の一貫性を保つために Prettier を使用します。これにより、コミット前フックでファイル (JS、TS、CSS、JSON) がフォーマットされます。必要に応じて、 prettier --write filename呼び出してファイルを手動で更新することもできます。
保存時に自動フォーマットできるprettier-vscodeなどのエディター用のプラグインもあります。
これらのチェッカーのプラグインをエディタにインストールすることをお勧めします。 TSLint と Stylelint も開発コマンドで実行されるため、そこでも警告がポップアップ表示されます。
このコミット メッセージ規則を使用しているのは、絵文字と絵文字が ? であるためです。
開発は主にdevelopmentブランチで行われます。
developmentブランチにコミットすると、DataCamp 開発環境でビルドがトリガーされ、ここでビルドが生成されます。
https://cdn.datacamp.com/dcl-react-dev.js.gz
次に、 betaブランチにコミットすると、リリースがステージング環境にプッシュされます。
https://cdn.datacamp.com/dcl-react-staging.js.gz
最後に、リリースを作成すると、更新が実稼働環境にプッシュされます。これは DataCamp Light の安定バージョンである必要があります。
https://cdn.datacamp.com/dcl-react.js.gz
このブランチにコミットすると、DataCamp Dev 環境にデプロイされるビルドがトリガーされます。メイン ブランチbetaへのコミットがビルドされ、ステージングにデプロイされます。リリースが作成されると、そのビルドが運用環境にデプロイされます。
もちろんTypeScriptです。エディタに適切なプラグインが同梱されていない場合は、必ずインストールしてください。
redux-observable (監視可能なミドルウェアの場合)
typescript-fsa による簡単でタイプセーフなアクション作成ツール
スーパークリーンレデューサー用の typescript-fsa-reducers
