Introducción al desarrollo de Plugins para QField

¿Quiénes somos?

–v–

¿Quiénes son ustedes?

AGENDA

¿Por qué plugins para QField?
Plugins para QField (generalidades) 🧑‍💻
Introducción a QML 🧑‍💻
Desarrollando plugins para QField 🧑‍💻
Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
Exhibición de plugins
Recursos

🧑‍💻: Práctica!

AGENDA

1. ¿Por qué plugins para QField?

Plugins para QField (generalidades) 🧑‍💻
Introducción a QML 🧑‍💻
Desarrollando plugins para QField 🧑‍💻
Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
Exhibición de plugins
Recursos

🧑‍💻: Práctica!

–v–

¿Por qué plugins para QField?

AGENDA

¿Por qué plugins para QField?

2. Plugins para QField (generalidades) 🧑‍💻

Introducción a QML 🧑‍💻
Desarrollando plugins para QField 🧑‍💻
Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
Exhibición de plugins
Recursos

🧑‍💻: Práctica!

–v–

PLUGINS PARA QFIELD (Generalidades)

–v–

PLUGINS PARA QFIELD (Generalidades)

Declarativo

Orientado al diseño de interfaces

Imperativo

Lógica de la aplicación

–v–

PLUGINS PARA QFIELD (Generalidades)

PLUGINS DE PROYECTO	PLUGINS DE APLICACIÓN
Se comparten junto al proyecto de QField	Se comparten vía URL (archivo ZIP)
Plugin único	Múltiples plugins
Instalación no requerida	Installation requerida
Disponible en la sesión del proyecto	Disponible en la sesión de QField

–v–

PLUGINS PARA QFIELD (Generalidades) 🧑‍💻

¡Demo / Práctica!

Plugin de proyecto
Plugin de aplicación

–v–

PLUGINS PARA QFIELD (Generalidades)

Revisitando…

PLUGINS DE PROYECTO	PLUGINS DE APLICACIÓN
Se comparten junto al proyecto de QField	Se comparten vía URL (archivo ZIP)
Plugin único	Múltiples plugins
Instalación no requerida	Installation requerida
Disponible en la sesión del proyecto	Disponible en la sesión de QField

–v–

PLUGINS PARA QFIELD (Generalidades)

¿Para qué?

Hacer más eficiente la captura de datos en campo.

(Ejemplo: plugin Snap)

–v–

Plugin SNAP

Snap!

–v–

PLUGINS PARA QFIELD (Generalidades)

¿Para qué?

Hacer más eficiente la captura de datos en campo.

(Ejemplo: plugin Snap)
Obtener información útil calculada por un Servicio Web.

(Ejemplo: ruteo con OSRM).

–v–

Ruteo con OSRM

–v–

PLUGINS PARA QFIELD (Generalidades)

¿Para qué?

Hacer más eficiente la captura de datos en campo.

(Ejemplo: plugin Snap)
Obtener información útil calculada por un Servicio Web.

(Ejemplo: ruteo con OSRM).
Obtener información de internet basada en mi localización.

(Ejemplo: plugin de pronóstico del tiempo)

Nota: ¡Antes de crear un plugin, revisa si la funcionalidad ya está en QField!

–v–

Pronóstico del tiempo

–v–

PLUGINS PARA QFIELD (Generalidades)

¿Dónde encontrar otros plugins?

https://github.com/topics/qfield-plugin

AGENDA

¿Por qué plugins para QField?
Plugins para QField (generalidades) 🧑‍💻

3. Introducción a QML 🧑‍💻

Desarrollando plugins para QField 🧑‍💻
Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
Exhibición de plugins
Recursos

🧑‍💻: Práctica!

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño
Tipos de Objetos

–v–

../Tipos de Objetos

Item, Rectangle, Text, TextInput, MouseArea, Dialog, ...

Text {
  ...
}

Ver QML Object Types para más detalles.

–v–

../Tipos de Objetos

Item, Rectangle, Text, TextInput, MouseArea, Dialog, ...

Rectangle {
  ...
  Text {
    ...
  }
}

–v–

../Tipos de Objetos

Item, Rectangle, Text, TextInput, MouseArea, Dialog, ...

Item {
  ...
  Text {
    ...
  }
}

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño
Tipos de Objetos
Atributos: Propiedades, señales, manejadores y métodos

–v–

../Atributos: Propiedades, señales, manejadores y métodos

Rectangle {
  ...
  MouseArea {
    id: myArea

    ...

  }
}

–v–

../Atributos: Propiedades, señales, manejadores y métodos

Rectangle {
  ...
  MouseArea {
    id: myArea

    enabled: true
    anchors.fill: parent
  }
}

–v–

../Atributos: Propiedades, señales, manejadores y métodos

Rectangle {
  ...
  MouseArea {
    id: myArea

    enabled: true
    anchors.fill: parent

    onClicked: ...
  }
}

–v–

