From Homebuilt to Canvas: Lessons from the Developer Trenches

Transitioning from a 20 year old homebuilt LMS with full control over the stack to hosted Canvas was no easy feat. We'll cover the lessons learned while integrating in-house SIS, providing an integrated user experience with the existing LMS, customizing Canvas with JavaScript, and other developer trench stories.

Transcript

1. From Homebuilt to Canvas Lessons from the Developer Trenches
2. Who are we? Brian Payne Application Developer Su Wang Enterprise Software Engineer
3. Homebuilt since 1996
4. Who are you? Source: https://www.pexels.com/photo/city-sunny-people-street-2752/
5. Today we’ll cover Lessons in SIS Integration Lessons in Branding and Customization And a bunch of API stuff!
6. Lessons in SIS Integration
7. Student Information Systems?! • Background ◦ Non-vendor, very old campus SIS that is not able to directly integrate with Canvas ◦ Homebuilt LMS had access to this information in prioritary format • Problem ◦ Had to build our own integration to send information into Canvas • Constraints ◦ In beginning, only had data from homebuilt LMS to start with ◦ Data format in homebuilt LMS very different
8. Lesson 1 Start with what you have https://www.flickr.com/photos/sfllaw/222795669
9. Starting with what we had • Middle man for sending data to Canvas and communicates with homebuilt LMS • Canvas doesn’t need to know Homebuilt LMS exists • If the homebuilt LMS goes away, we can plug GrandCentral to another data source
10. Lesson 2 Make small Improvements along the way https://commons.wikimedia.org/wiki/File:Square_Peg_in_a_Round_Hole_-_geograph.org.uk_-_1244305.jpg
11. Making small improvements Grand Central gets an upgrade! • Most SIS data now coming directly from SIS • Some data still dependent on homebuilt LMS database ◦ Such as Teaching Assistants to Course bindings
12. LESSON #3 Prepare for change
13. Things change… be prepared • All SIS data now coming straight to GrandCentral • Data is now fed into the homebuilt LMS as needed • Reduces dependencies
14. Lessons Learned Start with what you have Make small improvements along the way Dependencies are bad!
16. Branding and Customization
17. Customization • We needed to add buttons ◦ Transfer to WebGrades • Customize content ◦ Help dialog pop-up ◦ Custom footer http://www.barnesandnoble.com/w/home-gift-office-space-box-of-flair/22645095
18. Theme Manager JS CSS https://ucirvine.test.instructure.com/
19. Horror https://www.reddit.com/r/shittyprogramming/comments/2dbosn/i_have_to_refactor_some_jquery_made_by_another/
20. Follow a development process
21. Structured 3 Files: <feature>.css <feature>.js <feature>.html
22. customizations/courses/gradebook/ add_transfer_to_webgrades_buttons.js
23. Guidelines
24. • Development process • Structure your code ◦ 3 files ◦ Directories match URL • Guidelines ◦ Single responsibility per fileset ◦ Replace not tweak
26. SHIFTING GEARS TO THE API SOURCE: https://upload.wikimedia.org/wikipedia/commons/f/ff/FIAT_500L_gear_shift.jpg
27. Using the API to Link People to Canvas https://pixabay.com/static/uploads/photo/2014/04/02/10/35/panda-303949_960_720.png http://www.uvu.edu/ldp/.private_ldp/a45241/production/master/bcf0e1b7-4b10-420f-ac56-6a283ae5a71b.png
29. Linking People to Canvas • Background: ◦ Canvas is opt-in so not every course was using Canvas, only those who opted in. • Problem: ◦ We needed a way for students using the homebuilt LMS to get to Canvas, without the instructor needing to remind them everyday • Constraints: ◦ The link is highly visible, on a page that is probably the most popular page on homebuilt LMS. ▪ About 83,333 hits per day, 3,472 per hour ▪ Multiply that by the average number of courses a student has (~4) = 13,888 API requests per hour
30. It works most of the time But for the times it doesn’ t… Lesson 1: The Canvas API is not perfect https://coconino.instructure. com/courses/923533
31. But for the times it doesn’t… Lesson 1: The Canvas API is not perfect https://coconino.instructure.com/courses/923533
32. Build a caching layer! • Built into GrandCentral an internal API that is used to check if a course is using Canvas before a call goes to Canvas, limits the number of Canvas API calls. • We use the SIS_COURSE_ID: format so we don’t need to save Canvas’ internal course ids • Ran into issues with too many calls going to GrandCentral so then built a caching system on the homebuilt system to Cache and avoid calls to GrandCentral Lesson 1: The Canvas API is not perfect Canvas Caching Layer Your App Your App Your App
33. Build a caching layer for the caching layer • Ran into issues with too many calls going to GrandCentral • Built a caching system on the homebuilt system to Cache and avoid calls to GrandCentral Lesson 2: Your API is not perfect either Canvas Caching Layer Your Really Busy App Your App Your App Caching Layer
35. Self Provisioning
36. • Every course is on the LMS • Course name is not customizable • Grouping of courses Background
37. GrandCentral SOURCE: http://php.net/download-logos.php http://symfony.com
38. SIS GrandCentral Canvas SIS CSV Canvas
39. Entry point from existing our LMS
41. 1. Synchronize GrandCentral with SIS 2. Export to Canvas SIS CSV format 3. Upload CSV to Canvas 4. Log the changes SIS Import Process
42. • Check if the course exists • Send an email to the instructor • ~1 hour Notify Users
43. • New application ◦ GrandCentral • User creates a course ◦ Opt-in, not every course is on Canvas • SIS Import ◦ Canvas CSV SIS Import format • Notify the user
45. Sandboxes in Canvas?!
46. GIVE INSTANT GRATIFICATION SOURCE: http://www.brokenbreadclub.com/wp-content/uploads/2015/01/Instant-Gratification.jpg
47. NO MORE CSV UPLOADS!
48. GO STRAIGHT TO THE API SOURCE: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Mauritius_Road_Signs_-_Warning_Sign_-_Two- way_traffic_straight.svg/2000px-Mauritius_Road_Signs_-_Warning_Sign_-_Two-way_traffic_straight.svg.png
54. Final Grades
55. Background
56. Stand-alone Application SOURCE: http://php.net/download-logos.php http://symfony.com
57. API Client Library • Code reuse • Pagination • Error handling • Authentication
58. SOURCE: https://help.eee.uci.edu/canvas/instructors/#muted-assignments Muted Assignments • Grades displayed in gradebook don’t match the API • Prompt the user when they mute the assignment
59. Entry point https://.../transfer/CourseSpace-Section-S16-99125
60. Logging • Monolog • Graylog • Support heavy
61. • Separate application ◦ Symfony • API client library • Muted assignments • Entry point • Logging
62. Questions! Contact us if you have more questions! Brian: bpayne@uci.edu Su: suw@uci.edu