![Desenvolvendo um App interativo para museus](https://www.triscele.com.br/wp-content/uploads/2016/07/app-interativo-para-museus-triscele-01-770x290.jpg)
Neste artigo vamos mostrar como criar um app interativo para museus utilizando HTML, CSS, JavaScript e NW.js.
Considerando a crescente demanda pela exibição de conteúdos audiovisuais em museus de todo o mundo, resolvemos escrever este artigo. Aqui abordamos uma série de soluções em código, que em conjunto constituem um ambiente propício para o desenvolvimento de plataformas elegantes de pesquisa e informação.
Recursos necessários
Para este app interativo, nós pensamos a seguinte estrutura física e de hardware:
- Computador rodando Windows;
- Projetor ou TV grande;
- Tela sensível ao toque;
- Totem em MDF, plástico ou outro material (para suportar a tela touch).
Aplicativos, bibliotecas e plugins utilizados:
O projeto NW.js (anteriormente conhecido como Node-WebKit) permite criar aplicativos com recursos nativos completos em HTML, CSS e JavaScript. Isso significa que seu aplicativo baseado em linguagens web pode receber comandos de sensores e outros dispositivos.
Obtenha em: https://nwjs.io
BookBlock é um plugin jQuery que irá auxiliar na criação de um livreto digital, permitindo que você navegue através de seus itens virando as páginas.
Obtenha em: https://tympanus.net/codrops/2013/05/28/bookblock-revised
Font Awesome traz uma coleção de ícones vetoriais que podem ser personalizados em tamanho, cor e sombra com o poder do CSS.
Obtenha em: https://fontawesome.io
jQuery é uma biblioteca JavaScript indispensável em qualquer projeto web e que não requer maiores apresentações.
Obtenha em: https://jquery.com
Preparando o ambiente
Para dar início a este projeto você precisa baixar a última versão do NW.js (neste momento v0.16.0). Em seguida descompacte o arquivo .ZIP em uma pasta de sua preferência.
Seu primeiro App interativo para museus
Logo abaixo existe um botão de download. Clicando nele você poderá obter o arquivo .ZIP, que preparamos para você, com o aplicativo desenvolvido neste artigo.
Ao extrair o arquivo compactado, você verá que o conteúdo tem uma certa semelhança com um site, isto não é mera coincidência, pois nosso APP é baseado em linguagens web. Porém para este funcionar, você precisa copiar todo o conteúdo para a pasta onde você descompactou os arquivos do NW.js.
![Conteúdo do app interativo para museus Tríscele](https://www.triscele.com.br/wp-content/uploads/2016/07/conteudo-do-app-interativo-para-museus-triscele-01-770x340.jpg)
Após a mesclarem, sua pasta terá um conteúdo parecido com este.
Para iniciar o APP você deverá dar duplo clique no arquivo de nome “nw.exe”. Feito isto você deverá ver duas janelas semelhantes ao retratado na imagem abaixo.
![Aplicativo interativo para museu Tríscele](https://www.triscele.com.br/wp-content/uploads/2016/07/aplicativo-interativo-para-museu-triscele-770x495.jpg)
Aparência do nosso aplicativo de exemplo
Como este App foi desenvolvido
Nesta seção explicarei como funciona o nosso App, dando atenção especial a comunicação e interação entre as janelas do aplicativo. CSS e HTML não serão explicados pois não é este o foco do artigo.
Arquivo: package.json
Este arquivo de conter o código responsável por indicar a primeira página a ser aberta no App interativo, bem como suas configurações de tamanho, posição e modo de exibição. Em nosso exemplo, utilizamos apenas configurações básicas, consulte a documentação do NW.js para outras opções.
{ "name": "Página de índice (interface.html)", "main": "interface.html", "window": { "icon": "img/icon.png", "width": 520, "height": 620, "fullscreen": false, "toolbar": false } }
Arquivo: interface.html
Este é praticamente um arquivo comum em HTML, presente em qualquer site estático da internet. Porém mais do que isso, ele é a primeira página aberta pelo nosso App interativo para museus. Como o código desta página é extenso, apresentarei aqui apenas os trechos que são fundamentais para que o aplicativo funcione. Também adicionei comentários em cada parte, para facilitar o seu entendimento.
jQuery(function ($) { // Função para enviar o numero da página desejada p/ a outra janela $("body").on("click", ".container ul li button", function(e) { e.preventDefault(); var message = $(this).attr("data-page"); parent.top.iframeAction(message); }); });
<ul> <li style="background:#ee6842;"> <div class="image"><img src="img/torta-alema.jpg" alt=""/></div> <h3>Torta Alemã</h3> <button data-page="6">Ver Receita <i class="fa fa-chevron-right"></i></button> </li> <li style="background:#bac368;"> <div class="image"><img src="img/batata-rosti.jpg" alt=""/></div> <h3>Batata Rösti Recheada</h3> <button data-page="2">Ver Receita <i class="fa fa-chevron-right"></i></button> </li> </ul>
Arquivo: content.html
Esta página recebe os comandos da anterior e exibe no livreto o item selecionado pelo usuário. Veja a seguir como estas informações são recebidas.
//inicia var gui = require('nw.gui'); //redimensiona a janela window.resizeTo(520, 450); //move a janela para um ponto x y window.moveTo(540, 0); //recebe o comando e executa a função de mudar a página window.addEventListener('message',function(event) { $('#bb-bookblock').bookblock('jump', event.data); },false);
<div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <img src="img/strudel_02.jpg" alt=""/> <h3>STRUDEL DE MAÇÃ</h3> <p>O Apfelstrudel ou Strudel de maçã é uma sobremesa de massa folhada muito popular na Alemanha. Sua receita pode variar dependendo dos ingredientes escolhidos para o preparo.</p> </div> <div class="bb-item"> <img src="img/batata-rosti_02.jpg" alt=""/> <h3>Batata Rösti Recheada</h3> <p>A receita original é feita com batata cozida ralada, frita em manteiga e recheada com cebola, toucinho, queijo, legumes ou maçã. O preparado fica dourado e crocante.</p> </div>
>>VEJA AQUI O APLICATIVO FUNCIONANDO
![App interativo para museus Tríscele](https://www.triscele.com.br/wp-content/uploads/2016/07/app-interativo-para-museus-triscele-01-770x558.jpg)
App interativo para museus Tríscele
App interativo: Inúmeras possibilidades
Tudo isso já é bastante surpreendente e nós nem sequer utilizamos módulos internos ou bibliotecas de terceiros. Só para se ter uma ideia, os módulos nativos tem funcionalidades como:
- Acesso a arquivos de sistema;
- Soquetes;
- Gerenciamento de processos;
- Criptografia;
- Entre outros.
Mas talvez, o mais incrível são as inúmeras bibliotecas de terceiros, disponíveis para todos os tipos de projetos. Listei aqui algumas das mais interessantes:
- Cylon: um framework para interagir com robôs, drones e vários dispositivos, como o controlador LeapMotion, rede de comunicação Skynet, microcontrolador Tessel, termostato Nest, biossensor Neurosky, relógio inteligente Pebble, etc;
- Phidgets: suporte para placas de interface Phidgets que podem ser usadas para conectar vários sensores;
- OpenCV: É uma biblioteca multiplataforma, de código aberto, para o desenvolvimento de aplicativos na área de Visão computacional;
- Tuio: suporte para o protocolo TUIO particularmente utilizado em dispositivos de interação multi toque e táteis;
- Serialport: uma biblioteca para trabalhar com a porta serial;
- Johnny-five: um framework de programação de hardware que pode ser usado com Arduino, Electric Imp, Beagle Bone, Intel Galileo e Edison, Linino One, Pinoccio, Raspberry Pi, Spark Core, TI Launchpad e muito mais;
- Osc: suporte para o protocolo Open Sound Control muito comum em software e instrumentos musicais;
- Web MIDI API: uma maneira mais fácil de usar a API do Web MIDI para enviar e receber comandos de dispositivos MIDI;
- Entre outras bibliotecas.
Conclusão
Como você pode observar, as vantagens de utilizar NW.js em uma aplicação, são muitas. Porém a possibilidade de utilizar as tecnologias Web, combinadas com módulos Node.js torna o NW.js incrível.
Aproveitando todos estes recursos, você poderia, por exemplo, coletar dados de sensores com a biblioteca Phidgets e gerar dinamicamente formas 3D com Three.js. Ou, você pode coletar dados geográficos através da API do Google Maps e guiar um drone com Cylon.js. Possibilidades infinitas.
Muito legal, parabéns pelo post, não conhecia estas novas possibilidades tão simples e eficazes.
Olá Rodrigo,
Que bom que gostou do artigo. Você viu que temos outras matérias sobre este tema, em nosso blog?
Abraços