../Atributos: Propiedades, señales, manejadores y métodos

Rectangle {
  ...
  MouseArea {
    id: myArea

    enabled: true
    anchors.fill: parent

    onClicked: ...

    function myCustomMethod() {
      ...
      return ...;
    }
  }
}

–v–

../Atributos: Propiedades, señales, manejadores y métodos

Rectangle {
  ...
  MouseArea {
    id: myArea

    enabled: true
    anchors.fill: parent  // Property binding!

    onClicked: ...

    function myCustomMethod() {
      ...
      return ...;
    }
  }
}

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño
Tipos de Objetos
Atributos: Propiedades, señales, manejadores y métodos
Hola mundo (QML)! 👋

–v–

../Hola mundo (QML) 👋

import QtQuick 2.0

Text {
  text: "Hola mundo!"
}

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño
Tipos de Objetos
Atributos: Propiedades, señales, manejadores y métodos
Hola mundo (QML)! 👋
Recursos de QML

–v–

../Recursos de QML

Introducción a Qt/QML, por KDAB: YouTube Playlist

Referencia QML: https://doc.qt.io/qt-6/qmlreference.html

Tutorial QML: https://doc.qt.io/qt-6/qml-tutorial.html

–v–

INTRODUCCIÓN A QML 🧑‍💻

Qt Modeling Language, declarativo, orientado al diseño
Tipos de Objetos
Atributos: Propiedades, señales, manejadores y métodos
Hola mundo (QML)! 👋
Recursos de QML
Ejercicio online! 🧑‍💻

–v–

../Ejercicio online! 🧑‍💻

Ir a:

https://qmlweb.github.io

AGENDA

¿Por qué plugins para QField?
Plugins para QField (generalidades) 🧑‍💻
Introducción a QML 🧑‍💻

4. Desarrollando plugins para QField 🧑‍💻

Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
Exhibición de plugins
Recursos

🧑‍💻: Práctica!

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI

–v–

../QField GUI

–v–

../QField GUI

–v–

../QField GUI

–v–

../QField GUI

–v–

../QField GUI

–v–

../QField GUI

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI
QField API 📗

–v–

../QField API 📗

Root objects | iface | Theme | QField GUI types | Utils

iface

qgisProject

settings

clipboardManager

...

Ver qgismobileapp.cpp para más detalles.

–v–

../QField API 📗

Root objects | iface | Theme | QField GUI types | Utils

iface.mainWindow()

iface.mapCanvas()

iface.findItemByObjectName("...")

iface.logMessage("...")

iface.addItemToPluginsToolbar()

iface.addItemToDashboardActionsToolbar()

iface.addItemToCanvasActionsToolbar()

Ver appinterface.h para más detalles.

–v–

../QField API 📗

Root objects | iface | Theme | QField GUI types | Utils

Theme.mainColor  // #80cc28

Theme.mainTextColor

Theme.mainBackgroundColor

Theme.darkGray

Theme.defaultFont

Theme.getThemeVectorIcon("...")

Ver Theme.qml para más detalles.

–v–

../QField API 📗

Root objects | iface | Theme | QField GUI types | Utils

QfButton

QfToolButton

QfTextField

QfSwitch

QfComboBox

...

Ver src/qml/imports/Theme/* para más detalles.

–v–

../QField API 📗

Root objects | iface | Theme | QField GUI types | Utils

LayerUtils

GeometryUtils

FeatureUtils

CoordinateReferenceSystemUtils

SnappingUtils

...

Ver src/core/utils/* para más detalles.

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI
QField API
¿Cómo escribir un plugin?

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI
QField API
¿Cómo escribir un plugin?
“Hola mundo” 👋

import QtQuick

Item {
  Component.onCompleted: {
    iface.mainWindow().displayToast('Hola mundo!')
  }
}

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI
QField API
¿Cómo escribir un plugin?
“Hola mundo”
Depurando 🐞

iface.logMessage("")

mainWindow.displayToast("")

console.log("") ?

Consejo: Inicia la aplicación desde la terminal de comandos para obtener un registro (log) más detallado.

–v–

Desarrollando plugins para QField 🧑‍💻

QField GUI
QField API
¿Cómo escribir un plugin?
“Hola mundo”
Depurando
Plantilla de plugins para QField 🧑‍💻

https://github.com/opengisch/qfield-template-plugin

AGENDA

¿Por qué plugins para QField?
Plugins para QField (generalidades) 🧑‍💻
Introducción a QML 🧑‍💻
Desarrollando plugins para QField 🧑‍💻

5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻

Exhibición de plugins
Recursos

🧑‍💻: Práctica!

–v–

Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻

¡Recreemos este plugin!

–v–

Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻

¿Qué necesitamos?

1) API call (open-meteo.com)
- Build a URL (to call the API) from the web site
- Call the API via XMLHttpRequest
- Translate API response into image / description
2) Plugin
- Get location via button (from previous exercises)
- Call the API from the plugin