5. Entwicklungsleitfaden

5.1. Entwicklungsumgebung und -voraussetzungen

Die Entwicklungsumgebung muss mindestens die folgenden Anforderungen erfüllen:

  • CPU: 1,6 GHz oder schnellerer Prozessor.

  • RAM: >= 1 GB (2 GB oder mehr empfohlen).

  • ROM: >= 128 GB.

  • Betriebssystem: Windows 10 oder höher, macOS 10.15 oder höher, Linux (x64)-System (Ubuntu, Debian usw.).

  • Controller-Version: Überprüfen Sie diese in der WebApp unter „Systemeinstellungen - Über“. Achten Sie bei der Entwicklung auf die Unterscheidung zwischen QX und LA. Vermeiden Sie in der QX-Umgebung moderne JavaScript-Funktionen wie die ES6+-Syntax in Befehlsbeispielen.

Wir haben einige Schnittstellen und Module bereitgestellt. Für ein besseres Entwicklungsergebnis sind jedoch Grundkenntnisse der Webentwicklung empfehlenswert, insbesondere die Vertrautheit mit folgenden Technologien:

  • HTML, JavaScript/TypeScript, CSS.

  • Vue3.

  • Vite.

  • Node.js.

5.2. Entwicklungswerkzeuge

Wir empfehlen die Verwendung der neuesten Visual Studio Code (VSCode) Software für die Entwicklung. Besuchen Sie zum Download die offizielle VSCode-Downloadseite und wählen Sie die entsprechende Version für Ihr System aus.

Gleichzeitig muss auf Ihrem lokalen Computer die Node.js-Laufzeitumgebung installiert sein. Bei der Installation von Node.js werden auch Tools wie npm mitinstalliert, die die Paketverwaltung erleichtern. Besuchen Sie die offizielle Node.js-Downloadseite und wählen Sie Version 20 für Ihr System aus.

Bei der Entwicklung in VSCode können außerdem die folgenden VSCode-Erweiterungen nützlich sein, die je nach Bedarf installiert und konfiguriert werden können.

  • Vue

  • ESLint

  • npm Intellisense

  • Vue Language Features (Volar)

  • TypeScript Vue Plugin (Volar) oder Vue.volar

  • Tailwind CSS IntelliSense

5.3. FRCap-Projektstruktur

Die Dateistruktur eines FRCap-Projekts:

../_images/01212.png

Abbildung 5-1 FRCap-Projektstruktur

  • Public:

    Öffentlicher Ressourcenordner. Dateien in diesem Ordner werden während des Build-Prozesses nicht verarbeitet, sondern direkt unverändert in das Build-Verzeichnis kopiert.

    Standardmäßig enthält er den Ordner action und die Datei logo.svg.

    Der Ordner action enthält die Logikdateien für die benutzerdefinierten Befehlshintergrundschnittstellen.

    logo.svg ist das Plugin-Symbol.

  • Src:

    Der Ordner assets dient hauptsächlich zur Ablage statischer Ressourcen.

    Der Ordner components dient hauptsächlich zur Ablage von Komponenten.

    Der Ordner utils dient hauptsächlich zur Ablage von Hilfsklassen.

    App.vue ist der Code der Startseite.

    main.js ist hauptsächlich für den globalen Import von Ressourcen und die Erstellung des Vue-Frameworks zuständig.

    style.css ist die grundlegende Stildatei des Projekts.

  • build.bat: Build-Skript für Windows-Plattformen.

  • index.html: Hauptgerüst der Seiten-Benutzeroberfläche.

  • package.json: Paketbeschreibungsdatei und Kompilierungsstrategien usw.

  • vite.config.js: Vite-Konfigurationsdatei.

5.4. Verwendung von Frontend-frcap-ui und frcap-api

frcap-ui bietet einige über Vue-Komponenten gekapselte HTML-Steuerelemente, die in das Projekt importiert werden können. Dies reduziert den Aufwand für die Entwicklung der Seiten-Benutzeroberfläche, verringert die Code-Menge und verbessert die Lesbarkeit des Codes. Natürlich können Sie auch andere gute Open-Source-UI-Komponentenbibliotheken wie Element Plus verwenden.

Öffnen Sie zunächst ein Terminal im Pfad Ihres Projekts und installieren Sie frcap-ui.

1npm install frcap-ui --save

Nach erfolgreicher Installation importieren Sie es in der Komponente, die frcap-ui verwenden soll, am Beispiel des Button-Steuerelements.

1import { AppButton } from 'frcap-ui'

Verwenden Sie es dann im <template>-Element der Komponente.

1<AppButton button-text="Start" button-type="primary"></AppButton>

Vorschau des Entwicklungsergebnisses im Browser.

../_images/00913.png

Abbildung 5-2 AppButton-Effekt

Derzeit bieten wir vier gängige Steuerelement-Komponenten an.

  • AppButton: Schaltflächenkomponente.

    • buttonType: Schaltflächentyp, String, bestimmt das entsprechende Schaltflächendesign. Standard ist primary. - primary: Blau. - secondary: Grau. - safety: Grün. - warning: Gelb. - serious: Rot.

    • buttonText: Schaltflächentext, String. Standardwert ist „primary“.

  • AppInput: Eingabekomponente.

    • type: Erforderlich, String. Standardwert ist text. Gibt den Typ des Eingabefelds an. - number: Zahlen-Eingabefeld. - text: Text-Eingabefeld.

    • inputLabel: Erforderlich, String. Beschriftungstext des Eingabefelds.

    • inputUnit: String. Einheitentext des Eingabefelds.

    • hasUnit: Boolean, Standard false. Gibt an, ob ein Einheitentext benötigt wird.

    • isEmptyErr: Boolean. Gibt an, ob das Eingabefeld leer ist (für Fehlerbehandlung).

    • isReadonly: Boolean. Gibt an, ob das Eingabefeld schreibgeschützt ist.

  • AppSelect: Auswahlfeld-Komponente.

    • selectionLabel: Erforderlich, String. Beschriftungstext des Auswahlfelds.

    • optionsData: Erforderlich, Array. Daten für die Optionen.

  • Modal: Modalfenster-Komponente.

    • show: Boolean. Gibt an, ob das Modalfenster angezeigt wird.

    • title: String. Titel des Modalfensters.

