Desenvolvendo apps para SmartTVs com HTML, CSS e Ajax

Hoje em dia, as Smart TVs estão cada vez mais presentes no dia a dia. E muito por isso, gosto de pesquisar e aprender formas de programar sua interface e até criar apps que rodassem em seu ambiente. Nessas pesquisas, descobri que é fácil e simples o desenvolvimento para Smart TV, veja só: 1º Para

Hoje em dia, as Smart TVs estão cada vez mais presentes no dia a dia. E muito por isso, gosto de pesquisar e aprender formas de programar sua interface e até criar apps que rodassem em seu ambiente. Nessas pesquisas, descobri que é fácil e simples o desenvolvimento para Smart TV, veja só:

Para criar apps para Smart TV você usará em primeiro lugar HTML, CSS e Ajax/JavaScript.

O modelo que vou usar será o da Samsung (que é a TV que mais tem suporte para o desenvolvimento). Você usará Eclipse para criação de suas apps e baixará o SDK no próprio site da Samsung Developers.

A instalação do SDK e dos emuladores para Smart TVs é bem fácil, mas você precisa ter a máquina virtual Java em seu PC.

Iniciando

Execute o Eclipse como administrador para facilitar a execução do emulador quando você rodar o app..

quando o Eclipse estiver aberto você irá em File > New > Project para criar um novo projeto.

Ai então você vai selecionar a opção de “Samsung Smart TV JavaScript App Project” porque essa opção permite que você crie apps com Ajax(Javacript) para o comportamento de sua app e CSS + HTML para interface.

Em seguida dê nome para sua app, e escolha a resolução da tela.

Pronto, se conseguiu fazer tudo direitinho você já pode começar a desenvolver sua app, no lado esquerdo você irá se deparar com as seguintes pastas, essas pastas são responsáveis pela organização do conteúdo de sua app, as mais importantes são “app” e “index.html”.

Na pasta “app” ficam as pastas “stylesheets” e “javascript” com os arquivos “Main.css” e “Main.js” respectivamente. Em Main.css fica o conteúdo de CSS da app (responsável pelo estilo da app) e em Main.js fica o desenvolvimento lógico (programação) do comportamento da app, onde você usa Ajax para definir as ações da app, e em “index.html” fica os componentes em html para você dar vida a sua app. Na pasta icon é onde você armazena os ícones usados.

Então vamos a nossa demo básica: dê um duplo clique em “index.html”. Insira seu código HTML nesse local. Vamos dar um “Hello World” apenas, somente para que vocês peguem noção.

então nesse trecho insira o seguinte código:

Então você vai dar um duplo clique no arquivo Main.css para estilizar a escrita, e inserir o seguinte trecho:

(você usa a #label para pegar os elementos html e manipula-los com CSS)

10º Feito isso agora você irá salvar e executar, com o botão direito você clica na pasta raiz do projeto e segue em “Samsung Smart TV SDK” e depois em “Run”.

11º Irá levar um tempo se for a primeira vez, mas ao terminar você verá essa tela:

Agora você pode usar sua imaginação e criar a App que desejar apenas com HTML, CSS e Ajax, no próximo tutorial irei introduzir como usar Ajax no desenvolvimento da App.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *