Redu para desenvolvedores

Canvas

Fork me on GitHub

Os aplicativos de tipo canvas representam o maior nível de integração com o Redu. Neste tipo de integração não há a necessidade de deixar a plataforma para utilizar o aplicativo, por isso a experiência para o usuário é, em geral, mais completa.

Uma vez que estes aplicativos são integrados a interface do Redu, existem alguma limitações a respeito das dimensões do mesmo. Atualmente é possível inserir aplicações de até 720px de largura. Em relação a altura só é necessária que ela seja fixa, ou seja, que se mantenha a mesma durante desde o momento em que ela é carregada.

O canvas propriamente dito é um <iframe> que tem como fonte um endereço em outro servidor. Este modelo já é bem estabelecido e utilizado em outras plataformas de aplicativos, como o Facebook.

Entrando em detalhes, o canvas é uma tag <iframe> que pode ser mostrada em diversos pontos da interface do Redu. O <iframe> é inicializado com uma URL da sua aplicação e recebe diversas informações sobre o contexto de onde o canvas será mostrado.

Atualmente o canvas pode ser mostrado na Disciplina e na Aula.

Exemplo de aplicativo tipo canvas na Disciplina. É possível manter a identidade visual do Redu utilizando os nossos componentes de interface

Informações de contexto

Ao exibir o canvas, o Redu envia algumas informações de contexto no formato querystring. Ou seja, é possível modificar o comportamento da aplicação dependendo de onde o canvas é exibido.

O Redu envia as seguintes informações para a aplicação:

Parâmetro Significado Quando é mostrado
redu_container Tipo do container. Representa o nível da hierarquia onde o canvas é mostrado Sempre
redu_space_id ID do Space (Disciplina) Sempre
redu_user_id ID do usuário que está visualizando o canvas no Redu Sempre
redu_lecture_id ID da Lecture (Aula) Canvas da Aula

Detectando encerramento da sessão

Uma prática comum é persistir o ID do usuário do Redu na sessão da aplicação. Porém, quando se trata de aplicativos tipo canvas, não há uma forma simples de expirar a sessão do usuário. Por exemplo, quando ele faz logout do Redu não há como detectar isso no contexto da aplicação.

Por este motivo sempre é enviado o ID do usuário (redu_user_id) que está logado ao mostrar um canvas. Sua aplicação pode comparar este ID com o ID persistido em sessão e utilizar isto para detectar se a sessão deve ser expirada ou não. Este ciclo pode ser visto do diagrama abaixo:

Disciplina

Links

Nas representações do canvas, os seguintes links são mostrados:

Link Descrição
self Canvas em questão
self_link Link da interface Web para o canvas
container Link para o container do canvas
raw Link para a URL exibida no canvas

POST /api/spaces/:id/canvas

Cria canvas na Disciplina.

Parâmetros

Chave Descrição Restrições
canvas[current_url] URL que será exibida no canvas Não é obrigatório. Deve ser uma URL válida
canvas[name] Nome mostrado nos links para o Canvas Obrigatório

GET /api/canvas/:id

Retorna o canvas com o ID especificado.

Exemplo de resposta

{
  "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

Atualiza informações de um canvas existente.

DELETE /api/canvas/:id

Remove canvas.

Aula

POST /api/subject/:subject_id/lectures

Cria uma nova aula com um canvas dentro do módulo especificado.

Parâmetros

Chave Descrição Restrições
lecture[type] Tipo da Aula. Nesta caso queremos criar com o tipo Canvas Obrigatório
lecture[name] Nome de aula Obrigatório
lecture[current_url] URL que será exibida no canvas Não é obrigatório. Deve ser uma URL válida

O current_url é opcional e, caso omitido, a URL principal da aplicação será mostrada.

Exemplo

Requisição: POST /api/subject/12/lectures

Resposta:

{
  "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

Caso seja uma aula tipo Canvas, uma representação da mesma é retornada.

Requisição: GET /api/lectures/107

Resposta:

{
  "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"
}