Analise dados de jogos do Oculus Rift usando o Bluemix Eduardo Domene (https://www.ibm.com/ developerworks/community/profiles/html/ profileview.do?key=d4040fac-7e2e-439da5a2-0eba65501c0b&tabid=dwaboutme) Software Engineer, Big Data University Student 05/Dez/2014 Guilherme Borges Oliveira (https://www.ibm.com/ developerworks/community/profiles/html/ profileview.do?key=34966777-7562-48dd-8c66- c9c5beb5aea8&tabid=dwaboutme) Software Engineer, Big Data University Student Jordan Boaz Rodrigues (https://www.ibm.com/ developerworks/community/profiles/ html/profileview.do?key=78d4a550- c3ea-4f71-910c-843320d0fd1b&tabid=dwaboutme) Software Engineer, Big Data University Student Bradley Steinfeld (https://www.ibm.com/ developerworks/community/profiles/html/ profileview.do?key=e4c19af5-25df-4916- a73a-4b64274926bb&lang=en&tabid=dwaboutme) Software Developer, IBM IBM Um ambiente de usuário interativo torna o aprendizado baseado em jogos digitais atraente e eficiente. E os dados coletados podem ajudar os desenvolvedores de jogos a melhorar o valor educacional dos jogos. Veja como os dados coletados do dispositivo de realidade virtual Oculus Rift podem ser transmitidos para um servidor do Bluemix para análise. O aplicativo do BlueMix armazena todos os dados do Rift, como o movimento da cabeça do usuário, que pode ser analisado para obter insight sobre a taxa de aprendizado. Copyright IBM Corporation 2014. Todos os direitos reservados. Marcas Registradas Analise dados de jogos do Oculus Rift usando o Bluemix Página 1 de 10
developerworks ibm.com/developerworks/br/ Inscreva-se no IBM Bluemix Esta plataforma em nuvem fornece muitos serviços grátis, tempos de execução e infraestrutura para ajudar a desenvolver e implementar rapidamente o seu próximo aplicativo móvel ou da web. Virtual Reality (VR) é a tecnologia do momento, e os dispositivos de VR como o Oculus Rift ganharam importância em empresas de tecnologia, incluindo a Sony e o Facebook. A maneira como os usuários interagem com a VR é simples. O dispositivo captura movimentos da cabeça do jogador e envia esses dados para um computador, que cria um ambiente virtual interativo e imersivo. Além disso, esses dados capturados podem ser armazenados para análise adicional para melhorar a experiência do usuário. O Bluemix é a plataforma perfeita para a tarefa. Este tutorial descreve como criar um aplicativo simples usando o Bluemix e o vr.js, um plug-in do navegador. Este aplicativo captura as posições de quatérnion (x, y, z e w) do Oculus Rift e as envia para o Cloudant, um database as a service (DBaaS). É possível implementar esse aplicativo no Bluemix e usá-lo conectando o Oculus Rift e abrindo um navegador browser. Crie um sistema de VR flexível que pode ser estendido para muitos tipos novos de aplicativos, integrando o Node.js, o Cloudant e o Oculus Rift. Execute o aplicativo Obtenha o código O que é necessário para desenvolver seu aplicativo DevOps Services vinculada ao seu ID IBM Conta do Bluemix Estrutura Express e as variáveis do nano Banco de dados Cloudant plug-in do navegador vr.js Entendimento básico do Node.js Etapa 1. Bifurque este projeto Clique no botão Get the code deste tutorial e bifurque o projeto no DevOps Services. 1. Clique em EDIT CODE (Insira as suas credenciais do DevOps Services se você ainda não estiver com o login efetuado). 2. Clique na guia FORK no menu para criar um novo projeto. 3. Quando você vir o prompt, escolha um nome para atribuir ao seu novo repositório bifurcado. Nós escolhemos rift2cloudant. 4. Marque Deploy to Bluemix. 5. Clique em SAVE para criar uma cópia do código em seu projeto e um repositório Git. É possível tornar esse projeto privado clicando na caixa de seleção Make it private (not public). Deixe-a desmarcada por enquanto. Analise dados de jogos do Oculus Rift usando o Bluemix Página 2 de 10
ibm.com/developerworks/br/ developerworks Configure um host e um nome para seu aplicativo Para implementar esse código no Bluemix, é necessário definir algumas configurações para que seja possível definir um novo host e nome para seu aplicativo. 1. Clique em BUILD & DEPLOY. 2. Na página que é aberta, selecione OFF. Você não deseja implementar automaticamente as alterações feitas no seu repositório. 3. Clique em EDIT CODE. 4. Clique em manifest.yml. É necessário alterar o nome e o host existentes para um nome exclusivo para seu servidor. Nós alteramos as designações de host e as variáveis do name originais para rift2cloudant. Confirme as alterações Acesse a página de status do git clicando em Git Repository: Em seguida, organize as modificações a serem confirmadas e realize o push delas para o repositório. 1. Na caixa de texto, digite as modificações realizadas. 2. Clique em Select All para incluir os arquivos para confirmar. 3. Clique em COMMIT: 4. Clique em Push. 5. Volte para Show Current Folder. 6. Clique em DEPLOY. 7. No pop-up, pressione Deploy para implementar o aplicativo. Analise dados de jogos do Oculus Rift usando o Bluemix Página 3 de 10
developerworks ibm.com/developerworks/br/ Inclua um serviço Cloudant Se o aplicativo for implementado com sucesso, você terá um novo aplicativo iniciado na sua conta do Bluemix. Para incluir um serviço Cloudant: 1. Clique no novo aplicativo que aparece no seu painel. Você deve ver um ponto vermelho que indica que o aplicativo não está em execução. 2. Clique em ADD A SERVICE. 3. Role para baixo até encontrar Cloudant JSONDB e selecione-o. 4. No Name, digite cloudant e pressione Create. Se desejar usar um nome diferente para o serviço Cloudant, certifique-se de também alterar o código dentro do app.js. Procure por esse código: var cloudantservicename = 'cloudant'; É exibido um pop-up dizendo para reiniciar seu aplicativo. 5. Clique em OK. Etapa 2. Clone e realize o push Você deseja manter um repositório local do aplicativo para que quando o código for modificado seja possível realizar o push das alterações no Bluemix. Para começar: 1. Acesse a página principal do seu projeto no DevOps Services e copie a URL do git: 2. Para clonar o projeto para seu computador, abra um terminal (se você usa Windows, recomendamos o git bash), digite git clone e cole o link que você acabou de copiar (por exemplo, git clone https://hub.jazz.net/project). 3. Volte para sua conta do Bluemix, clique no seu aplicativo e abra o VIEW QUICK START. Essa janela é exibida: Analise dados de jogos do Oculus Rift usando o Bluemix Página 4 de 10
ibm.com/developerworks/br/ developerworks 4. Em um terminal, acesse sua pasta clonada e siga as etapas um, dois e três que estão listadas lá. Realize o push das alterações no Bluemix Sempre que desejar que as modificações sejam implementadas no seu aplicativo na sua conta do Bluemix, é necessário realizar o push da modificação. 1. Abra um novo terminal. 2. De dentro do repositório clonado, digite cf push c "node app.js". Seu aplicativo deve estar funcionando agora. Um ponto verde aparece ao lado de Running. Etapa 3.Prepare o DBaaS (Cloudant) Primeiro, crie o banco de dados Cloudant. Para começar: 1. Abra o painel do Bluemix, clique no seu aplicativo e clique no serviço Cloudant. Uma nova página abre, mostrando informações sobre o serviço e como começar. 2. Clique em LAUNCH para acessar o serviço. Certifique-se de que você está na seção database (marcada em laranja). Analise dados de jogos do Oculus Rift usando o Bluemix Página 5 de 10
developerworks ibm.com/developerworks/br/ 3. Essa seção mostra todos os seus bancos de dados. Você deseja criar um novo banco de dados para ser usado no seu aplicativo, então clique em Add New Database. 4. Na janela pop-up, em Name of database, digite users para criar um banco de dados chamado users. 5. Em seguida, crie um novo banco de dados chamado riftbase. Siga as mesmas etapas: Clique em Add New Database e, quando solicitado, digite riftbase. Etapa 4. Entenda e configure o aplicativo Você ainda precisa instalar o plug-in. Primeiramente, antes de acessar o aplicativo em si, você deve entender as seções mais importantes do código. Esse código está dentro do arquivo app.js: var cloudantservicename = 'cloudant'; Esse é o local em que o programa procurará pelo serviço Cloudant no Bluemix. Se você seguiu as etapas anteriores e criou um serviço chamado cloudant, não é necessário modificá-lo. No entanto, se você criou um serviço com um nome diferente, é necessário apenas alterar o código para o nome escolhido. Além disso, você deve ter dois bancos de dados, user e riftbase, criados no Cloudant. Esses bancos de dados serão chamados em duas partes do código: var db = nano.db.use('riftbase'); e var db = nano.db.use('users'); Se você usar nomes diferentes para seus bancos de dados, deve modificar esse código. Enviando dados para o Cloudant Este código, localizado no app.js, cria um manipulador de postagens para que ele possa enviar as informações a serem armazenadas em nosso banco de dados Cloudant: Analise dados de jogos do Oculus Rift usando o Bluemix Página 6 de 10
ibm.com/developerworks/br/ developerworks app.post('/endpoint', function(req, res){ res.send(req.body); db.insert({position:req.body},function(err, body, header) { if (err) { res.send("error creating file"); return; } Essa solicitação de postagem é acionada a cada segundo por uma função chamada mytimer (é possível encontrar mytimer dentro do código de oculus.ejs, que é o código de raw_data.html modificado localizado na pasta views ): function mytimer() { if(state.hmd.present){ var data = {}; data.x = state.hmd.rotation[0].tofixed(2); data.y = state.hmd.rotation[1].tofixed(2); data.z = state.hmd.rotation[2].tofixed(2); data.w = state.hmd.rotation[3].tofixed(2); data.seconds = (endtime - starttime)/1000; data.seconds = (data.seconds).tofixed(0); $.post("/endpoint", data, function(response){ console.log(data); } } Esse código da página de usuários colocado no app.js. Ele funciona enviando um Name e uma Faixa etária para o banco de dados users no Cloudant: app.post('/insert',function(req,res){ var db = nano.db.use('users'); var name = req.body.name var age = req.body.age db.insert({name:name,age:age},function(err,body,header){ if(err){ console.log(err); return res.status(500).send(err.message); } res.send("contact was created successfully"); console.log("success"); Etapa 5. Instale o plug-in vr.js O plug-in vr.js permite que seu Oculus Rift funcione usando o navegador (Chrome ou Firefox). É necessário instalar o plug-in para abrir a página principal do seu aplicativo, mas ainda é possível abrir a página de usuários sem ele. (As páginas principal e de usuário são abordadas na próxima etapa.) O código usado nesse aplicativo do Oculus Rift é uma pequena modificação do código que pode ser encontrado no GitHub. Analise dados de jogos do Oculus Rift usando o Bluemix Página 7 de 10
developerworks ibm.com/developerworks/br/ Agora, dentro do arquivo app.js, podemos escrever um métodoget que renderiza a página oculus, que usa o plug-in vr.js: app.get('/', function (req, res){ res.render('oculus'); Etapa 6. Execute o aplicativo O aplicativo tem duas páginas: a página principal e a página de usuários. Página principal Ao abrir a página principal do seu aplicativo, você é enviado para uma página da Web mostrando os dados capturados do Oculus Rift que está conectado ao computador. Se seu Rift estiver conectado, a página deve ter uma aparência semelhante a essa (esteja ciente de que essa página carrega a posição do quatérnion para o banco de dados riftbase no Cloudant a cada segundo): O oculus usa o sistema de quatérnion, que é o vetor dos últimos quatro elementos exibido em negrito nessa página. O sistema de quatérnion é usado para codificar qualquer rotação em um sistema de coordenadas 3D. Seria possível armazenar qualquer valor dessa página. Em nosso aplicativo, apenas os quatro últimos elementos (valores de quatérnion) são armazenados. É possível verificar a função mytimer Analise dados de jogos do Oculus Rift usando o Bluemix Página 8 de 10
ibm.com/developerworks/br/ developerworks novamente para entender como recuperamos esses valores do headset e os enviamos com o método post. Leia: Mais sobre quatérnions Página de usuários Se você não tem um Rift, ou algo saiu errado e você deseja ter certeza de que seu aplicativo está funcionando, é possível acessar a página de usuários incluindo "/users" no final da URL (por exemplo, http://bluemix.net/users). Essa página é apenas um exemplo para enviar alguns dados para o Cloudant. Ela não requer o Rift. Preencha as caixas e clique em Upload to Cloudant. Depois, verifique seu banco de dados Cloudant para ver se o upload de suas informações foi feito com sucesso. Etapa 7. Valide a coleção de dados e consulte dados armazenados no Cloudant A última ação a ser realizada é verificar se os dados foram transferidos por upload para o banco de dados Cloudant. Para mostrar o documento completo de cada banco de dados, acesse o link do seu banco de dados Cloudant e inclua isso na URL: _all_docs?include_docs=true. De forma semelhante, se você clicar em Edit doc: Analise dados de jogos do Oculus Rift usando o Bluemix Página 9 de 10
developerworks ibm.com/developerworks/br/ os dados são carregados na página: Conclusão Ao integrar tecnologias como o Node.js, o Cloudant e o Oculus Rift, você criou um sistema de VR flexível que pode ser estendido para muitos tipos novos de aplicativos. Enquanto os dispositivos de VR fornecem dados sobre o jogador, o Bluemix oferece diversas ferramentas para armazenálos e analisá-los. Tente usar o Bluemix para outros serviços. Use sua imaginação e mescle serviços como SQL Database, MySQL, Analytics Warehouse e mais. Temas relacionados: Node.js Cloudant Oculus Rift Copyright IBM Corporation 2014. Todos os direitos reservados. (www.ibm.com/legal/copytrade.shtml) Marcas Registradas (www.ibm.com/developerworks/br/ibm/trademarks/) Analise dados de jogos do Oculus Rift usando o Bluemix Página 10 de 10