datacamp light
v2.5.0
Peta Jalan | dokumen
Tambahkan skrip ke halaman HTML Anda (ada contohnya di examples/standalone-example.html ):
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >Itu saja! Jika aplikasi Anda menambahkan latihan DataCamp Light setelah pemuatan halaman awal (misalnya, di aplikasi React), panggil fungsi berikut untuk menginisialisasi latihan baru tersebut:
initAddedDCLightExercises ( ) ;Anda juga dapat menggunakan pustaka JavaScript dalam jawaban stackoverflow.com dengan menyertakan tag latihan dan skrip sebagai cuplikan.
Setelah menyertakan pustaka JavaScript, Anda dapat mulai menulis blok HTML dalam format di bawah ini. Ini akan diubah secara dinamis menjadi latihan.
< 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 > Seperti yang bisa kita lihat dalam contoh, seluruh latihan terkandung dalam satu elemen <div> dengan dua atribut data data-datacamp-exercise dan data-lang . Atribut pertama data-datacamp-exercise menunjukkan bahwa <div> harus diperlakukan sebagai latihan DataCamp Light, sedangkan atribut lainnya data-lang menentukan bahasa pemrograman mana yang harus digunakan. Nilai yang diterima untuk data-lang adalah r dan python . Ada juga atribut opsional data-height yang dapat mengatur tinggi dalam px div (tinggi minimum adalah 300px ) atau mengatur ukuran sesuai dengan jumlah baris kode contoh: data-height="auto" .
Kode pra-latihan dijalankan ketika sesi R/Python diinisialisasi. Anda dapat menggunakannya untuk memuat kumpulan data, paket, dll. untuk siswa terlebih dahulu. Cara untuk menentukannya adalah dengan mendefinisikan tag <code> yang berisi kode inisialisasi Anda dan mengatur atribut data-type ke pre-exercise-code seperti ini:
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > Dalam contoh kita, kita menginisialisasi variabel (agak tidak berguna) b dengan nilai 6 .
Untuk menyetel kode contoh yang awalnya akan ada di editor kode, tag <code> harus didefinisikan yang berisi kode contoh dan atribut data-type harus disetel ke sample-code seperti ini:
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >Contoh kami hanya menunjukkan beberapa komentar bersama dengan beberapa baris baru. Pustaka JavaScript juga menangani penghapusan lekukan di depan, jadi tidak perlu khawatir tentang hal itu.
Untuk menyetel kode solusi, tag <code> harus didefinisikan yang berisi kode solusi dan atribut data-type harus disetel ke solution seperti ini:
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > Tes Kebenaran Penyerahan digunakan untuk memeriksa apakah kode yang dikirimkan oleh pengguna menyelesaikan latihan dengan benar. Untuk informasi rinci mengenai hal ini, Anda dapat melihat dokumentasi untuk R dan dokumentasi untuk Python. Cara menentukan SCT adalah dengan mendefinisikan tag <code> yang berisi kode SCT Anda dan mengatur atribut data-type ke sct seperti ini:
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > Dalam contoh kita, baris pertama memeriksa apakah pengguna mendeklarasikan variabel a dan apakah nilainya cocok dengan kode solusi. Baris kedua memeriksa apakah fungsi print dipanggil dan terakhir pesan sukses ditentukan yang akan ditampilkan kepada pengguna ketika latihan berhasil diselesaikan.
Untuk menentukan petunjuk, tag harus didefinisikan yang berisi petunjuk tersebut dan atribut data-type harus disetel ke hint seperti ini:
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > Mungkin saja petunjuk tersebut berisi tag <code> misalnya seperti pada contoh kita.
data-show-run-button untuk selalu menampilkan tombol "Run", sehingga pengunjung Anda dapat mencoba kode tanpa mengirimkannya.data-no-lazy-loading untuk memuat semua latihan segera setelah halaman dimuat, alih-alih menunggu pengguna menggulir ke bawah ke latihan tersebut. Hal ini dapat menyebabkan masalah kinerja, namun dapat memperbaiki masalah kompatibilitas dengan halaman berbasis iFrame.[ data-datacamp-exercise ] {
visibility : hidden;
} div dengan atribut data-datacamp-exercise diubah menjadi versi minimal antarmuka pembelajaran DataCamp (sebenarnya, Anda dapat mengunjungi www.datacamp.com). Ini berisi manajer sesi yang terhubung ke server DataCamp untuk menyediakan sesi R atau Python seolah-olah Anda sedang bekerja pada sistem lokal Anda. Lingkungan komputasi R dan Python menampilkan paket paling populer:
Jika Anda ingin menggunakan paket yang tidak tersedia, buatlah isu dan kami dapat menginstalnya (tidak mungkin menginstal paket saat runtime).
Jika Anda ingin berkontribusi, luar biasa! Anda dapat memulai dengan membaca bagian readme ini untuk mendapatkan gambaran tentang detail teknis proyek ini. Untuk sebagian besar, ini disusun sebagai proyek React/Redux standar (ditulis dalam TypeScript) jadi jika Anda tidak familiar dengan salah satunya, Anda mungkin ingin membaca sedikit.
Untuk mengembangkan DataCamp Light, Anda harus menjalankan aplikasi secara lokal. Repositori ini menyertakan beberapa contoh latihan untuk mengujinya.
Mulailah dengan mengkloning repositori ini, menginstal dependensi, dan memulai server pengembangan. Saat Anda melakukan perubahan, halaman akan dimuat ulang dengan kode baru Anda.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
Folder vendor/ menyertakan kode yang diperkecil dari beberapa paket DataCamp internal yang tidak dihosting secara publik saat ini.
Harap baca dua dokumen ini sebelum mulai menerapkan pengujian apa pun:
File pengujian diberi nama sebagai {moduleName}.spec.js .
npm test Karena peredam adalah fungsi murni, pengujiannya tidak terlalu rumit. Anda harus menggunakan seed untuk membuat keadaan tiruan. Kemudian Anda bisa meneruskannya ke peredam sebagai argumen bersama dengan tindakan yang ingin Anda uji.
Gunakan pengujian snapshot untuk memastikan komponen tidak berubah secara tidak sengaja (lihat src/components/Footer.spec.ts sebagai contoh). Tes lain dapat dilakukan untuk komponen yang memiliki logika di dalamnya.
Pengujian middleware sedikit lebih rumit karena memiliki efek samping. Anda dapat menguji Epics dengan kerangka rxjs-marbles karena mereka mengubah aliran yang dapat diobservasi. Lihat src/autocomplete.spec.ts sebagai contoh.
Kami menggunakan Prettier untuk menjaga konsistensi format. Ini akan memformat file Anda (JS, TS, CSS, JSON) pada hook pra-komit. Jika mau, Anda juga dapat memanggil prettier --write filename untuk memperbarui file secara manual.
Ada juga plugin untuk editor, seperti prettier-vscode yang dapat memformat otomatis saat disimpan.
Saya sarankan memasang plugin untuk pemeriksa ini di editor Anda. TSLint dan Stylelint juga dijalankan dalam perintah pengembangan, jadi Anda akan melihat peringatannya juga muncul di sana.
Kami telah menggunakan konvensi pesan komit ini karena memiliki emoji dan emoji?.
Pembangunan terutama dilakukan pada cabang development .
Berkomitmen pada cabang development memicu pembangunan di lingkungan pengembangan DataCamp dan menghasilkan pembangunan di sini:
https://cdn.datacamp.com/dcl-react-dev.js.gz
Selanjutnya, komit ke cabang beta dorong rilis ke lingkungan pementasan:
https://cdn.datacamp.com/dcl-react-staging.js.gz
Terakhir, saat kami membuat rilis, pembaruan dikirim ke lingkungan produksi. Ini harus menjadi versi DataCamp Light yang stabil:
https://cdn.datacamp.com/dcl-react.js.gz
Komit ke cabang ini memicu pembangunan yang diterapkan di lingkungan DataCamp Dev. Komit ke cabang utama, beta , dibuat dan diterapkan ke staging. Saat rilis dibuat, build tersebut disebarkan ke produksi.
Tentu saja, TypeScript. Pastikan Anda memasang plugin yang sesuai untuk editor Anda, jika plugin tersebut tidak disertakan.
redux-observable untuk middleware yang dapat diamati
TypeScript-fsa untuk pembuat tindakan yang mudah dan aman untuk mengetik
TypeScript-fsa-reducer untuk reduksi super bersih
