Introducción

En este capítulo se estudiará la creación de una Web App pasando por todas las fases del proceso y finalizando con la creación de un paquete click para Ubuntu Touch. Ese paquete se subirá a la tienda de Ubuntu para que esté accesible para todos los usuarios. Como requisito previo a este capítulo es necesario tener instalado el SDK de Ubuntu y haber completado las aplicaciones de ejemplo del capítulo anterior. Si alguno no ha podido completar la aplicación de ejemplo en el escritorio y en el dispositivo puede preguntar en la lista de correo, el canal de IRC o el grupo de Telegram. De momento sólo la lista de correo mantiene un histórico por lo que sería el medio recomendado para hacer las preguntas.

Web App, también conocida como Aplicación Web

¿Qué es una Web App?

Una Web App es un tipo de aplicación de Ubuntu Touch. Su funcionamiento es simple y consiste en mostrar una página Web como si fuera una aplicación independiente. Como aplicación aparece en el scope de aplicaciones y se puede gestionar desde la tienda de Ubuntu. Posiblemente os preguntéis que sentido tiene mostrar una página Web si el navegador ya lo hace de forma nativa.

Internamente el navegador y una Web App comparten la misma base. La diferencia es que la Web App está aislada y no comparte información con el navegador. Otra diferencia es que el usuario no puede cambiar la Web de la Web App ya que en caso de hacerlo se abre el navegador nativo. Al ser aplicaciones que obtienen el contenido de Internet tienen limitaciones a la hora de acceder a los recursos del teléfono. Si necesitamos acceder a esos recursos tendríamos que recurrir a una aplicación nativa usando HTML5 entre otros lenguajes.

A nivel de programación la Web App es el tipo de aplicación más sencillo que podemos encontrar. La programación se reduce básicamente a poner las URL en las que trabaja y seleccionar los datos que se muestran como aplicación. No tiene más complejidad y el SDK hace todo el trabajo por nosotros. Para distribuir la Web App es necesario empaquetarla en un paquete click que se podrá subir a la tienda de Ubuntu o a una tienda alternativa como uApp Explorer. Si subimos la Wep App a la tienda de Ubuntu se añade de forma automático a uApp Explorer.

Creación del proyecto

Para crear un proyecto nuevo pulsamos en el botón New Project, Otra forma de hacerlo es desde el menú File, New File or Project.

Creación del proyecto
Creación del proyecto

Nos aparecerá una ventana con los tipos de proyectos que podemos usar. Seleccionamos Web App. Como se muestra en la descripción es un proyecto independiente de la plataforma y con limitaciones en el acceso a los recursos.

Selección del tipo de proyecto
Selección del tipo de proyecto

Seleccionamos la ruta en la que se guardará el proyecto. Recordad que no se pueden usar espacios o caracteres con acentos.

Ruta del proyecto
Ruta del proyecto

Escribimos los datos de la aplicación.

Datos del paquete click
Datos del paquete click

Seleccionamos los Kits que usaremos. Como nos interesa generar un ejecutable para ordenador (Desktop) y para dispositivo (Ubuntu) dejamos marcados los dos. El kit Desktop tiene que aparecer siempre. Si no lo hace será necesario reiniciar la configuración de ubuntu-sdk-ide.

Selección de los Kits
Selección de los Kits

En el último paso se muestra un resumen. Fijaros que me aparece por defecto el control de versiones Bazaar. Si el proyecto se guarda en una carpeta que está bajo un control de versiones, éste se configura de forma automática.

Resumen del proyecto
Resumen del proyecto

Ya hemos acabado el asistente. El proyecto se abre de forma automática.

Proyecto que se ha creado en el asistente
Proyecto que se ha creado en el asistente

Estructura del proyecto

El proyecto de una Web App es muy sencillo y consta de varios archivos.

  • .excludes: extensiones y carpetas que se quedan fuera del control de versiones.
Archivo .excludes
Archivo .excludes
  • manifest.json: contiene la información de la aplicación que se mostrará al usuario. Este archivo se procesa de forma automática cuando subimos el proyecto a la tienda de Ubuntu. Todas las aplicaciones tienen un nombre asociado que se añade a todos los paquetes y evita que aparezcan colisiones en el nombre (tiene que ser único). Después del nombre de la aplicación tiene que aparecer el nombre.
Archivo manifest.json
Archivo manifest.json
  • WebApp.apparmor: permisos de la aplicación.
Archivo WebApp.apparmor
Archivo WebApp.apparmor
  • WebApp.desktop: información para lanzar la aplicación en el scope de aplicaciones.
Archivo WebApp.desktop
Archivo WebApp.desktop
  • WebApp.png: icono de la aplicación.
Archivo WebApp.png
Archivo WebApp.png

Modificaciones

Hay que hacer tres modificaciones a la plantilla que nos proporciona el SDK de Ubuntu Touch. La primera es cambiar la URL que se abre en el archivo WebApp.desktop. El texto que hay que cambiar es la URL que se muestra en la línea Exec. Las URL que estén dentro del mismo dominio aparecerán en la Web App. Si pulsamos sobre un enlace que va a otro dominio se abrirá el navegador Web.

Exec=webapp-container --enable-back-forward --store-session-cookies --webappUrlPatterns=https?://m.WebApp.com/* http://m.WebApp.com %u

El siguiente paso es sustituir el archivo del icono (WebApp.png) por una imagen PNG que queramos. La resolución tiene que ser de 256x256. Por último abrimos el archivo manifest.json y completamos la información de la aplicación.

Pruebas de la WebApp

