UNIJUI UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE DO SUL DCEEng DEPARTAMENTO DE CIÊNCIAS EXATAS E ENGENHARIAS

Transcrição

1 UNIJUI UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE DO SUL DCEEng DEPARTAMENTO DE CIÊNCIAS EXATAS E ENGENHARIAS ESTUDO COMPARATIVO DE TECNOLOGIAS PARA DESENVOLVIMENTO DE UM PROTÓTIPO DE OBJETO DE APRENDIZAGEM VOLTADO AO ENSINO DE VETORES RUDIERI TURCHIELLO COLBEK IJUI, RS 2013

2 UNIJUI - UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE DO SUL DCEEng DEPARTAMENTO DE CIÊNCIAS EXATAS E ENGENHARIAS ESTUDO COMPARATIVO DE TECNOLOGIAS PARA DESENVOLVIMENTO DE UM PROTÓTIPO DE OBJETO DE APRENDIZAGEM VOLTADO AO ENSINO DE VETORES RUDIERI TURCHIELLO COLBEK Trabalho de Conclusão de Curso apresentado ao Curso de Ciência da Computação do Departamento de Ciências Exatas e Engenharias (DCEEng), da Universidade Regional do Noroeste do Estado do Rio Grande do Sul (UNIJUÍ), como requisito para a obtenção do título Bacharel em Ciência da Computação. Orientador: Prof. Me. Marcos Ronaldo Melo Cavalheiro Ijuí, RS 2013

3 ESTUDO COMPARATIVO DE TECNOLOGIAS PARA DESENVOLVIMENTO DE UM PROTÓTIPO DE OBJETO DE APRENDIZAGEM VOLTADO AO ENSINO DE VETORES RUDIERI TURCHIELLO COLBEK Trabalho de Conclusão de Curso apresentado ao Curso de Ciência da Computação do Departamento de Ciências Exatas e Engenharias (DCEEng), da Universidade Regional do Noroeste do Estado do Rio Grande do Sul (UNIJUÍ), como requisito para a obtenção do título Bacharel em Ciência da Computação. Orientador: Prof. Me. Marcos Ronaldo Melo Cavalheiro BANCA EXAMINADORA Prof. Me. Romário Lopes de Alcantara Ijuí 11/2013

4 AGRADECIMENTOS Primeiramente agradeço aos meus pais pela minha formação e por todo o apoio que me deram todos esses anos, também agradeço aos meus irmãos, avós e tios por todo o carinho, apoio, e companheirismo. Por último, agradeço ao meu orientador por todos os conselhos e dicas que me ajudaram na construção deste trabalho.

5 RESUMO Este trabalho apresenta uma comparação entre diversas tecnologias que podem ser usadas na construção de aplicações móveis. Esta comparação é feita para que se descubra qual delas será melhor utilizada na implementação de um protótipo de objeto de aprendizagem. Com a tecnologia selecionada, será feita a construção do protótipo, que terá como missão auxiliar no ensino de vetores, mostrando graficamente o resultado de várias operações entre vetores. Palavras-chave: Objeto de Aprendizagem. HTML5. JavaScript. Node.js. Three.js.

6 ABSTRACT This study presents a comparison of several technologies that can be used to build mobile applications. This comparison is made to find out which one it is best used in the implementation of a prototype learning object. With the technology selected, will be the construction of the prototype, which will assist in the teaching mission of vectors graphically showing the results of various operations between vectors. Keywords: Learning Object. HTML5. JavaScript. Node.js. Three.js.

7 LISTA DE ABREVIATURAS E SIGLAS API EJS HTTP I/O JSON JVM OA NPM PHP Application Programming Interface Embedded JavaScript Hipertext Markup Language Input/Output JavaScript Object Notation Java Virtual Machine Objeto de Aprendizagem Node Package Manager PHP Hypertext Preprocessor

8 Lista de Figuras Figura 1: Um vetor no plano cartesiano...14 Figura 2 - Novas marcações X atributos "class" e "id"...16 Figura 3 - Tempo de resposta Node.js x PHP/Apache...19 Figura 4 - Carregamento dos módulos no Node.js...20 Figura 5 - Toroide desenhado com o Three.js...26 Figura 6 - Vista do ambiente onde os vetores são desenhados...40 Figura 7 - Produto vetorial entre os vetores (2, 2.5, 0) e (-1, 1, 0.5), resultando em (1.25, -1, 4.5)...42 Figura 8 - Soma dos vetores (2, 2.5, 0) e (-1, 1, 0.5), resultando em (1, 3.5, 0.5)...43 Figura 9 - Projeção de (2, 2.5, 0) sobre (-2, -1, 0), resultando em (2.6, 1.3, 0)...43

9 LISTA DE TABELAS Tabela 1 - Avaliação dos critérios para cada tecnologia...31 Tabela 2 - Pontos obtidos por cada tecnologia...31

10 LISTA DE QUADROS Quadro 1 - Exemplo de execução assíncrona...18 Quadro 2 - Exportação de uma função JS usando o module.exports...20 Quadro 3 - Exportção de uma função JS usando o exports...20 Quadro 4 - Exemplo de conteúdo para o arquivo "package.json"...21 Quadro 5 - Eventos de conexão, envio de mensagem e desconexão no cliente...23 Quadro 6 - Principais eventos do Socet.io no servidor...23 Quadro 7 - Esquema do objeto "Usuario"...25 Quadro 8 - Código para a geração de um toroide...26 Quadro 9 - Dados básicos da aplicação e suas dependências...34 Quadro 10 - Definição do usuário, com seus subdocumentos...35 Quadro 11 - Controlador das páginas de criação e consulta de vetores...36 Quadro 12 - Código responsável pelo roteamento...37 Quadro 13 - Código para verificar se o usuário está logado ou não...37 Quadro 14 - Fragmento do código de controle do socket...38 Quadro 15 - Estrutura básica da criação de vetores...41

11 SUMÁRIO INTRODUÇÃO TECNOLOGIAS PARA A CONSTRUÇÃO DO OBJETO OBJETO DE APRENDIZAGEM VETORES JAVA APPLETS FLASH HTML JAVASCRIPT NODE.JS Node Package Manager (NPM) EXPRESS JS EXPRESS LOAD SOCKET.IO EMBEDDED JAVASCRIPT (EJS) MONGO DB Mongoose THREE.JS COMPARAÇÃO E SELEÇÃO DAS TECNOLOGIAS JAVA APPLETS FLASH HTML5/JAVASCRIPT DEFINIÇÃO DOS REQUISITOS PARA A SELEÇÃO DAS TECNOLOGIAS Ambiente De Desenvolvimento Documentação Compatibilidade PRODUTO RESULTANTE FACILIDADE DE EXECUÇÃO SELEÇÃO DAS TECNOLOGIAS PARA CONSTRUÇÃO DO PROTÓTIPO Outros Recursos CONSTRUÇÃO DO PROTÓTIPO DE OBJETO DE APRENDIZAGEM CONSTRUINDO O SERVIDOR CRIANDO VETORES NO CLIENTE...39 CONSIDERAÇÕES FINAIS...45 REFERÊNCIAS...46

