Help Setting Up Hype Webapp to work with Canvas LMS API

Using JavaScript with Hype
1

Hi -
I have a webapp built with Hype (http://yciw.net/background_part/). I’m also the owner and admin of my own Canvas LMS install. This allows me to generate tokens etc.

I need help configuring my Hype app to work with my Canvas site. My javascript and AJAX skills are very basic but I’m confident that if someone can help me get started, I can do the rest.

Canvas’s REST API docs are here: https://canvas.instructure.com/doc/api/index.html

The two main things I need help with are:

1). Setting up the OAuth2 as I believe this is necessary to initiate the authentication.
https://canvas.instructure.com/doc/api/file.oauth.html

and

  1. When a user visits the last scene in my Hype app an HTTP PUT method will mark a Module item in one of my Canvas courses as done:
    https://canvas.instructure.com/doc/api/modules.html#method.context_module_items_api.mark_as_done

Once I get this working I’d be happy to share with the community as Instructure’s Canvas LMS is one of the most widely used LMS’s by educators and the same API can work with a schools’ Canvas site that is hosted by Instructure (the way most schools use Canvas).

Thank you!
Matt
background_part.hype.zip (661.2 KB)

2

Cool document!

The REST API is generally intended to be used by a web application (that is, something running server side code), and not a static Hype document. So you’d likely be integrating in whatever programming language the application on the server is running, and not client-side javascript.

I don’t know too much about Canvas, but if you have your own installation, it seems that users would be logged in with their account already. If you can host Hype content within the Canvas environment, then you shouldn’t need to worry about authentication, and they may have a different way to communicate answer/module done data.

Not to dissuade this community from answering if they know, but I would guess you’ll have better success going to the Canvas community and seeing if they can help out, as Hype’s technologies tend towards generic HTML5 but Canvas is quite specific!

1 Like
3

Thank you @jonathan , this is super helpful. In fact, I’m going to be meeting with developers soon and I would love it if you (or anyone else) could point out any flaws in my thinking. I’ve researched this quite a bit but I’m sure there are some holes in my ideas.

I’m planning the project to be in two phases:

#Phase 1
I’d like to use AJAX (likely via Jquery) to send data to my Canvas site from my HYPE static page. For example, a user reaches a certain scene and this triggers some code that initiates the Canvas API to mark a certain module complete. I know there are cross-domain limitations with AJAX so would having the Hype site be at the same domain as my Canvas install be essential?, or just easier? Would I need to use something like CORS instead? Also, am I correct in thinking that using Jquery with AJAX works around this limitation? Do I have this scheme all backwards and actually need to create some kind of middleware? Would I have to use some kind of third party software wrapper like this .

#Phase 2

I’d like to use the Canvas API to populate my Hype static site with the data from my Canvas install (users, courses, modules etc). Wouldn’t this be the same as using AJAX with the APIs of say Twitter or Flickr to add content to a static site? As the admin of my Canvas site I can generate a client ID and secret. I also can generate tokens. Is this doable?

Thank you!

Matt

4

One other thing…

It is clear that I need to host my Hype site on some kind of server that allows it to do server-side things.
My plan is to put it on a Digital Ocean droplet within some kind of very basic app built with React.js from a template generator.

Do you have any basic steps for getting my Hype contact into something like this? Or even Angular?

Thank you!
Matt

5

Easier and recommended; the workaround is a technique called "jsonp" that can allow cross-domain data.

I haven't used Angular, and only dabbled with React. My understanding with React is you'd need to account for three different pieces:

  • making sure that you are able to assign the docname_hype_container ID to the element properly
  • Loading the docname_hype_generated_script.js after the container appears and only once
  • not having the main container div modified by react

In general my recommendation would be to place Hype content in an iframe and then you really won't have to deal with React and Hype interacting, but since it sounds like you want them to interact this might not be the right path!

Unfortunately that's about where the extent of my knowledge ends in helping you as I'm not too familiar with Canvas! If you're meeting with developers experienced in canvas and your use case they'll probably be able to provide better guidance :slight_smile:.

1 Like
6

Thank you!

7

One follow up question:

Can anyone suggest another way I might set up Hype project to function with server side code?
Particularly Oauth workflows?

Thank you!
Matt

8

It’s probably best to think of Hype content as a div in HTML like anything else; there’s not much that would be Hype-specific to dealing with server side code or oauth. You will still need a triggering mechanism to authorize from the other site and a callback to handle with storing the received token.

1 Like
9

This sounds really interesting. I wonder is a similar approach would work with Moodle.