Construyendo para el Futuro Móvil: Apps en Ubuntu Touch

Si ya sabes programar pero quieres dar el salto a la convergencia de Ubuntu Touch, este tutorial es para ti. No vamos a ver qué es una variable; vamos a construir una aplicación de lista de tareas con persistencia de datos.

1. El Entorno de Trabajo: Clickable

Para desarrollar en UBports, la herramienta indispensable es Clickable. Es un CLI que gestiona la compilación, el empaquetado y la ejecución en dispositivos o contenedores.

Tutorial para el aprendizaje de cracion de aplicaciones con QML+Js, para aplicaciones UbTouch. Info: UbPorts Tutorial

Todas las atribuciones son para los creadores de UbPorts y sus asociados.

Este blog solo tiene el objetivo de la re-distribucion de la informacion para ampliar su base de usuarios.

Resumen “manos a la obra” del Tutorial referenciado.

1. Instalación rápida

pip install clickable

2. Crear un nuevo proyecto

Bash

clickable create

Selecciona la plantilla “QML Only” y completa los datos solicitados.

3. Estructura de una App Nativa en Ubuntu Touch

Una aplicación de Ubuntu Touch se basa principalmente en el framework Qt 5 y los Ubuntu Components.

Los archivos y carpetas principales son:

• Main.qml: Punto de entrada de la interfaz gráfica.
• manifest.json: Metadatos de la aplicación (nombre, versión, icono, permisos, etc.).
• assets/: Carpeta para imágenes, iconos y otros recursos.

4. Bloque básico de interfaz (Main.qml)

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    objectName: "mainView"
    applicationName: "mytodoapp.tuusuario"

    width: units.gu(40)
    height: units.gu(60)

    Page {
        title: i18n.tr("Mis Tareas")

        Column {
            anchors.fill: parent
            spacing: units.gu(1)
            // Aquí irá nuestra lógica y componentes
        }
    }
}

5. Lógica con JavaScript

En QML, JavaScript no solo se usa para eventos, sino también como motor principal de la lógica de negocio. Para mantener el código limpio y mantenible, es recomendable separar la lógica en un archivo .js.

Ejemplo: logic.js

function addTask(model, text) {
    if (text.trim().length > 0) {
        model.append({
            "name": text.trim(),
            "done": false
        });
    }
}

function toggleTask(model, index) {
    const task = model.get(index);
    model.setProperty(index, "done", !task.done);
}

6. Integración en QML

import "logic.js" as Logic

Button {
    text: "Añadir Tarea"
    onClicked: Logic.addTask(taskModel, inputField.text)
}

7. Persistencia de datos con LocalStorage

Para que las tareas persistan después de cerrar la aplicación, puedes utilizar el módulo LocalStorage de QtQuick.

Nota: Para proyectos más avanzados, consulta la documentación oficial de UBports sobre el Content Hub y el uso de bases de datos SQLite.

8. Pruebas y Despliegue

La forma más sencilla de probar y desplegar tu aplicación es usando la herramienta Clickable instalda.

8.a. Test en el equipo de desarrollo

Conecta tu teléfono Ubuntu Touch con el Modo Desarrollador activado y ejecuta:

Bash

clickable desktop

8.b. Ejecutar en el dispositivo

Conecta tu teléfono Ubuntu Touch con el Modo Desarrollador activado y ejecuta:

Bash

clickable

Este comando compilará la aplicación, la enviará al dispositivo y la lanzará automáticamente.

Recursos de Referencia

• Documentación Oficial de UBports
• Curso de Qt - Mimecar GitBook
• Ejemplos de la Comunidad - UBports GitLab Education

Selecciona “QML Only” para este tutorial