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](assets/chapter-03/WebApp - 01 Proyecto nuevo.png)
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](assets/chapter-03/WebApp - 02 Proyecto webapp.png)
Seleccionamos la ruta en la que se guardará el proyecto. Recordad que no se pueden usar espacios o caracteres con acentos.
![Ruta del proyecto](assets/chapter-03/WebApp - 03 Proyecto - Ruta.png)
Escribimos los datos de la aplicación.
![Datos del paquete click](assets/chapter-03/WebApp - 04 Proyecto click.png)
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](assets/chapter-03/WebApp - 05 Proyecto - click sdk.png)
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](assets/chapter-03/WebApp - 06 Proyecto - resumen.png)
Ya hemos acabado el asistente. El proyecto se abre de forma automática.
![Proyecto que se ha creado en el asistente](assets/chapter-03/WebApp - 07 Proyecto abierto.png)
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](assets/chapter-03/WebApp - 08 Excludes.png)
- 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](assets/chapter-03/WebApp - 09 Manifest.png)
- WebApp.apparmor: permisos de la aplicación.
![Archivo WebApp.apparmor](assets/chapter-03/WebApp - 10 AppArmor.png)
- WebApp.desktop: información para lanzar la aplicación en el scope de aplicaciones.
![Archivo WebApp.desktop](assets/chapter-03/WebApp - 11 Desktop.png)
- WebApp.png: icono de la aplicación.
![Archivo WebApp.png](assets/chapter-03/WebApp - 12 Icono.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](assets/chapter-03/WebApp - 13 Demo desktop.png)
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](assets/chapter-03/WebApp - 14 Demo dispositivo.png)
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](assets/chapter-03/WebApp - 15 Build click.png)
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](assets/chapter-03/WebApp - 16 Install click.png)
El resultado es la aplicación instalada en el dispositivo.
![Aplicación en el scope de aplicaciones](assets/chapter-03/WebApp - 17 Scope aplicaciones.png)
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](assets/chapter-03/WebApp - 19 Tienda - Login.png)
Pulsamos en el enlace y accederemos al panel de control.
![Panel de control de la Ubuntu Store](assets/chapter-03/WebApp - 20 Tienda - New snap.png)
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](assets/chapter-03/WebApp - 21 Tienda - Datos 01.png)
![Datos del usuario 2/3](assets/chapter-03/WebApp - 22 Tienda - Datos 02.png)
![Datos del usuario 3/3](assets/chapter-03/WebApp - 23 Tienda - Datos 03.png)
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](assets/chapter-03/WebApp - 24 Tienda - Registro nombre 01.png)
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](assets/chapter-03/WebApp - 25 Tienda - Registro nombre 02.png)
![Características de la aplicación 2/2](assets/chapter-03/WebApp - 26 Tienda - Registro nombre 03.png)
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](assets/chapter-03/WebApp - 27 Publicación 01.png)
En la pestaña General definimos el nombre de la aplicación y escribimos un resumen de una línea.
![Pestaña general](assets/chapter-03/WebApp - 28 Publicación 02.png)
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](assets/chapter-03/WebApp - 29 Publicación 03.png)
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](assets/chapter-03/WebApp - 30 Publicación 04.png)
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](assets/chapter-03/WebApp - 31 Publicación 05.png)
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](assets/chapter-03/WebApp - 32 Publicación 06.png)
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](assets/chapter-03/WebApp - 33 Publicación 07.png)
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](assets/chapter-03/WebApp - 34 Ubuntu Store 01.png)
![Ficha de la aplicación en la tienda de Ubuntu](assets/chapter-03/WebApp - 35 Ubuntu Store 02.png)
La aplicación también aparece en uApp de forma automática.
![Ficha de la aplicación en uApp Explorer](assets/chapter-03/WebApp - 36 uApp.png)
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.