Aplicações para Google Chrome

Desenvolvendo aplicações em seu navegador preferido Google Chrome graças às novas APIs de Google.

Por Victor Tejada Yau - tradução CRV


Publicado em: 21/2/13
Valorize este artigo:
 
Nos primeiros anos em que saíram os navegadores não se pensava que dentro do mesmo se chegariam a criar aplicações que realizam alguma função extra, à parte de navegar por Internet, tema que na atualidade é algo normal, e chegam as grandes perguntas: como se pode fazer isso? ou terá a pessoa que aprender alguma linguagem em especial que faça parte do navegador?

Muitos dos que estão no mundo do desenvolvimento web sabem que os navegadores implementam extensões que realizam funções específicas, como a interação com redes sociais como Facebook, Twitter, etc. Por outro lado, há outras extensões que sincronizam os marcadores entre o navegador e um servidor que os guarda. Em conclusão, um sem fim de extensões que ajudam o usuário a ter uma melhor experiência usando o navegador preferido.

O objetivo de este artigo é demonstrar que o famoso navegador Google Chrome vai mais além das extensões. Nele podem desenvolver aplicações que para muitas pessoas seria algo novo, mas relativamente, devido a que recentemente Google lançou a versão número 23 de Chrome, que suporta as novas APIs para desenvolver, e a última atualização foi a versão 25, o que faz com que existam novas API’s e as atuais sejam mais maduras e que as betas sejam menos.

Para os que somos seguidores de Chrome não é nada novo, já que no evento de Google IO 2012 pudemos ver a apresentação chamada “ A próxima geração das aplicações de Chrome”, onde engenheiros que trabalham no Google apresentaram espetaculares exemplos onde qualquer desenvolvedor empedernido ficaria com vontade de fazer uma para gosto próprio ou para algum cliente.
O que mais chama a atenção disto tudo é que Google deu uma forte promoção a estas APIs a través de manuais, vídeos e teleconferências, para que os fanáticos e desenvolvedores vejam os exemplos e o que os mesmos mostram, por exemplo:

  • Cliente TCP
  • Servidor web
  • Editor de texto
  • Arduino servo control
  • Calculadora
  • ...e muito mais
Com os nomes que se podem ver na lista se chega à conclusão de que Google criou APIs com muito alcance e com estas só falta propor um projeto, abrir nosso editor de texto favorito e escrever código.

No link seguinte que tem a apresentação no evento se poderão ver alguns dos exemplos mencionados na pequena lista de exemplos, mas o vídeo está em inglês. Até o dia de hoje não existe uma versão traduzida ou subtitulada, que seria a ideal para comunidade de língua hispânica. Com este outro link se pode ver uma lista de vídeo com muitos exemplos, esse sim, todo em inglês.

A dúvida que vem à mente é se se necessitaria aprender uma nova linguagem de programação extra. De nenhuma maneira, somente com conhecimentos nas seguintes linguagens de programação, já se tem um passo adiantado:

  • HTML (linguagem de etiquetas)
  • JAVASCRIPT (linguagem de scripting do lado do cliente)
  • CSS (Folhas de estilos)
  • JSON (Javascript Object Notation)
Com estes conhecimentos simples você pode criar o clássico "Ola mundo" que sempre faz qualquer programador quando aprende uma nova linguagem ou tecnologia.

Nota: Se você quiser criar suas próprias aplicações no Google Chrome deve ter em conta que algumas APIs estão em fase experimental e deverá mudar um parâmetro dentro do navegador seguindo as seguintes instruções.
  • Escreva na barra de endereços Chrome://flags
  • Busque a frase “APIS extensões experimentais clique e isso habilita em vínculo
  • Reiniciar o navegador
Com as instruções mencionadas você não terá problemas se estiver usando uma API experimental.

No próximo exemplo se fará o clássico “Ola Mundo” que é muito usado pelas pessoas quando começam uma nova aventura de código, o melhor é iniciar por uma aplicação simples.

Os arquivos seguintes são os que usaremos em nossa app, ademais se explicará sua função específica.

  • manifest.json
  • main.js
  • index.html
  • main.css
Códigos:

manifest.json

{
"manifest_version": 2,
"name": "Hello World",
"version": "1",
"minimum_chrome_version": "23",
"icons": {
   "16": "icon_16.png",
   "128": "icon_128.png"
},
"app": {
   "background": {
   "scripts": ["main.js"]
   }
}
}

Explicação:
O código é o coração da aplicação , já que estabelece os requisitos que se necessitam para que o resultado esperado se mostre.

  • “manifest_version”: se deve utilizar a versão 2 que o navegador exige para colocar em funcionamento nosso aplicativo
  • “name”: É o nome que se dá de parte do desenvolvedor
  • “version”: Parâmetro que é aberto à apreciação do programador, se se deseja se pode iniciar de 0.1
  • “minimun_chrome_version”: Se refere à versão mínima de navegador que pode usar este programinha
  • “icons”: Obtém as rotas dos ícones que fazem parte de nosso programa
  • “scripts”: Estão as rotas dos códigos Javascript que realizarão o trabalho de conexão com os APIs e manipulação dos dados
main.js

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',
   {width: 500, height: 309});
});

Explicação:
O código mostra 3 linhas que realizarão os eventos para ver o aplicativo em ação.

  • “chrome.app.runtime”: manipula o ciclo de vida da aplicação, além da instalação, os eventos e de fechá-la
  • “chrome.app.window”: Permite criar janelas fora do navegador que podem ser consoles ou painéis
  • “create('index.html',{width: 500, height: 309})”: O primeiro parâmetro é a URL ou arquivo que se apresenta como janela, o segundo é para estabelecer características da janela
index.html

<html>
<head>
   <meta charset="utf-8">
   <title>Hello World</title>
   <link href="styles/main.css" rel="stylesheet">
</head>
<body>
   <h1>Ola, Mundo!</h1>
</body>
</html>

Explicação:
É o clássico código HTML e com a mensagem de “Ola, Mundo!”

main.css:

h1 {
text-align: center;
width: 100%;
line-height: 120%;
padding-top: 200px;
font-family: Arial, sans-serif;
color: rgb(66,66,66);
letter-spacing: -0.05em;
}

Explicação:
Estilos para a etiqueta que tem a mensagem.

Nota: Os códigos devem estar em uma pasta e para implementá-lo em Chrome vamos à barra de endereços e escrevemos “chrome://extensions” e se clica no botão chamado “carregar extensões descomprimidas” depois aparece um buscador de arquivos; então adicionar a pasta e automaticamente aparecerá em sua lista de aplicações um ícone novo, que é nosso novo aplicativo, ao clicar no ícone se apresenta uma janela que diz “Ola, Mundo!”.

O resultado é o esperado.

Para ver o repositório que contém os exemplos onde se usam estas novas apis é o seguinte:

Por outro lado, se a pessoa deseja uma documentação que o guie passo a passo e de uma forma mais clara, pode usar o seguinte linkdeveloper.chrome.com/apps/about_apps.html, que nos oferecerá a informação que necessitamos para fazer nossos primeiros exemplos.

Com a informação brindada só falta pensar em uma aplicação e começar a escrever código. Só falta dizer uma frase muito motivadora

“HAPPY CODING”





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato