DEV | [P2] Samsung Smart TV – Desenvolvendo e Testando um aplicativo

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.


41 thoughts on “DEV | [P2] Samsung Smart TV – Desenvolvendo e Testando um aplicativo

  1. Fala Razec, blz??

    Como sempre trazendo novidades e ajudando a galera, tá de parabéns cara.

    Como minha tv (ainda) não tem suporte vou ficando na vontade🙂

    No canal #samygo me disseram para criar um tópico pro modelo da minha TV, farei, quem sabe agiliza o processo e ajuda mais gente.

    Abraço.

    1. Blz Markim,

      Fiquei feliz de ver o seu comments por aqui. Assim que conseguir suporte trocaremos algumas figurinhas. =)

      Abs

  2. Oi Razec, blz, feis todo mais no emulator fica janela preta e o digitalclock.

    olhei que para olhar o timezone voce usa.

    tzOffset = +1; //Adjust your timezone.

    nao tem jeito para perguntar o timezone do servidor ?
    —————
    No windows 7 quando voce usa Samsung sdk voce tem que ser administrador mais quando ele tenta de escriver no htdocs do apache tem que lembrar de mudar os atributos da pasta para permetir escriver-la.
    —-
    Para usar seu projeito achei absurdo que sdk nao tem IMPORT FILE o Abre Projeito presente em um folder (como acconteçe em eclipse o otro normal IDE), feis um projeito novo depois abri a pasta e colloquei acima do novo seus archivos e tudo deu certo🙂

  3. Tudo bem Bais, legal ver seu comments por aqui.

    1.) Tela toda preta acontece se a tag srctl estiver marcada como n. De acordo com o que comentei no post.

    *srcctl: Desativando esta tag com o parâmetro n permitiremos que nosso aplicativo se torne visível no canal corrente.

    2.) Sobre o timezone, sim da para fazer algo buscar no servidor, ficaria mais interessante, mas fiz desenvolvi algo bem simples mesmo para testar.

    Precisando de algo só chamar.

    Abraço…

  4. Gostei demais desse conteúdo razec, parabéns pela iniciativa. Instalei o Samsung TV SDK 3.1.1 e acontece que meus menus estão em caracteres japonês!! Você tem alguma idéia de como resolver isso?

    1. Blz Marcos,

      Desculpe o meu delay.. Seu comments havia caido no SPAM.. Perdoe.
      Bom no “Packaging se não me engano vc consegue definir o idioma que deseja que apareça no seu menu. Da uma olhadinha lá.

      Abraço

  5. Parabéns pelo post Razec, vai ser muito útil pra mim pois adquiri uma tv samsung d5500 e vou testar alguns aplicativos. Mas antes de realizar os testes, baixei o SDK 3.1.1 e acontece que os menus estão em caracteres japonês, você tem ideia do que pode ter ocorrido e por acaso sabe como solucionar isso? Além disso gostaria de resetar minha tv para configurações de fábrica, sabes como fazer isso também?
    No mais valeu pelo post porque vai me ajudar bastante!

    1. Bom dia Fernando,

      Na verdade fiz alguns testes com o google através de algumas chamadas e funcionou. Resumindo é possível fazer.

      Abraço

  6. Caro amigo

    Sou de Manaus e comprei recentemente uma Samsung TV.
    Muito bacana seu artigo! Voce esta
    de parabéns. Continue escrevendo esses valiosos artigos.

    Sds,

    Fabio

    1. Blz Fabio,

      Fico muito feliz com o seu comentário e sempre farei o máximo para trazer novos posts com qualidade, afinal cada feedback é um incentivo para continuar.

      Abraço

  7. estou programando um aplicativo para a smart TV samsung Series 6100.

    O programa roda perfeito no emulador.

    consegui criar minha conta samsung.

    Porem, o botão azul [D] não faz nada quando tento usá-lo na tv.

    Desta forma, não estou conseguindo subir meu aplicativo para a TV para fazer os testes no dispositivo.

    Porque isso?

    Precisando muito de ajuda.

    1. Tudo bem Coelho,

      Não entendi muito bem o não faz nada. Você conseguiu logar como develop?
      A sua TV está conectada corretamente a sua rede?

      Precisaria entender um pouco melhor o seu problema.

      Abraço

    1. Blz Emanuel,

      Não testei na UN40C900 mas acredito que não mude muito a maneira de fazer. Onde está sua dúvida?

      Abs,

      Razec

  8. Para o colega Coelho G. C.:

    Nos modelos mais novos, em vez de pressionar o botão azul D, você deve apertar o botão Ferramentas e selecionar a opção Configurações.

    Espero ter ajudado.

  9. Grande Razec

    Tá caminhando aqui, porem estou apanhando pra sincronizar rs. Já liberei a porta 80 no modem, no firewall, criei regras de entrada e saída e nada de sincronizar. Qual EXE do apache eu uso no firewall: ApacheMonitor.exe ou httpd.exe?
    Uso: [2012]Samsung TV Apps Editor(3.1.1) e
    Apache2.2

  10. Grande Razec

    Agradecendo sua paciencia com este iniciante em programação, desistir de configurar o Firewall. Resolvi desativá-lo e num é que deu certo. rsrs…Agora é apanhar mais na criação do navegador web..abraços

  11. Muito legal seu post!

    Sou desenvolvedor também da smartTV Samsung, fiz uma aplicação onde lê por JSON um RSS de noticias e fica mostrando as noticias com uma imagem grande de capa para cada noticias.

    Nao sabia que dava para fazer algo que aparecia em todos os canais.

    Pretendo bolar outras app. Acho que a documentação pode melhor ainda, visto

    1. Blz Eduardo,

      Obrigado pelo comentário e concordo com você em relação a documentação. Inclusive eles precisariam colocar um suporte para MAC OSX.

      Abraço

  12. Razec, estou iniciando o desenvolvimento e achei muito interessante esse seu post.
    Seria bem legal se disponibilizasse novamente pro pessoal esse passo a passo, principalmente utilizando o SDK mais novo.
    Se quiser, posso ajudar a montar.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s