Tutorial: Como estruturar seu ambiente de desenvolvimento para o Ginga-NCL
Ibope: 88% dos internautas assistem TV e navegam na internet ao mesmo tempo, diz Ibope Ginga-C: ABNT abre consulta pública sobre o Ginga C
artigos, ginga-ncl, NCLua, plugins, Tutorial Add comments
Só quem desenvolve sabe a emoção de se ver sua criação funcionando seja na internet ou na televisão, mas para começar são encontradas várias barreiras pelo caminho e a primeira delas é conseguir montar o ambiente de desenvolvimento para iniciar a criação de um APP. No primeiro contato com o desenvolvimento para TV digital geralmente o iniciante acaba deparando-se com muitas informações sobre normas, plataformas, ambiente de testes, APIs, usabilidade etc. Esse tanto de informação pode ser assustador para quem está iniciando, por esse motivo atualizei esse tutorial que já utilizávamos neste blog para acompanhar a evolução dos plugins e ferramentas utilizadas no desenvolvimento NCL/ LUA.
Existem várias formas de se montar um ambiente de desenvolvimento para TV Digital, mas neste tutorial abordaremos o passo-a-passo para a estruturação de um ambiente de desenvolvimento e testes para as aplicações interativas desenvolvidas para o middleware Ginga-NCL utilizando a IDE Eclipse 4.5 (MARS) Eclipse IDE for Java EE Developers, VMware Workstation Player 12 e o Ginga-NCL Virtual STB v.0.12.4.
Quando falamos em ambiente de desenvolvimento estamos nos referindo ao conjunto de ferramentas que tem por finalidade auxiliar tanto na codificação como na execução e visualização de nossas aplicações interativas.
Para codificarmos nossas aplicações iremos utilizar uma IDE muito popular conhecida como Eclipse. O uso de uma IDE é bastante recomendado, pois, como veremos no decorrer deste tutorial, ela oferece uma série de funcionalidades, como um sistema avançado de plugins, para facilitar a codificação de nossas aplicações.
Para simularmos uma TV com interatividade iremos utilizar uma imagem VMware de uma máquina virtual com o middleware Ginga-NCL instalado. Esta imagem é chamada de Ginga-NCL Virtual STB e é disponibilizada pelo laboratório Telemídia da PUC-Rio.
Download e instalação do Ginga-NCL Virtual STB
Para executarmos o Ginga-NCL Virtual STB é necessário ter instalado um player para a máquina virtual VMware. Existe uma opção gratuita: VMware Workstation Player.
Pela facilidade de instalação e entendimento, prosseguiremos com a instalação do VMware Workstation Player. Acesse a página de download e escolha a melhor opção de acordo com o seu sistema operacional.
Após a conclusão do download (tanto no Windows como no GNU/Linux) basta executar o arquivo baixado para iniciar uma instalação em modo guiado. As opções apresentadas são fáceis de escolher e a para a maioria delas é necessário apenas clicar em/ou escolher Next. Ao término da instalação pode ser solicitado a reinicialização do sistema.
Após a instalação abra o VMware Player e será pedido um e-mail para começar a utilizar a versão gratuita.
Cadastrando email wmware player
A figura abaixo mostra a tela inicial do VMware Workstation Player onde é possível ver o botão Open a Virtual Machine.
Tela inicial do VMware Player
Após a instalação do VMware Workstation Player seguiremos com o download da imagem do Ginga-NCL Virtual STB v. 0.12.4. Para isso acesse a página de ferramentas do site oficial ou clique diretamente aqui. A imagem é disponibilizada num arquivo compactado (.zip) e para extraí-lo será necessário ter um descompactador como unzip ou winzip ou qualquer outro de sua preferencia instalado em seu computador. Quando o download terminar, descompacte o arquivo onde desejar.
Para executar o Ginga-NCL Virtual STB basta abrir o VMware Player, clicar no botão Open an existing Virtual Machine, navegar até a pasta onde descompactou a imagem e clicar no arquivo ubuntu-server10.10-ginga-i386.vmx. A figura abaixo ilustra essa operação.
Abrindo imagem do STB Virtual
Feito isso, agora é só iniciar a máquina virtual, é preciso ficar atento na inicialização e já clicar com o mouse dentro da janela da VMWare para que você possa selecionar uma das resoluções oferecidas, caso não selecione nenhuma das resoluções você pode cair em uma tela preta onde será pedido usuário e senha e dessa forma você dificilmente conseguirá avançar, então clique na tela, selecione uma das resoluções utilizando as setas para cima ou para baixo e aperte o enter.
Selecionando a resolução STB Virtual
Após o carregamento da imagem teremos nosso Ginga-NCL Virtual STB pronto para os testes.
Tela inicial do STB Vitual
Se na sua tela inicial não aparecer o endereço de ip (marcado em vermelho) para sua máquina virtual você deverá mudar as configurações da sua máquina virtual. Para fazer isso basta dar um Stop ou Shut Down Guest em sua VM para parar o serviço e voltar para a tela inicial, na tela inicial clique em Edit virtual machine settings -> Network Adapter -> Network connection -> selecione NAT. Se precisar de internet em seu APP interativo selecione NAT, senão deixe em HOST-ONLY. Agora é só iniciar sua máquina novamente para começar a usar seu STB Virtual.
Agora já é possível acessar o Ginga-NCL Virtual STB através de uma conexão SSH. No Windows para abrirmos tal conexão com a máquina virtual podemos fazer uso dos programas Putty ou SSH Secure Shell Client; a maioria das distribuições GNU/Linux já oferece o cliente SSH instalado. Contudo, não iremos trabalhar com o Ginga-NCL Virtual STB desta forma, apresentaremos uma maneira mais fácil para trabalharmos com a máquina virtual.
Neste tutorial utilizaremos o Eclipse 4.5 (MARS) Eclipse IDE for Java EE Developers que pode ser obtido, gratuitamente, em sua página de download. O Eclipse é desenvolvido em Java e não é necessário efetuar instalação, basta descompactar e executar o arquivo binário para iniciar sua utilização. Contudo, é necessário ter a máquina virtual Java instalada, se você tentar executar o executável do eclipse e der um erro você provavelmente não tem a máquina virtual ou JDK instalada, para isso basta acessar esse link e baixar o JDK (neste exemplo utilizamos Java Platform (JDK) 8u60). Na figura abaixo pode ser visto uma tela do Eclipse informando a versão que utilizamos.
Versão do Eclipse
Instalação do plugin NCL Eclipse
O NCL Eclipse é um plugin que auxilia e agiliza bastante o desenvolvimento de aplicações em NCL. A versão 1.7 está disponível para instalação.
Para efetuar a instalação do NCL Eclipse inicie o Eclipse e acesse Help -> Install New Software como pode ser visualizado na figura abaixo.
Instalação de novo plugin
Na tela de instalação (figura abaixo) clique em Add.
Adicionando site
Após clicar em Add será exibida uma caixa de diálogo para a informação do nome e localização do site onde o Eclipse irá buscar a atualização. Entre com as informações:
Name: NCL Eclipse
Location: https://www.telemidia.puc-rio.br/~roberto/ncleclipse/update/
Site do NCL Eclipse
Clique em OK e o Eclipse irá procurar por atualizações no endereço informado. Para visualizar o NCL Eclipse desmarque a opção "Group items by category". Escolha o NCL Eclipse, clique em Next e depois em Finish.
Escolhendo o NCL Eclipse
Após a instalação será solicitado a reinicialização do Eclipse, basta aceitar e aguardar a inicialização automática. Quando iniciar novamente o Eclipse já estará com o plugin NCL Eclipse instalado.
Para criar um novo documento NCL clique em File -> New -> Other ou utilize o atalho Ctrl+N. Na janela New escolha NCL -> NCL Document e clique em Next.
Novo documento – parte 1
Com o último passo iremos configurar o nome de nosso documento e clicar em Finish para criarmos o documento.
Novo documento – parte 2
Para mais informações acesse o manual de instalação no site do NCL Eclipse Manual de Instalação NCL Eclipse.
Veja aqui o video de instalação
Instalação do plugin Lua Development Tools (LDT)
Com Lua Development Tools (LDT) é possível editar scripts Lua com syntax highlight, code completion, verificação de erros de compilação, agrupamento de código e comentários, execução de scripts utilizando um interpretador pré-configurado, etc (confira mais informações no Site Oficial LDT).
A instalação segue o padrão do Eclipse e por isso é bem semelhante com o que vimos para o NCL Eclipse. Apenas substitua as informações do site por:
Name: Lua Development Tools (LDT)
Location: https://download.eclipse.org/ldt/releases/stable
Para criar um novo projeto Lua clique em File -> New -> Other -> Lua -> Lua Project ou utilize o atalho Ctrl+N e escolha Lua -> Lua Project e clique em Next.
Para incluir um novo arquivo em seu projeto selecione o projeto desejado, clique com o botão direito e selecione File -> New -> Other -> Lua -> Lua File ou utilize o atalho Ctrl+N e escolha Lua -> Lua File e clique em Next.
Neste momento já podemos começar a codificar.
Para executar seu script clique com o botão direito nele e escolha Run As -> Lua Application.
Executando script
Instalação do Remote System Explorer (RSE)
O RSE é um plugin para o Eclipse que oferece um conjunto de ferramentas para a conexão e trabalho com diferentes sistemas remotos, incluindo SSH e FTP. Para maiores detalhes sobre o plugin visite o site oficial RSE.
Mas o que um plugin para trabalho com sistemas remotos está fazendo aqui? Bem, podemos considerar o nosso Ginga-NCL Virtual STB um sistema remoto, apesar de muitas vezes ele residir no mesmo computador, e usufruir todas as facilidades oferecidas pelo RSE evitando o enfadonho processo de edição, cópia para a máquina virtual e acesso à máquina virtual para executar a aplicação. Quem passou por isso sabe o quanto isso pode ser desestimulante.
Como utilizamos a versão Eclipse 4.5 (MARS) Eclipse IDE for Java EE Developers não vamos precisar instalar esse plugin porque ele já vem instalado por padrão nessa versão que vamos utilizar.
Vamos modificar o nosso workspace para a perspectiva oferecida pelo RSE, para isso acesse Window -> Open Perspective -> Other e escolha Remote System Explorer como na figura.
Com a nova perspectiva o workspace ficará parecido com este:
Perspectiva do RSE
Agora iremos criar uma conexão com o Ginga-NCL Virtual STB (assegure-se que ele está rodando). Clique com o botão direito na aba Remote Systems e escolha New -> Connection. A figura abaixo ilustra essa operação.
Nova conexão – parte 1
Em seguida será necessário escolher o tipo de conexão com o sistema remoto, escolha SSH Only.
Nova conexão – parte 2
Após escolher o tipo de conexão é necessário configurar o Host name e atribuir um nome para a conexão, como pode ser visto na figura abaixo.
Nova conexão – parte 3
Na configuração do Host name coloque o endereço IP do seu Ginga-NCL Virtual STB.
Logo em seguida clique em Finish para criar sua conexão.
Para nos conectarmos ao Ginga-NCL Virtual STB clique com o botão direito sobre a conexão que acabou de criar e escolha a opção Connect.
Abrindo conexão – parte 1
Em seguida será exibida a tela para o preenchimento do login e senha para a conexão. Seguindo as instruções presentes na tela de abertura do Ginga-NCL Virtual STB preencha com o login root e senha telemidia.
Abrindo conexão – parte 2
Para otimizar novas conexões marque a caixa Save password e Save user ID.
Com a conexão estabelecida é possível ter acesso aos arquivos do Ginga-NCL Virtual STB como exibido na figura abaixo.
Visualização dos arquivos remotos
É possível executar ações, inclusive edição, sobre os arquivos remotos como se fossem arquivos locais; o RSE abstrai isso para o desenvolvedor. Experimente dar um duplo clique em um dos arquivos e você verá que ele abrirá para edição como qualquer outro arquivo e todas as modificações que você realizar são efetuadas diretamente no arquivo remoto. Também é possível criar diretórios e transferir arquivos, tudo da forma que você já faz no Eclipse.
Agora abriremos um terminal para execução de comandos diretamente no Ginga-NCL Virtual STB. Clique com o botão direito sobre SSH Shell e escolha Launch Shell.
Abrindo shell
Com a utilização do shell é possível executarmos nossa aplicação sem sair do Eclipse. Para rodar o exemplo que vem na máquina virtual é só executar essa linha de comando (/misc/launcher.sh /misc/ncl30/sample03/sample03.ncl) e visualizar em sua VMware player
Na figura abaixo é possível observar uma tela do Eclipse com o ambiente integrado. O arquivo aberto, no centro da tela, é de uma aplicação de demonstração e está sendo editada remotamente. Do lado direito temos um terminal com o comando para a execução da aplicação que será exibida na tela do Ginga-NCL Virtual STB.
O RSE é um plugin muito abrangente e apresenta mais funcionalidades do que as apresentadas aqui. Se você utiliza alguma funcionalidade que não foi apresentada, contribua com comentários.
Como tenho ministrado cursos e vejo que não existe nenhum tutorial atualizado montado para estruturação do ambiente para desenvolvimento de aplicações interativas para TV Digital utilizando o middleware Ginga-NCL, decidi fazer a atualização de um tutorial que já vinha utilizando aqui no nosso blog. Tentei reunir todas as informações necessárias e disponibilizar os principais pontos que as pessoas que fizeram os cursos comigo tiveram problemas.
Agora é só baixar o MATERIAL II SEMINÁRIO E DESENVOLVIMENTO GINGA-DF que possui vários exemplos em NCL e LUA, livros e apostilas que vão dar suporte ao início do desenvolvimento de suas aplicações, também vamos disponibilizar o eclipse 4.5 mars configurado com o NCL Eclipse e o Lua Development Tools (LDT).
Espero que as informações aqui apresentadas tenham utilidade e contribuam para a comunidade. Os comentários estão abertos para opiniões e acréscimo de conhecimento.
MATERIAL II SEMINÁRIO E DESENVOLVIMENTO GINGA-DF
1 file(s) 138.27 MB
Download MATERIAL II SEMINÁRIO E DESENVOLVIMENTO GINGA-DF
ECLIPSE 4.5 MARS - NCL ECLIPSE E LUA DEVELOPMENT TOOLS (LDT) CONFIGURADO
1 file(s) 293.03 MB
DOWNLOAD ECLIPSE 4.5 MARS - NCL ECLIPSE E LUA DEVELOPMENT TOOLS (LDT) CONFIGURADO
One Response to "Tutorial: Como estruturar seu ambiente de desenvolvimento para o Ginga-NCL"
Como estruturar seu ambiente de desenvolvimento para o Ginga-NCL disse:
23 de setembro de 2015 às 14:46
[…] Esse tutorial foi atualizado e a versão atualizada encontra-se neste link http://www.gingadf.com.br/blogGinga/tutorial-como-estruturar-seu-ambiente-de-desenvolvimento-para-o-… […]