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 ( ) ;คุณยังสามารถใช้ไลบรารี JavaScript ในคำตอบของ stackoverflow.com โดยรวมแบบฝึกหัดและแท็กสคริปต์เป็นตัวอย่างข้อมูล
หลังจากรวมไลบรารี 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 > ดังที่เราเห็นในตัวอย่าง แบบฝึกหัดทั้งหมดอยู่ในองค์ประกอบ <div> เดียวซึ่งมีแอตทริบิวต์ data สองรายการ data-datacamp-exercise และ data-lang คุณลักษณะแรก data-datacamp-exercise บ่งชี้ว่า <div> ควรถือเป็นแบบฝึกหัด DataCamp Light ในขณะที่แอตทริบิวต์ data-lang อื่นระบุว่าควรใช้ภาษาการเขียนโปรแกรมใด ค่าที่ยอมรับสำหรับ data-lang คือ r และ python นอกจากนี้ยังมีแอตทริบิวต์เสริม data-height ซึ่งสามารถตั้งค่าความสูงเป็น px ของ div (ความสูงขั้นต่ำคือ 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 คือการกำหนดแท็ก <code> ที่มีโค้ด SCT ของคุณและตั้งค่าแอตทริบิวต์ data-type เป็น sct ดังนี้
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > ในตัวอย่างของเรา บรรทัดแรกจะตรวจสอบว่าผู้ใช้ประกาศตัวแปร a และค่าของมันตรงกับค่าของโค้ดโซลูชันหรือไม่ บรรทัดที่สองตรวจสอบว่ามีการเรียกใช้ฟังก์ชัน 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;
} div ที่มีแอตทริบิวต์ data-datacamp-exercise จะถูกแปลงเป็นอินเทอร์เฟซการเรียนรู้ของ 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 ภายในบางส่วนที่ไม่ได้โฮสต์แบบสาธารณะในขณะนี้
โปรดอ่านเอกสารทั้งสองนี้ก่อนที่จะเริ่มดำเนินการทดสอบใดๆ:
ไฟล์ทดสอบมีชื่อว่า {moduleName}.spec.js
npm test เนื่องจากรีดิวเซอร์เป็นฟังก์ชันล้วนๆ การทดสอบจึงไม่ซับซ้อนมากนัก คุณต้องใช้เมล็ดพันธุ์เพื่อสร้างสถานะจำลอง จากนั้นคุณสามารถส่งผ่านไปยังตัวลดเป็นอาร์กิวเมนต์พร้อมกับการกระทำที่คุณต้องการทดสอบ
ใช้การทดสอบสแนปช็อตเพื่อให้แน่ใจว่าส่วนประกอบจะไม่เปลี่ยนแปลงโดยไม่ได้ตั้งใจ (ดูตัวอย่าง src/components/Footer.spec.ts ) การทดสอบอื่นๆ สามารถทำได้สำหรับส่วนประกอบที่มีตรรกะอยู่ภายใน
การทดสอบมิดเดิลแวร์มีส่วนเกี่ยวข้องมากกว่าเล็กน้อยเนื่องจากมีผลข้างเคียง คุณสามารถทดสอบ Epics ด้วยเฟรมเวิร์ก rxjs-marbles ได้ เนื่องจากเฟรมเวิร์กดังกล่าวแปลงสตรีมที่สังเกตได้ ดูตัวอย่าง src/autocomplete.spec.ts
เราใช้ Prettier เพื่อให้การจัดรูปแบบสอดคล้องกัน วิธีนี้จะจัดรูปแบบไฟล์ของคุณ (JS, TS, CSS, JSON) บน hook ที่คอมมิตล่วงหน้า หากต้องการ คุณสามารถเรียก 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 สำหรับตัวลดความสะอาดขั้นสูง