Pulsamos en el botón Play para lanzar la aplicación en el escritorio. Por defecto está seleccionado el kit Desktop. Esta aplicación tiene un bug del que me avisaron cuando ya la había publicado. En el archivo WebApp.desktop hemos definido las URL en las que trabajará la aplicación. El problema es que para acceder al contenido del libro accedemos a un dominio diferente por lo que se abre el navegador Web. Tenemos dos opciones. La primera es añadir el nuevo dominio a la lista de URL permitidas mientras que la segunda es poner directamente esa URL. Usaré la segunda opción.

Ejecución de la aplicación en el escritorio
Ejecución de la aplicación en el escritorio

Si seleccionamos el kit de Ubuntu podremos ver el resultado en el dispositivo que tengamos. Es importante que el círculo que hay al lado del Kit de Ubuntu esté en verde. En caso contrario no tenemos conexión con el dispositivo.

Ejecución de la aplicación en el dispositivo
Ejecución de la aplicación en el dispositivo

Creación del paquete click

La Web App funciona en el dispositivo pero sólo mientras está conectado al ordenador. Para que se quede de forma permanente es necesario instalarla en el sistema usando un paquete click. Pulsamos en el botón Build and validate click package.

Compilación del paquete click
Compilación del paquete click

Si no aparece ningún problema pulsamos en el botón Install on device. Es posible que nos da un problema de conexión tenemos que ir a Devices, seleccionar el dispositivo y en el apartado Control pulsar en el botón Open SSH connection to the device.

Instalación del paquete click
Instalación del paquete click

El resultado es la aplicación instalada en el dispositivo.

Aplicación en el scope de aplicaciones
Aplicación en el scope de aplicaciones

La Web App está finalizada.

Publicar la aplicación

Para publicar una aplicación a la tienda es necesario tener una cuenta de LaunchPad. Cualquier usuario que tenga Ubuntu Touch ya la tiene creada para poder acceder a la tienda de Ubuntu. Abrimos la tienda pulsando en el enlace https://developer.ubuntu.com/en/publish/

Inicio de sesión para publicar la aplicación
Inicio de sesión para publicar la aplicación

Pulsamos en el enlace y accederemos al panel de control.

Panel de control de la Ubuntu Store
Panel de control de la Ubuntu Store

El primer paso es rellenar los datos del usuario. La única información obligatoria es el país del usuario. Este campo se usa para calcular el IVA de las aplicaciones de pago.

Datos del usuario 1/3
Datos del usuario 1/3
Datos del usuario 2/3
Datos del usuario 2/3
Datos del usuario 3/3
Datos del usuario 3/3

Las aplicaciones tienen que tener un nombre del que tengamos permisos de uso. Por ejemplo, si llamamos a nuestra aplicación Angry Birds posiblemente tengamos problemas con los creadores de la franquicia.

Nombre de la aplicación
Nombre de la aplicación

Ya el último paso consiste en seleccionar el paquete click que hemos creado y definir las características de la aplicación. El canal o la serie se utilizan como filtros para mostrar las aplicaciones en la tienda.

Características de la aplicación 1/2
Características de la aplicación 1/2
Características de la aplicación 2/2
Características de la aplicación 2/2

Si no aparece ningún problema ya tenemos la aplicación preparada para publicar. Antes de hacerlo os recomiendo rellenar la información asociada a la aplicación ya que facilitará a los usuarios el uso de la aplicación. Pulsamos en el enlace Edit summary or price.

Ficha inicial de la aplicación
Ficha inicial de la aplicación

En la pestaña General definimos el nombre de la aplicación y escribimos un resumen de una línea.

Pestaña general
Pestaña general

La aplicación se tiene que clasificar en una categoría. También se añade en este punto una descripción detallada que informe de lo que hace la aplicación.

Pestaña discovery
Pestaña discovery

En Presentation se elige el icono de la aplicación que se mostrará en la tienda. Si tenemos capturas de pantalla es aconsejable subirlas para que el usuario tenga una noción de la aplicación antes de instalarla.

Pestaña presentation
Pestaña presentation

Si el usuario encuentra algún bug o quiere ponerse en contacto con nosotros usará la información que se muestra en la pestaña License and support.

Pestaña license and support
Pestaña license and support

Software libre no implica software gratuito. Es posible ponerle un precio a la aplicación y que los usuarios tengan que pagar dinero para descargarla.

Pestaña price
Pestaña price

Guardamos los campos y vemos como cambia la ficha de la aplicación. En este momento ya se puede publicar la aplicación.

Ficha de la aplicación rellenada
Ficha de la aplicación rellenada

El tiempo que tarda en aparecer en la tienda es variable. Cuando aparezca sólo tenemos que buscar la aplicación por el nombre.

Búsqueda de la aplicación en la tienda de  Ubuntu
Búsqueda de la aplicación en la tienda de Ubuntu
Ficha de la aplicación en la tienda de Ubuntu
Ficha de la aplicación en la tienda de Ubuntu

La aplicación también aparece en uApp de forma automática.

Ficha de la aplicación en uApp Explorer
Ficha de la aplicación en uApp Explorer

Conclusiones

Una Web App es muy sencilla de programar. Realmente es seguir el asistente del SDK de Ubuntu y hacer un par de cambios que la adapten a nuestras necesidades. Esa Web App es temporal y cuando desconectemos el dispositivo que use Ubuntu Touch del ordenador desaparecerá. Para dejarla fija es necesario crear un paquete click e instalarlo. Si queremos compartir la aplicación con otros usuarios es necesario usar la tienda de Ubuntu. El proceso de publicación no es complejo y permite que cualquier usuario del mundo descargue la aplicación.

Referencias

WebApp tutorial

results matching ""

    No results matching ""