5. Guida allo Sviluppo

5.1. Ambiente di Sviluppo e Requisiti

L’ambiente di sviluppo deve soddisfare almeno le seguenti configurazioni:

  • CPU: Processore 1.6 GHz o più veloce;

  • RAM: >=1 GB (consigliato 2 GB o superiore);

  • ROM: >=128 GB;

  • SO: Richiede Windows 10 o versioni successive, macOS 10.15 o versioni successive, sistemi Linux (x64) (Ubuntu, Debian, ecc.).

  • Versione del Controller: Controlla in WebApp in «Impostazioni di Sistema - Informazioni». Nota la distinzione tra QX e LA nell’ambiente di sviluppo. Ad esempio, nel contesto QX, evita l’uso di funzionalità JavaScript moderne come la sintassi ES6+.

Abbiamo incapsulato alcune interfacce e moduli, ma per ottenere un buon risultato di sviluppo, si consiglia una certa familiarità con lo sviluppo web, preferibilmente conoscendo le seguenti tecnologie:

  • HTML, JavaScript/TypeScript, CSS;

  • Vue3;

  • Vite;

  • Node.js.

5.2. Strumenti di Sviluppo

Raccomandiamo l’utilizzo dell’ultima versione del software Visual Studio Code (VSCode) per lo sviluppo. Per il download, visita la pagina di download ufficiale di VSCode e seleziona la versione corrispondente al tuo sistema.

Inoltre, è necessario che sul computer locale sia installato l’ambiente di runtime Node.js. L’installazione di Node.js include strumenti come npm per facilitare la gestione dei pacchetti. Visita la pagina di download ufficiale di Node.js e seleziona la versione v20 corrispondente al tuo sistema.

Per lo sviluppo in VSCode, potrebbero essere utili i seguenti plugin di VSCode, che possono essere installati e configurati secondo necessità.

  • Vue;

  • ESLint;

  • npm Intellisense;

  • Vue Language Features (Volar);

  • TypeScript Vue Plugin (Volar) o Vue.volar;

  • Tailwind CSS IntelliSense.

5.3. Struttura del Progetto FRCap

Struttura dei file del progetto FRCap:

../_images/01212.png

Figura 5-1 Struttura del Progetto FRCap

  • Public:

Cartella delle risorse pubbliche. I file al suo interno non vengono elaborati durante il processo di build, ma vengono semplicemente copiati integralmente nella directory di output della build.

Contiene per impostazione predefinita la cartella «action» e il file «logo.svg».

La cartella «Action» è utilizzata per memorizzare i file di logica dell’interfaccia di backend per i comandi personalizzati.

Logo.svg è l’icona del plugin.

  • Src:

La cartella «Assets» è principalmente utilizzata per collocare risorse statiche.

La cartella «Components» è principalmente utilizzata per collocare componenti.

La cartella «Utils» è principalmente utilizzata per collocare classi di utilità.

App.vue contiene il codice della pagina principale.

Main.js è principalmente responsabile dell’inclusione globale delle risorse, della creazione del framework Vue, ecc.

Style.css è il file degli stili di base del progetto.

  • Build.bat: Script di build per piattaforma Windows.

  • Index.html: Struttura principale UI della pagina.

  • Package.json: File di descrizione dei pacchetti e strategie di compilazione, ecc.

  • Vite.config.js: File di configurazione di Vite.

5.4. Utilizzo di frcap-ui e frcap-api (frontend)

Frcap-ui fornisce alcuni controlli HTML già incapsulati come componenti Vue, che possono essere importati nel progetto per l’uso, riducendo la difficoltà di sviluppo dell’interfaccia utente e la quantità di codice, migliorando la leggibilità del codice. Naturalmente, puoi anche scegliere alcune eccellenti librerie di componenti UI open source, come Element plus, ecc.

Prima di tutto, apri il terminale nel percorso del tuo progetto e installa frcap-ui.

1npm install frcap-ui -s

Dopo l’installazione riuscita, importa frcap-ui nei componenti che lo richiedono, prendendo come esempio il controllo pulsante.

1import { AppButton } from 'frcap-ui'

Quindi utilizza l’elemento <template> del componente.

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

Anteprima dell’effetto del progetto di sviluppo nel browser.

../_images/00913.png

Figura 5-2 Effetto AppButton

