LabVIEW na mobilu: API přes JavaScript a Cordova

V dnešní době, kdy se mobilní zařízení stala nedílnou součástí našeho každodenního života, roste poptávka po aplikacích, které jsou nejen flexibilní, ale také schopné využívat plný potenciál hardwaru chytrých telefonů a tabletů. Webové moduly LabVIEW (NXG) představují revoluční přístup k tvorbě webových aplikací pomocí grafického programovacího prostředí. Jejich největší výhodou je, že mohou běžet v jakémkoli moderním webovém prohlížeči, což zahrnuje i ty v našich mobilních telefonech. Zařízení se systémy Android a iOS umožňují vytvářet aplikace založené na technologii WebView, což jsou v podstatě nativní aplikace, které renderují webový obsah (HTML, CSS, JavaScript), ale zároveň mají přístup k systémovým zdrojům, jako jsou média, senzory, síťové připojení nebo informace o telefonu. To je skvělá zpráva pro vývojáře, kteří potřebují přístup k těmto zdrojům a/nebo musí zajistit funkčnost svých aplikací offline. Tento článek se primárně zaměřuje na Android, jelikož nemáme přístup k Macu pro kompilaci pro iOS, nicméně většina popsaných principů je přenositelná i na platformu iOS, lišit se bude pouze cílová kompilace.

Proč LabVIEW na mobilu?

Kombinace LabVIEW webových modulů s mobilními aplikacemi přináší řadu významných výhod. Především se jedná o neuvěřitelnou přenositelnost – vaše aplikace, dříve vázaná na desktopové prostředí, nyní může fungovat kdekoli, kde je k dispozici moderní webový prohlížeč. To otevírá dveře k novým možnostem využití, jako je vzdálené monitorování, sběr dat v terénu nebo interaktivní řízení systémů přímo z vašeho telefonu. Klíčovou výhodou je také možnost přístupu k systémovým zdrojům mobilního zařízení. Zatímco standardní webové aplikace jsou omezeny bezpečnostními pravidly prohlížeče, aplikace založené na WebView, které budeme vytvářet, mohou komunikovat s GPS, kamerou, mikrofonem, akcelerometrem a mnoha dalšími senzory. Dalším podstatným faktorem je schopnost pracovat offline. Pro mnoho průmyslových aplikací nebo sběr dat v odlehlých oblastech je klíčové, aby aplikace fungovala i bez aktivního internetového připojení. Tato kombinace umožňuje LabVIEW aplikacím splnit i tyto náročné požadavky. Standardní webové moduly LabVIEW však mají jeden záludný požadavek: i lokální zdroje musí být načítány přes HTTP. To znamená, že je nemůžeme jednoduše vložit do našeho projektu jako soubory a očekávat, že budou fungovat. K překonání tohoto omezení budeme muset do naší aplikace vložit malý HTTP server.

Volba Platformy: Apache Cordova

Existuje několik prostředí pro vytváření vlastních mobilních aplikací, ale pro naše účely se zaměříme na platformu Apache Cordova. Jedná se o úžasnou platformu, která přidává vrstvu abstrakce, takže se nemusíte starat o cílový systém (Android nebo iOS), a navíc má jednoduché rozhraní pro přístup k systémovým zdrojům. Cordova je v podstatě nástroj, který vám umožní psát webové aplikace (HTML, CSS, JavaScript) a poté je kompilovat do nativních mobilních aplikací. To je ideální pro LabVIEW webové moduly, protože ty jsou již založeny na webových technologiích. Cordova poskytuje standardizované API pro přístup k mnoha nativním funkcím zařízení, což zjednodušuje vývoj a zajišťuje, že vaše aplikace bude fungovat konzistentně napříč různými platformami. Díky tomu je Apache Cordova ideálním nástrojem pro propojení světa LabVIEW s mobilními zařízeními.

Příprava Vývojového Prostředí

Než se pustíme do samotného kódu, je nezbytné správně nastavit vaše vývojové prostředí. Pro vytváření Android aplikací s Cordovou budete potřebovat Java Development Kit (JDK), Android SDK a samozřejmě samotný nástroj Cordova. Doporučujeme sledovat podrobný instalační návod, například ten od Toma Spencera, který vám pomůže nainstalovat Apache Cordova a všechny potřebné zdroje. Přidanou výhodou tohoto tutoriálu je, že získáte přístup k plně funkčnímu Android emulátoru, což je klíčové pro testování. Je však důležité si uvědomit několik poznámek týkajících se verzí:

