Olá pessoal, showzão?
Seguimos para a segunda parte dos nossos estudos em como usar a API para criar aplicativos tipo Canvas no OpenRedu. Na postagem anterior cobrimos a criação de um Canvas numa Disciplina, desta vez, veremos como criá-los numa Aula.
Criando aplicativo Canvas numa Aula
A segunda possibilidade, que focaremos agora, é criar um aplicativo tipo Canvas numa Aula, na verdade mesmo, é uma Aula com um Canvas dentro hehehehe, é um pouco embaraçoso de entender. Uma aplicação Canvas numa Aula é muito útil para exploração/experimentação dos conteúdos abordados em aulas anteriores ou uso de interatividade (aluno <-> professor), um professor pode usar uma ferramenta externa que gera conteúdo dentro do OpenRedu. Como um exemplo do que pode ser feito com essa funcionalidade é o professor abrir uma video-conferência com os seus alunos e ir adicionando informações extras como forma de material adicional, ao final da aula, todo o vídeo fica registrado juntamente como as referências para que os alunos possam revisar o assunto. O professor pode criar uma Aula com texto explicando a teoria envolvida enquanto que a Aula com o Canvas aborda aspectos mais práticos. Para a Aula que utilizaremos logo a seguir, bons candidatos para Canvas são animações e simulações do funcionamento dos algoritmos de ordenação.
Vamos repetir o uso da Disciplina chamada “Algoritmos e Estrutura de Dados”, ela está localizada aqui http://openredu.com/espacos/277. Mas agora, precisamos descer mais na hierarquia no OpenRedu. A entidade Aula encontra-se no nível mais baixo da hierarquia, temos que passar ainda pelos Módulos, assim, temos a seguinte situação:
Disciplina: Algoritmos e Estrutura de Dados
Módulo: Ordenação em Estruturas de Dados Lineares
Aula: Animação do QuickSort
Diferentemente de um Canvas numa Disciplina onde precisamos do ID da Disciplina para criar o Canvas, para criar um Canvas numa Aula o que precisamos agora é do ID do Módulo ao qual a Aula pertencerá.
Complicou? Então vamos tentar novamente. Um Canvas numa Disciplina está associado a uma Disciplina, sendo assim para a sua criação precisamos do ID da Disciplina onde ele será criado, já no caso do Canvas numa Aula, precisamos é do ID do Módulo onde a Aula será criada, mas o Canvas continua sendo associado à Aula, a diferença fica sendo o tipo do container do Canvas, que tem dois valores: Disciplina ou Aula, no inglês, Space ou Lecture. Veremos mais sobre isso daqui a pouco.
Já temos a URL da Disciplina que usaremos nessa postagem http://openredu.com/espacos/277, através dele podemos chegar ao Módulo onde criaremos a nossa Aula. Vamos escolher o Módulo chamado “Ordenação em Estruturas de Dados Lineares”, ele está localizado aqui http://openredu.com/espacos/277/modulos/412.
Partindo para a criação do Canvas na Aula, a documentação da API (http://developers.openredu.com/resources/canvas.html) nos fornece o seguinte endpoint para essa finalidade:
http://openredu.com/api/subjects/:subject_id/lectures
Com os seguintes parâmetros:
lecture[type] ~> Esse valor deve ser obrigatoriamente “Canvas”
lecture[name] ~> Nome da Aula
lecture[current_url] ~> URL do conteúdo que será exibido dentro da Aula, o Canvas.
Temos uma observação aqui, o que estamos tratando aqui é, de fato, de uma Aula cujo tipo é Canvas. Criaremos uma Aula cujo conteúdo é exclusivamente o que se encontra na URL informada logo acima.
Vamos agora montar nossa requisição POST:
O ID do nosso Módulo é 412, como identificado pela URL http://openredu.com/espacos/277/modulos/412.
A URL que queremos exibir dentro da Aula será https://www.cs.usfca.edu/~galles/visualization/ComparisonSort.html (um exemplo de simulação do funcionamento de vários algoritmos de ordenação).
O nome que queremos seja exibido para a nossa Aula é Comparison Sorting Algorithms.
Juntando tudo teremos a seguinte URL:
http://openredu.com/api/subjects/412/lectures
Com os seguintes parâmetros:
lecture[type]=Canvas ~> Esse valor deve ser obrigatoriamente “Canvas”
lecture[name]=Comparison Sorting Algorithms
lecture[current_url]=https://www.cs.usfca.edu/~galles/visualization/ComparisonSort.html
Vamos agora testar se tá tudo certinho, abramos o Postman, e montemos a requisição como abaixo:
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 da Aula que acabamos de criar, é interessante notar que esse JSON representa uma Aula mas ele também carrega informação de Canvas - o atributo container_type, é com o valor desse atributo que determinados se o Canvas pertence à uma Disciplina ou à uma Aula.
Olha aí onde a nossa nova Aula foi parar.
E aí, gostou? Espero que tenha gostado. É bacana lembrar que um Canvas numa Disciplina fica disposto em local diferente, eles ocupam o menu esquerdo, como na imagem abaixo:
Só faltou ver agora como ficou nosso Canvas na Aula. Super legal, né? Dá para criar Aulas com muita inovação e contar sempre com o engajamento dos alunos.
Com a morte do Flash e Applets Java, é mais adequado adicionar conteúdo HTML5 ao Canvas, além de aproveitar o suporte em todos os navegadores atuais, muitas páginas HTML5 são responsivas e vão se encaixar melhor em toda a região disponível para o Canvas.
Muito obrigado, tudo de bom para vocês e muita diversão com a API.