Attualmente forniamo 4 componenti di controllo comuni.

  • AppButton: Componente pulsante.

    • buttonType: Tipo di pulsante, String, corrispondente a diversi stili di pulsante, predefinito è primary.

      • primary: blu;

      • secondery: grigio;

      • safety: verde;

      • warning: giallo;

      • serious: rosso.

    • buttonText: Testo del pulsante, String, valore predefinito «primary».

  • AppInput: Componente di input.

    • Type: Obbligatorio, String, valore predefinito text. Indica il tipo di campo di input.

      • Number: campo di input numerico;

      • Text: campo di input di testo.

    • inputLabel: Obbligatorio, String, testo dell’etichetta del campo di input.

    • inputUnit: String, testo dell’unità del campo di input.

    • hasUnit: Boolean, predefinito false, indica se è necessario il testo dell’unità.

    • isEmptyErr: Boolean, indica se il campo di input è vuoto.

    • isReadonly: Boolean, indica se il campo di input è di sola lettura.

  • AppSelect: Componente di selezione (select box).

    • selectionLabel: Obbligatorio, String, testo dell’etichetta del box di selezione.

    • optionsData: Obbligatorio, Array, dati delle opzioni.

  • Modal: Componente finestra modale.

    • show: Boolean, indica se far apparire la finestra modale.

    • title: String, titolo della finestra modale.

Per facilitare lo sviluppo di comandi personalizzati che potrebbero essere creati in FRCap, abbiamo integrato le richieste HTTP e le API nel progetto FRCap iniziale scaricato tramite la «Creazione guidata». In questo modo, sia i comandi personalizzati che quelli forniti di default possono essere inseriti nel file api.js di frcap-api. Il percorso specifico di api.js è «./src/api/api.js».

L’utilizzo di Frcap-api è simile a quello di frcap-ui, come di seguito:

  1. Importa api nel file (come un componente) che necessita di utilizzare le API.

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

  1. Chiama i comandi forniti di default nell’interfaccia.

1api.getRobotStatus()

  1. Scrivi la logica di elaborazione nella promise restituita.

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

5.5. Sviluppo di Comandi Personalizzati (Backend)

5.5.1. Esempio di Operazione su Database (LA)

  1. Importa il modulo del database

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

  1. Ottieni i contenuti dal database dei punti (positions)

 1 // Corrispondenza cmd
 2 case 'get_points':
 3 // Scrivi l'istruzione SQL, ordina i dati in ordine numerico crescente + ordine alfabetico iniziale crescente + ordine alfabetico cinese iniziale crescente, e restituiscili alla pagina frontend per la visualizzazione
 4 var sql = "select * from points order by name ASC";
 5 var sql_data = sqlite.queryall(DB_POINTS, sql);
 6 // Formattazione dei dati JSON
 7 for (var i = 0; i < sql_data.length; i++) {
 8     response_data[sql_data[i].name] = sql_data[i];
 9 }
10 // Restituisci i dati JSON al frontend
11 event_socket.emit('response', res, response_status, response_data);
12 break;

5.5.2. Esempio di Operazione su Database (QX)

Nota

La versione QX utilizza file in formato JSON per memorizzare i dati.

  1. Importa il modulo del database

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

  1. Esempio di utilizzo del database

 1// Esegui una query SELECT e ottieni tutte le righe
 2var rows = db.queryall('SELECT * FROM box_cfg');
 3console.log('result:', rows);
 4
 5// Esegui una query SELECT e ottieni una singola riga
 6var row = db.queryget('SELECT * FROM box_cfg WHERE flag=1');
 7console.log('result:', row);
 8
 9// Esegui un'istruzione UPDATE
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// Esegui una query con parametri
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// Chiudi la connessione al database
29db.close();

5.5.3. Esempio di Operazione di Comunicazione Socket

  • Importa il modulo di comunicazione socket

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

  • Invia un comando per impostare una variabile di sistema

 1// Corrispondenza cmd
 2case 511:
 3// Ottieni il contenuto dei dati da inviare
 4content = data_json.content;
 5// Ottieni la lunghezza dei dati da inviare
 6len = data_json.content.length;
 7// Assemblea i dati da inviare
 8send_content = '/f/bIII1III511III' + len + 'III' + content + 'III/b/f'
 9// Invio socket
10socket_cmd.send(send_content);
11// Ricezione socket (nota la distinzione LA/QX)
12// Versione LA:
13socket_cmd.recv().then((recv_data)=>{
14   response_data = recv_data;
15event_socket.emit('response', res, response_status, response_data);
16}).catch((err)=>{
17   console.log(err);
18})
19// Versione QX
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// })
26break;