Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
fariborzm
New Member

Mobile Javascript Development

Are there any resources about how to do custom javascript for mobile devices?  For instance, does jQuery work in mobile, or is there some other framework that should be used?  How do you call the Canvas API from your javascript code?  When writing data to the screen, do you use HTML or is there some other markup that is needed?

I recently had a request from a student to make a feature, that we have available on the web, available in the mobile app.  I thought it might be as easy as taking that javascript code into a new javascript override file and adding that file in the Theme editor.  But that doesn't seem to be working, so any help would be appreciated.

Also, how do people go about debugging javascript on mobile devices?

Thanks,

Mike

31 Replies
fariborzm
New Member

I have been playing around with this a bit more this afternoon and have been able to answer at least couple of my questions.

You can't use jQuery, so you have to resort to using pure javascript.  (So you have to use document.getElementById to get an element instead of using the jQuery $('#id') statement.)

It appears you can use HTML when writing data to the screen.

I am running into an issue when trying to call the Canvas API.  I am using the XMLHttpRequest object, but I am getting back a 401 response code.  I have tried using an access_token in the request, but that hasn't helped. So if someone could point me in the right direction about how to do that, I would appreciate it.

Thanks,

Mike

fariborzm
New Member

I have made some more progress today and currently only have one issue that I need some help in resolving.  As I stated above, I can use pure Javascript to get data and write data in the mobile app.  I have figured out the issue I was having with my AJAX call returning a 401. (The issue was that the relative url that I was using was incorrect.  And I don't need to include the access token.)

The final issue that I currently have is, when I am in a course in the mobile app, how can I get the course id for that particular course?  On the web, I could use one of a number of techniques, but none of them seem to work in the mobile app.  Here's what I have tried thus far:

document.location 

document.URL

document.documentURI

ENV.COURSE_ID

ENV.COURSE.id

ENV.MODULES_PATH

ENV.WIKI_PAGES_PATH

None of these seem to work.  The document based options just return the base url.  The ENV based options don't return anything.  (I suspect that ENV isn't defined in the mobile app.)

Any guidance in how to get the current course id would be appreciated.

Thanks,

Mike

James
Community Champion

 @fariborzm ,

I'm sorry I don't have anything for you. I tried looking through the mobile source code to see where the course ID is found, but I'm not a mobile developer and it looks foreign to me.

I wanted to share that even though you're not getting much help from us, that I really appreciate you coming back and updating us with what you have found so that we'll know in the future.

 @James ‌,

Thanks, I do appreciate hearing back from someone. And hopefully what I have figured out thus far will be helpful to someone else in the future.

You mentioned that you looked through the mobile source code.  Is that somewhere that I would have access to look at?  I may not be able to make any sense of it either, but it couldn't hurt for me to try.

Thanks,

Mike

James
Community Champion

The main GitHub site for Instructure is https://github.com/instructure

There are 195 repositories there, so I'm not sure if I'm giving you the right ones, but here's what I think are the main code, the iOS verison, and the Android version.

Thanks, I'll take a look as time allows.  If I figure anything out, I'll make sure to post back here to share any knowledge that I gain.

And, perhaps, someone from the mobile development team might see our thread and chime in with some thoughts.

Thanks again!

Hi  @fariborzm ‌. I can't tell you how excited I am to hear that you can make ajax requests to the Canvas API from JS (although I'm not sure how excited I am by the idea of having to write them with plain JS instead of JQuery in the app!) as I had been led to believe that this wasn't possible - we use this extensively in our current VLE, Sakai, for things like surfacing the current week's materials, rather than making students have to go and look for them.

I've just come across this page: Getting Started With The Api: Canvas Dev and Friends which suggests that I can read from the api with whatever rights the logged in user has:

- does that sound right?

- does that mean that I'll only need an access to token if I want to carry out POST/PUT operations? 

- is there any information anywhere on how to generate an access token? I am still very confused as to how I can do this safely as I can't see how I'm not going to have to leave potentially sensitive information lying around in order to get that token...I'm not talking about writing a third-party e.g LTI application here, just calling Canvas api methods from within Canvas pages...

I'd also be very interested in hearing about your progress with the app. I've just spent a very frustrating morning attempting to debug the Canvas Student App using Chrome (blogged here) and finding out that, while the course Pages are html (with mobile theme .css and .js applied) and shown with WebView, the Modules page seems to have been written in native code. This is particularly annoying as, unlike the web version, it appears that only pages which are launched directly from this native Modules page have the next and previous navigation...

Hello theotherdy‌,

Doing AJAX without jQuery is a little messier, but definitely doable.  Here's some example code that might help you get started:

var url = '/api/v1/users/self';         //Relative url to the current user's user information in the Canvas API.

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function() {

  if(this.readyState == 4 && this.status == 200){

    var resp = this.responseText;

    if(resp.startsWith('while(1);')) {

      resp = resp.substring(9);

    }

    var data = JSON.parse(resp);

    //data is now a javascript object that has properties that contain the current user's user information.

  }

};

xhr.send();

You can replace url with whatever API endpoint you want to use from the Canvas API.  As you can see, I do not include an access token.  Since the code is executing in the context of the current user in the mobile app, it runs using their access level.

In this situation, I think you only need to use an access token, if the current user doesn't have access to make updates through the Canvas API.

As far as creating an access token, I created mine so long ago, I don't remember how I did it.  It was in the prior version of the Canvas UI and things have moved around quite a bit since then.  I thought it was associated with a particular user (most likely an admin), but I don't see it when I jump into Canvas.  The Developer Keys tab might be where you do it now, but I'm not sure.  In the end, unless you are doing updates to Canvas from outside of a currently open session with the Canvas servers, you probably don't need to have an access token.  (For instance, I use mine to synchronize student / faculty information from our HR/SIS systems with Canvas.  In that context, I don't have an established session with Canvas, so the access token allows me to use the API endpoints without having to log in.)

Hope this helps.

Mike

Thanks  @fariborzm , that's very helpful indeed and has opened up all sorts of possibilities which I can't wait to explore. If I come across anything that gives me the current course id from within the app, I'll let you know.

Thanks again
Damion