• Nejnovější verze Android Studia (např. 2020.3.1) nemusí podporovat Cordovu „out of the box“. Při konfiguraci Android Studia prosím nastavte nástroje pro sestavení (Build tools) na starší verzi. Verze 29.0.2 se ukázala být velmi úspěšná namísto verze 31.
• Pokud používáte emulátor, použijte prosím obraz (image) s úrovní API 29 / Android 10.0 nebo nižší. Vyšší verze zatím nejsou Cordovou plně podporovány pro emulátorovou komunikaci. To neznamená, že aplikace nebude fungovat na vašem nejnovějším zařízení; týká se to pouze způsobu, jakým emulátor komunikuje s vnějším světem.

Po instalaci se ujistěte, že máte přístup k příkazovému řádku (CMD na Windows, Terminal na Mac/Linux) a že jsou všechny cesty k nástrojům správně nastaveny v proměnných prostředí.

Zahájení Projektu Cordova

Jakmile je vaše vývojové prostředí připraveno, můžeme se pustit do vytvoření nového projektu Cordova. Otevřete příkazový řádek (stačí do vyhledávacího pole ve Windows napsat „cmd“) a přejděte do adresáře, kde chcete projekt uložit (pomocí příkazu „cd“). Následně inicializujte svůj projekt Cordova pomocí následujících příkazů:

cordova create <Název_Aplikace> cd <Název_Aplikace> 

Tato lokace bude dále v textu označována jako aplikační adresář. Po vytvoření projektu můžete aplikaci sestavit. Chcete-li sestavit aplikaci pro Android, spusťte v aplikačním adresáři následující příkaz:

cordova build android 

Pro otestování sestavené aplikace v emulátoru použijte:

cordova run --emulator 

A pro testování přímo na vašem Android zařízení (ujistěte se, že máte povolené ladění USB a je připojeno k počítači):

cordova run android 

Tyto příkazy vám umožní rychle iterovat a testovat vaši aplikaci během vývoje.

Integrace LabVIEW Web Modulu

Jak již bylo zmíněno, webové moduly LabVIEW mají specifický požadavek: jejich zdroje musí být načítány přes HTTP, i když jsou lokální. To nám brání v tom, abychom je jednoduše vložili do projektu jako soubory a očekávali, že budou fungovat. K nápravě tohoto problému musíme do naší aplikace vložit HTTP server. Skvělým nástrojem pro tento účel je httpd plugin pro Cordova. Instaluje se jednoduše z aplikačního adresáře:

cordova plugin add cordova-plugin-httpd 

Bohužel, přímé vložení stránek ze serveru do souboru index.html Cordova není přímo podporováno na Androidu (což je v běžných prohlížečích možné, takže se zdá, že je to záměrně zakázáno). K obejití tohoto omezení můžeme využít systémový zdroj zvaný InAppBrowser. Ten nám umožňuje vložit webové zobrazení (webview) přes naši aplikaci. S tímto zdrojem jste se již setkali, například když kliknete na reklamu v aplikaci YouTube. Nainstalujte jej do aplikačního adresáře:

cordova plugin add cordova-plugin-inappbrowser 

Ani tento plugin však nebude fungovat hned po vybalení na Androidu. Pokud bychom se pokusili načíst stránku, objevila by se chyba „err_cleartext_not_permitted“. K nápravě musíte upravit soubor config.xml ve vašem aplikačním adresáři. Přidejte následující změny:

Před:

<?xml version='1.0' encoding='utf-8'?> <widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/2000/08/xmldsig#" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>HelloCordova</name> <description> A sample Apache Cordova application that responds to the deviceready event. </description> <author email="[email protected]" href="http://cordova.io"> Apache Cordova Team </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget> 

Po úpravě:

<?xml version='1.0' encoding='utf-8'?> <widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/2000/08/xmldsig#" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>LabVIEWonYourPhone</name> <description> Simple LabVIEW application for a mobile device. Tested on Android. </description> <author email="[email protected]" href="https://www.linkedin.com/in/natan-biesmans-2875ab101/"> Natan Biesmans </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /> </edit-config> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget> 

Stručně řečeno, je potřeba udělat dvě změny:

1. Do úvodní značky <widget> přidejte atribut xmlns:android="http://schemas.android.com/apk/res/android".
2. Do značky <platform name="android"> přidejte následující blok kódu:

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

