LabVIEW Webmoduler som Mobilapp: En Komplet Guide

LabVIEW (NXG) webmoduler åbner døren for at skabe skræddersyede webapplikationer i et intuitivt grafisk miljø. Den største fordel ved denne teknologi er dens platformsuafhængighed; den kan køre på enhver enhed med en moderne webbrowser – herunder din smartphone. Denne artikel dykker ned i, hvordan du kan udnytte dette til at konvertere dine LabVIEW webmoduler til native mobilapplikationer, med særligt fokus på Android, men principperne er overførbare til iOS.

Hvorfor Konvertere LabVIEW Webmoduler til Mobilapps?

Forestil dig at have adgang til dine LabVIEW-baserede kontrolsystemer eller dataanalyseværktøjer direkte fra din telefon. Ved at pakke dine webmoduler som native apps, opnår du ikke kun en mere strømlinet brugeroplevelse, men også muligheden for at interagere med enhedens hardware. Dette inkluderer adgang til kamera, GPS, sensorer, netværksforbindelser og enhedsinformation. Dette er særligt værdifuldt for applikationer, der kræver offline funktionalitet eller dyb integration med enhedens ressourcer.

Teknologien Bag: Apache Cordova

For at realisere denne konvertering vil vi benytte os af Apache Cordova. Cordova er et open-source framework, der fungerer som et abstraktionslag, hvilket fjerner behovet for at bekymre sig om de specifikke detaljer ved Android- eller iOS-udvikling. Det tilbyder en enkel grænseflade til at tilgå enhedens systemressourcer via et plugin-system. Ved at bruge Cordova kan du bygge én applikation, som derefter kan kompileres til både Android og iOS.

Installation og Opsætning

Før du kan begynde at bygge din app, skal du have det rette udviklingsmiljø sat op. En anbefalet tilgang er at følge en tutorial til installation af Apache Cordova og de nødvendige Android SDK-værktøjer. En god ressource er tutorials, der også inkluderer opsætning af en Android emulator, hvilket giver dig mulighed for at teste din app uden en fysisk enhed.

Vigtig Bemærkning om Android Studio: Den nyeste version af Android Studio (2020.3.1 og nyere) har muligvis ikke fuld understøttelse for Cordova ud af boksen. Når du konfigurerer Android Studio, anbefales det at sætte build-værktøjerne til en tidligere version, f.eks. 29.0.2 i stedet for 31. Ligeledes, hvis du bruger en emulator, bør du vælge et image med et API-niveau på 29 (Android 10.0) eller lavere, da nyere versioner muligvis endnu ikke er fuldt understøttet af Cordova.

Trin-for-Trin Guide til Oprettelse af Din App

1. Oprettelse af et Cordova-projekt

Start med at åbne en kommandoprompt (cmd) og naviger til den mappe, hvor du ønsker at gemme dit projekt. Initialiser derefter dit Cordova-projekt:

cordova create cd 

Denne mappe vil nu blive refereret til som din applikationsmappe. For at bygge din app til Android, kør følgende kommando i din applikationsmappe:

cordova build android 

Hvis du ønsker at teste din app i en emulator, brug:

cordova run --emulator 

For at teste på en fysisk Android-enhed, tilslut enheden og kør:

cordova run android 

2. Forberedelse til LabVIEW Webmoduler: HTTP Server

LabVIEW webmoduler har en særlig egenskab: De kræver, at ressourcer indlæses via HTTP, selvom de er lokale. Dette betyder, at vi ikke blot kan placere dem direkte i projektet. Løsningen er at indlejre en HTTP-server i vores applikation. Cordova-pluginet cordova-plugin-httpd er ideelt til dette formål.

Installer pluginet ved at køre:

cordova plugin add cordova-plugin-httpd 

3. Håndtering af Cleartext Trafik og InAppBrowser

