View
8
Download
0
Category
Preview:
Citation preview
From Homebuilt to Canvas
Lessons from the Developer Trenches
Who are we?
Brian PayneApplication Developer
Su WangEnterprise Software
Engineer
Homebuilt since 1996
Who are you?
Source: https://www.pexels.com/photo/city-sunny-people-street-2752/
Today we’ll cover
Lessons in SIS Integration
Lessons in Branding and Customization
And a bunch of API stuff!
Lessons in SIS Integration
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
Lesson 1
Start with what you have
https://www.flickr.com/photos/sfllaw/222795669
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
Lesson 2
Make smallImprovementsalong theway
https://commons.wikimedia.org/wiki/File:Square_Peg_in_a_Round_Hole_-_geograph.org.uk_-_1244305.jpg
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
LESSON #3
Prepare for change
Things change… be prepared● All SIS data now coming straight
to GrandCentral● Data is now fed into the
homebuilt LMS as needed● Reduces dependencies
Lessons Learned
Start with what you have
Make small improvements along the way
Dependencies are bad!
Branding and Customization
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
Theme Manager
JS
CSS
https://ucirvine.test.instructure.com/
Horror
https://www.reddit.com/r/shittyprogramming/comments/2dbosn/i_have_to_refactor_some_jquery_made_by_another/
Follow a development process
Structured
3 Files:
<feature>.css <feature>.js <feature>.html
customizations/courses/gradebook/ add_transfer_to_webgrades_buttons.js
Guidelines
● Development process● Structure your code
○ 3 files○ Directories match URL
● Guidelines○ Single responsibility per fileset○ Replace not tweak
SHIFTINGGEARS
TO THE
APISOURCE: https://upload.wikimedia.org/wikipedia/commons/f/ff/FIAT_500L_gear_shift.jpg
Using the API to Link People to Canvas
https://pixabay.com/static/uploads/photo/2014/04/02/10/35/panda-303949_960_720.pnghttp://www.uvu.edu/ldp/.private_ldp/a45241/production/master/bcf0e1b7-4b10-420f-ac56-6a283ae5a71b.png
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
It works most of the timeBut for the times it doesn’t…
Lesson 1: The Canvas API is not perfect
https://coconino.instructure.com/courses/923533
But for the times it doesn’t…
Lesson 1: The Canvas API is not perfect
https://coconino.instructure.com/courses/923533
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
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
Self Provisioning
● Every course is on the LMS● Course name is not customizable● Grouping of courses
Background
GrandCentral
SOURCE: http://php.net/download-logos.php http://symfony.com
SIS GrandCentral Canvas SIS CSV Canvas
Entry point from existing our LMS
1. Synchronize GrandCentral with SIS2. Export to Canvas SIS CSV format3. Upload CSV to Canvas4. Log the changes
SIS Import Process
● Check if the course exists● Send an email to the instructor● ~1 hour
Notify Users
● 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
Sandboxes in Canvas?!
GIVE INSTANT GRATIFICATION
SOURCE: http://www.brokenbreadclub.com/wp-content/uploads/2015/01/Instant-Gratification.jpg
NO MORE CSV
UPLOADS!
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
Final Grades
Background
Stand-alone Application
SOURCE: http://php.net/download-logos.php http://symfony.com
API Client Library
● Code reuse
● Pagination
● Error handling
● Authentication
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
Entry point
https://.../transfer/CourseSpace-Section-S16-99125
Logging
● Monolog
● Graylog
● Support heavy
● Separate application○ Symfony
● API client library● Muted assignments● Entry point● Logging
Questions!
Contact us if you have more questions!Brian: bpayne@uci.eduSu: suw@uci.edu
Recommended