Tato úprava povolí v Androidu komunikaci přes nešifrovaný HTTP provoz, což je nezbytné pro náš lokální server.

Kód pro Spuštění Web Modulu

Nyní, když projekt umožňuje vkládat a zobrazovat webové moduly, musíme vytvořit spouštěcí kód, abychom zajistili, že vše funguje, jak má. Uděláme to v souboru index.js, který najdete v <aplikační adresář>/www/js/index.js. Při spuštění budeme muset spustit server. Server je nakonfigurován tak, aby běžel pouze na localhostu, aby nikdo kolem vás neměl přístup k vašemu zařízení. Také serveru řekneme, aby použil určitý adresář uvnitř složky www pro obsluhu souborů našeho webového modulu LabVIEW. Jakmile se server spustí, budeme muset otevřít InAppBrowser a načíst naši stránku webového modulu LabVIEW.

Zde je příklad upraveného souboru index.js:

// Wait for the deviceready event before using any of Cordova's device APIs. // See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready 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") // no need to stop as the server runs for the lifetime of the program. } function startServer( wwwroot ) { if ( httpd ) { // before start, check whether its up or not httpd.getURL(function(url){ if(url.length > 0) { //server already loaded } else { /* wwwroot is the root dir of web server, it can be absolute or relative path * if a relative path is given, it will be relative to cordova assets/www/ in APK. * "", by default, it will point to cordova assets/www/, it's good to use 'htdocs' for 'www/htdocs' * if a absolute path is given, it will access file system. * "/", set the root dir as the www root, it maybe a security issue, but very powerful to browse all dir */ httpd.startServer({ 'www_root': wwwroot, 'port': 8080, 'localhost_only': true }, function( url ){ // if server is up, it will return the url of http://<server ip>:port/ // the ip is the active network connection // if no wifi or no cell, "127.0.0.1" will be returned. try{ ref = cordova.InAppBrowser.open('http://127.0.0.1:8080/index.html', '_blank', 'location=no'); ref.addEventListener('message', messageCallBack); // when get a message ref.addEventListener('loadstop', loadStopCallBack);// on inappbrowser ready } catch(err){ alert(err.message); } }, function( error ){ alert("failed to start server: " + error); }); } }); } else { alert('CorHttpd plugin not available/ready.'); } } function loadStopCallBack(params){ ref.executeScript({ code: ""}); //initializes the cordova library in our LabVIEW web application. We cant do post messages until this has been executed } function messageCallBack(params){ try{ eval(params.data.to_execute_code); // Execute the string send from the LabVIEW application as code } catch(error){ alert(error); } } 

Tento kód zajišťuje, že se po spuštění aplikace spustí lokální HTTP server a následně se v InAppBrowseru načte váš LabVIEW webový modul. Důležité jsou také přidané posluchače událostí: message a loadstop, které připravují půdu pro obousměrnou komunikaci mezi hlavní aplikací Cordova a webovým modulem LabVIEW.

Nasazení LabVIEW Web Modulů

Vložení vašeho webového modulu je stejné jako běžné nasazení na server. Nejprve sestavte vaši LabVIEW aplikaci (webový modul). Zkopírujte výstupní soubory (HTML, JavaScript, CSS, atd.) do lokace serveru ve vašem projektu Cordova. V našem příkladu to bude adresář <aplikační adresář>/www/mypage/. Ujistěte se, že hlavní stránka vašeho LabVIEW modulu je pojmenována index.html, aby ji server správně načetl.

Nyní zbývá už jen sestavit projekt Cordova a spustit ho. Z příkazového řádku v aplikačním adresáři použijte:

cordova build 

A poté pro spuštění:

cordova run --emulator 

nebo

cordova run android 

Příkazový řádek vám po úspěšném sestavení a spuštění ukáže cestu k souboru .apk, pokud jej budete chtít sdílet nebo instalovat ručně na jiná zařízení. Tímto je vaše LabVIEW webová aplikace plně funkční jako nativní mobilní aplikace.

Přístup k Systémovým Zdrojům

Nyní, když jste schopni spouštět webové moduly LabVIEW jako mobilní aplikace, můžeme se podívat na přístup k systémovým zdrojům zařízení. Na stránce Cordova plugin API (v dolní části levé záložky) můžete vyhledat zdroje, které jsou nativně podporovány. Existují také pluginy třetích stran, které můžete použít. Pro získání přístupu k těmto zdrojům musíme nastavit flexibilní komunikační kanál do a z InAppBrowseru. Naštěstí jsme to již částečně pokryli.

