Olá pessoal,
O OpenRedu tem uma funcionalidade muito bacana, é possível embutir conteúdo multimídia dentro de uma Disciplina ou Aula, imagina programar dentro do OpenRedu, assistir uma animação para assimilar melhor o assunto estudado em aula, ou mesmo interagir com o seu professor numa aula totalmente interativa em vídeo. Todas essas coisas são inteiramente possíveis com o OpenRedu, basta liberar a imaginação que o OpenRedu te permitirá se divertir com vendo essas coisas acontecerem, essa é a magia dessa ferramenta, criar oportunidades de aprendizagem que excedem a experiência atual de sala de aula.
O que é Canvas?
O Canvas é uma porção (região de dimensões limitadas) do OpenRedu onde você pode embutir conteúdo dinâmico vindo de outra fonte, o que inclui: vídeos, animações ou qualquer outro tipo de conteúdo interativo.
O Canvas propriamente dito é um <iframe> que tem como fonte um endereço em outro servidor. Este modelo já é bem conhecido e utilizado em outras plataformas de aplicativos, como o Facebook.
O OpenRedu também conta com uma Plataforma de Aplicativos, onde é possível criar aplicações Canvas e embuti-las em uma Disciplina ou Aula através da interface visual, mas veremos como todas essas coisas através da API. Show? hehehehe.
Como já introduzimos o Postman na postagem anterior, vamos usá-lo agora. Antes de prosseguir é importante que você tenha visto a postagem Primeiros passos no uso da API do OpenRedu - Entendendo a hierarquia do OpenRedu para uma compreensão da hierarquia do OpenRedu. Uma vez que você já conhece o cenário da instituição OpenEduca, nossa meta agora é ajudá-la a usar a API.
Criando aplicativo Canvas numa Disciplina (ou também conhecida como Espaço)
Um aplicativo tipo Canvas pode ser criado numa Disciplina ou Aula. Vejamos a primeira opção, de como usar o Canvas numa Disciplina. Uma aplicação Canvas numa Disciplina é indicada para recursos que são úteis em todo o contexto da Disciplina, ou que vão ser compartilhados por Aulas diferentes em diferentes Módulos. Para a Disciplina que utilizaremos logo a seguir, bons candidatos para Canvas são compiladores online, sistemas de submissão de exercícios e sistemas de simulações de competições algorítmicas.
Vamos usar a Disciplina chamada “Algoritmos e Estrutura de Dados”, ela está localizada aqui http://openredu.com/espacos/277. É importante notar que toda entidade no OpenRedu é unicamente identificada através de um ID e, em alguns casos, um path. Através da URL http://openredu.com/espacos/277 podemos identificar que a nossa Disciplina tem ID 277, guarde bem esse valor que o usaremos já já.
O que queremos criar agora é um Canvas numa Disciplina, a documentação da API (http://developers.openredu.com/resources/canvas.html) nos fornece o seguinte endpoint para essa finalidade:
http://openredu.com/api/spaces/:id/canvas
Com os seguintes parâmetros:
canvas[current_url] ~> URL que será exibida no Canvas
canvas[name] ~> Nome mostrado nos links para o Canvas
Como queremos enviar informações para o servidor, faremos uma requisição HTTP do tipo POST, você pode estar achando estranho a palavra canvas se repetindo no nome do parâmetro e outra palavra dentro de colchetes. A explicação para isso é que em requisições POST, geralmente, enviamos nossas informações dentro do corpo da mensagem (payload) não necessitando assim passar parâmetros adicionais na requisição. Podemos enviar as informações sobre o Canvas que queremos criar passando os parâmetros como querystring ou passando um objeto serializado no corpo da mensagem que contém os campos current_url e name, para os objetos serializados, só precisamos informar os nomes que estão entre os colchetes.
Como estamos usando a ferramenta Postman, é mais simples passar parâmetros para a requisição, como já estamos fazendo.
Vamos agora montar nossa requisição POST:
O ID da nossa Disciplina é 277.
A URL que queremos exibir dentro do Canvas será www.codepit.io (um exemplo de sistema de simulação de competição algorítmica).
O nome que queremos seja exibido para o nosso Canvas é Codepit.
Repare que toda entidade é unicamente identificada por um ID ou path (em alguns casos), indicamos que estamos nos referindo à Disciplina 277 fornecendo o seu ID logo após spaces/ (identificador do recurso da API), sendo assim, :id é o ID da nossa Disciplina onde desejamos criar o Canvas. Juntando tudo teremos a seguinte URL:
http://openredu.com/api/spaces/277/canvas
Com os seguintes parâmetros:
canvas[current_url]=http://www.codepit.io
canvas[name]=Codepit
Vamos agora testar se tá tudo certinho, abramos o Postman:
Escolhemos a tipo da requisição HTTP para POST ao clicar no menu dropdown, colocamos a URL que montamos anteriormente, adicionamos os parâmetros depois de apertar o botão “Params”. Está tudo pronto, agora basta usar o Access Token que já temos guardado (se você não tem, é só dar uma olhadinha em Primeiros passos no uso da API do OpenRedu - Usando o Postman), sendo assim, apertemos o botão laranja “Use Token”. No final, teremos:
Ao enviar a requisição HTTP, você vai se deparar com a seguinte mensagem de resposta do servidor:
O que temos aqui é a resposta do OpenRedu com a representação em formato JSON do Canvas que acabamos de pedir para ser criado, ao fazermos requisições POST, o servidor nos retorna o objeto criado a partir das informações que enviamos anteriormente. Para vermos o nosso Canvas em ação, vamos pegar o link self_link, que nos dá a localização do Canvas na interface web do OpenRedu.
Olha ele aqui http://openredu.com/espacos/277/canvas/9, ao navegarmos nesse endereço, podemos ver o nosso Canvas.
E aí, gostou? Espero que tenha gostado. Sinta-se livre para testar outros conteúdos para o seu Canvas, mas atente-se que existem algumas limitações a respeito das dimensões do mesmo. Atualmente é possível inserir aplicações Canvas de até 720px de largura. Em relação à altura só é necessária que ela seja fixa, ou seja, que se mantenha a mesma desde o momento em que ela é carregada.
Criando aplicativo Canvas numa Aula
É só conferir aqui.
Muito obrigado, tudo de bom para vocês e muita diversão com a API.
.