For at indlejre og vise webmodulerne korrekt, skal vi bruge InAppBrowser-pluginet. Dette plugin giver os mulighed for at indlejre en webviewer direkte i vores app, ligesom når du klikker på en annonce i en app.

Installer pluginet:

cordova plugin add cordova-plugin-inappbrowser 

På Android kan du støde på en err_cleartext_not_permitted fejl, når du forsøger at indlæse sider. For at løse dette, skal du redigere filen config.xml i din applikationsmappe. Tilføj følgende ændringer:

• Tilføj xmlns:android="http://schemas.android.com/apk/res/android" til den åbnende <widget> tag.
• Inden for <platform name="android"> sektionen, tilføj følgende edit-config element:

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /> </edit-config> 

Disse ændringer tillader klartekst-trafik og sikrer, at InAppBrowser kan indlæse dine lokale webressourcer uden problemer.

4. Forberedelse af Applikationskode (index.js)

Nu skal vi forberede opstartskoden i index.js (placeret i www/js/ mappen). Denne kode vil starte HTTP-serveren og åbne InAppBrowser for at vise dine LabVIEW webmoduler.

Opdater index.js med følgende kode:

// Vent på deviceready eventet før brug af Cordova API'er document.addEventListener('deviceready', onDeviceReady, false); var httpd = null; var ref = null; function onDeviceReady() { httpd = (cordova && cordova.plugins && cordova.plugins.CorHttpd) ? cordova.plugins.CorHttpd: null; startServer("mypage"); // Serveren kører for applikationens levetid } function startServer(wwwroot) { if (httpd) { httpd.getURL(function(url) { if (url.length > 0) { // Serveren kører allerede } else { httpd.startServer({ 'www_root': wwwroot, 'port': 8080, 'localhost_only': true }, function(url) { try { ref = cordova.InAppBrowser.open('http://127.0.0.1:8080/index.html', '_blank', 'location=no'); ref.addEventListener('loadstop', loadStopCallBack); ref.addEventListener('message', messageCallBack); } catch (err) { alert(err.message); } }, function(error) { alert("Kunne ikke starte server: " + error); }); } }); } else { alert('CorHttpd plugin er ikke tilgængeligt/klar.'); } } function loadStopCallBack(params) { // Initialiserer Cordova biblioteket i vores LabVIEW webapplikation ref.executeScript({ code: ""}); } function messageCallBack(params) { try { // Eksekver koden sendt fra LabVIEW-applikationen eval(params.data.to_execute_code); } catch (error) { alert(error); } } 

Denne kode sikrer, at HTTP-serveren starter, og at din LabVIEW webmodul-side indlæses i InAppBrowser. Bemærk tilføjelsen af event listeners for loadstop og message, som er essentielle for kommunikationen mellem Cordova-applikationen og din LabVIEW-kode.

5. Indlejring af Dine LabVIEW Webmoduler

Når din LabVIEW-applikation er bygget, skal output-filerne (HTML, CSS, JavaScript) kopieres til den angivne server-rodmappe i dit Cordova-projekt. I eksemplet ovenfor er dette www/mypage/.

Efter at have kopieret filerne, skal du genopbygge Cordova-projektet:

cordova build 

Og derefter køre det igen på din enhed eller emulator:

cordova run android 

6. Interaktion med Enhedens Ressourcer

Nu hvor dine LabVIEW webmoduler kører som en app, kan vi begynde at tilgå enhedens ressourcer. Cordova-plugin API-siden er din primære ressource til at finde understøttede funktioner. Der findes også tredjepartsplugins til specifikke behov.

Kommunikation mellem App og Webmodul

For at muliggøre kommunikation mellem din Cordova-app og LabVIEW webmodulet, bruger vi postMessage og executeScript.

