{"id":3160,"date":"2015-09-23T12:33:52","date_gmt":"2015-09-23T15:33:52","guid":{"rendered":"https:\/\/www.gingadf.com.br\/blogGinga\/?p=3160"},"modified":"2016-11-23T09:14:28","modified_gmt":"2016-11-23T12:14:28","slug":"tutorial-como-estruturar-seu-ambiente-de-desenvolvimento-para-o-ginga-ncl","status":"publish","type":"post","link":"https:\/\/www.gingadf.com.br\/blogGinga\/tutorial-como-estruturar-seu-ambiente-de-desenvolvimento-para-o-ginga-ncl\/","title":{"rendered":"Tutorial: Como estruturar seu ambiente de desenvolvimento para o Ginga-NCL"},"content":{"rendered":"

S\u00f3 quem desenvolve sabe a emo\u00e7\u00e3o de se ver sua cria\u00e7\u00e3o funcionando seja na internet ou na televis\u00e3o, mas para come\u00e7ar s\u00e3o encontradas v\u00e1rias barreiras pelo caminho e a primeira delas \u00e9 conseguir montar o ambiente de desenvolvimento para iniciar a cria\u00e7\u00e3o de um APP. No primeiro contato com o desenvolvimento para TV digital geralmente o iniciante acaba deparando-se com muitas informa\u00e7\u00f5es sobre normas, plataformas, ambiente de testes, APIs, usabilidade etc. Esse tanto de informa\u00e7\u00e3o pode ser assustador para quem est\u00e1 iniciando, por esse motivo atualizei esse tutorial que j\u00e1 utiliz\u00e1vamos neste blog para acompanhar a evolu\u00e7\u00e3o dos plugins e ferramentas utilizadas no desenvolvimento NCL\/ LUA.<\/p>\n

Existem v\u00e1rias formas de se montar um ambiente de\u00a0desenvolvimento para TV Digital, mas neste tutorial abordaremos o passo-a-passo para a estrutura\u00e7\u00e3o de um ambiente de desenvolvimento e testes para as aplica\u00e7\u00f5es interativas desenvolvidas para o middleware<\/a><\/em> Ginga-NCL utilizando a IDE Eclipse 4.5\u00a0(MARS)\u00a0Eclipse IDE for Java EE Developers<\/a>, VMware Workstation Player 12<\/a> e o Ginga-NCL Virtual STB v.0.12.4<\/a>.<\/p>\n

 <\/p>\n

Ambiente de desenvolvimento<\/h1>\n

 <\/p>\n

Quando falamos em ambiente de desenvolvimento<\/strong> estamos nos referindo ao conjunto de ferramentas que tem por finalidade auxiliar tanto na codifica\u00e7\u00e3o como na execu\u00e7\u00e3o e visualiza\u00e7\u00e3o de nossas aplica\u00e7\u00f5es interativas.<\/p>\n

Para codificarmos nossas aplica\u00e7\u00f5es iremos utilizar uma IDE<\/a> muito popular conhecida como Eclipse<\/a>. O uso de uma IDE \u00e9 bastante recomendado, pois, como veremos no decorrer deste tutorial, ela oferece uma s\u00e9rie de funcionalidades, como um sistema avan\u00e7ado de plugins<\/em>, para facilitar a codifica\u00e7\u00e3o de nossas aplica\u00e7\u00f5es.<\/p>\n

Para simularmos uma TV com interatividade iremos utilizar uma imagem VMware<\/a> de uma m\u00e1quina virtual com o middleware<\/a><\/em> Ginga-NCL instalado. Esta imagem \u00e9 chamada de Ginga-NCL Virtual STB e \u00e9 disponibilizada pelo laborat\u00f3rio Telem\u00eddia<\/a> da PUC-Rio.<\/p>\n

 <\/p>\n

Download e instala\u00e7\u00e3o do Ginga-NCL Virtual STB<\/h1>\n

 <\/p>\n

Para executarmos o Ginga-NCL Virtual STB \u00e9 necess\u00e1rio ter instalado um player<\/em> para a m\u00e1quina virtual VMware. Existe uma\u00a0op\u00e7\u00e3o gratuita: VMware Workstation Player<\/a>.<\/p>\n

Pela facilidade de instala\u00e7\u00e3o e entendimento, prosseguiremos com a instala\u00e7\u00e3o do VMware Workstation Player. Acesse a p\u00e1gina de download<\/a> e escolha a melhor op\u00e7\u00e3o de acordo com o seu sistema operacional.<\/p>\n

Ap\u00f3s a conclus\u00e3o do download (tanto no Windows como no GNU\/Linux) basta executar o arquivo baixado para iniciar uma instala\u00e7\u00e3o em modo guiado. As op\u00e7\u00f5es apresentadas s\u00e3o f\u00e1ceis de escolher e a para a maioria delas \u00e9 necess\u00e1rio apenas clicar em\/ou escolher Next<\/em>. Ao t\u00e9rmino da instala\u00e7\u00e3o pode ser solicitado a reinicializa\u00e7\u00e3o do sistema.<\/p>\n

Ap\u00f3s a instala\u00e7\u00e3o abra o\u00a0VMware Player e ser\u00e1 pedido um e-mail para\u00a0come\u00e7ar a utilizar a vers\u00e3o gratuita.<\/p>\n

\"Cadastrando<\/a><\/p>\n

Cadastrando email wmware player<\/p>\n

A figura abaixo mostra a tela inicial do VMware Workstation Player<\/em> onde \u00e9 poss\u00edvel ver o bot\u00e3o Open a Virtual Machine<\/em>.<\/p>\n

\"Tela<\/a><\/p>\n

Tela inicial do VMware Player<\/p>\n

Ap\u00f3s a instala\u00e7\u00e3o do VMware Workstation Player<\/em>\u00a0seguiremos com o download da imagem do Ginga-NCL Virtual STB v. 0.12.4. Para isso acesse a p\u00e1gina de ferramentas<\/a> do site oficial ou clique diretamente aqui<\/a>. A imagem \u00e9 disponibilizada num arquivo compactado (.zip) e para extra\u00ed-lo ser\u00e1 necess\u00e1rio ter um descompactador como unzip<\/a> ou winzip<\/a>\u00a0ou qualquer outro de sua preferencia instalado em seu computador. Quando o download<\/em> terminar, descompacte o arquivo onde desejar.<\/p>\n

Para executar o Ginga-NCL Virtual STB basta abrir o VMware Player<\/em>, clicar no bot\u00e3o Open an existing Virtual Machine<\/em>, navegar at\u00e9 a pasta onde descompactou a imagem e clicar no arquivo ubuntu-server10.10-ginga-i386.vmx<\/em>. A figura abaixo ilustra essa opera\u00e7\u00e3o.<\/p>\n

\"Abrindo<\/a><\/p>\n

Abrindo imagem do STB Virtual<\/p>\n

Feito isso, agora \u00e9 s\u00f3 iniciar a m\u00e1quina virtual, \u00e9 preciso ficar atento na inicializa\u00e7\u00e3o e j\u00e1 clicar com o mouse dentro da janela da VMWare para que voc\u00ea possa selecionar uma das resolu\u00e7\u00f5es oferecidas, caso n\u00e3o selecione nenhuma das resolu\u00e7\u00f5es voc\u00ea pode cair em uma tela preta onde ser\u00e1 pedido usu\u00e1rio e senha e dessa forma voc\u00ea dificilmente conseguir\u00e1 avan\u00e7ar, ent\u00e3o clique na tela, selecione uma das resolu\u00e7\u00f5es utilizando as setas para cima ou para baixo e aperte o enter.<\/p>\n

\"Selecionando<\/a><\/p>\n

Selecionando a resolu\u00e7\u00e3o STB Virtual<\/p>\n

Ap\u00f3s o carregamento da imagem teremos nosso Ginga-NCL Virtual STB pronto para os testes.<\/p>\n

\"Tela<\/a><\/p>\n

Tela inicial do STB Vitual<\/p>\n

Se na sua tela inicial n\u00e3o aparecer o endere\u00e7o de ip (marcado em vermelho) para sua m\u00e1quina virtual voc\u00ea dever\u00e1 mudar as configura\u00e7\u00f5es da sua m\u00e1quina virtual. Para fazer isso basta dar um Stop ou Shut Down Guest <\/em>em sua VM para parar o servi\u00e7o e voltar para a tela inicial, na tela inicial clique em Edit virtual machine settings -> Network Adapter -> Network connection -> selecione NAT.<\/em> Se precisar de internet em seu APP interativo selecione NAT, sen\u00e3o deixe em HOST-ONLY. Agora \u00e9 s\u00f3\u00a0iniciar sua m\u00e1quina novamente para come\u00e7ar a usar seu STB Virtual.<\/p>\n

\"Configura\u00e7\u00e3o<\/a><\/p>\n

Configura\u00e7\u00e3o da m\u00e1quina virtual<\/p>\n

Agora j\u00e1 \u00e9 poss\u00edvel acessar o Ginga-NCL Virtual STB atrav\u00e9s de uma conex\u00e3o SSH<\/a>. No Windows para abrirmos tal conex\u00e3o com a m\u00e1quina virtual podemos fazer uso dos programas Putty<\/a> ou SSH Secure Shell Client; a maioria das distribui\u00e7\u00f5es GNU\/Linux j\u00e1 oferece o cliente SSH<\/a> instalado. Contudo, n\u00e3o iremos trabalhar com o Ginga-NCL Virtual STB desta forma, apresentaremos uma maneira mais f\u00e1cil para trabalharmos com a m\u00e1quina virtual.<\/p>\n

 <\/p>\n

Instala\u00e7\u00e3o do Eclipse<\/h1>\n

 <\/p>\n

Neste tutorial utilizaremos o Eclipse 4.5\u00a0(MARS)\u00a0Eclipse IDE for Java EE Developers<\/a>\u00a0que pode ser obtido, gratuitamente, em sua p\u00e1gina de download<\/a>. O Eclipse \u00e9 desenvolvido em Java e n\u00e3o \u00e9 necess\u00e1rio efetuar instala\u00e7\u00e3o, basta descompactar e executar o arquivo bin\u00e1rio para iniciar sua utiliza\u00e7\u00e3o. Contudo, \u00e9 necess\u00e1rio ter a m\u00e1quina virtual Java<\/a> instalada, se voc\u00ea tentar executar o execut\u00e1vel do eclipse e der um erro voc\u00ea provavelmente n\u00e3o tem a m\u00e1quina virtual ou JDK instalada, para isso basta acessar esse link e baixar o JDK\u00a0(neste exemplo utilizamos\u00a0Java Platform (JDK) 8u60<\/a>). Na figura abaixo pode ser visto uma tela do Eclipse informando a vers\u00e3o que utilizamos.<\/p>\n

\"vers\u00e3o<\/a><\/p>\n

Vers\u00e3o do Eclipse<\/p>\n

 <\/p>\n

Instala\u00e7\u00e3o do plugin NCL Eclipse<\/h1>\n

 <\/p>\n

O NCL Eclipse<\/a> \u00e9 um plugin<\/em> que auxilia e agiliza bastante o desenvolvimento de aplica\u00e7\u00f5es em NCL. A vers\u00e3o 1.7 est\u00e1 dispon\u00edvel para instala\u00e7\u00e3o.<\/p>\n

Para efetuar a instala\u00e7\u00e3o do NCL Eclipse inicie o Eclipse e acesse Help -> Install New Software<\/em> como pode ser visualizado na figura abaixo.<\/p>\n

\"Instala\u00e7\u00e3o<\/a><\/p>\n

Instala\u00e7\u00e3o de novo plugin<\/p>\n

Na tela de instala\u00e7\u00e3o (figura abaixo) clique em Add<\/em>.<\/p>\n

\"Adicionando<\/a><\/p>\n

Adicionando site<\/p>\n

Ap\u00f3s clicar em Add<\/em> ser\u00e1 exibida uma caixa de di\u00e1logo para a informa\u00e7\u00e3o do nome e localiza\u00e7\u00e3o do site onde o Eclipse ir\u00e1 buscar a atualiza\u00e7\u00e3o. Entre com as informa\u00e7\u00f5es:<\/p>\n

    \n
  • Name:<\/strong> NCL Eclipse<\/em><\/li>\n
  • Location:<\/strong> https:\/\/www.telemidia.puc-rio.br\/~roberto\/ncleclipse\/update\/<\/li>\n<\/ul>\n

    \"Site<\/a><\/p>\n

    Site do NCL Eclipse<\/p>\n

    Clique em OK e o Eclipse ir\u00e1 procurar por atualiza\u00e7\u00f5es no endere\u00e7o informado. Para visualizar o NCL Eclipse desmarque a op\u00e7\u00e3o “Group items by category”<\/em>. Escolha o NCL Eclipse, clique em Next<\/em> e depois em Finish.<\/em><\/p>\n

    \"Escolhendo<\/a><\/p>\n

    Escolhendo o NCL Eclipse<\/p>\n

    Ap\u00f3s a instala\u00e7\u00e3o ser\u00e1 solicitado a reinicializa\u00e7\u00e3o do Eclipse, basta aceitar e aguardar a inicializa\u00e7\u00e3o autom\u00e1tica. Quando iniciar novamente o Eclipse j\u00e1 estar\u00e1 com o plugin NCL Eclipse instalado.<\/p>\n

    Para criar um novo documento NCL clique em File -> New -> Other<\/em> ou utilize o atalho Ctrl+N<\/em>. Na janela New escolha NCL -> NCL Document<\/em> e clique em Next<\/em>.<\/p>\n

    \"Novo<\/a><\/p>\n

    Novo documento – parte 1<\/p>\n

    Com o\u00a0\u00faltimo passo iremos configurar o nome de nosso documento e clicar em Finish<\/em> para criarmos o documento.<\/p>\n

    \"Novo<\/a><\/p>\n

    Novo documento – parte 2<\/p>\n

    Para mais informa\u00e7\u00f5es acesse o manual de instala\u00e7\u00e3o no site do NCL Eclipse\u00a0Manual de Instala\u00e7\u00e3o NCL Eclipse<\/a>.<\/p>\n

    Veja aqui o video de instala\u00e7\u00e3o<\/p>\n