12 11 INTRODUÇÃO Os objetos de aprendizagem são ferramentas muito importantes para auxiliar no ensino de alguns conteúdos abordados em aula que necessitam de visualização alternativa aos conceitos vistos nos livros tradicionais. Com o auxilio deles, é possível oferecer ao aluno um ambiente interativo, tornando, em alguns casos, uma aula muito mais atraente. Existem muitas ferramentas/tecnologias voltadas ao desenvolvimento de aplicativos para a web, mas nem todas são ideais para um objetivo específico, por exemplo, quando se busca uma certa facilidade de execução do aplicativo, uma ferramenta que necessita da existência de um plugin para que seu aplicativo funcione, tem uma grande desvantagem em relação a outras que não necessitam de instalações de extras. Diante disso, foi realizada uma comparação entre algumas ferramentas/tecnologias que poderiam ser usadas no desenvolvimento desse tipo de conteúdo. Após isso, um protótipo de objeto de aprendizagem foi implementado usando a ferramenta/tecnologia escolhida com base nessa comparação. O protótipo de objeto de aprendizagem desenvolvido, é na verdade um espaço em 3 dimensões, onde pode-se desenhar vetores, bem como, fazer algumas operações entre eles. É possível também salvar todos os vetores e cálculos efetuados, permitindo ao usuário, recuperá-los em outro momento. Uma característica marcante desse protótipo é que ele é capaz de rodar em diversos Sistemas Operacionais (SO), funcionando perfeitamente até mesmo em dispositivos móveis, como smartphones e tablets. Sendo o único requisito é ter instalado um navegador moderno. Outra funcionalidade interessante é a capacidade do mesmo salvar automaticamente os vetores que são feitos nele, sem a intervenção do usuário. Isso é feitos graças aos websockets, porém, como algumas versões de navegadores não tem suporte a esse recurso, foi usado o Socket.io. Ele faz automaticamente a comunicação com o servidor, emulando um socket com outra tecnologia, caso seja necessário. Em função da escolha do HTML5 e do JavaScript para fazer a construção do objeto de aprendizagem, foi adicionado ao projeto um novo framework, o Three.js. Esse

13 12 framework oferece vários métodos de forma simplificada para fazer a renderização de objetos 3D. Na implementação do servidor, foi usado o Node.js, que é basicamente um servidor que roda em JavaScript, com mais algumas peculiaridades, como o fato de rodar em uma única Thread e de fazer operações com entrada e saída sem gerar bloqueios. Além do Node.js foram usados alguns frameworks para facilitar o desenvolvimento com esse servidor. O armazenamento dos dados é feito pelo MongoDB, em formato JavaScript Object Notation (JSON), que é nativo no JavaScript, tornando o relacionamento entre os dois muito mais natural. A comunicação com o banco de dados é feita pelo Mongoose, um módulo do Node.js, que além de simplificar a conexão, também auxilia na modelagem dos objetos. Outra tecnologia que acabou sendo utilizada foi o módulo Socket.io, que fornece uma biblioteca com funções para comunicação cliente x servidor em tempo real, tornando algumas partes da aplicação muito mais interativas e automatizadas.

14 13 1 TECNOLOGIAS PARA A CONSTRUÇÃO DO OBJETO O estudo realizado sobre as tecnologias disponíveis atingiu diversas áreas, como geometria analítica e vetores, computação gráfica, desenvolvimento para web, entre outros. Neste capítulo serão apresentados alguns conceitos sobre os itens estudados tanto para a comparação, quanto para o desenvolvimento do protótipo de objeto de aprendizagem. O primeiro conceito estudado descreve um objeto de aprendizagem, como pode ser visto no item subsequente. 1.1 OBJETO DE APRENDIZAGEM A definição de objeto de aprendizagem (OA) segundo Wiley (apud TAROUCO, 2006, p. 2) é... qualquer recurso digital que pode ser reusado para apoiar a aprendizagem.", o que dá a entender que qualquer ferramenta digital utilizada para ensinar é considerada como objeto de aprendizagem, mas Tarouco (2006, p. 2) afirma que por senso comum, objetos de aprendizagem são... um conjunto de tais recursos básicos, organizados de forma a ensejar uma experiência de aprendizagem." Objetos de aprendizagem, quando bem contextualizados induzem o educando a uma aprendizagem significativa, fazendo com que o conteúdo aprendido seja interligado com conhecimentos já existentes. Segundo Tavares (2005, p. 2), a aprendizagem significativa ocorre quando o aprendiz consegue ligar o conteúdo que foi apresentado a ele com o seu conhecimento sobre outros assuntos relacionados. Porém, quando o educando não faz essa relação, e tenta aprender o conteúdo da forma que lhe foi passado, a aprendizagem é feita de maneira mecânica, ou seja, ele só conseguirá reproduzir o conteúdo exatamente da mesma forma que ele foi ensinado. Quando não é possível ligar o conteúdo a nenhum outro conceito, é possível usarse da aprendizagem mecânica para introduzir alguns conceitos, e assim, criar a base para que ocorra a aprendizagem significativa, como explica Monteiro et al. (2006, p. 3). Isso faz com que seja necessário uma introdução ao objeto de aprendizagem, para que se tenha uma otimização no aproveitamento do mesmo.

15 VETORES A definição de vetor é dada por Steinbruch e Winterle (1987, p. 5), onde um vetor é formado por infinitos segmentos orientados, sendo que os mesmos têm o mesmo módulo, direção e sentido, ou seja, são equipolentes. A representação de um vetor é feita por uma letra minúscula e uma seta sobre a mesma ( v ), já a sua representação no plano cartesiano é feita por uma seta com origem no ponto (0, 0), como é mostrado na figura abaixo. Figura 1: Um vetor no plano cartesiano. Fonte: Steinbruch e Winterle (1987, p. 4) 1.3 JAVA APPLETS É um tipo de programa Java que é baixado e executado no contexto do próprio navegador (ORACLE, 2013, p. 14). Segundo Cary e Alexander (apud VOGLER et. al., 2004), Java Applets é uma tecnologia que permite rodar aplicações Java em um navegador de internet. Onde é possível obter um certo nível de interatividade do conteúdo relacionado. Para que o navegador possa rodar o Applet, é necessário a instalação do plugin Java Web Start, que é fornecido junto com a instalação do Java. Existe também a possibilidade de usar uma máquina virtual Java alternativa, sem a parte proprietária da Oracle, como o OpenJDK e seu plugin IcedTea.

