1 / 41

Canvas LTI Application Development

Canvas LTI Application Development. . . . in a nutshell. Presentation Pace. Brief overview of LTI Canvas configuration of LTI Cloud-hosted vs. Open Source options Brief overview of development solutions Examples of LTI applications. LTI - Definitions. LMS – Learning Management System

ping
Download Presentation

Canvas LTI Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Canvas LTI Application Development . . . in a nutshell

  2. Presentation Pace • Brief overview of LTI • Canvas configuration of LTI • Cloud-hosted vs. Open Source options • Brief overview of development solutions • Examples of LTI applications

  3. LTI - Definitions • LMS – Learning Management System • LTI - Learning Tools Interoperability • LTI is “a standard way of integrating rich learning applications (often remotely hosted and provided through third-party services) with platforms like learning management systems”– wikipedia • IMS Global non-profit, defining standards • http://www.imsglobal.org/lti/

  4. LTI as a “Plugin” The Learning Management System (LMS) is the Tool Consumer The external LTI-enabled application is the Tool Provider

  5. LTI XML Specifications • Versions define set of features available, as allowable values in the XML configuration. • LTI XML Versions • LTIv1.0 • LTIv1.1 • LTIv1.1.1 • Basic LTI Smallest useful subset

  6. Common Cartridge Specifications • Standardized packaging of rich content: • Media Files • Integrated Assessments • Question and Test Interoperability • IEEE Learning Object Metadata • Discussion Forums • XML versions: CCv1p0 - CCv1p2

  7. LTI “Basic LTI” XML example <?xml version="1.0" encoding="UTF-8"?> <cartridge_basiclti_linkxmlns="http://www.imsglobal.org/xsd/imslticc_v1p0" xmlns:blti = "http://www.imsglobal.org/xsd/imsbasiclti_v1p0" xmlns:lticm ="http://www.imsglobal.org/xsd/imslticm_v1p0" xmlns:lticp ="http://www.imsglobal.org/xsd/imslticp_v1p0" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://www.imsglobal.org/xsd/imslticc_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticc_v1p0.xsd http://www.imsglobal.org/xsd/imsbasiclti_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imsbasiclti_v1p0.xsd http://www.imsglobal.org/xsd/imslticm_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticm_v1p0.xsd http://www.imsglobal.org/xsd/imslticp_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticp_v1p0.xsd"> <blti:title>Grade Book</blti:title> <blti:description>Grade Book with many column types</blti:description> <blti:custom> <lticm:property name="keyname">value</lticm:property> </blti:custom> <blti:extensions platform="my.lms.com"> <lticm:property name="keyname">value</lticm:property> </blti:extensions> <blti:launch_url>url to the basiclti launch URL</blti:launch_url> <blti:icon>url to an icon for this tool (optional)</blti:icon> <blti:secure_icon>secure url to an icon for this tool (optional)></blti:secure_icon> <blti:vendor> <lticp:code>vendor.com</lticp:code> <lticp:name>vendor.name</lticp:name> <lticp:description>This is a vendor of learning tools.</lticp:description> <lticp:url>http://www.vendor.com/</lticp:url> <lticp:contact> <lticp:email>support@vendor.com</lticp:email> </lticp:contact> </blti:vendor> <cartridge_bundleidentifierref="BLTI001_Bundle"/> <cartridge_iconidentifierref="BLTI001_Icon"/> </cartridge_basiclti_link>

  8. LTI Integration with LMS Systems • Canvas • Blackboard • Moodle • Also non-LMS systems: (example: vendor LTI plugin for WordPress) • http://www.imsglobal.org/cc/statuschart.cfm

  9. Canvas Conformance with LTI and Common Cartridge • Canvas compliance • Basic LTI, LTIv1.0, LTIv1.1, CCv1.0 • CCv1.1 with some exceptions • Determines kinds of external applications that can be integrated with Canvas using the LTI and Common Cartridge standards.

  10. Canvas supported LTI XML Configuration <?xml version="1.0" encoding="UTF-8"?> <cartridge_basiclti_link xmlns="http://www.imsglobal.org/xsd/imslticc_v1p0" xmlns:blti = "http://www.imsglobal.org/xsd/imsbasiclti_v1p0" xmlns:lticm ="http://www.imsglobal.org/xsd/imslticm_v1p0" xmlns:lticp ="http://www.imsglobal.org/xsd/imslticp_v1p0" xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation = "http://www.imsglobal.org/xsd/imslticc_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticc_v1p0.xsd http://www.imsglobal.org/xsd/imsbasiclti_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imsbasiclti_v1p0.xsd http://www.imsglobal.org/xsd/imslticm_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticm_v1p0.xsd http://www.imsglobal.org/xsd/imslticp_v1p0 http://www.imsglobal.org/xsd/lti/ltiv1p0/imslticp_v1p0.xsd"> <blti:launch_url>https://ltihost.utexas.edu/attendance </blti:launch_url> <blti:title>Attendance</blti:title> <blti:description>Provides an interactive seating chart and attendance tool</blti:description> <blti:extensions platform="canvas.instructure.com"> <lticm:property name="privacy_level">public</lticm:property> <lticm:options name="course_navigation"> <lticm:property name="enabled">true</lticm:property> </lticm:options> </blti:extensions> </cartridge_basiclti_link> Other examples of LTI XML configurations: https://canvas.instructure.com/doc/api/file.tools_xml.html

  11. Canvas LTI Installation • Installation manually through Canvas Website UI • Installation programmatically through REST API calls

  12. Canvas Supported LTI Application Options • course_navigation • Sidebar menu item restricted to Course context. • account_navigation • Sidebar menu item restricted to Account context. • user_navigation • Sidebar menu item restricted to User context. • editor_button • Rich Editor button for selecting and embedding content. • resource_selection • Assignment-level selection for embedded content.

  13. Canvas LTI App Installation

  14. Example of LTI External Tool Configuration in Canvas

  15. LTI External Tool Configuration Options LTI configuration may be installed by URL to XML file location, or as entered XML. Privacy establishes the amount of private information that can be sent to the LTI application. Anonymous = No private information is sent. Public = Both Name and Email are sent.

  16. Self-Contained LTI Apps • Authorization not (necessarily) required. • Embed a tool, rich media, or page redirects. • Application work done 100% by external site hosting the LTI app. Canvas acts as a proxy to host the application-provided content. • No requirement to access or update Canvas data. • Not contextual to Canvas course or user. More likely a rich editor button to embed content.

  17. Canvas is Ruby/Rails and available as Open Source installation • Code is Ruby • Rails on Apache • Linux OS • PostgreSql, MySql, or others • Extensive Javascript/JQuery/Ajax UI

  18. Canvas Site Cloud-hosted vs. Open Source Open-Source version offers supplementary application development full access to site software and database.

  19. UT Canvas Sites are Cloud-hosted Cloud Hosted site restricts interaction with Canvas server data. Application access allowed only through provided APIs.

  20. Any Development Tools for LTI Applications • LTI apps are externally hosted. • Not required to write Ruby LTI apps. • Ruby, Python, Java, Perl, others OK. • URL-based access. • Central mechanism is the LTI XML configuration through the ‘launch_url’ option.

  21. REST API Access Returns JSON Rest API interface is for accessing Canvas data from an external application. “Courses” API Call: api/v1/courses/17019850 Returns JSON-formatted Result: while(1);{"name":"2-KAIROS \u0026 THE RHET SITUATION","calendar":{"ics":"https://utexas.instructure.com/feeds/calendars/course_fZgRQqhZ3Ato5xPZKgb9ZvKibss7qYVxEGQOacdui.ics"},"sis_course_id":"RHE_330D_FAC_9_MW_200_330","course_code":"RHE 330D","id":17019850,"hide_final_grades":false,"enrollments":[],"account_id":2991285,"default_view":"syllabus","end_at":null,"start_at":"2012-08-27T23:00:00-05:00"}

  22. Java Solution Using Spring Framework • Controller Dispatches HTTP requests • Services Application logic, access to Canvas API and interfaces • Data Access Objects Database access layer. Not possible for Cloud-hosted site. • Database Domain Database definitions to Java class mappings. Not possible for Cloud-hosted site. • JSON Result mapping to Java objects Mapping of JSON properties to Java class definitions.

  23. Mapping of JSON Results to Java Objects import com.fasterxml.jackson.annotation.JsonProperty; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; /** CanvasCourse mapping to Canvas course REST API JSON result. */ @XmlRootElement @JsonIgnoreProperties(ignoreUnknown = true) public class CanvasCourse implements Serializable { @JsonProperty("id") private String id; @JsonProperty("name") private String name; @JsonProperty("course_code") private String courseCode; @JsonProperty("account_id") private String accountId;

  24. Spring Framework RestTemplate CanvasCourse canvasCourse = null; String accessToken = canvasService.getAccessToken(url); RestTemplate restTemplate = new RestTemplate(); ClientHttpRequestInterceptor cat = new CanvasAuthTokenInterceptor("Authorization", accessToken); restTemplate.setInterceptors(Arrays.asList(cat)); String canvasUrl = “example.instructure.com/api/v1/courses” Map<String, String> params = new HashMap<String, String>(); params.put("courseId", courseId); try { canvasCourse = (CanvasCourse)restTemplate.getForObject(canvasUrl, CanvasCourse.class, params); } catch (Exception e) { System.out.println("Error in REST call for canvasUrl : " + e.getMessage()); }

  25. Authorization Requirements LTI Basic Configuration – uses shared secretkeyword between LMS and LTI app. REST API – fixed access tokenmanually created in Canvas site. Stored with LTI application and sent in HTTP header with every API request. REST API – Client ID negotiation for dynamically creating access token.

  26. Negotiation of Access Token for Authorization

  27. Python Solution Python can treat JSON result as list or dictionary data, making key-value access easy. JSON processing can be wrapped in Python class objects in manner similar to Java mapping. Use of third-party ‘requests’ Python library simplifies REST API access. import requests, json class ApiObject(): def REST_GET(self,api_call,params): api_url = self.getApiUrl(api_call,params) data = requests.get(api_url,headers=self._headers,verify=False) return data class ApiCourses(ApiObject): def getCourse(self,course_id): self._course_id = course_id api_call = "api/v1/courses/%s" % (course_id) data = self.REST_GET(api_call)

  28. Example 1 – UT Library Course Research Tools Page <blti:title>LTI UT Library Course Portal 01</blti:title> <blti:description> Portal to UT Library Course Site for current Canvas context. </blti:description> <blti:extensions platform="canvas.instructure.com"> <lticm:options name="course_navigation"> <lticm:property name="tool_id">lti_library_courseportal</lticm:property> <lticm:property name="privacy_level">anonymous</lticm:property> <lticm:property name="url"> https://ltihost.utexas.edu/lti-library-courseportal/lti/nav/portal01 </lticm:property> <lticm:property name="enabled">true</lticm:property> </lticm:options> </blti:extensions> <blti:icon> https://ltihost.utexas.edu/lti-library-courseportal/web/graphics/lti_library-courseportal_01.png </blti:icon> <cartridge_bundleidentifierref="BLTI001_Bundle"/> <cartridge_iconidentifierref="BLTI001_Icon"/> </cartridge_basiclti_link>

  29. Course Navigation LTI app An LTI app installed with the ‘course_navigation’ option will add a sidebar menu item whenever the user is in a Course context.

  30. External UT Library Page Displayed in Canvas When the user clicks on the LTI app menu item, the UT Library help page is displayed in the main content area.

  31. UT Library Page navigable with Canvas Course data The UT Library help pages may be navigated, initialized with information from the user’s current Course context in Canvas.

  32. Course portal summary of LTI-Canvas negotiation The UT Library page is displayed immediately when the user clicks the sidebar menu item, but there are a number of negotiation steps going on behind the scenes.

  33. Example 2 - Khan Academy Video Embedding LTI Showcase site - https://lti-examples.heroku.com/index.html

  34. LTI Tool Provider Configuration URLs LTI Tool Providers may publish configuration URLs. These can be entered into the Canvas External Tools installation.

  35. Khan Academy LTI Configuration <blti:title>Khan Academy Videos</blti:title> <blti:description> Search for and insert links to Khan Academy lecture videos. </blti:description> <blti:launch_url> https://lti-examples.heroku.com/tool_redirect?url=%2Fkhan.html </blti:launch_url> <blti:extensions platform="canvas.instructure.com"> <lticm:property name="tool_id">khan_academy</lticm:property> <lticm:property name="privacy_level">anonymous</lticm:property> <lticm:options name="editor_button"> <lticm:property name="url"> https://lti-examples.heroku.com/tool_redirect?url=%2Fkhan.html </lticm:property> <lticm:property name="icon_url">https://lti-examples.heroku.com/icons/khan.png</lticm:property> <lticm:property name="text">Find Khan Academy Video</lticm:property> <lticm:property name="selection_width">590</lticm:property> <lticm:property name="selection_height">450</lticm:property> </lticm:options> ...

  36. Installed LTI Application After successful installation, the LTI plugin will show up in the Canvas External Tools page.

  37. Rich Editor Button Icon In the Assignments rich editor, a ‘button_enabled’ LTI app will have an icon available for launching the LTI tool.

  38. LTI Application within Canvas page The video search, selection and embedding is all accomplished within a popup window in the Canvas page, but the full application functionality is provided by the external LTI tool.

  39. LTI done after embedding object content The selected media object is embedded in-place in the Canvas assignments rich editor. At this point the LTI application is done, and the new media metadata is added to the Canvas database.

  40. Resulting content available to Canvas course users The published Canvas assignment will display the active media object to other users of the assignment.

  41. LTI Resources IMSGlobal website: http://www.imsglobal.org/ Basic introduction to LTI concepts by Charles Severance of IMSGlobal: http://vimeo.com/14100773

More Related