Fork me on GitHub

The canvas applications represent the highest level of integration with Redu. In this type of integration, there is no need to leave the platform to use the application, so the user experience is usually more complete.

Once these applications are integrated to Redu interface, there are some limitations with respect to the dimension of them. Currently, you can add applications of width no more than 720px. Regarding height, it is only required that it be fixed, i.e., it must be kept from the time the application is loaded.

The canvas itself is an <iframe> which has an address to another server as source. This model is well-established and used in other application platforms, such as Facebook.

Going into details, canvas is an <iframe> tag that can be shown in several parts of Redu interface. The <iframe> tag is initialized with an URL to its application, and it receives various information about the context where the canvas will be displayed.

At this moment, the canvas can be displayed in Space and Lecture.

Example of canvas application in Space. It is possible to keep visual identity of Redu by using our interface components

Context information

When displaying the canvas, Redu sends some context information in the querystring format. That is, we can modify the behavior of an application depending on where the canvas is displayed.

Redu sends the following information to the application:

Parameter Meaning Is shown as
redu_container Type of container. It represents the hierarchy level where the canvas is shown Always
redu_space_id Space ID Always
redu_user_id ID of user who is viewing the canvas in Redu Always
redu_lecture_id Lecture ID Canvas in Lecture

Detecting session expiry

In Redu, a common practice is to persiste the ID of a user in an application session. However, when it comes to canvas applications, there is no simple way to expire the user session. For example, when the user logs out from Redu, we cannot detect this in the context of application.

For that reason, the ID of the user (user_id) who is logged on is always sent when displaying a canvas. Your application can compare that ID with the persisted ID in session, and use this information to detect whether the session must be expired or not. This cycle can be seen in the diagram below:

Space

Links

In the representations of canvas, the following links are shown:

Link Description
self Canvas in question
self_link Link of Web interface to canvas
container Link to the canvas container
raw Link to the URL shown in the canvas

POST /api/spaces/:id/canvas

Creates canvas in Space.

Parameters

Key Description Restrictions
canvas[current_url] URL that will be shown in canvas It is not required. It must be a valid URL
canvas[name] Name shown in links to the Canvas Required

GET /api/canvas/:id

Returns the canvas with the specified ID.

Example of response

{
  "id": 107,
  "name": "Minha aula",
  "container_type": "Space",
  "current_url": "http://meu-app.com.br/recurso",
  "links": [
    { "href": "http://google.com", "rel": "raw" },
    { "href": "http://www.redu.com.br/api/spaces/27", "rel": "container" },
    { "href": "http://www.redu.com.br/api/canvas/359", "rel": "self" },
    { "href": "http://www.redu.com.br/espacos/27/canvas/359", "rel": "self_link" }
  ],
  "updated_at": "2011-11-22T22:56:59-02:00",
  "created_at": "2011-02-21T10:11:05-03:00"
}

PUT /api/canvas/:id

Updates information of an existing canvas.

DELETE /api/canvas/:id

Deletes canvas.

Lecture

POST /api/subject/:subject_id/lectures

Creates a new lecture with a canvas within the specified subject.

Parâmetros

Chave Descrição Restrições
lecture[type] Type of Lecture. In this case, we cant to create a Canvas one. Required
lecture[name] Name of lecture Required
lecture[current_url] URL that will be shown in canvas It is not required. It must be a valid URL

The current_url is optional. If it is not given, the main URL of the application will be shown.

Example

Request: POST /api/subject/12/lectures

Response:

{
  "name": "Minha aula",
    "position": 1,
    "rating": 0,
    "type": "Canvas",
    "current_url": "http://meu-app.com.br/recurso",
    "links": [
    { "rel": "next_lecture", "href": "http://www.redu.com.br/api/lectures/105-conheca-o-seu-cliente" },
    { "rel": "course", "href": "http://www.redu.com.br/api/courses/recife" },
    { "rel": "environment", "href": "http://www.redu.com.br/api/environments/www" },
    { "rel": "subject", "href": "http://www.redu.com.br/api/subjects/114" },
    { "rel": "self", "href": "http://www.redu.com.br/api/lectures/107-aula-youtube" },
    { "rel": "raw", "href": "http://meu-app.com.br/recurso" },
    { "rel": "self_link", "href": "http://www.redu.com.br/espacos/27/modulos/114/aulas/107-minha-aula" },
    { "rel": "space", "href": "http://www.redu.com.br/api/spaces/27" }
    { "href": "http://www.redu.com.br/api/spaces/27", "rel": "container" },
  ],
    "container_type": "Lecture",
    "view_count": 6,
    "mimetype": "application/x-canvas",
    "updated_at": "2011-11-22T22:56:59-02:00",
    "id": 107,
    "created_at": "2011-02-21T10:11:05-03:00"
}

GET /api/lectures/:id

If it is a Canvas lecture, a representation of that will be returned.

Request: GET /api/lectures/107

Response:

{
  "name": "Minha aula",
    "position": 1,
    "rating": 0,
    "type": "Canvas",
    "current_url": "http://meu-app.com.br/recurso",
    "links": [
    { "rel": "next_lecture", "href": "http://www.redu.com.br/api/lectures/105-conheca-o-seu-cliente" },
    { "rel": "course", "href": "http://www.redu.com.br/api/courses/recife" },
    { "rel": "environment", "href": "http://www.redu.com.br/api/environments/www" },
    { "rel": "subject", "href": "http://www.redu.com.br/api/subjects/114" },
    { "rel": "self", "href": "http://www.redu.com.br/api/lectures/107-aula-canvas" },
    { "rel": "raw", "href": "http://meu-app.com.br/recurso" },
    { "rel": "self_link", "href": "http://www.redu.com.br/espacos/27/modulos/114/aulas/107-aula-canvas" },
    { "rel": "space", "href": "http://www.redu.com.br/api/spaces/27" }
  ],
    "view_count": 6,
    "mimetype": "application/x-canvas",
    "updated_at": "2011-11-22T22:56:59-02:00",
    "id": 107,
    "created_at": "2011-02-21T10:11:05-03:00"
}