Introducción sobre el desarrollo de apps nativas para Ubuntu Touch

QML es un lenguaje que toma como base JavaScript y se utiliza para crear el interfaz de usuario de una aplicación nativa. Permite usar tanto elementos tradicionales (botones, listas, etc.) como elementos gráficos a los que se le añade lógica. Como ejemplo del primer caso está la interfaz de usuario de Ubuntu Touch.

Antes de empezar hablar sobre una pequeña introducción de como aprender a desarrollar apps nativas en Ubuntu Touch, es necesario primero conocer un poco sobre lo que es Ubuntu Touch como OS y porque es importante aprender a desarrollar apps nativas para este OS.

Ahora sí vamos a empezar …

Ubuntu Touch es una distribución basada en Ubuntu, lo que a su vez es, una distribución basada en Linux, que cumple con ciertas caracteristicas para poder ejecutarse como un OS en un dispositivo, lo primero ser un smartphone soportado por la distribución y contar con las caracteristicas necesarias para probar, ejecutar de acuerdo al uso que el usuario final de por hecho. por lo que el concepto de Ubuntut touch es:

Ubuntu Touch es un proyecto de código abierto mantenido por la comunidad de UBports y varios voluntarios alrededor del mundo, es una distribución de codigo abierto y libre, basada en Ubuntu y que su desktop es Lomiri, anteriormente Unity.

Como lo comentaba anteriormente, Ubuntu Touch, es compañera de distrubuciones basadas en Linux como las siguientes: Android, Kde Mobile, PostMarket OS etc..

Entonces ahora que conocemos el concepto, vamos a por el desarrollo…

El desarrollo de apps para Ubuntu Touch se desplegan en dos opciones, una de ellas es el desarrollo nativo y web, pero entonces que entendemos por nativo y por web, bueno lo siguiente es…

Lo nativo forma parte de un lenguaje para la interfaz grafica y cualquiera de los lenguajes soportados por Ubuntu Touch, pero entonces te preguntaras cuales son los lenguajes soportados para Ubuntu Touch, son los siguientes.

• Python
• Go
• Rust
• HTML5 (si ya sabemos que HTML5 no es un lenguaje de programación, pero en este “lenguaje” abarca todo el desarrollo bajo aplicaciones web móviles, mas adelante veremos como desarrollar una app web para Ubuntu Touch desde Vanilla, React, Vue & Angular).
• C++

Y bueno te estarás preguntando hasta este punto, cual es el lenguaje que me ayudara a manejar la interfaz grafica de mi aplicación nativa? Pues claro nada mas y nada menos que QML.

Pero entonces que es QML: QML, es un lenguaje que toma como base JavaScript & C++, se utiliza para crear la interfaz de usuario de una aplicación. Permite usar tanto elementos tradicionales (botones, listas, etc.) como elementos gráficos a los que se le añade lógica. Como ejemplo del primer caso está la interfaz de usuario de Ubuntu Touch. Además de ser un lenguaje declarativo, que permite a las interfaces de usuario ser descritas en términos donde muestra sus componentes visuales y como ellas interactuan una con la otra, es un lenguaje legible, que fue diseñado para habilitar componentes y ser interconectados de una manera dinamica, tambien permite a los componentes ser rehusados facilmente y personalizados dentro de una interfaz de usuario. Usando QTQuick module, los diseñadores y desarrolladores pueden facilmente construir fluidamente interfaces animadas en QML.

Ahora que conocemos parte de la historia de QML y su concepto, podemos entender que QML nos aporta en la creacion de cualquier tipo de aplicación incluso si decidieramos usar un lenguaje totalmente diferente a JS, como en este caso, Python, C++, etc…

Para usar QML, es necesario tener instalado, Docker (Recuerda que el entorno de compilación y ejecución de Ubuntu Touch esta totalmente dockerizado, por lo que es necesario primero tener instalado Docker en nuestra distribución Linux, Luego seguir en paso a paso de la instalación del CLI (command line interface) de Ubuntu Touch, después iniciar el proceso de creación de una app, mediante el cli en donde escogeremos la opción QML desde nuestro CLI).

Instalaciones:

Instalación del CLI de Ubuntu Touch

Creando un proyecto desde el cli de ubuntu touch: testApp

Estructuración de Carpetas

assets→ Carpeta en donde se encuentran los archivos, como imagenes, iconos, fuentes etc.. 

po→ Archivos de configuración

qml →Archivos de la aplicación en la extensión .qml

manifiest.json → configuración de paquetes y dependencias de la aplicación

.gitignore → Archivos de configuración ignorados por Git.

testapp.apparmor → Archivo de compilación de la aplicación

clickable.yaml → Archivo de configuración de clickable

En el siguiente post, explicare parte del lenguaje QML, como crear interfaces graficas mdiante sus componentes y usaremos algunos eventos para agregar dinamismo a nuestra app.

Estaremos usando uno de los proyectos del sitio web del profesor Leonidas Esteban