Můžeme posílat zprávy do základní aplikace pomocí protokolu postmessage. Na to můžeme v naší základní aplikaci přidat posluchače událostí do InAppBrowseru. Komunikaci ze základní aplikace do webové aplikace LabVIEW můžeme pokrýt pomocí funkce executeScriptInAppBrowseru. K usnadnění toho budeme muset provést některé úpravy stávajícího souboru index.js v <aplikační adresář>/www/js/index.js. Tyto úpravy jsou již zahrnuty v kódu, který jsme uvedli v sekci „Kód pro Spuštění Web Modulu“, konkrétně řádky s ref.addEventListener('message', messageCallBack); a ref.addEventListener('loadstop', loadStopCallBack);, a také definice funkcí loadStopCallBack a messageCallBack.

Funkce loadStopCallBack je volána, jakmile se stránka v InAppBrowseru plně načte. V ní voláme ref.executeScript({ code: ""});. Ačkoli se to může zdát jako prázdný příkaz, je to klíčové. Inicializuje to knihovnu Cordova v naší webové aplikaci LabVIEW, což je nezbytné pro správnou funkci postmessage komunikace.

Funkce messageCallBack je volána vždy, když webový modul LabVIEW odešle zprávu pomocí postmessage. V této funkci se používá JavaScriptová funkce eval(params.data.to_execute_code). To nám umožňuje vykonat řetězec zaslaný z aplikace LabVIEW jako JavaScriptový kód přímo v kontextu základní aplikace Cordova. Díky této úpravě můžeme z našeho LabVIEW webového modulu spouštět kód v základní aplikaci. Odtud můžeme spouštět kód, který požaduje informace o senzorech, a odesílat je zpět do webové aplikace LabVIEW pomocí funkce executeScriptInAppBrowseru.

Kód, který se má odeslat, závisí na konkrétním pluginu a způsobu, jakým k němu chcete přistupovat. Základní myšlenka však zůstává stejná: vytvořte řetězec JavaScriptového kódu, odešlete jej jako postmessage, a pak tento řetězec JavaScriptového kódu proveďte (odešlete kód k provedení ve webovém modulu LabVIEW, pokud je funkce executeScript přidána do řetězce JavaScriptového kódu). Abychom mohli odeslat postmessage, budeme muset v našem projektu LabVIEW vytvořit malou JavaScriptovou knihovnu. Do této knihovny přidáme globální JavaScriptovou funkci eval, která nám umožňuje provádět řetězce jako JavaScriptový kód. Tato funkce má řetězec jako vstup a JavaScriptovou referenci jako výstup. Nyní, pro odeslání kódu, můžeme vytvořit malou funkci „SendCommand.gvi“ v LabVIEW, která nám umožní posílat řetězce do základní aplikace k provedení. Tato funkce zabalí řetězec, který chceme odeslat, do objektu JSON a poté jej odešle v postmessage do základní aplikace.

A to je vše. Nyní můžeme přistupovat k API prostřednictvím naší webové aplikace LabVIEW pomocí výše uvedené funkce. K vyžádání dat jednoduše odešleme JavaScriptový kód pro přístup k prostředku definovanému na stránce nápovědy tohoto prostředku a v případě potřeby metodu executeScript k odeslání dat zpět do aplikace LabVIEW.

Příklad: Indikátor Baterie

Jako praktický příklad si ukážeme, jak získat informace o stavu baterie mobilního zařízení. Nejprve se ujistěte, že je přidán plugin pro baterii:

cordova plugin add cordova-plugin-battery-status 

Poté se musíme přihlásit k posluchači událostí baterie. V naší JavaScriptové knihovně v LabVIEW bychom mohli nastavit posluchače, který zavolá funkci, například onBatteryStatus, pokaždé, když dojde k události související s baterií (např. změna úrovně nabití nebo stavu nabíjení).

Když k tomu dojde, použijeme funkci executeScript k provedení následujícího kódu ve webovém modulu LabVIEW:

var BatteryValue = status.level; 

