Crea Tu Propia App para Chrome

¿Te gustaría convertir la página de inicio -o cualquier otra- de la Web de tu centro en una App para Chrome? ¿Poder abrir ese Moodle que todavía sigues usando o a un formulario para solicitar asistencia a partir de un icono fijado en la estantería del Chromebook o disponible entre las aplicaciones?

Hay muchas maneras de facilitar un acceso rápido a los contenidos web que más te interesen. Desde crear un site, administrar marcadores desde la Configuración de Usuario de la Administración de Chrome o cargar automáticamente páginas al abrir el navegador con colecciones de enlaces como los que ofrece Symbaloo.

En este tutorial veremos cómo crear tu propia App para Chrome/Chromebook en unos minutos y cómo desplegarla para que automáticamente se instale en los navegadores/dispositivos de tus usuarios. También puedes remitirte a la documentación oficial de Google aquí.

NOTA: Las siguientes instrucciones y capturas han sido realizadas para un Chromebook, pero igualmente puedes hacerla desde cualquier otro dispositivo (Windows, Mac, Linux) en el que dispongas de una versión reciente del navegador Chrome OS.

PASO 1 - EL ARCHIVO JSON

Crea una carpeta en el espacio local de tu equipo (en un Chromebook, dentro de la carpeta "Descargas") y llámala como quieras. En mi caso, la he llamado "APP_DE_PRUEBAS".

A continuación, has de crear un archivo de texto. Hay varias maneras de hacer esto en un Chromebook. A mí me gusta la App "Text" que te deja crear y editar todo tipo de archivos de texto plano, pero si no te quieres complicar la vida, puedes crear un Documento de texto de Google. Añade el siguiente texto a tu documento (basta con que copies y pegues lo que viene a continuación o pinches aquí para crearte uno con ese texto de ejemplo):

