5. Przewodnik programisty

5.1. Środowisko programistyczne i wymagania

Środowisko programistyczne musi spełniać co najmniej następującą konfigurację:

  • CPU: 1,6 GHz lub szybszy procesor.

  • RAM: >= 1 GB (zalecane 2 GB lub więcej).

  • ROM: >= 128 GB.

  • System operacyjny: Wymagany system Windows 10 lub nowszy, macOS 10.15 lub nowszy, Linux (x64) (Ubuntu, Debian itp.).

  • Wersja kontrolera: Sprawdź w WebApp w sekcji „Ustawienia systemowe - Informacje”. W środowisku programistycznym należy rozróżnić QX i LA. W przykładach instrukcji dla środowiska QX należy unikać używania składni ES6+ i innych nowoczesnych funkcji JavaScript.

Zapewniliśmy już kilka interfejsów i modułów, ale aby osiągnąć dobry efekt programistyczny, zaleca się posiadanie pewnej wiedzy na temat rozwoju aplikacji internetowych, najlepiej znajomość następujących technologii:

  • HTML, JavaScript/TypeScript, CSS.

  • Vue3.

  • Vite.

  • Node.js.

5.2. Narzędzia programistyczne

Zalecamy używanie najnowszego oprogramowania Visual Studio Code (VSCode) do programowania. Aby pobrać, odwiedź oficjalną stronę pobierania VSCode i wybierz odpowiedni system.

Jednocześnie na komputerze lokalnym musi być zainstalowane środowisko uruchomieniowe Node.js. Instalacja Node.js automatycznie instaluje narzędzia takie jak npm, ułatwiając zarządzanie pakietami. Odwiedź oficjalną stronę pobierania Node.js i wybierz wersję v20 dla odpowiedniego systemu.

Podczas programowania w VSCode mogą być również używane następujące wtyczki VSCode, które można zainstalować i skonfigurować według potrzeb.

  • Vue.

  • ESlint.

  • npm Intellisense.

  • Vue Language Features (Volar).

  • TypeScript Vue Plugin (Volar) lub Vue.volar.

  • Tailwind CSS IntelliSense.

5.3. Struktura projektu FRCap

Struktura plików projektu FRCap:

../_images/0121.png

Wykres 5-1 Struktura projektu FRCap

  • Public:

Folder zasobów publicznych. Podczas procesu budowania pliki wewnątrz nie są przetwarzane, ale kopiowane w całości do katalogu budowania.

Wewnątrz domyślnie znajduje się folder action i logo.svg.

Folder action jest przeznaczony do przechowywania plików logiki backendu interfejsów niestandardowych instrukcji.

Logo.svg to ikona wtyczki.

  • Src:

Folder Assets służy głównie do przechowywania zasobów statycznych.

Folder Components służy głównie do przechowywania komponentów.

Folder Utils służy głównie do przechowywania klas narzędziowych.

Kod strony głównej App.vue.

Main.js odpowiada głównie za globalne wprowadzanie zasobów, tworzenie frameworka Vue itp.

Podstawowy plik stylów projektu Style.css.

  • Build.bat: Skrypt budowania dla platformy Windows.

  • Index.html: Główna struktura interfejsu użytkownika strony.

  • Package.json: Plik opisu pakietu i strategie kompilacji.

  • Vite.config.js: Plik konfiguracyjny Vite.

5.4. Korzystanie z frcap-ui i frcap-api na froncie

Frcap-ui dostarcza kilka kontrolek HTML opakowanych w komponenty Vue, które można zaimportować do projektu w celu użycia, zmniejszając trudność tworzenia interfejsu użytkownika i ilość kodu, zwiększając czytelność kodu. Oczywiście można również wybrać niektóre doskonałe biblioteki komponentów UI typu open source, takie jak Element plus.

Najpierw otwórz terminal w ścieżce projektu i zainstaluj frcap-ui.

1npm install frcap-ui -s

Po pomyślnej instalacji zaimportuj frcap-ui do komponentu, który go potrzebuje. Na przykładzie kontrolki przycisku.

1import { AppButton } from 'frcap-ui'

Następnie użyj go w elemencie <template> komponentu.

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

Wyświetl podgląd efektu projektu w przeglądarce.

../_images/0091.png

Wykres 5-2 Efekt AppButton

