Tableless

Busca Menu

Como criar um Chrome App com o seu Chromebook

Seja o primeiro a comentar por

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. ☺

Publicado no dia