Qfield Plugins Workshop

# Introducción al desarrollo de Plugins para QField

---

## ¿Quiénes somos?

--v--

--v--

## ¿Quiénes son ustedes?

---

## AGENDA

1. ¿Por qué plugins para QField?
2. Plugins para QField (generalidades) 🧑‍💻
3. Introducción a QML 🧑‍💻
4. Desarrollando plugins para QField 🧑‍💻
5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
6. Exhibición de plugins
7. Recursos

-----------

🧑‍💻: Práctica!

---

## AGENDA

1. ¿Por qué plugins para QField?

2. Plugins para QField (generalidades) 🧑‍💻
3. Introducción a QML 🧑‍💻
4. Desarrollando plugins para QField 🧑‍💻
5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
6. Exhibición de plugins
7. Recursos

-----------

🧑‍💻: Práctica!

--v--

## ¿Por qué plugins para QField?

---

## AGENDA

1. ¿Por qué plugins para QField?

2. Plugins para QField (generalidades) 🧑‍💻

3. Introducción a QML 🧑‍💻
4. Desarrollando plugins para QField 🧑‍💻
5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
6. Exhibición de plugins
7. 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!

1. Plugin de proyecto

2. Plugin de aplicación

--v--

## PLUGINS PARA QFIELD (Generalidades)

_Revisitando..._

--v--

## PLUGINS PARA QFIELD (Generalidades)

¿Para qué?

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

*(Ejemplo: plugin Snap)*

--v--

### Plugin SNAP

Snap!

![](assets/showcase_snap.gif)

--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

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

3. Introducción a QML 🧑‍💻

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

-----------

🧑‍💻: Práctica!

--v--

## INTRODUCCIÓN A QML 🧑‍💻

+ Qt Modeling Language, declarativo, orientado al diseño

--v--

## INTRODUCCIÓN A QML 🧑‍💻

+ **Tipos de Objetos**

--v--

### \.\./Tipos de Objetos

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

----

``` qml
Text {
  ...
}
```

_Ver [QML Object Types](https://doc.qt.io/qt-6/qtquick-qmlmodule.html#object-types) para más detalles._

--v--

### \.\./Tipos de Objetos

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

----

``` qml
Rectangle {
  ...
  Text {
    ...
  }
}
```

--v--

### \.\./Tipos de Objetos

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

----

``` qml
Item {
  ...
  Text {
    ...
  }
}
```

--v--

## INTRODUCCIÓN A QML 🧑‍💻

+ Tipos de Objetos

+ **Atributos: Propiedades, señales, manejadores y métodos**

--v--

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

``` qml
Rectangle {
  ...
  MouseArea {
    id: myArea

...

}
}
```

--v--

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

``` qml
Rectangle {
  ...
  MouseArea {
    id: myArea

enabled: true
 anchors.fill: parent
 }
}
```

--v--

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

``` qml
Rectangle {
  ...
  MouseArea {
    id: myArea

enabled: true
    anchors.fill: parent

onClicked: ...
 }
}
```

--v--

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

``` qml
Rectangle {
  ...
  MouseArea {
    id: myArea

enabled: true
    anchors.fill: parent

onClicked: ...

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

--v--

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

``` qml
Rectangle {
  ...
  MouseArea {
    id: myArea

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

onClicked: ...

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

--v--

## INTRODUCCIÓN A QML 🧑‍💻

+ Tipos de Objetos

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

+ **Hola mundo (QML)!** 👋

--v--

### \.\./Hola mundo (QML) 👋

``` qml
import QtQuick 2.0

Text {
  text: "Hola mundo!"
}
```

--v--

## INTRODUCCIÓN A QML 🧑‍💻

+ 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](https://www.youtube.com/watch?v=JxyTkXLbcV4&list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc&index=2)

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 🧑‍💻

+ 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

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

4. Desarrollando plugins para QField 🧑‍💻

5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻
6. Exhibición de plugins
7. 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](https://github.com/opengisch/QField/blob/c8f776d864346609e4ae97a12a36898cb43cd0ac/src/core/qgismobileapp.cpp#L579-L596) 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](https://github.com/opengisch/QField/blob/master/src/core/appinterface.h) para más detalles._

--v--

## \.\./QField API 📗

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

--------
``` qml
Theme.mainColor  // #80cc28

Theme.mainTextColor

Theme.mainBackgroundColor

Theme.darkGray

Theme.defaultFont

Theme.getThemeVectorIcon("...")
```
--------

_Ver [Theme.qml](https://github.com/opengisch/QField/blob/master/src/qml/imports/Theme/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/*](https://github.com/opengisch/QField/blob/master/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/*](https://github.com/opengisch/QField/tree/master/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"** 👋

``` qml
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

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

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

6. Exhibición de plugins
7. 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

---

## AGENDA

1. ¿Por qué plugins para QField?
2. Plugins para QField (generalidades) 🧑‍💻
3. Introducción a QML 🧑‍💻
4. Desarrollando plugins para QField 🧑‍💻 
5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻

6. Exhibición de plugins

7. Recursos

-----------

🧑‍💻: Práctica!

--v--

## Exhibición de plugins

Geometryless Addition

https://github.com/opengisch/qfield-geometryless-addition

--v--

## Exhibición de plugins

VocalPoint plugin

https://github.com/SeqLaz/vocalpoint-qfield-plugin

--v--

## Exhibición de plugins

Nominatim locator plugin

https://github.com/opengisch/qfield-nominatim-locator

--v--

## Exhibición de plugins

LiveField plugin

--v--

## Exhibición de plugins

QField plugin reloader

https://github.com/gacarrillor/qfield-plugin-reloader/

---

## AGENDA

1. ¿Por qué plugins para QField?
2. Plugins para QField (generalidades) 🧑‍💻
3. Introducción a QML 🧑‍💻
4. Desarrollando plugins para QField 🧑‍💻 
5. Plugin para pronóstico del tiempo (Weather Forecast) 🧑‍💻 
6. Exhibición de plugins

7. Recursos

-----------

🧑‍💻: Práctica!

--v--

## Recursos

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

Introducción a Qt/QML, por KDAB ([YouTube Playlist](https://www.youtube.com/watch?v=JxyTkXLbcV4&list=PL6CJYn40gN6hdNC1IGQZfVI707dh9DPRc&index=2))

Editor online de QML: https://qmlweb.github.io

Editor online avanzado de QML: https://patrickelectric.work/qmlonline/

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

Listado de plugins para QField: https://github.com/topics/qfield-plugin

Íconos para plugins: https://fonts.google.com/icons

---

![os_love](assets/love-os.png)

¡Gracias, y que se diviertan!