Um die Entwicklung benutzerdefinierter Befehle in FRCap zu erleichtern, haben wir die HTTP-Anfragen und APIs bereits in das über den „Erstellungsassistenten“ heruntergeladene initiale FRCap-Projekt integriert. Dadurch können sowohl benutzerdefinierte als auch die standardmäßig bereitgestellten Befehle in der Datei api.js unter ./src/api/api.js abgelegt werden.

Die Verwendung von frcap-api ähnelt der von frcap-ui:

  1. Importieren Sie die API in der Datei (z.B. einer Komponente), die sie benötigt.

1import api from '@/api/api';

  1. Rufen Sie die standardmäßig bereitgestellten Befehle in Ihrer Schnittstelle auf.

1api.getRobotStatus();

  1. Verarbeiten Sie die Logik im zurückgegebenen Promise.

1api.getRobotStatus()
2.then((res) => {
3    console.log(res.data);
4})
5.catch((err) => {
6    console.error(err);
7});

5.5. Entwicklung benutzerdefinierter Backend-Befehle

5.5.1. Beispiel für Datenbankoperationen (LA)

  1. Datenbankmodul importieren

1var node = "/usr/local/etc/node/sys";
2var Sqlite3_Action = require(node + '/better-sqlite3/better-sqlite3.js');
3var sqlite = new Sqlite3_Action();

  1. Inhalt der Punktedatenbank abrufen

 1// cmd abgleichen
 2case 'get_points':
 3    // SQL-Anweisung schreiben: aufsteigend nach Name sortieren, zuerst Zahlen, dann Buchstaben, dann Chinesisch
 4    var sql = "select * from points order by name ASC";
 5    var sql_data = sqlite.queryall(DB_POINTS, sql);
 6    // JSON-Daten formatieren
 7    for (var i = 0; i < sql_data.length; i++) {
 8        response_data[sql_data[i].name] = sql_data[i];
 9    }
10    // JSON-Daten an das Frontend zurücksenden
11    event_socket.emit('response', res, response_status, response_data);
12    break;

5.5.2. Beispiel für Datenbankoperationen (QX)

Bemerkung

Die QX-Version speichert Daten im JSON-Format.

  1. Datenbankmodul importieren

1var node = "/usr/local/etc/node/sys";
2var sqlite_adapter = require(node + '/jsdb/sqlite_adapter');
3var db = new sqlite_adapter.Database(palletizing_db);

  1. Beispiel für die Datenbankverwendung

 1// SELECT-Abfrage ausführen und alle Zeilen abrufen
 2var rows = db.queryall('SELECT * FROM box_cfg');
 3console.log('result:', rows);
 4
 5// SELECT-Abfrage ausführen und eine einzelne Zeile abrufen
 6var row = db.queryget('SELECT * FROM box_cfg WHERE flag=1');
 7console.log('result:', row);
 8
 9// UPDATE-Anweisung ausführen
10db.run('UPDATE box_cfg SET height=100 WHERE flag=1', function(err) {
11    if (err) {
12        console.error('Update failed:', err);
13    } else {
14        console.log('Update success');
15    }
16});
17
18// Parametrisierte Abfrage ausführen
19var params = [100, 200, 300, 1];
20db.run('UPDATE box_cfg SET height=?, width=?, length=? WHERE flag=?', params, function(err) {
21    if (err) {
22        console.error('update failed:', err);
23    } else {
24        console.log('update success');
25    }
26});
27
28// Datenbankverbindung schließen
29db.close();

5.5.3. Beispiel für Socket-Kommunikationsoperationen

  • Socket-Kommunikationsmodul importieren

1var node = "/usr/local/etc/node/sys";
2var Socket_Cmd = require(node + '/socket/socket_cmd');
3var socket_cmd = new Socket_Cmd();

  • Befehl zum Setzen einer Systemvariablen senden

 1// cmd abgleichen
 2case 511:
 3    // Gesendete Daten abrufen
 4    content = data_json.content;
 5    // Länge der gesendeten Daten abrufen
 6    len = data_json.content.length;
 7    // Datenpaket zusammensetzen
 8    send_content = '/f/bIII1III511III' + len + 'III' + content + 'III/b/f';
 9    // Socket senden
10    socket_cmd.send(send_content);
11    // Socket empfangen (Unterschied LA/QX beachten)
12    // LA Version:
13    socket_cmd.recv().then((recv_data) => {
14        response_data = recv_data;
15        event_socket.emit('response', res, response_status, response_data);
16    }).catch((err) => {
17        console.log(err);
18    });
19    // QX Version
20    // socket_cmd.recv().then(function(recv_data) {
21    //     response_data = recv_data;
22    //     event_socket.emit('response', res, response_status, response_data);
23    // }).catch(function(err) {
24    //     console.log(err);
25    // });
26    break;