Tím se v naší webové aplikaci LabVIEW vytvoří proměnná „BatteryValue“ a do ní se vloží úroveň nabití baterie. Tato hodnota bude aktualizována s každou událostí. Nyní už jen zbývá ji přečíst v naší webové aplikaci LabVIEW. Funkce pro řetězec, kterou zmíníme, je malý doplněk, který můžeme vytvořit v naší JavaScriptové knihovně vedle funkce eval. Přečte JavaScriptovou referenci a převede ji na řetězec. Tímto způsobem se data z nativního API dostanou přímo do vašeho LabVIEW programu, což demonstruje flexibilitu řešení.

Často Kladené Otázky

Jaký je hlavní přínos tohoto přístupu?
Hlavním přínosem je možnost vytvářet mobilní aplikace s bohatým uživatelským rozhraním a přístupem k systémovým zdrojům zařízení, a to vše s využitím známého grafického programovacího prostředí LabVIEW. Umožňuje to vývojářům LabVIEW rozšířit své aplikace na mobilní platformy bez nutnosti učit se složité nativní programování pro Android nebo iOS.

Potřebuji Mac pro vývoj iOS aplikací?
Ano, pro kompilaci a podepisování iOS aplikací je obvykle vyžadován Mac s Xcode. I když většina kódu (HTML, CSS, JavaScript) je platformově nezávislá a funguje stejně na Androidu i iOS, finální sestavení a nasazení pro iOS vyžaduje specifické nástroje dostupné pouze na Macu. Nicméně, pokud máte přístup k Macu, kroky pro integraci LabVIEW web modulu a komunikaci s API jsou velmi podobné.

Mohu použít jiné Cordova pluginy?
Naprosto! Apache Cordova má rozsáhlou knihovnu pluginů, které umožňují přístup k široké škále systémových funkcí, jako je GPS, kamera, akcelerometr, kontakty, souborový systém a mnoho dalších. Jakmile nastavíte základní komunikační kanál mezi LabVIEW web modulem a základní aplikací Cordova (pomocí postmessage a executeScript), můžete integrovat téměř jakýkoli Cordova plugin. Stačí se podívat do dokumentace pluginu, jak se k němu přistupuje pomocí JavaScriptu, a poté tuto logiku implementovat ve vaší LabVIEW aplikaci pro odesílání příkazů a příjem dat.

Jak zajistím bezpečnost dat?
Bezpečnost dat je klíčová. Ačkoli pro lokální HTTP server v aplikaci povolujeme „cleartext traffic“, to se týká pouze komunikace uvnitř zařízení. Pro jakoukoli komunikaci s externími servery byste měli vždy používat šifrované připojení (HTTPS). Dále byste měli pečlivě zvážit, jaké systémové zdroje vaše aplikace potřebuje a k jakým datům má přístup. Minimalizujte oprávnění aplikace jen na ty nezbytné. Pro citlivá data je vhodné používat šifrování i na úrovni aplikace, pokud jsou ukládána lokálně.

Co dělat, když se objeví chyba "err_cleartext_not_permitted"?
Tato chyba se objevuje na novějších verzích Androidu, které z bezpečnostních důvodů ve výchozím nastavení blokují nešifrovaný HTTP provoz. Řešení je popsáno v sekci „Integrace LabVIEW Web Modulu“ a spočívá v úpravě souboru config.xml a přidání atributu android:usesCleartextTraffic="true" do konfigurace aplikace. Tím explicitně povolíte nešifrovaný provoz pro vaši aplikaci.

Závěr

Spojení grafického programování LabVIEW s flexibilitou Apache Cordova a přístupem k nativním API mobilních zařízení otevírá zcela nové možnosti pro inženýry a výzkumníky. Tento článek podrobně popsal, jak nastavit vývojové prostředí, vytvořit projekt Cordova, integrovat webové moduly LabVIEW a následně komunikovat se systémovými zdroji, jako je baterie, pomocí JavaScriptu. Ačkoli se proces může zdát na první pohled složitý, po pochopení klíčových principů lokálního HTTP serveru, InAppBrowseru a obousměrné komunikace pomocí postmessage a executeScript se stává velmi mocným nástrojem. Vytvoření robustních a interaktivních mobilních aplikací pro LabVIEW je nyní na dosah. Nebojte se experimentovat s různými Cordova pluginy a objevovat plný potenciál, který tato kombinace nabízí pro vaše projekty.

Chceš-li si přečíst další články podobné jako LabVIEW na mobilu: API přes JavaScript a Cordova, navštiv kategorii iPhone.