كيفية تطوير تطبيق LTI لـ Canvas

هناك الكثير من LMS ، ويمكننا تطوير واحد لجميعهم تقريبًا. لأن هناك معيارًا يتبعه الكثير من المنصات. يمكنك التحقق من المعيار من imsglobal.org. بادئ ذي بدء ، هناك بعض المفاهيم التي نحتاج إلى توضيحها.

  • TP: مزود الأدوات ، LTI هو مزود الأدوات. يطلق عليه أيضًا أداة خارجية.
  • TC: أداة المستهلك ، إنها اللوحة ، LMS.

الاستعداد للتطوير

هناك إصداران من معايير LTI ، ستقوم العينة أدناه بتكييف v1.1. عندما تطور LTI لأول مرة ، من الجيد أن يكون لديك حساب مجاني. يمكنك تسجيل واحد هنا. بمجرد الانتهاء من ذلك ، يمكنك إنشاء دورة للاختبار. في "إعدادات" الدورة.

ابدأ في التطور

سوف أقوم بتطوير تطبيق منغمس قليلاً من "Hello، world". أنا على وشك طباعة جميع المعلمات في طلب الإطلاق. طلب الإطلاق هو طلب سترسله لوحة الرسم إليك بعد أن ينقر المستخدم على رابط تطبيق LTI الخاص بك. المعلمات في طلب الإطلاق هي في الأساس جميع المعلومات التي يمكنك الحصول عليها من قماش لتطبيق LTI.

أي لغة برمجة لا بأس بها. أنا من محبي الرفرفة ، والتي يمكن استخدامها لتطوير الأجهزة المحمولة (android و ios) ، والويب ، وسطح المكتب. الويب وسطح المكتب في مرحلة تجريبية بالرغم من ذلك. إذن اللغة هي دارت. أختار إطار الملاك ، إطار عمل صريح مثل الويب لتطوير خادم الويب. إذا لم تتمكن من استخدام Dart ، فلا بأس. الرمز سهل القراءة ، فهو يعمل تمامًا مثل التعبير السريع ، أو حتى sprintboot. كلها مسار وعلاقات معالج المقابلة. ليس مثل PHP ، فهو يربكني حقًا.

يمكنك الاستفادة من cli of the framework framework لإنشاء مشروع من أنواع مختلفة من builerplate. يمكنك إنشاء المشروع بنفسك. أو يمكنك فقط شوكة مشروعي من هنا.

مشروع Dart يشبه مشروع nodejs. التبعيات مُدرجة في ملف "الحزمة" المسمى pubspec.yaml. في خادم الويب في dart ، تكون الشفرة كلها في lib / srcdirectory. يوجد main.dart في دليل bin وهو بداية المشروع.

يرجى ملاحظة أن الرمز أدناه لا يعمل رمز ، مجرد جزء منه. العاملون في الريبو الخاص بي.

في bin / main.dart ، يتم إنشاء التطبيق وتهيئته:

main () غير متزامن {load () ؛ تطبيق Angel = Angel الجديد (العاكس: MirrorsReflector ()) ؛
انتظر app.configure (jael (fs.directory ('views'))) ؛ / * 1 * / await app.configure (new HomeController (). configServer) ؛ / * 2 * /
  / * 3 * / app.all ('*'، (req، res) {res.headers ['X-Frame-Options'] = 'ALLOW-FROM https: //*.instructure.com'؛ return true؛ }) ؛
/ * 4 * / var vDir = VirtualDirectory (app، fs، source: fs.directory ('static'))؛ app.fallback (vDir.handleRequest) ؛ }}

/ * 1 / استخدم محرك قالب jael لتقديم الصفحات / 2 / قم بتكوين وحدة التحكم للتعامل مع الطلبات. وحدات التحكم مثل أزواج المسار والمعالج:

// إذا كان عنوان url الخاص بالطلب مثل: https://my_app.com ، فسيتم التعامل معه بطريقة `الإطلاق '. Expose ('/') class HomeController يوسع إطلاق وحدة التحكم {Expose ('/') (RequestContext req، ResponseContext res) async {await res.render ('index'، {'title': 'First تجعل'})؛ }}

/ * 3 * / الوسيطة هنا. هذا شيء أحتاجه حقًا لتذكيرك. عندما تكون صفحة html على وشك التحميل في iframe ، إذا تضمن الرأس خيارات X-Frame-Options وكانت قيمتها دائمًا SAMEORIGIN ، فلن تظهر صفحتك أبدًا في iframe. قد لا يكون البيان صحيحًا ، لكني لم أجد طريقة للتخلص منه. ما أقصده هنا هو أن القيمة الخاطئة يمكن أن تجعلها تعمل. OH MAN ، هذا بالتأكيد غير مستحسن !!!

/ * 4 * / جعل الخادم يخدم محتويات ثابتة.

الآن ، إذا كان لديك معالج إرجاع "مرحبًا ، العالم!" ، يمكنك تعيينه في لوحة رسم وقراءة هذه الكلمات. دعونا نجعل الأمر أكثر تعقيدًا عن طريق إضافة وحدة تحكم.

يبدو أن الطرق المحددة بواسطة وحدات التحكم ليست طريقة موصى بها في إطار الملاك. ولكن سأستمتع فقط ببرمجة OOP.

استيراد 'package: angel_framework / angel_framework.dart'؛
Expose ('/') class HomeController تمد وحدة التحكم {
Expose ('/ tool / valid'، method: 'POST') checkExternal (RequestContext req، ResponseContext res) async {try {await req.parseBody ()؛ / * 1 * / final params = req.bodyAsMap؛ await res.render ('index'، {'title': 'First تجعل'، 'params': params})؛ } catch (e) {print ('ERROR: $ {e}')؛ res.redirect ('/ error.html') ؛ / * 2 * /}}}

/ * 1 / تحليل الجسم للحصول على قيمته من req.bodyAsMap. / 2 * / هذا هو سبب الحاجة إلى تكوين خادم ثابت في تكوين التطبيق.

عندما تأتي المعلمات في طلب إعادة التشغيل ، يتم عرضها في صفحة index.jael ، مثل:

لا توجد قيم {{k}} - {{params [k]}} {{عنوان}}

يمكنك رؤية الامتداد ، والكتلة ، وإذا كانت لكل توجيهات ، هذه كلمات محرك محرك قالب jael. لكنني لن أذهب إلى هذا الحد.

الآن LTI الخاص بك على ما يرام لإظهار المعلمات ، بعد تكوينه في قماش. المعلمات مثل:

context_title - خوارزمية custom_canvas_api_domain - canvas.instructure.com custom_canvas_course_id - XXXXXX custom_canvas_enrollment_state - active custom_canvas_user_id - XXXXXX custom_canvas_user_login_id - XXXXxxxx custom_canvas_workflow_state - مطالبة الإطلاق

هذا مجرد جزء منه.

التالي هو التحقق من طلب الإطلاق. ترقب.

الريبو هو https://github.com/futurechallenger/lmsify