• Fra LabVIEW Webmodul til Cordova App: Brug window.postMessage() til at sende beskeder (f.eks. JavaScript-kode) til din hovedapplikation.
• Fra Cordova App til LabVIEW Webmodul: Brug ref.executeScript() til at eksekvere JavaScript-kode inden for InAppBrowser-konteksten, hvilket giver dig mulighed for at opdatere data eller udløse funktioner i din LabVIEW-kode.

For at facilitere dette, kan du tilføje en lille JavaScript-funktion til din index.js, der gør det nemmere at sende kommandoer:

// Tilføj denne funktion til index.js function sendCommand(command) { if (ref) { ref.executeScript({ code: "eval(" + JSON.stringify(command) + ")" }); } } 

Du skal også tilføje en funktion i din LabVIEW webmodul-kode, der bruger window.parent.postMessage til at sende data tilbage til Cordova-appen. For eksempel:

// I din LabVIEW webmodul JavaScript function sendDataToApp(data) { window.parent.postMessage({ "to_execute_code": "handleDataFromLabVIEW(" + JSON.stringify(data) + ")" }, "*"); } // I din Cordova index.js, tilføj en handler for disse beskeder function handleDataFromLabVIEW(data) { console.log("Modtaget data fra LabVIEW: ", data); // Opdater UI eller udfør handlinger baseret på data } 

Batteri-indikator Eksempel

Lad os se på et konkret eksempel: at vise batteristatus.

Først, installer batteri-pluginet:

cordova plugin add cordova-plugin-battery-status 

I din index.js, tilføj en event listener for batteristatus:

// Tilføj dette til din onDeviceReady funktion: window.addEventListener('batterystatus', onBatteryStatus, false); function onBatteryStatus(status) { // Send batteriniveauet til LabVIEW webmodulet try { ref.executeScript({ code: "var BatteryValue = " + status.level + "; updateBatteryUI(BatteryValue);" }); } catch (e) { console.error("Fejl ved afsendelse af batteristatus: " + e); } } 

I din LabVIEW webmodul-kode, opret en funktion til at modtage og vise batteriniveauet:

// I din LabVIEW webmodul JavaScript function updateBatteryUI(level) { document.getElementById('batteryLevel').innerText = "Batteri: " + level + "%"; } // Sørg for at have et element med id="batteryLevel" i din HTML 

Ved at følge disse trin kan du effektivt transformere dine LabVIEW webmoduler til funktionsdygtige mobilapplikationer, der kan interagere med enhedens hardware og give en rigere brugeroplevelse.

Ofte Stillede Spørgsmål (FAQ)

Q: Kan jeg bruge denne metode til både Android og iOS?
A: Ja, Apache Cordova er designet til cross-platform udvikling. Mens dette dokument fokuserer på Android, kan de samme principper anvendes til iOS med mindre justeringer i build-processen og specifikke iOS-konfigurationer.

Q: Hvad hvis min LabVIEW webmodul bruger komplekse JavaScript-biblioteker?
A: Så længe disse biblioteker er kompatible med den miljø, som InAppBrowser leverer, bør de fungere. Du skal muligvis håndtere korrekt indlæsning af disse ressourcer.

Q: Er der begrænsninger i forhold til offline-funktionalitet?
A: Mens webmodulerne kan køre offline via den indlejrede HTTP-server, afhænger adgangen til specifikke enhedssensorer eller netværksfunktioner af Cordova-plugins og deres offline-kapabiliteter.

Q: Hvordan håndterer jeg opdateringer af min LabVIEW webmodul?
A: Du skal genopbygge Cordova-applikationen med de opdaterede webmodul-filer og distribuere den opdaterede version af appen.

Q: Kan jeg bruge native UI-elementer fra Android/iOS sammen med LabVIEW webmodulet?
A: Ja, ved at bruge executeScript og postMessage kan du udløse native handlinger eller opdatere native UI-komponenter baseret på interaktioner i din LabVIEW webmodul.

Hvis du vil læse andre artikler, der ligner LabVIEW Webmoduler som Mobilapp, kan du besøge kategorien Mobil.