O que é um chrome app
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.
{
"name": "Nome do meu APP",
"description": "Descrição do meu APP",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "icone-16.png", "128": "icone-128.png" }
}
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:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
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.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Minha primeira aplicação</h1>
</body>
</html>
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á.
Tornando as coisas mais simples com o Chrome Dev Editor
- Primeiro vamos instalar o Chrome Dev Editor acessando esse link.
- Acessamos o menu principal, e clicamos em New Project
- Digitamos o nome da aplicação, e escolhemos o Project Type
- Usamos o atalho ctrl+r para testar a aplicação
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. ☺