Tags

, , , , , ,

Gostaria de agradecer ao feedback de todos,  tanto com os comentários no post anterior, assim como emails. Com isto tenho provas e motivação para manter este blog sempre ativo. Por favor continuem participando. =)

Estive conversando alguns dias atrás com um amigo italiano e comentei sobre o aplicativo do relógio e falei o que havia feito, ele respondeu o seguinte:

“Sabe comprei uma TV desta aqui na itália e a minha mulher também reclamou da falta de um relógio visivel nos canais! Assim que você terminar por favor me envie.” – Sim ele fala muito bem o português.

Mas diante deste comentário eu tive certeza de que não precisamos fazer coisas GRANDIOSAS mas utilitários funcionais e o mais interessante deixar a comunidade open-source participar disto ou então conversar com outros sobre sua idéia. Com isto em mente darei continuidade com a segunda parte.

Considerando que seu ambiente de desenvolvimento esteja pronto, seguiremos o nosso RoadMAP de acordo com o post anterior.

Desenvolvendo um aplicativo para Samsung Smart TV

Antes de começarmos é importante colocarmos uma boa música durante o processo de desenvolvimento. Eu particularmente gosto de programar ouvindo uma boa música sendo assim, acessei o http://grooveshark.com/ e coloquei o som dos The Roots 

Agora sim tudo pronto, Let´s GO.

Descrição do Applicativo: Desenvolveremos um relógio digital baseado em JavaScript.

1). Abra o seu  [201x]Samsung TV SDK(3.0) e clique em File > New > New Project

2). Escolha a opção JavaScript Project > Basic JavaScript Project

3. ) Defina o seu Project Name: DigitalClock.

4.) Através desta configurações setaremos algumas funções para nosso aplicativo quando for carregado pela TV.  Se mais tarde desejar fazer mudanças neste config basta entrar na pasta de seu aplicativo e abrir o arquivo chamado: config.xml

Demarquei algumas configurações específicas:

  • srcctl: Desativando esta tag com o parâmetro n permitiremos que nosso aplicativo se torne visível no canal corrente.
  • widgetname: Nome do aplicativo que aparecerá no seu SmartHub.
  • description: Descrição de seu aplicativo.
  • author: Toda informação do desenvolvedor do aplicativo.

Se desejar saber mais sobre as tags leia o Application Development Guide for Samsung Smart TV.

5.) A estrutura do aplicativo é semelhante a figura ao lado. A IDE separa cada item de maneira simples, semelhante à estrutura de uma página web.

Todos aqueles que desenvolvem aplicações web conhecem bem esta estrutura. Mas nossa concentração deve ser dentro da pasta:

javascript: Dentro deste diretório deverá ser criado todas as nossas classes ou  arquivos *.js

Por padrão é gerado o arquivo main.js, ele é responsavel por trabalhar diretamente com API permitindo instanciar funções e manipular os botões do nosso controle remoto. Por hora não adicionaremos nenhuma ação ao botões.

resource: Este diretório é criado para adicionarmos icones (icon) e imagens (images), inclusive aqueles icones que aparecem no SmartHUB (Menu Principal da Smart TV)

config.xml: Arquivo de configuração, onde setaremos algumas tags especificas quando o aplicativo é carregado, inclusive a adição dos icones, nome do autor, tamanho da tela etc. (Acima citei algumas tags especificas para nossa aplicação.)

index.html: Esta é a tela principal, nosso aplicativo ficará exibido na index permitindo que os usuários o vejam. É obrigatorio setar algumas APIs assim como chamar seu javascript, com suas funções especificas, semelhante a uma página WEB.

main.js é carregado na index.

<script language="javascript" type="text/javascript" src="javascript/main.js"></script>

Assim como a função responsavel por chamar os outros métodos.


 <body onload="Main.onLoad(); " onunload="Main.onUnload();">