Obecnie udostępniamy 4 typowe komponenty kontrolek.

  • AppButton: Komponent przycisku.

    • buttonType: Typ przycisku, String, odpowiada różnym stylom przycisku. Domyślnie primary.

      • primary: Niebieski.

      • secondery: Szary.

      • safety: Zielony.

      • warning: Żółty.

      • serious: Czerwony.

    • buttonText: Tekst przycisku, String. Domyślnie „primary”.

  • AppInput: Komponent wejściowy.

    • Type: Wymagany, String. Domyślnie text. Określa typ pola wejściowego.

      • Number: Pole wejściowe liczby.

      • Text: Pole wejściowe tekstu.

    • inputLabel: Wymagany, String. Tekst etykiety pola wejściowego.

    • inputUnit: String. Tekst jednostki pola wejściowego.

    • hasUnit: Boolean. Domyślnie false. Wskazuje, czy potrzebny jest tekst jednostki.

    • isEmptyErr: Boolean. Czy pole wejściowe jest puste.

    • isReadonly: Boolean. Czy pole wejściowe jest tylko do odczytu.

  • AppSelect: Komponent pola wyboru.

    • selectionLabel: Wymagany, String. Tekst etykiety pola wyboru.

    • optionsData: Wymagany, Array. Dane opcji.

  • Modal: Komponent okna modalnego.

    • show: Boolean. Czy okno modalne jest wyświetlane.

    • title: String. Tytuł okna modalnego.

Aby ułatwić tworzenie niestandardowych instrukcji w FRCap, wbudowaliśmy już żądania HTTP i API w początkowy projekt FRCap pobrany za pomocą „Kreatora tworzenia”. W ten sposób zarówno niestandardowe instrukcje, jak i domyślnie dostarczone instrukcje można umieścić w pliku api.js w frcap-api. Konkretna ścieżka do api.js to „./src/api/api.js”.

Użycie frcap-api jest podobne do frcap-ui, szczegółowo poniżej:

  1. Zaimportuj api w pliku komponentu lub innym pliku, który go potrzebuje.

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

  1. Wywołaj domyślnie dostarczone instrukcje w interfejsie.

1api.getRobotStatus()

  1. Napisz logikę przetwarzania w zwróconym obietnicy (promise).

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

5.5. Programowanie niestandardowych instrukcji backendu

5.5.1. Przykład operacji na bazie danych (LA)

  1. Zaimportuj moduł bazy danych

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. Pobierz zawartość bazy danych punktów

 1 // Dopasowanie cmd
 2 case 'get_points':
 3 // Napisz instrukcję SQL, sortuj według rosnąco numerycznie + rosnąco według pierwszej litery + rosnąco według chińskiego początku, aby zwrócić dane do strony frontendowej do wyświetlenia
 4 var sql = "select * from points order by name ASC";
 5 var sql_data = sqlite.queryall(DB_POINTS, sql);
 6 // Formatowanie danych JSON
 7 for (var i = 0; i < sql_data.length; i++) {
 8     response_data[sql_data[i].name] = sql_data[i];
 9 }
10 // Zwróć dane JSON do frontendu
11 event_socket.emit('response', res, response_status, response_data);
12 break;

5.5.2. Przykład operacji na bazie danych (QX)

Informacja

Wersja QX używa plików w formacie JSON do przechowywania danych.

  1. Zaimportuj moduł bazy danych

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

  1. Przykład użycia bazy danych

 1// Wykonaj zapytanie SELECT i pobierz wszystkie wiersze
 2var rows = db.queryall('SELECT * FROM box_cfg');
 3console.log('result:', rows);
 4
 5// Wykonaj zapytanie SELECT i pobierz pojedynczy wiersz
 6var row = db.queryget('SELECT * FROM box_cfg WHERE flag=1');
 7console.log('result:', row);
 8
 9// Wykonaj instrukcję 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// Wykonaj sparametryzowane zapytanie
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// Zamknij połączenie z bazą danych
29db.close();

5.5.3. Przykład operacji komunikacji socket

  • Zaimportuj moduł komunikacji 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();

  • Wyślij instrukcję ustawiania zmiennych systemowych

 1// Dopasowanie cmd
 2case 511:
 3// Pobierz treść wysyłanych danych
 4content = data_json.content;
 5// Pobierz długość wysyłanych danych
 6len = data_json.content.length;
 7// Przygotuj dane do wysłania
 8send_content = '/f/bIII1III511III' + len + 'III' + content + 'III/b/f'
 9// socket send
10socket_cmd.send(send_content);
11// socket recv (zwróć uwagę na rozróżnienie LA/QX)
12// LA Version:
13socket_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// })
26break;