الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

ضوء داتا كامب

خريطة الطريق | المستندات

جدول المحتويات
  • سمات
  • كيفية تشغيل التطبيق
  • كتابة كتلة HTML
    • كود ما قبل التمرين
    • رمز العينة
    • حل
    • اختبار صحة التقديم (SCT)
    • تَلمِيح
    • خيارات أخرى
  • كيف يعمل؟
  • المساهمة
    • التبعيات
    • اختبار
      • تشغيل الاختبارات
      • المخفضات
      • عناصر
      • الوسيطة
    • ديف أوبس
      • التنسيق مع أجمل
      • جودة الكود: ESLint، TSLint، Stylelint
      • ارتكاب الرسائل
      • التكامل المستمر
      • الحزم المستخدمة التي قد ترغب في معرفتها

سمات

  • تحويل أي موقع أو مدونة إلى منصة تعليمية تفاعلية.
  • يعمل لكل من R وPython. يتم الاحتفاظ بالجلسات على خوادم DataCamp.
  • قم بتحويل مستندات تخفيض السعر الموجودة إلى دورة تدريبية تفاعلية باستخدام الحزمة التعليمية.
  • تحقق من مثال تجريبي لـ R وPython.
  • الاستفادة من نفس اختبارات صحة الإرسال (SCT) التي تستخدمها DataCamp في جميع الدورات التدريبية الخاصة بها. بالنسبة لـ R، هناك اختبار testwhat (GitHub wiki)؛ بالنسبة لبيثون، هناك pythonwhat (GitHub wiki).

كيفية تشغيل التطبيق

أضف البرنامج النصي إلى صفحة 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 من خلال تضمين علامة التمرين والبرنامج النصي كمقتطف.

كتابة كتلة HTML

بعد تضمين مكتبة 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-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 >

اختبار صحة التقديم (SCT)

يتم استخدام اختبار صحة الإرسال للتحقق مما إذا كان الكود الذي أرسله المستخدم يحل التمرين بشكل صحيح. للحصول على معلومات مفصلة حول هذا يمكنك الاطلاع على الوثائق الخاصة بـ 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.
  • أضف ملف CSS التالي إلى نمط صفحتك لإخفاء رمز التكوين الخاص بالتمارين حتى يتم تحميلها: 
[ data-datacamp-exercise ] {
  visibility : hidden;
}

كيف يعمل؟

يتم تحويل div مع السمة data-datacamp-exercise إلى إصدار مصغر من واجهة التعلم الخاصة بـ DataCamp (للحصول على الصفقة الحقيقية، يمكنك زيارة www.datacamp.com). يحتوي على مدير جلسة يتصل بخوادم DataCamp لتوفير جلسة R أو Python كما لو كنت تعمل على نظامك المحلي. تتميز بيئات الحوسبة R وPython بالحزم الأكثر شيوعًا:

  • انظر قائمة الحزم لـ R
  • راجع قائمة الحزم الخاصة بـ Python

إذا كنت تريد استخدام حزمة غير متوفرة، قم بإنشاء مشكلة ويمكننا تثبيتها (ليس من الممكن تثبيت الحزم في وقت التشغيل).

المساهمة

إذا كنت ترغب في المساهمة، رائع! يمكنك البدء بقراءة هذا القسم من الملف التمهيدي للحصول على فكرة عن التفاصيل الفنية لهذا المشروع. في معظم الأحيان، تم تصميمه كمشروع 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 للحصول على مثال). يمكن إجراء اختبارات أخرى للمكونات التي تحتوي على منطق بداخلها.

الوسيطة

يعد اختبار البرامج الوسيطة أكثر تعقيدًا نظرًا لأن لها آثارًا جانبية. يمكنك اختبار الملاحم باستخدام إطار عمل rxjs-marbles نظرًا لأنها تقوم بتحويل التدفقات القابلة للملاحظة. راجع src/autocomplete.spec.ts للحصول على مثال.

ديف أوبس

التنسيق مع أجمل

نحن نستخدم Prettier للحفاظ على اتساق التنسيق. سيؤدي هذا إلى تنسيق ملفاتك (JS، TS، CSS، JSON) على خطاف الالتزام المسبق. إذا أردت، يمكنك أيضًا الاتصال بـ prettier --write filename لتحديث ملف يدويًا.

هناك أيضًا مكونات إضافية للمحررين، مثل prettier-vscode الذي يمكنه التنسيق تلقائيًا عند الحفظ.

جودة الكود: ESLint، TSLint، Stylelint

أوصي بتثبيت المكونات الإضافية لأدوات الداما هذه في المحرر الخاص بك. يتم أيضًا تشغيل TSLint وStylint في أمر التطوير، لذا سترى تحذيراتهم تظهر هناك أيضًا.

ارتكاب الرسائل

لقد كنا نستخدم اصطلاح رسائل الالتزام هذا لأنه يحتوي على رموز تعبيرية ورموز تعبيرية؟.

التكامل المستمر

يتم التطوير في المقام الأول على فرع 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-fsa لمنشئي الإجراءات السهلة والآمنة

  • مخفضات typescript-fsa لمخفضات فائقة النظافة

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل