Aplicaciones para Google Chrome

  • Por
  • 01 de febrero de 2013
  • Valoración:
  • 0 Comentarios
  • Javascript
Desarrollando aplicaciones en tu navegador preferido Google Chrome gracias a las nuevas APIs de Google.
 
Los primeros años en que salieron los navegadores no se pensaba que dentro del mismo se llegarían a crear aplicaciones que realizan alguna función extra, aparte de navegar por Internet, tema que en la actualidad es algo normal, y llegan las grandes preguntas: ¿cómo se puede hacer eso? o ¿tendrá la persona que aprender algún lenguaje en especial que forme parte del navegador?

Para muchos que están en el mundo del desarrollo web, saben que los navegadores implementan extensiones que realizan funciones específicas, como la interacción con redes sociales como Facebook, Twitter, etc. Por otro lado, hay otras extensiones que sincronizan los marcadores entre el navegador y un servidor que los guarda. En conclusión, un sinfín de extensiones que ayudan al usuario a tener una mejor experiencia usando el navegador preferido.

La finalidad de este artículo es presentar que el famoso navegador Google Chrome va más allá de la extensiones. En él pueden desarrollar aplicaciones que para muchas personas sería algo nuevo, pero lo es relativamente, debido a que recientemente Google lanzó la versión número 23 de Chrome, la cual soporta las nuevas APIs para desarrollar, y la última actualización ha sido la versión 25, lo que hace que existan nuevas API’s y las actuales sean más maduras y que las betas lo sean menos.

Para los que somos seguidores de Chrome no es nada nuevo, ya que en el evento de Google IO 2012 pudimos ver la presentación llamada “La próxima generación de las aplicaciones de Chrome”, donde ingenieros que trabajan en Google presentaron espectaculares ejemplos donde cualquier desarrollador empedernido quedaría con las ganas de hacer una para gustos propios o para algún cliente.
Lo más llamativo de todo esto es que Google le ha dado una fuerte promoción a estas APIs a través de manuales, vídeos y teleconferencias, para que los fanáticos y desarrolladores vean los ejemplos y que los mismos muestran, por ejemplo:

  • Cliente TCP
  • Servidor web
  • Editor de texto
  • Arduino servo control
  • Calculadora
  • ...y muchas más
Con los nombres que se pueden ver en la lista se llega a la conclusión de que Google ha creado APIs con mucho alcance y con estas sólo falta proponerse un proyecto, abrir nuestro editor de texto favorito y escribir código.

En el siguiente enlace que te tiene la presentación en el evento se podrán ver algunos de los ejemplos mencionados en la pequeña lista de ejemplos. Pero el vídeo está en inglés. Hasta el día de hoy no existe una versión traducida o subtitulada, que sería la ideal para comunidad de habla hispana. Con este otro enlace se puede ver una lista de vídeo con muchos ejemplos, eso sí, todo en inglés.

La duda que viene a la mente es si necesitaría aprender un nuevo lenguaje de programación extra. De ninguna manera, solamente con tener conocimientos en los siguientes lenguajes de programación, ya se tiene un paso adelantado:

  • HTML (lenguaje de etiquetas)
  • JAVASCRIPT (lenguaje de scripting del lado del cliente)
  • CSS (Hojas de estilos)
  • JSON (Javascript Object Notation)
Con estos conocimientos en sencillo poder crear el clásico "Hola mundo" que siempre hace cualquier programador cuando aprende un nuevo lenguaje o tecnología.

Nota: Si deseas iniciar a crear tus propias aplicaciones en Google Chrome debes tener en cuenta que algunas APIs están en fase experimental y deberás cambiar un parámetro dentro del navegador siguiendo las siguientes instrucciones.
  • Escribe en la barra de direcciones Chrome://flags
  • Busca la frase “APIS extensiones experimentales haz clic y eso habilita en vínculo
  • Reiniciar el navegador
Con las instrucciones mencionadas no tendrás problemas si estas usando una API experimental.

En el siguiente ejemplo se hará el clásico “Hola Mundo” que es muy usado por las personas cuando empiezan una nueva aventura de código, lo mejor es iniciar por una aplicaciones sencilla.

Los siguientes archivos son los que usaremos en nuestra app, además se explicará su función 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"]
   }
}
}

Explicación:
EL código es el corazón de la aplicación, ya que establece los requisitos que se necesitan para que el resultado esperado se muestre.

  • “manifest_version”: se debe utilizar la versión 2 que el navegador lo exige para poner en marcha nuestro aplicativo
  • “name”: Es el nombre que se brinda de parte del desarrollador
  • “version”: Parámetro que es abierto a la apreciación del programador, si se desea se puede iniciar desde 0.1
  • “minimun_chrome_version”: Se refiere a la versión mínima de navegador que puede usar este programita
  • “icons”: Obtiene las rutas de los iconos que forman parte de nuestro programa
  • “scripts”: Están las rutas de los códigos Javascript que realizarán el trabajo de conexión con los APIs y manipulación de los datos
main.js

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

Explicación:
El código muestra 3 líneas que realizarán los eventos para ver el aplicativo en acción.

  • “chrome.app.runtime”: manipula el ciclo de vida de la aplicación, además de la instalación, los eventos y cerrar la misma
  • “chrome.app.window”: Permite crear ventanas fuera del navegador que pueden ser consolas o paneles
  • “create('index.html',{width: 500, height: 309})”: El primer parámetro es la URL o archivo que se presenta como ventana, el segundo es para establecer características de la ventana
index.html

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

Explicación:
Es el clásico código HTML y con el mensaje de “Hola, 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;
}

Explicación:
Estilos para la etiqueta que tiene el mensaje.

Nota: Los códigos deben estar en una carpeta y para implementarlo en Chrome nos vamos a la barra de direcciones y escribimos “chrome://extensions” y se hace clic al botón llamado “cargar extensiones descomprimidas” después aparece un buscador de archivos; entonces agregar la carpeta y automáticamente aparecerá en tu lista de aplicaciones un icono nuevo, el cual es nuestro nuevo aplicativo, al hacerle clic al icono se presenta una ventana que dice “Hola, Mundo!”.

El resultado es el esperado.

Para ver el repositorio que contiene los ejemplos donde se usan estas nuevas apis es el siguiente:

Por otro lado, si la persona desea una documentación que lo guíe paso a paso y de una forma más clara, puede usar el siguiente enlace developer.chrome.com/apps/about_apps.html, el cual nos brindará la información que necesitamos para hacer nuestros primeros ejemplos.

Con la información brindada solo falta pensar un una aplicación y comenzar a escribir código. Sólo falta decir una frase muy motivadora

“HAPPY CODING”

Autor

Victor Tejada Yau

Soy Victor Tejada Yau mejor conocido en el mundo de la informática como “victortyau” , ingeniero informático de profesión pero profundamente apasionado por la programación me gusta aprender lenguajes de programación(java, php, html5, nodejs, coffeescript, css y google web toolkit, ruby on rails y muchos más) y naturales(inglés, portugués y catalán), pero soy un hombre con fe en DIOS desde el 2007 y hasta el día de hoy mi vida ha cambiado al 100%, mis pasatiempos favoritos son “La lectura, La Fotografía y Viajar”. Uno de mis grandes sueños es poder estudiar un master en redes de telecomunicaciones debido a que me gusta la investigación en el campo de las redes inalámbricas, en la prestigiosa universidad politécnica de Valencia, España. Sinceramente me gusta lo que hago y mi principal filosofía es “haz lo que te gusta y disfrútalo al máximo”.
Ingeniero informático

Compartir