*Não detalharei todo o código aqui, mas desejando saber mais, baixe o aplicativo ao final do post e faça uma análise.

Rodando o Emulador

O código estando pronto precisamos testa-lo em nosso emulador, para isto siga os seguintes passos:

1.) Configurar  Emulador

  • Para configurar o Emulador clique: Tools > Preferences > Emulator > [2011] Samsung SMART TV Emulator[2.5] (Eu estou trabalhando com este emulador, mas fique a vontade para utilizar aquele que vc preferir).
  • Clique sobre o Menu Server e siga as instruções abaixo. (1.1)

1.1) Configurar Servidor

  • Para configurar o seu Server clique: Tools > Preferences > Server 
  • Adicione o caminho do  seu Apache Server e marque a opção [o] Use the Apache [2.2.x] installation folder 
  • Clique OK para finalizar.
2.) Tudo configurado, chegou a hora de testarmos nosso aplicativo e o emulador, Para isto clique sobre: Emulator > Run Active Project

Se tudo ocorreu bem, automaticamente abrirá a tela abaixo com nosso aplicativo (DigitalClockTV) do lado esquerdo:

Empacotamento (Packaging)

Se tudo funcionou de acordo com os passos anteriores, chegou a hora de empacotar nosso aplicativo para que possamos fazer o deploy para TV.

Para empacotar clique sobre Project > Packaging… siga as instruções de acordo com a figura abaixo.

Aparecendo a mensagem Package Complete significa que foi gerado seu widget (aplicativo) e a entrada ao widgelist.xml.

O widgetlist.xml é um arquivo de configuração que possui as especificações de seu aplicativo. Com este *.xml ocorrerá toda a sincronia entre sua TV e seu Server, ele poderá ser localizado no seguinte diretório:

C:Arquivos de programasApache Software FoundationApache<versão>htdocswidgetlist.xml

E na sequência seu widget (aplicativo) é gerado e adicionado a pasta, pois o mesmo será enviado para o disco interno de sua TV.:

C:Arquivos de programasApache Software FoundationApache2.2htdocsWidget

Deploy

Ligue a TV aperte o botão SMART no controle remoto.

Aperte o botão [A] login (Botão vermelho) e faça o login com o usuário develop. (Lembrando que se for sua primeira vez, é necessário criar este usuário, de acordo com os steps abaixo).

  • Para criar o usuário develop, assim que clicar sobre o botão vermelho escolha a opção Criar Conta > Concordo 
  • Conta da Samsung: develop
  • Senha: sua_senha
  • Conf. Senha: sua_senha
  • Clique em Criar Conta 
  • Pronto usuário criado, basta fazer o login.
Para fazer o deploy aperte botão [D] config (Botão Azul) escolha a opção Desenvolvimento
  • Config IP do Servidor: Coloque o IP do computador que você está rodando o Apache Server.
  • Clique sobre a opção Sincronização do Aplicativo de Usuários.
  • Se tudo ocorreu bem, seu aplicativo foi instalado com sucesso.
  • Saia do SmartHUB apertando o botão EXIT
  • Entre novamente no SmartHUB e automaticamente aparecerá o nosso aplicativo (DigitalClock).
Clique sobre o nosso aplicativo e observe que ele aparecerá no canto superior esquerdo do canal.
Para Maiores informações sobre o deploy acesse: http://www.youtube.com/watch?v=00CrLLtp-SE (inglês).

Download

DigitalClockTV SourceCode

Referências:

DEV | [P1] Samsung Smart TV – Conheça a Plataforma e o Ambiente de Desenvolvimento

Hello World: http://www.greenhughes.com/content/quothello-worldquot-app-samsung-internettv

SDK/Forum/Docs http://www.samsungdforum.com/

Editor

Espero estar colaborando de alguma maneira com todos aqueles que gostam de desenvolver, assim como aqueles que buscam novos conhecimentos. Um grande abraço e lembre-se TODO comentário é bem vindo.

Advertisements