Introducción a Clickable

El código fuente es el ADN de una aplicación. Incluye una serie de instrucciones que al ejecutarlas permite que se realicen múltiples funciones. Por ejemplo, cuando abrimos un navegador Web como Firefox, el código fuente le indica como tiene que descargar una página Web o la forma en la que tiene que mostrarla. Para que esas instrucciones, que están definidas en un archivo de texto, se puedan ejecutar en una aplicación es necesario compilarlas. Con la compilación se traducen las instrucciones en código máquina que puede ejecutar directamente el ordenador. El código máquina varía dependiendo del procesador que ejecute la aplicación. Podemos distinguir por tanto varias arquitecturas. En escritorio tenemos i386 / AMD64. Con los dispositivos móviles tenemos en la mayoría de los casos, arquitectura ARM. Para hacer todo el proceso usaremos Clickable.

Hemos visto que el compilador traduce el código fuente a código máquina. Un compilador que se ejecute en un ordenador va a generar una aplicación con la misma arquitectura. Directamente no puede generar una aplicación para otra arquitectura como por ejemplo ARM. En estas condiciones, ¿cómo podemos compilar una aplicación para ARM si usamos un ordenador de escritorio? La solución reside en el uso de contenedores. A efectos prácticos, el contenedor permite ejecutar aplicaciones de otra arquitectura en el ordenador.

Por lo tanto, tendremos un contenedor con todas las herramientas necesarias para compilar una aplicación. Le pasaremos el código fuente y nos generará una aplicación preparada para la arquitectura ARM. El siguiente paso es pasar esa aplicación a Ubuntu Touch y usarla.

Clickable

Hay muchas formas de crear un contenedor para hacer compilación cruzada (compilar en escritorio una aplicación de otra arquitectura). Canonical lo tenía integrado en el SDK de Ubuntu Touch. Como ese SDK ya no tiene soporte, la forma de trabajar ahora es usar Clickable. Si queréis programar una aplicación para Ubuntu Touch hay que usar esta herramienta. Es la que tiene soporte oficial y recibe actualizaciones con correcciones de fallos y nuevas funcionalidades.

Pasaremos a continuación a ver como se crea una aplicación con Clickable así como a compilar el típico «Hola mundo». Inicialmente veremos los pasos en consola. Más adelante veremos la forma de integrar Clickable con el entorno de programación (Qt). El único requisito es tener GNU/Linux en el ordenador. Se puede ejecutar en una máquina real o en una máquina virtual. Tenéis todos los enlaces con la información del capítulo en el apartado Referencias.

Hay varias formas de instalar Clickable. Tomaré como base la forma recomendada.

Dependencias

El contenedor que se usa con Clickable es docker. Como herramientas auxiliares tenemos Git y Python. Después de instalar docker es recomendable reiniciar el ordenador.

$ sudo apt install docker.io adb git python3 python3-pip

../_images/Clickable_dependencies.pngClickable dependencies

PIP es una herramienta de Python que permite instalar módulos de Python de forma sencilla. Es importante usar el comando con python3, si no usamos el mismo nombre podemos instalar la versión de Python por error.

$ pip3 install --user --upgrade clickable-ut

../_images/Pip_dependencies.pngPIP dependencies

Por último actualizamos el path. Es necesario cerrar la consola y abrirla de nuevo para que se use el nuevo path.

$ echo PATH = $ PATH: ~ / .local / bin >> ~ / .bashrc

../_images/Clickable_path.pngUpdating the path to use Clickable

Con estos pasos ya lo tenemos todo preparado para empezar a trabajar. Es posible usar versiones nightly (son compilaciones diarias) de Clickable. Aunque puede tener más funciones que la versión estable, también puede tener errores. Para desarrollo os recomiendo usar siempre la versión estable. Ahorraréis mucho tiempo.

Creación de la primera aplicación

Antes de empezar os recomiendo crear una carpeta para la aplicación. Es importante que la ruta no tenga espacios. Por ejemplo, si vais a programar aplicaciones una posible ruta sería ~/Documentos/Curso_Qt/Clickable. Creamos la ruta y abrimos una consola. Hay que pasar a esa carpeta usando el comando cd.

Iniciamos el asistente con el comando: clickable create. Después podemos elegir la plantilla que queremos usar. Seleccionamos la primera opción. Las opciones son:

  • QML Only: QML + JavaScript
  • C ++
  • Python
  • HTML5
  • Go
  • Rust

../_images/Template_selection.pngClickable templates

El siguiente paso es rellenar la información básica de la aplicación.

../_images/Application_details.pngApplication data

Después elegimos la licencia. Por defecto se usa la licencia GPL 3. Dejamos el resto de preguntas con los valores por defecto.

../_images/Application_resume.pngWizard Summary

Si abrimos la carpeta del proyecto, veremos la estructura que ha creado el asistente.

../_images/Project_files.pngFiles in the project folder

Ejecutar la aplicación en el escritorio

Para ejecutar la aplicación en el escritorio entramos en la carpeta que se ha creado y ejecutamos el comando: clickable desktop. La primera vez se inicializa el contenedor. Es normal que pide permisos de administrador. Si os sale el mensaje, hay que ejecutar clickable update y después clickable desktop. Es posible que siga saliendo el mensaje. Si eso ocurre, comprobad que el nombre no tiene espacios.

../_images/Docker_error.pngContainer error

Se descargarán todos los elementos necesarios para compilar la aplicación.

../_images/Desktop_compilation.pngStarting the desktop build

Después de una buena taza de café…

../_images/Desktop_compilation_finished.pngCompilation of the completed desktop application

La aplicación de ejemplo aparecerá cuando finalice el proceso.

../_images/Desktop_hello_world.pngHello world example

Ejecutar la aplicación en la tableta

Los pasos son los mismos que antes, la diferencia es el comando que usamos. Para compilar para Ubuntu Touch sólo hay que escribir clickable. El comando lanza la aplicación directamente en Ubuntu Touch. En este punto tenemos que tener el dispositivo conectado al ordenador y habilitar las opciones de desarrollo.

Para una M10 FHD con Ubuntu Touch (OTA-12), los pasos serían:

  • Entramos en Acerca de…

../_images/Settings_about.pngAbout

  • Opciones de desarrollo.

../_images/Settings_development.pngDevelopment options

  • Activamos las opciones de desarrollo (tendremos que tener una contraseña para acceder a la tableta). Tiene que salir un aviso de petición de conexión.

../_images/Settings_developmen_ssh.pngConnection from PC

Cuando todo esté configurado, lanzamos clickable y aparecerá la aplicación en el dispositivo.

../_images/Clickable_demo.pngDemo on Ubuntu Touch

Conclusiones

En esta sección hemos visto los conceptos básicos para usar Clickable desde la consola. Un detalle importante es que no dependemos del SDK de Ubuntu Touch. Por esta razón debería funcionar en las distribuciones de escritorio actuales. Puede ser que algún paquete se llame diferente pero si instalamos Clickable usando PIP, debería funcionar sin problemas. Quedan muchas cosas por ver en Clickable. Para hacerlo más amigable las iremos viendo poco a poco.

Se puede integrar Clickable con Qt Creator (la versión que hay en los repositorios de la distribución). En la siguiente entrega veremos como hacerlo y sobre esa base se desarrollarán el resto de entregas del curso. Los capítulos revisados no dependerán de la máquina virtual y serán más sencillos de seguir.

Referencias

Créditos

  • Autor: Miguel Menéndez Carrión
  • Traductor al inglés: Milan Korecky
  • Traductor al inglés lionelb