{
"manifest_version": 2,
"name": "G Suite Certification app",
"description": "Link to G Suite Certification website",
"version": "1.1",
"icons": {
"128": "128.png"
},
"app": {
"urls": [
"http://certification.googleapps.com/app-info/"
],
"launch": {
"web_url": "http://certification.googleapps.com/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

Cambia los valores siguientes por los que necesites para tu Web App. En mi caso, y como guiño al equipo de coordinación de GEG Spain, pondré el siguiente ejemplo de App para acceder al magnífico Banco de Recursos de GEG Spain, disponible aquí:

  • "name": "Banco de Recursos GEG Spain"
  • "description": "Un lugar donde encontrar las producciones de los miembros de la comunidad GEG España"
  • "version": "0.1" | ## Puedes poner cualquier valor ##
  • "urls": "https://gedu.es" | ## La web del autor ##
  • "launch": "https://www.gedu.es/banco-de-recursos" | ## La url que quieres que se abra ##

Guarda o Descarga el Documento en la carpeta local que habías creado (en mi caso, "APP_DE_PRUEBAS"). Si has optado por el Documento de Google, simplemente, escoge la opción del menú "Archivo - Descargar como - Texto sin formato (.txt)" y, una vez guardado en la carpeta correspondiente, renómbralo (botón derecho "Cambiar nombre") hasta dejarlo como manifest.json

Crear un logo en 180 segundos.webm

PASO 2 - CREA EL ICONO para TU APP

Tienes que crear un logotipo de 128x128 pixels para tu aplicación y guardarlo con el nombre 128.png en la misma carpeta en la que habías guardado el archivo manifest.json del paso 1 (en mi caso, "APP_DE_PRUEBAS").

Una manera rápida y sencilla de crear un logo resultón es usar la web logomakr.com. Tras crear tu archivo PNG, puedes usar pixlr.com/editor para asegurarte de que el tamaño final y el nombre son los que necesitas.

Te dejo un vídeo resumiendo toda la operación pero, claro está, puedes usar cualquier otro procedimiento ;-)

CONSEJO: Usa un color contrastado de fondo (por ejemplo, añadiendo un círculo) si quieres que el Icono se vea bien en cualquier circunstancia.

PASO 3 - PRUEBA TU APP

En el menú de Chrome, selecciona "Más herramientas, Extensiones". Activa la opción "Modo de desarrollador" que encontrarás en la parte superior derecha. Pulsa sobre el botón "Cargar descomprimida" y selecciona la carpeta donde habías guardado tus archivos manifest.json y 128.png. En mi caso, "APP_DE_PRUEBAS". Si todo ha ido bien, en el lanzador de aplicaciones de tu Chromebook encontrarás el logo de tu App (en Windows, Mac o Linux, tendrás que pinchar en el acceso directo a las Apps de la barra de marcadores o escribir en la barra de navegació "chrome://extensions" (sin las comillas) para comprobarlo.

PASO 4 - PUBLICA TU APP

Ésta es la parte más delicada y la que puede darte más quebraderos de cabeza.

Las Apps se publican desde el Panel de desarrolladores (Chrome Web Store Developer Dashboard): https://chrome.google.com/webstore/developer/

NOTA: El Panel para desarrolladores está cambiando: aquí encontrarás la versión antigua y aquí la nueva, todavía en fase Beta. En cualquiera de los dos casos, verás un aviso en que te invita a pagar 5$ si quieres pública (es decir, que sea visible para cualquier usuario a través de la Chrome Web Store) tu App o Extensión. Si quieres que tu App únicamente esté disponible para los usuarios de tu dominio (una buena manera de empezar que probablemente satisfaga tus objetivos iniciales), no es necesario pagar.

Una vez dentro, pincha en "(Añadir) Elemento nuevo" para cargar los datos de tu App. Te pedirá que subas un archivo zip con tu aplicación. Basta con que cojas el archivo manifest.json y el archivo 128.png y crees un zip con ambos (en un Chromebook, simplemente selecciona ambos y haz click con el botón derecho (ya sabes, pulsa sobre el touchpad o la pantalla con dos dedos) para que te aparezca el menú contextual. Selecciona entonces la opción "Comprimir archivos seleccionados". Te creará un fichero con nombre "Archive.zip" que es el que tendrás que subir.

A continuación te mostrará un formulario en el que has de completar diferentes campos, si bien no todos son obligatorios. Quizás lo más importante a tener en cuenta sea:

  • Has de respetar las dimensiones de las imágenes obligatorias. Si no te quieres complicar la vida, haz capturas de pantalla de la web a la que apunte tu Web App y después juega con el Pixlr Editor (Menú Imagen, Tamaño de imagen) para ajustar los altos y anchos (desmarcando la opción "Restringir proporciones).
  • Has de haber verificado la web a la que apunte tu Web App. Esto requiere un proceso en paralelo con las Herramientas para Webmasters de Google (desde el propio formulario puedes acceder en este enlace y seguir los pasos para verificar la propiedad de tu web, es importante que tengas acceso a la edición de los registros DNS de tu dominio o a la carpeta raíz del servidor de alojamiento donde esté tu web... Ya, sí, la cosa se complica... ¡ya te lo había advertido!)
  • Has de escoger un idioma, una categoría y, sobre todo, si quieres que la App sea pública (para lo que habrás de pagar los 5$) o privada. En principio, si quieres que tu App esté disponible únicamente para los usuarios de tu dominio, bastará con que sea privada.


Finalmente, publica los cambios y verás tu App en la Chrome Web Store.

PASO 5 - instala la app en tu dominio

En la pantalla anterior, después de publicar tu App, verás un mensaje en la parte superior que te invita a volver al panel de control. No pasa nada si lo cierras, siempre podrás volver a ese panel para desarrolladores pinchando aquí.

Una vez en el Panel, pincha sobre el nombre de tu App recién publicada. Te llevará de nuevo a la ficha de la App en la Chrome Web Store, pero esta vez con una URL un poco diferente. En mi caso: https://chrome.google.com/webstore/detail/banco-de-recursos-geg-spa/hbidmcemjjegnjbohpiebgmnkfpbnjij?hl=es

Esta URL es muy importante porque la necesitarás cuando quieras forzar, recomendar o fijar la App para los usuarios de tu dominio (recuerda que únicamente estará disponible para los usuarios de tu dominio mientras no la hayas hecho pública -y hayas pagado-).

Suponiendo que seas Superadministrador/a de tu dominio (si no lo eres, tendrás que pedírselo a quien corresponda ;-), entra en la Conola de Administración, vete al menú principal, Dispositivos, Administración de Chrome. Una vez dentro, accede a la Configuración de Usuario y desciende, tras seleccionar la Unidad Organizativa para la que quieras imponer/fijar la App, hasta la sección "Aplicaciones y extensiones". Pincha en el enlace para forzar/fijar una nueva App y selecciona "Especificar una aplicación personalizada".

En el campo ID habrás de meter ese valor tan largo que aparece después del último "/" y antes de la "?" que precede al código del idioma. Es decir, en mi caso: hbidmcemjjegnjbohpiebgmnkfpbnjij

En el campo URL, puedes copiar y pegar la URL completa de la página de la Chrome Web Store, en mi caso: https://chrome.google.com/webstore/detail/banco-de-recursos-geg-spa/hbidmcemjjegnjbohpiebgmnkfpbnjij

Guarda los cambios y vuelve a pinchar en Guardar para que se actualice la configuración de usuario y.... ¡BINGO! Comprueba cómo en los Chromebooks o navegadores Chrome de los usuarios de esa/s Unidad/es Organizativa/s se instala la App que acabas de forzar/fijar ;-)

NOTA: Que no te extrañe si, por un lado, la URL cambia. Es probable que los datos de la extensión no se muestren del todo bien, pero si reconoces el logo, es que has metido bien los datos.

VIDEOTUTORIAL: CREA TU APP EN 10 MINUTOS

Crea tu Propia App.webm