Como criar um Chrome App com o seu Chromebook

A ideia de chrome app é trazer ferramentas que você usa no browser para o seu computador. Como se fosse uma extensão do browser.  A instalação/desinstalação destes apps é fácil, rápida e sem dor de cabeça, além de contar com aplicativos que podem funcionar off-line. Por que criar um chrome APP? A grande vantagem, é que aplicativos

A ideia de chrome app é trazer ferramentas que você usa no browser para o seu computador. Como se fosse uma extensão do browser.  A instalação/desinstalação destes apps é fácil, rápida e sem dor de cabeça, além de contar com aplicativos que podem funcionar off-line.

Por que criar um chrome APP?

A grande vantagem, é que aplicativos nativos para Chrome OS são feitos com tecnologias que já conhecemos como HTML, CSS e JS. Podendo também utilizar a linguagem dart que me parece bem interessante.

Equipamento necessário

Encontrei vários editores de texto para o Chromebook, mas me familiarizei com o Caret. Gosto dele, pois além de informar erros, ele dá dicas de otimizações, e avisa se você esquecer de deixar callbacks para outros navegadores. Isso evita uma grande dor de cabeça. Fique à vontade para escolher o editor que mais te agrade.

Começar pelo inicio

Para iniciar Você vai precisar de um arquivo manifest.json para informar detalhes sobre a aplicação como titulo, descrição e icones. E de um arquivo JavaScript para criar a tela responsável pela interação com o APP conhecido como background.js.

Crie um diretório para o seu projeto. Na raiz dele vamos criar um arquivo chamado manifest.json. A sintaxe para quem não conhece é composta por “chave”: “valor”. É “tipo” um objeto JavaScript (na verdade ele é). Nele informamos nome, descrição, versão da aplicação, versão do arquivo manifest, o script de background e os ícones que serão usados no APP.

Os icones são opcionais. Contudo, se você não tiver ícones para testar agora, tire essa linha. Na linha onde setamos “app”, setamos também o arquivo de background que é muito importante para nós.

Criando o script de background

Após setar o script background.js, precisamos cria-lo. Aqui, por enquanto não tem segredo. Criamos o o arquivo js como o abaixo:

Na primeira linha, criamos um listener para ouvir nossos eventos de onLaunched, ou seja quando iniciarmos nossa aplicação. dentro dele criamos a nossa primeira tela, a função chrome.app.window.create cria a nossa view index.html com o tamanho de 400×500.

Criando a view

É mais simples do que vocês estão pensando. Criamos um arquivo index.html que será chamado pelo background.js quando executarmos nosso app.

Como testar meu Chrome App?

Acesse o endereço pelo seu chrome chrome://flags. Procure por “Experimental Extension APIs“, use “ctrl+f” ou “command+f” para acelerar o processo, e clique no link “Enable”. Caso esteja com o chrome em pt-br procure por “APIs de extensões experimentais” e clique no link ativar.

Após ativarmos as extensões experimentais, podemos agora finalmente carregar nossa aplicação para teste.

Vá no menu do chrome» Mais ferramentas » Extensões” Ou acesse o endereço chrome://extensions/ acho mais fácil. Verifique se o modo desenvolvedor está ativado.

Clique em “carregar extensão expandida” , escolha a pasta do seu projeto. Agora é só você procurar na sua lista de app do seu chrome, e sua aplicação está lá.

Nessa IDE, temos várias opções de Project Type, mas o que importa para nós agora são os Chrome Apps. Podemos iniciar um projeto usando Dart, ou JavaScript, também iniciar um projeto usando Polymer e todas as facilidades dele. A Facilidade, é que os arquivos que expliquei anteriormente são criados automaticamente, e a instalação e teste também são automáticos, fazemos tudo pela IDE. Tem jeito mais fácil ?

É claro que isso é só o básico sobre criação de chrome Apps, mas já dá pra brincar um pouquinho. Abraço, e bons estudos. ☺

Deixe um comentário

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