16 FLASH O Flash é uma ferramenta de desenvolvimento de animações e aplicações, possuindo uma coleção de recursos para a construção de desenhos vetoriais e animações, tanto em 2D quanto em 3D, essas aplicações executam com o auxilio do plugin FlashPlayer, em um navegador de internet, sendo independente do SO. Além disso possui embutido uma linguagem de programação muito poderosa para esse fim, é o ActionScript (ADOBE, 2013, p. 15). O ActionScript é uma linguagem de programação feita para o Flash, sendo muito poderosa na criação e manipulação de gráficos e animações (ADOBE, 2013, p. 15). 1.5 HTML5 Hipertext Markup Language (HTML) é uma linguagem de marcação e estruturação usada na criação das páginas visualizadas nos navegadores de internet, sendo o HTML5 a quinta versão dessa linguagem (MOZILLA FOUNDATION, 2013, p. 15). Nessa nova versão do HTML, surgiram varias marcações com recursos que eliminam a necessidade de instalação de plugins adicionais, tendo praticamente todos os recursos necessários para a criação de aplicativos, animações, entre outros (W3SCHOOLS, 2013, p. 15). Segundo Crowther (2013, p. 5-6), as novas marcações introduzidas no HTML5 foram derivadas de vários estudos feitos em diversos sites, analisando o conteúdo dos atributos id e class. Baseado nesse estudo, foram definidas a maioria das novas funcionalidades presentes no HTML5. A figura abaixo mostra os vinte primeiros resultados de cada categoria e as marcações em que influenciaram.

17 16 Figura 2 - Novas marcações X atributos "class" e "id". Fonte: CROWTHER, 2013 De todas as adições feitas ao HTML5, as mais interessantes segundo W3schools (2013, p. 16) são: O elemento <canvas> para desenho 2D. Os elementos <video> e <audio> para reprodução de mídias. Suporte para armazenamento local. Novos elementos para de conteúdo específico, como <article>, <footer>, <header>, <nav>, <section>. Novos controles de formulários, como calendar, date, time, , url, search. Dos elementos apresentados no trecho acima, o elemento canvas é essencial no desenvolvimento desse protótipo de OA, sendo responsável pela renderização dos gráficos, caso o navegador não suporte a tecnologia WebGL.

18 JAVASCRIPT JavaScript é uma linguagem de programação orientada a objetos com funções firt-class, mais conhecida como a linguagem de páginas web (MOZILLA FOUNDATION, 2013, p. 17). Ela foi concebida para fazer a dinamização de páginas web, onde se tornou muito popular. Porém ela deixou de ser usada apenas em navegadores, passando a ter várias finalidades, sendo adotada em servidores como o Node.js e na construção de extensões de ambientes gráficos como o Gnome Shell (GNOME FOUNATION, 2013, p. 17; PEREIRA, 2013, p. 1-3). 1.7 NODE.JS O Node.js é uma plataforma que permite rodar JavaScript no servidor, seu projeto foi iniciado em 2009 por Ryan Dahl, e atualmente está na versão 0.10 e é usado em empresas como o Yahoo, Linked In, ebay, entre outros (HANDY, 2011, p. 17; JOYENT, 2013, p. 17). O código gerado para o Node.js é executado na Javascript Engine V8, que é a implementação de javascript usada pelo navegador Google Chrome do Google (RIBEIRO JUNIOR, 2012, p. 2). Com ele é possível utilizar vários módulos que são distribuídos com suas respectivas finalidades, a maioria desses módulos são feitos pela comunidade do node, e distribuídos pelo seu gerenciador de pacotes padrão, o NPM (Node Package Manager) (PEREIRA, 2013, p. 7). Com o node, tem-se uma grande mudança no paradigma usado no desenvolvimento da aplicação, pois ele usa chamadas assíncronas para executar determinadas tarefas, diz-se que ele tem IO não bloqueante, como é explicado por Cantelon et al. (2013, p. 26). Um exemplo pode ser visto no bloco abaixo, onde será feita uma consulta num banco de dados.

19 18 Quadro 1 - Exemplo de execução assíncrona. 1 var fs = require('fs'); 2 for(var i = 0; i <= 5; i++){ 3 var file = "async-txt + i + ".txt"; 4 fs.writefile(file, "Hello Node.js!, function(err, out){ 5 console.log(out); 6 } 7 } 8 console.log("depois de iniciar a consulta."); Fonte: Pereira (2013, p. 22). No caso apresentado na listagem 1, as linhas que estão dentro da função anônima serão executadas apenas quando a consulta for finalizada ou quando ocorrer um erro na consulta, possivelmente isso acontecerá após a execução da linha 10. Por ser single-threaded, seu uso pode representar uma grande economia de recursos do servidor, para que funcione as requisições feitas ao servidor são tratadas como eventos, executando os callbacks ao finalizar alguma tarefa, como é explicado por Quixabeira et al. (2013, p. 100). Segundo testes feitos por Quixabeira et al. (2013, p. 104), onde é feito uma comparação entre o Node e o PHP + Apache. No teste foram executadas 1000 requisições de consulta ao banco de dados MySQL, onde node apresentou uma vantagem considerável sobre seu concorrente.

20 19 Figura 3 - Tempo de resposta Node.js x PHP/Apache Fonte: QUIXABEIRA et al (2013, p. 109) Outra grande vantagem de usar o Node, está no fato de se usar a mesma linguagem de programação, tanto no servidor como no cliente, eliminando a necessidade de aprender mais linguagens de programação (MIKOWSKI, 2012, p ). Além disso, caso opte-se por usar um banco de dados orientado a documentos, tem-se o mesmo formato de informação tanto no banco como na aplicação, já que esses manipulam os objetos JSON, e esses objetos são nativos no JavaScript. Para criar e exportar um módulo no Node.js, basta criar um arquivo de código JavaSccript e exportar a função desejada, já no local onde é necessário fazer a importação do código, é usada a função require('nome_do_arquivo'), que fará a leitura do arquivo e o carregamento das funções exportadas, como pode ser visto na figura 4.

21 20 Figura 4 - Carregamento dos módulos no Node.js. Fonte: (CANTELON et. al., 2013, p. 40) Observando a figura 4, pode-se ver que existem duas formas de exportar as funções, uma delas é usando o module.exports e a outra é usando o exports, como é mostrado nos exemplos abaixo: Quadro 2 - Exportação de uma função JS usando o module.exports. 1 module.exports = function (param) { 2 // Código JS 3 }; Fonte: Elaborado pelo autor. Quadro 3 - Exportção de uma função JS usando o exports. 1 exports.minhafuncao = function (paramt) { 2 // Código JS 3 }; Fonte: Elaborado pelo autor. As duas formas de exportação citadas acima são válidas, porém, o exports nada mais é que uma referência para o module.exports. Assim, é impossível usar alguma atribuição para a variável exports, pois dessa forma, ela deixará de referenciar o module.exports, que é o único item realmente exportado (CANTELON et. al., 2013, p. 40) NODE PACKAGE MANAGER (NPM)

22 21 Segundo Pereira (2013, p. 7) o NPM tornou-se o gerenciador de pacotes padrão do node a partir da versão do node.js. Com ele é possível instalar e manter todas as dependências do projeto, essas encontradas no arquivo package.json. Esse arquivo mantém as informações básicas do projeto, bem como suas dependências. A instalação dos módulos pode ser feita tanto localmente, como globalmente. As duas opções diferenciam-se quanto a localização dos módulos instalados, bem como, a disponibilidade desses módulos para outras aplicações. Segundo Teixeira (2013, p. 9), a instalação local dos módulos deve ser feita para os que afetam diretamente as aplicações, já a instalação global, é melhor para os módulos que são usados seguidamente e não afetam diretamente as aplicações. A instalação de um módulo é feita ao executar o comando npm install <-g> <nome_modulo>, também é possível instalar todos os módulos que estão configurados no arquivo package.json, usando o comando npm install. A estrutura básica do arquivo pode ser vista no quadro abaixo. Quadro 4 - Exemplo de conteúdo para o arquivo "package.json". 1 { 2 "name" : "MyApp", 3 "version" : "1.0.0", 4 "dependencies" : { 5 "sax" : "0.3.x", 6 "nano" : "*", 7 "request" : ">0.2.0" 8 } 9 } Fonte: Teixeira (2013, p. 12). Como pode ser visto na figura acima, a dependência de um módulo é feita informando-se o nome e sua versão. Além disso, é permitido informar a versão em vários formatos, fazendo o NPM atualizar os módulos com diversos critérios, conforme está no arquivo packeage.json (PEREIRA, 2013, p. 8-9).

23 EXPRESS JS O express JS é definido como um framework minimalista e flexível feito para node.js, provendo uma gama de recursos para a construção de aplicações web (VISIONMEDIA, 2013, p. 22). A filosofia seguida pelo Express, segundo Visionmedia (2013, p. 22) é... prover uma ferramenta pequena e robusta para servidores HTTP. Fazendo dela uma boa solução para aplicações de páginas únicas, web sites, aplicações híbridas, ou APIs HTTP públicas.. Ele tem suporte a vários geradores de modelos de páginas, como por exemplo, o Embedded JavaScript (EJS), o que dá ao desenvolvedor um grande liberdade para construção de páginas dinamicamente. Além disso, devido a sua modularidade, o desenvolvedor usa apenas o que ele necessita e nada mais, podendo criar toda a aplicação em um único arquivo (VISIONMEDIA, 2013, p. 22) EXPRESS LOAD Segundo Pereira (2013, p. 39), o Express Load é... responsável por mapear diretórios para carregar e injetar módulos dentro de uma variável que definirmos na função into. Com ele é possível separar os arquivos sem precisar usar varias rotinas de requisição de scripts, deixando o código da aplicação mais limpo (Seers, 2013, p. 22). 1.9 SOCKET.IO Segundo Rauch (2013, p. 22), Socket.io é uma biblioteca que auxilia no desenvolvimento de aplicações realtime, conseguindo rodar na maioria dos navegadores de internet ou dispositivo móvel. A principal tecnologia usada na comunicação é o Websockts presente no HTML5, porém ele é capaz de usar outro artifício para emular a falta de uma determinada tecnologia em navegadores antigos. A comunicação cliente/servidor é feita em ambos os sentidos (full duplex), quando há suporte ao Websockets, permitindo que a aplicação atualize seus dados constantemente. A troca de mensagens pode ser feita usando-se diretamente objetos JSON, sendo o Socket.io capaz de fazer automaticamente a serialização dos mesmos (RAI, 2013, p. 48).

24 23 Tanto no cliente quanto no servidor, a notificação de alguma mudança é feita disparado-se um determinado evento, que poderá conter dados enviados, ou outras informações, dependendo do tipo de evento. Abaixo é possível ver alguns eventos básicos do Socket.io. Quadro 5 - Eventos de conexão, envio de mensagem e desconexão no cliente. 1 <script> 2 var socket = io.connect(' 3 socket.on('connect', function() { 4 socket.send('client socket connected'); 5 }); 6 7 socket.on('message', function(data) { 8 console.log('received a message from the server!',data); 9 }); 10 socket.on('disconnect', function() { 11 console.log('the client socket disconnected!'); 12 }); 13 </script> Fonte: Rai (2013, p ). Existem vários outros eventos, onde alguns existem apenas no cliente, segundo Pereira (2013, p. 80), os principais eventos do servidor são: Quadro 6 - Principais eventos do Socet.io no servidor. 1 io.sockets.on('connection', function(client){ 2 // Conexão de um cliente. 3 4 client.on('message', function(msg, callback){ 5 // Mensagem com resposta imediata 6 }); 7 8 client.on('nome-do-evento', function(dados){ 9 // Evento com nome personalizado, 10 // usado para transferência de dados. 11 // No cliente, é emitido da seguinte forma: 12 // server.emit('nome-do-evento', {dados: "ping"}); 13 }); 14

25 24 15 client.on('disconnect', function(){ 16 // fim da conexão 17 }); 18 }); 19 Fonte: Pereira (2013, p. 80) 1.10 EMBEDDED JAVASCRIPT (EJS) Segundo Jupiter Consulting, EJS é uma engine que combina os modelos com os dados, gerando páginas HTML dinamicamente. Ele permite a criação de modelos de páginas que podem importar outros modelos de páginas, gerando uma estrutura modular, além disso, é possível usar JavaScript para gerar conteúdo dinamicamente (PEREIRA, 2013, p. 37) MONGO DB Mongo é um banco de dados orientado a documentos e shema-free, ou seja, sem uma estrutura pré-definida, sendo a informação armazenada como uma coleção de documentos, estes por sua vez podem guardar informações ou até mesmo outros documentos (TEIXEIRA, 2013, p ). Os documentos gravados pelo Mongo estão no formato Binary JSON (BSON), que é conceitualmente igual ao JSON. Esses documentos são basicamente compostos por { chave, valor }, onde chave é o nome do campo e valor é o dado que será armazenado, sendo que um valor pode ser até mesmo outro documento (NGUYEN, 2012, p. 41) MONGOOSE Mongoose é um módulo que faz o mapeamento dos objetos para serem usados no MongoDB, gerando uma espécie de esquema. Com isso, boa parte da implementação de baixo nível, como por exemplo, a abertura de conexões com o banco, é abstraída, restando apenas o desenvolvimento da aplicação em si (NGUYEN, 2012, p. 44). Ao definir esquemas, pode-se usar algumas validações, como atributos únicos, obrigatórios, entre outros. Para definir um esquema, usa-se o construtor Schema({}),

26 25 passando por parâmetro um objeto JSON, que contém as informações do esquema (TEIXEIRA, 2013, p. 314). Após isso, é preciso criar o modelo, para que o mapeamento fique completo, como é explicado por Teixeira (2013, p. 315). Um exemplo da criação do esquema que representa objeto de persistência é descrito por Pereira (2013, p. 86), como mostra o quadro abaixo. Quadro 7 - Esquema do objeto "Usuario". 1 module.exports = function(app){ 2 var Schema = require('mongoose').schema; 3 var contato = Schema({ 4 nome: String, 5 String, 6 }); 7 8 var usuario = Schema({ 9 nome: {type: String, required: true}, 10 {type: String, required: true 11,index: {unique: true}}, 12 contatos: [contato] 13 }); return db.model('usuarios', usuario); 16 } Fonte: Pereira (2013, p. 86) THREE.JS Segundo Danchilla (2012, p. 173), Threee.js é um framework para renderização de objetos 3D usando o WebGl ou o elemento canvas presente no HTML5. Ele contém implementações de câmeras, luzes, objetos, etc, podendo até mesmo fazer a renderização em contexto 2D caso o WebGL não seja suportado pelo navegador. Usando o framework, torna-se muito mais simples a renderização de alguns componentes, pois o mesmo abstrai várias operações complexas. Abaixo é mostrado um exemplo de código para a criação de um toroide, bem como o resultado da execução desse código.

27 26 Quadro 8 - Código para a geração de um toroide. 1 function addmesh() { 2 var mesh = new THREE.Mesh( 3 new THREE.TorusGeometry( 4, 1.5, 20, 20 ), 4 new THREE.MeshLambertMaterial( { color: 0x0000FF } ) 5 ); 6 scene.add(mesh); 7 } Fonte: Danchilla (2012, p. 182). Figura 5 - Toroide desenhado com o Three.js. Fonte: Danchilla (2012, p. 182)

28 27 2 COMPARAÇÃO E SELEÇÃO DAS TECNOLOGIAS As tecnologias elegidas para o estudo e comparação foram Java Applets, Adobe Flash e HTML5/JavaScript, por serem atualmente as principais tecnologias que podem ser usadas no desenvolvimento de aplicações web. Serão abordadas algumas vantagens e desvantagens de cada uma das tecnologias, para por fim decidir qual a melhor para a construção do protótipo de OA. 2.1 JAVA APPLETS Vantagens: A linguagem de programação usada já está consolidada, tendo uma grande quantidade de desenvolvedores ativos e conseguindo rodar em bilhões de dispositivos. É possível usá-la tanto no servidor quanto no cliente, o que no caso pode ser muito bom, pois não exige a aprendizagem de uma nova linguagem de programação para a construção do servidor. Existe uma variedade enorme de ferramentas de desenvolvimento que são gratuitas e multiplataforma, tendo sempre recursos na maioria dos casos. Desvantagens: Não roda na maioria dos dispositivos móveis modernos que tenham os SOs Android, IOS, FirefoxOS, entre outros. Para rodar no navegador, é necessária a existência de um plugin, que deve ser instalado junto com a Java Virtual Machine (JVM). Em alguns navegadores, a execução do plugin depende da aprovação ou não do usuário, pois o mesmo está associado a alguns problemas de segurança, como é explicado pela Mozilla Foudation (2013, p. 27): Importante: O Firefox interrompeu o funcionamento automático de algumas versões do plugin do Java por apresentar problemas de segurança. No entanto, você ainda pode habilitá-lo para rodar em alguns sites confiáveis caso necessário.

29 FLASH Vantagens: Como mesmo foi concebido para criação de aplicativos e animações com desenhos vetoriais, encontra-se uma ambiente de desenvolvimento integrado, como várias ferramentas de desenho, edição de imagens, etc. Fornece uma gama de funções específicas para manipulação de gráficos, animações, separação em camadas, etc. Desvantagens: Com o surgimento do HTML5, o Flash foi descontinuado em alguns dispositivos móveis, não tendo mais como rodá-lo sem fazer algum hack. O preço do ambiente de desenvolvimento é bastante elevado, não sendo viável para pequenos projetos como esse. Esse ambiente é dependente dos SOs Windows e OSx, não oferecendo suporte nativo ao Linux, inviabilizando-o totalmente para esse projeto. 2.3 HTML5/JAVASCRIPT Vantagens: Uma das mais importantes vantagens, é o fato dele ser verdadeiramente multiplataforma, bastando ter um navegador de internet moderno para que possa rodar a aplicação, atingindo inclusive dispositivos móveis com Android, FirefoxOS, IOS e Windows Phone. Como acontece com o Java, também há uma grande quantidade de ferramentas gratuitas e uma comunidade bastante ativa para auxiliar no desenvolvimento. Com o surgimento do Node.js, o JavaScirpt passou a ser usado tanto nos clientes como nos servidores, tendo assim a mesma linguagem de programação nos dois lados, permitindo ao desenvolvedor fazer todo o ecossistema da aplicação com apenas uma linguagem de programação.

30 29 Outro ponto positivo está relacionado ao recém chegado WebGL, que fornece uma gama de funções para a criação de gráficos em 2D ou 3D, permitindo a construção de aplicações gráficas bem complexas. Desvantagens: Um ponto negativo dessa linguagem está no fato dela ser totalmente interpretada pelo navegador, fazendo ser obrigatório baixar o aquivo contendo o script, para então executá-lo. Isso permite que outras pessoas vejam boa parte ou até mesmo todo o código, apesar de existirem alguns ofuscadores de código que por sinal fazem um bom trabalho. Outro ponto negativo, e bastante importante é que alguns navegadores não suportam plenamente a tecnologia, ou por estarem desatualizados, ou por não seguirem um padrão, sendo que em alguns navegadores, as mesmas funções têm efeitos diferentes (RESIG, 2013). 2.4 DEFINIÇÃO DOS REQUISITOS PARA A SELEÇÃO DAS TECNOLOGIAS Foram definidos cinco requisitos ou características que cada uma das tecnologias deve ter, a partir desses requisitos, a tecnologia que obter melhores resultados será elegida para a construção do protótipo de OA AMBIENTE DE DESENVOLVIMENTO. Nesse requisito é avaliada a presença de recursos que consigam abstrair cálculos complexos, tornando o ambiente de desenvolvimento prático e intuitivo. Devido ao porte desse projeto, prefere-se um ambiente gratuito. Das três tecnologias, o Javascript e Java possuem frameworks que podem ser usados com esse intuito. Já o Flash possui nativamente esses recursos, porém o custo dessa ferramenta inviabilizaria o projeto DOCUMENTAÇÃO Tanto a documentação, quanto os exemplos são recursos importantes para o desenvolvimento. Todas as tecnologias estudadas passam nesse quesito, tendo uma boa documentação e uma vasta coleção de exemplos.

31 COMPATIBILIDADE JavaScript tem um sério problema de compatibilidade com os navegadores, onde um código pode funcionar num navegador e não funcionar em outro, algumas bibliotecas tentam minimizar esse problema reescrevendo algumas funções, mas é um ponto bastante crítico. Nas suas últimas versões, os navegadores vêm adotando cada vez mais um padrão, diminuindo esse problema. Quanto as outras tecnologias, elas não sofrem tanto com isso, pois são executadas em máquinas virtuais e não diretamente no navegador PRODUTO RESULTANTE Aqui é verificado o produto final que cada uma das ferramentas proporciona, onde ele será avaliada a capacidade de reproduzir esse conteúdo em diversos dispositivos. As três tecnologias podem ser visualizadas nas plataformas PC e MAC, porém em dispositivos móveis, mais precisamente smartphones e tablets, com SOs Android e IOS, o Java são é mais suportado, bem como o Flash tem suporte em apenas algumas versões mais antigas. A única tecnologia que satisfaz todos esses dispositivos é a combinação HTML5/JavaScript. O Java até possui uma versão para dispositivos móveis, o Java ME, porém, seria necessário produzir uma versão específica do protótipo de OA para esses dispositivos, não sendo desejável para esse projeto FACILIDADE DE EXECUÇÃO Quanto a esse aspecto, será levado em consideração os passos necessários para execução do protótipo do OA, desde a instalação dos recursos necessários até a execução em si do protótipo. O navegador de internet é um recurso necessário para ambas, porém algumas precisam de mais um plugin, como é o caso do Flash e do Java Applets. Quanto ao momento da execução, o único que pode apresentar algum empecilho é o Java Applets, que poderá pedir uma confirmação se o usuário realmente deseja executar o aplicativo.

32 SELEÇÃO DAS TECNOLOGIAS PARA CONSTRUÇÃO DO PROTÓTIPO Após analisar-se os quesitos apresentados anteriormente, criou-se uma tabela contendo a avaliação de cada tecnologia, onde ela pode atender, atender parcialmente ou não atender um determinado critério. Com base nesses dados será decidido qual tecnologia passará para a fase de desenvolvimento do protótipo. Tabela 1 - Avaliação dos critérios para cada tecnologia. Tecnologias Critérios Java Applets Flash HTML5/JS Ambiente de desenvolvimento Atende Não atende Atende Documentação Atende Atende Atende Compatibilidade Atende Atende Parcial Aplicação resultante Parcial Parcial Atende Facilidade de execução Não atende Parcial Atende Fonte: Elaborado pelo autor. Para uma melhor mensuração, atribui-se pontos aos valores dos critérios, sendo 2 pontos para quem atende o critério, 1 ponto para quem atende parcialmente e 0 para quem não atende. Na tabela 2 pode-se visualizar quantos pontos cada tecnologia obteve. Tabela 2 - Pontos obtidos por cada tecnologia. Tecnologia Pontos Obtidos Flash 6 Java Applets 7 HTML5/JavaScript 9 Fonte: Elaborado pelo autor. Levando em consideração os dados apresentados anteriormente, HTML5/JavaScript levam uma pequena vantagem em relação as outras tecnologias. Com isso, essa combinação foi selecionada para a produção do protótipo de OA, que será explorada no capítulo 3.

33 OUTROS RECURSOS Após a escolha da tecnologia principal para o desenvolvimento, é necessário acertar ouros aspectos, como será construção do servidor e a renderização dos elementos do protótipo. Como a linguagem escolhida foi o JavaScript, foi decidido efetuar a construção do servidor usando o Node.js, que como explicado na secção 1.7, também usa JavaScript como linguagem de programação. A preferência por essa tecnologia deve-se principalmente ao fato ter-se a possibilidade de programar tanto o cliente quanto o servidor com a mesma linguagem de programação. Outra caraterística que foi muito importante para a escolha refere-se a possibilidade de usar um banco de dados orientado a documentos, já que os esses bancos usam objetos JSON para estruturar seus dados. Na parte de renderização de gráficos optou-se por usar um framework chamado Three.js, pois com o mesmo é possível atender ao critério apresentado na secção 2.4.1, já que o mesmo faz o trabalho de abstrair a parte mais árdua, podendo inclusive, usar um contexto 2D para do canvas para a renderização, caso o WebGl não se faça presente.

34 33 3 CONSTRUÇÃO DO PROTÓTIPO DE OBJETO DE APRENDIZAGEM Após a escolha da tecnologia para ser usada no desenvolvimento, enfim será apresentada a construção do protótipo do objeto de aprendizagem (OA). Esse protótipo tem como objetivo criar uma estrutura básica para auxiliar no ensino de vetores, mostrando graficamente como as operações feitas afetam os mesmos. O protótipo foi desenvolvido com o objetivo de satisfazer os seguintes requisitos: Executar em navegadores de internet ou em dispositivos móveis, desde que suportem o uso do elemento canvas. Desenhar vetores em 3D, informando-se as coordenadas da extremidade do mesmo. Permitir efetuar operações entre os vetores desenhados previamente, e, caso tenha-se um novo vetor como resposta, deve-se desenhar o mesmo. Salvar os vetores e cálculos efetuados pelo usuário, para que o mesmo possa consultar posteriormente. Possibilitar uma visão de outras posições. 3.1 CONSTRUINDO O SERVIDOR Com o Node.js, foram instalados vários módulos tanto para auxiliar no desenvolvimento quanto para agregar alguma funcionalidade que não é nativa do Node.js. Todos os módulos foram configurados no arquivo package.json e instados pelo NPM. Parte do conteúdo desse arquivo no projeto pode ser visto abaixo:

35 34 Quadro 9 - Dados básicos da aplicação e suas dependências. 1 { 2 "name" : "Vet3D", 3 "description" : "Operações com vetores em um ambiente 3D", 4 "version" : "0.0.1", 5 "private" : false, 6 "scripts" : { 7 "start" : "node app.js" 8 }, 9 "dependencies" : { 10 "express" : "3.4.0", 11 "express-load" : "1.1.7", 12 "ejs" : "0.8.4", 13 "socket.io" : "0.9.14", 14 "mongoose" : "3.6.14" 15 }, Fonte: Elaborado pelo autor. Com a instalação dos módulos, é possível iniciar o desenvolvimento da aplicação. A configuração do servidor, bem como o carregamento dos módulos, é feita no arquivo vet3d.js, sendo que para iniciar o servidor basta usar o comando node vet3d.js. Nele também são carregados os arquivos de models, controllers, entre outros, como foi explanado no capítulo 1.8. Nesse aplicativo, como ainda é apenas um protótipo, foi criado apenas um modelo, ele será usado para representar o usuário e seus respectivos vetores. Esse modelo é criado com o auxilio do mongoose, módulo apresentado no capítulo O modelo do usuário foi baseado no exemplo de Pereira (2013) e ficou da seguinte forma:

36 35 Quadro 10 - Definição do usuário, com seus subdocumentos. 1 module.exports = function (app) { 2 var Schema = require('mongoose').schema; 3 var Vetor = Schema({ 4 id: {type: String, required: true}, 5 x: {type:number, required: true}, 6 y: {type:number, required: true}, 7 z: {type:number, required: true} 8 }); 9 10 var Calculo = Schema({ 11 nome: {type: String, required: true}, 12 datacriacao: {type: Date, required: true}, 13 vetores: [Vetor] 14 }); var Usuario = Schema({ 17 nome: {type: String, required: true}, 18 {type: String, required: true}, 19 senha: {type: String, required: true}, 20 calculos: [Calculo] 21 }); 22 return db.model('usuarios', Usuario); 23 }; Fonte: Elaborado pelo autor. Nesse esquema, os objetos Calculo e Vetor são apenas subdocumentos, e não são exportados diretamente, ou seja, não geram nenhuma coleção no banco de dados. Dessa forma, eles estarão contidos dentro do objeto Usuario, evitando consultas complexas com junções, como é dito por Pereira (2013, p. 84). Quanto aos controlles, foram criados dois, um deles é usado para gerenciar as páginas de acesso e de cadastro. O outro, gerencia as páginas de criação e consulta de vetores. Eles são estruturados na forma de objetos JSON, onde o valor de cada chave é uma função. Um fragmento do código de um controller pode ser visto abaixo.

37 36 Quadro 11 - Controlador das páginas de criação e consulta de vetores. 1 module.exports = function(app) { 2 var Usuario = app.models.usuario; 3 4 var Vet3dController = { 5 index: function(req, res) { 6 var usuario = req.session.usuario; 7 var params = { 8 usuario: usuario, 9 id: req.params.id, 10 erro: undefined 11 }; 12 res.render('vet3d/index', params); 13 }, 14 controle: function(req, res) { 15 var usuario = req.session.usuario; 16 var params = { 17 usuario: usuario, 18 erro: undefined 19 }; 20 res.render('vet3d/controle', params); 21 }, 22 novocalculo: function(req, res) { 23 var usuario = req.session.usuario; 24 res.render('vet3d/novo', {erro: undefined, usuario: usuario}); 25 }, // outras funções do controller } 30 return Vet3dController; 31 }; Fonte: Elaborado pelo autor. Antes de executar cada função de um controller, a aplicação faz a validação das rotas, definindo, qual código do controller será executado. Com elas, pode-se validar o método (GET, POST, PUT, DELETE.), bem como o endereço e seus parâmetros, tornando muito simples o roteamento. É desse arquivo de roteamento que é feita a chamada dos códigos dos controlles, como pode-se ver no quadro abaixo.

38 37 Quadro 12 - Código responsável pelo roteamento. 1 module.exports = function(app) { 2 var autenticar = require('./../middleware/autenticador.js'); 3 var vet3d = app.controllers.vet3d; 4 app.get('/vetores/desenhar/:id', autenticar, vet3d.index); 5 app.get('/vetores/calculos', autenticar, vet3d.controle); 6 app.get('/vetores/novo', autenticar, vet3d.novocalculo); 7 app.post('/vetores', autenticar, vet3d.salvar); 8 9 }; Fonte: Elaborado pelo autor. Pode-se observar no código do Quadro 2 que além do roteamento, também é executada a autenticação do usuário. Para tanto, foi importado o arquivo./../middleware/autenticador.js, que contém a função responsável pela autenticação. Como a autenticação deve ser executada antes dos controllers, basta passar a função de autenticação como parâmetro antes da função de controle. A autenticação citada acima é na verdade uma função bem simples, que verifica se a propriedade usuario está presente na variável session, se existir, chama a próxima função (no caso um controller), caso contrário, redireciona para a tela de login. Quadro 13 - Código para verificar se o usuário está logado ou não. 1 module.exports = function (req, res, next) { 2 if (!req.session.usuario) { 3 return res.redirect('/'); 4 }; 5 return next(); 6 }; Fonte: Elaborado pelo autor. Quando algum código do roteador é executado, como por exemplo, o app.get('/vetores/desenhar/:id', autenticar, vet3d.index);, dentro na função get, é feito um aninhamento de funções, onde uma função recebe a próxima função como parâmetro e assim por diante. Se a próxima função será executada ou não, depende apenas da função anterior a ela, chamando-se explicitamente a função recebida por parâmetro (nomeada como next no exemplo do quadro acima). Caso todas as funções configuradas em um determinado roteamento sejam executadas e nenhum redirecionaento ou renderização de view seja feito, a requisição ficará aberta.

39 38 Como dito na secção 1.8, com o Express é possível usar vários renderizadores de páginas. Nesse projeto foi usado o EJS, devido a sua simplicidade e modularidade. Como a interface gráfica ficou em segundo plano, foram usados poucos recursos desse módulo, apenas o essencial para separar partes de código repetitivo e dinamizar algumas partes do código. Para fazer a funcionalidade de salvar automaticamente os vetores enquanto o usuário os desenha, foi usada uma biblioteca chamada Socket.io, com ela é possível manter uma conexão bidirecional do cliente com o servidor. A implementação do Socket.io no servidor é feita por um módulo do Node.js, onde após carregá-lo, é definido uma determinada rota em que ele ficará ouvindo. Após isso, são implementados os eventos de conexão e de envio de mensagem do cliente. No quadro 2 pode-se ver que foram usados eventos personalizados para cada operação, como o evento salvar-vetor, por exemplo. Quadro 14 - Fragmento do código de controle do socket. 1 module.exports = function(io) { 2 // Pega o modelo do usuário para fazer as operações no BD 3 var Usuario = global.vet3d.models.usuario; 4 5 var vetsocket = io.of('/vetores'); 6 vetsocket.on('connection', function(clisocket) { 7 var session = clisocket.handshake.session; 8 var usuario = session.usuario; 9 clisocket.on('salvar-vetor', function(data) { 10 // Código para salvar no BD 11 } 12 clisocket.on('remover-vetor', function(data) { 13 // Código para remover do BD 14 } 15 // outros eventos 16 } 17 } Fonte: Elaborado pelo autor. No código apresentado acima, é possível observar que toda vez que um novo cliente conecta-se, a variável usuario recebe o valor que está na sessão, e apesar desse bloco de código ser executado, essa variável continua visível para ser usada quando os

40 eventos de envio de mensagem ocorrerem, isso acontece graças as closures, como explicado por Resig e Bibeault (2013, p ) CRIANDO VETORES NO CLIENTE Para rodar no cliente foram criadas apenas três páginas, sendo uma para efetuar o login/cadastro, outra para listar todos os trabalhos salvos e a própria tela de criação de vetores, porém não será detalhado nada sobre as páginas de login e de listagem de trabalhos, mostrando apenas a parte que cabe ao projeto em si, que é a construção de vetores. As páginas foram construídas usando-se HTML5, pela necessidade de usar o canvas. A tela foi dividida em quatro partes, ficando a parte superior contendo informações do usuário, a parte inferior com informações da aplicação, a parte esquerda com as ferramentas e opções referentes a criação dos vetores, e enfim, o restante (parte central) ficou responsável pela renderização dos vetores. Todos o trabalho de renderização é feito pelo framework Three.js. Ele foi escolhido devido a sua praticidade, simplicidade e a grande variedade de opções prédefinidas que auxiliam muito no desenvolvimento. O ambiente que aparece para o usuário foi baseado em um editor presente no Three.js.

41 40 Figura 6 - Vista do ambiente onde os vetores são desenhados. Fonte: Elaborado pelo autor. Nesse protótipo de OA, os vetores são criados informando-se um ponto, contendo as coordenadas x, y e z. Ao fazer isso, cria-se um objeto Vetor3D, que além das propriedades x, y e z, também contém propriedades como nome e id, além disso, ele contém métodos de acesso às propriedades, métodos de operações unárias, entre outros. As operações são ficam encapsuladas dentro de um objeto chamado GEO, assim como os objetos Vetor3D e Ponto3D, pois assim não poluem o escopo global, tendo menos chances de ter conflito com outros scripts. Nenhuma das operações altera os vetores, criando sempre um novo vetor com resultado. A estrutura básica da implementação pode ser vista no quadro abaixo.

42 41 Quadro 15 - Estrutura básica da criação de vetores. 1 var ORIGEM, GEO = {}; 2 GEO.Ponto3D = function(x, y, z) { 3 this.x = x; 4 // continuam atribuições e métodos de acesso... 5 }; 6 GEO.Vetor3D = function(pontoextremidade, pontoorigem) { 7 // atribuições... 8 // métodos de acesso 9 this.addtoscene = function(scene, material){ 10 // Constrói o objeto gráfico e adiciona na cena }; 12 this.remove = function(scene){ 13 // remover objeto gráfico 14 }; 15 // Operações feitas sobre um único vetor this.getmodulo = function() { 17 return Math.pow(Math.pow(this.x, 2) + Math.pow(this.y, 2) + Math.pow(this.z, 2), 0.5); 18 }; 19 // Outras operações }; 21 // Operações sobre 2 ou mais vetores 22 GEO.somar = function(vetora, vetorb) { 23 return new GEO.Vetor3D(new GEO.Ponto3D(vetorA.x + vetorb.x, vetora.y + vetorb.y, vetora.z + vetorb.z)); 24 } 25 GEO.subtrair = function(vetora, vetorb) { 26 return new GEO.Vetor3D(new GEO.Ponto3D(vetorA.x - vetorb.x, vetora.y - vetorb.y, vetora.z - vetorb.z)); 27 } 28 // Outas operações... Fonte: Elaborado pelo autor. Como pode ser visto no quadro acima, para criar uma nova instância de um Vetor3D, antes é necessário criar uma instância do objeto Ponto3D, que contém as coordenadas x, y e z. A função construtora do Vetor3D recebe dois parâmetros, ambos do tipo Ponto3D, sendo o segundo parâmetro opcional. Ele foi criado dessa maneira, pois JavaScript não suporta sobrecarga de funções, tornando impossível criar duas funções construtoras com mesmo nome e que recebem parâmetros diferentes, e ainda,

43 42 conceitualmente, um vetor é formado pode ser formado por dois pontos, como dito por Steinbruch e Winterle (1987). Atualmente o OA suporta 13 operações, sendo elas: módulo, versor, vetor inverso, soma, subtração, produto por um número real, divisão por um número real, produto escalar, produto vetorial, produto misto, produto vetorial, ângulo interno e projeção. Porém, caso seja necessário, pode-se implementar novas funções sem muita dificuldade. Abaixo serão mostrados algumas operações feitas pelo OA. Figura 7 - Produto vetorial entre os vetores (2, 2.5, 0) e (-1, 1, 0.5), resultando em (1.25, -1, 4.5). Fonte: Elaborado pelo autor.

44 43 Figura 8 - Soma dos vetores (2, 2.5, 0) e (-1, 1, 0.5), resultando em (1, 3.5, 0.5). Fonte: Elaborado pelo autor. Figura 9 - Projeção de (2, 2.5, 0) sobre (-2, -1, 0), resultando em (2.6, 1.3, 0). Fonte: Elaborado pelo autor.

45 44 Como algumas das funções implementadas não têm um Vetor3D como resultado da operação e não foi definido nada de especial para esses casos, o protótipo apenas mostra um alerta com o resultado da operação, não gerando nenhum tipo de desenho.

46 45 CONSIDERAÇÕES FINAIS Com o desenvolvimento do trabalho viu-se que com HTML5 junto com o JavaScript é possível criar aplicativos funcionais e multiplataformas, chegando a níveis que há alguns anos era só era alcançado com o uso de tecnologias como o Flash e o Java Applets. Graças ao Node.js, o JavaScript deixou de ser uma linguagem usada apenas para validar formulários e outras tarefas similares, ganhando a capacidade de rodar em servidores, permitindo o desenvolvimento de uma aplicação usando apenas o JavaScript. Quanto ao desenvolvimento do protótipo de OA, ele atingiu seu objetivo como um protótipo ao fornecer uma estrutura mínima para efetuar vários cálculos entre vetores, mostrando os resultados em um ambiente 3D com infinitas possibilidades de visualizações, podendo ainda mostrar outras informações relevantes como o ângulo entre o resultado da operação e os vetores operandos. O aplicativo também permite que usuários sejam cadastrados e que os mesmos possam salvar todo o seu trabalho de uma forma transparente, já que os vetores são salvos automaticamente ao serem desenhados. Isso acontece devido à capacidade de efetuar a comunicação bidirecional do cliente com o servidor através de sockets. Para trabalhos futuros pode-se fazer a reestruturação da interface do usuário, aplicando estilos CSS para deixá-la com uma aparência mais agradável. Também existe a possibilidade de implementar novas operações com vetores ou dar um significado para as operações já feitas e que no momento não fazem nenhum tipo de desenho por não resultarem num vetor. Também é interessante fazer uma tela de ajuda, explicando como uma certa operação pode ser reproduzida no OA e como ela poderia auxiliar no entendimento dos alunos. Além disso, seria interessante efetuar testes de campo com alguns usuários, obtendo-se assim, as necessidades ou deficiências do protótipo.