VisualNeo Web: cross-platform appok fejlesztése, játszi könnyedséggel

Fejlesztés rovatunkban nemrég szerepelt egy multimédiás fejlesztőrendszer, amellyel Windowsra készíthet bárki – akár programkódok írása nélkül is – profi alkalmazásokat. Dacára annak, hogy adott esetben egy sornyi kódot sem kell fejből leírnunk, meglepően összetett programok hozhatók létre az egykori NeoBook utódjával, a VisualNeo Win fejlesztőrendszerrel. Már az említett szoftver tesztjében is megígértük, hogy hamarosan jelentkezünk annak testvérével is, amely a VisualNeo Web nevet kapta, s ennek megfelelően elsősorban webes alkalmazások fejlesztésére használható. De mivel manapság egy HTML5 + JS alapú produktumból meglepően könnyen születhetnek cross-platform appok, így ezt a fejlesztőrendszert úgy alakították ki, hogy ne csak egyszerű multimédia weboldalakat vagy webes (PWA) alkalmazásokat lehessen vele összerakni, hanem akár iOS vagy Android appokat, illetve Windowsra, macOS-re, Linuxra optimalizált programokat is. A VisualNeo Web segítségével gyerekjáték a cross-platform appok fejlesztése. Ugyanolyan egyszerűen használhatói, mint a Win változat, jóval többre képes annál.

VisualNeo Web: cross-platform appok fejlesztése, játszi könnyedséggel

A VIsualNeo Web megjelenésében és működésében egyaránt emlékeztet a Win változatra. Itt is lényegi jellemző, hogy a leendő alkalmazások felületét egyszerű fogd és dobd módszerrel rakhatjuk össze, s ha nem akarunk, akár egy sornyi programkódot sem kell leírnunk, mert minden lényeges utasítást, parancsot odahajíthatunk a kódszerkesztőbe a kategóriákra bontott listából, s azok paramétereit is megadhatjuk a saját Properties ablakukban kattintgatva. Ennek ellenére a VisualNeo Web abszolút professzionális fejlesztőrendszer. Temérdek utasítást használhatunk vele alapból, s tudása plug-inekkel tovább bővíthető. Bár ez utóbbira kezdetben aligha lesz szükség, ugyanis eleve egy halom plug-int találunk benne, előre integrálva. Emellett, bár nem elvárás, hogy manuálisan használjuk a program saját NeoScript nyelvét, de ha már elsajátítottuk, gyorsabb lehet beírni, mint az Actions listából beválogatni. A haladó fejlesztők ráadásul vegyíthetik is a NeoScript utasításokat a webfejlesztésben népszerű JavaScript elemekkel. Szóval gyorsan és egyszerűen lehet haladni mind a felületek megtervezésével, mind a funkciók kódolásával. Nem kell különösebb programozói tudás a használatához, ha viszont az is van, akkor szinte végtelenek a lehetőségeink.

Átlátható felület és temérdek funkció

A VisualNeo Web felülete ugyan nagyon hasonlít a VisualNeo Win felépítésére, de azért akadnak közöttük lényegi eltérések. Az egyik ilyen a felhasználható elemek eszköztára, ahol a szokásos gombok, képobjektumok, csúszkák, jelölő elemek mellett kifejezetten a webes felületekre optimalizált objektumok is találhatók: iFrame, Form, Container, Form Submit Button, Headline, Paragraph stb.

Ezen kívül a programok felületénél nem csak a megszokott fekvő képarányú méreteket állíthatjuk be, hanem adott esetben optimalizálhatjuk a készülő app felületét álló képernyővel ellátott eszközökre (okostelefonok) is, illetve van lehetőség arra is, hogy a képernyő méretéhez igazítsuk a felület és az objektumok méretét, vagy akár reszponzív módon rendezzük el az elemeket. Így az elkészülő alkalmazások szinte bármilyen eszköz kijelzőjéhez képesek hozzáigazítani a megjelenésüket, illetve a böngészők változó mérete és képaránya sem dönti romokba, vagy méretezi átláthatatlanná a felületüket. Mindezt az App properties ablakban állíthatjuk be, ahol amúgy még számtalan, akár eszköz-specifikus konfigurációt elvégezhetünk.

Fontos különbség az is, hogy itt az elemek jellemzőit nem önálló ablakban, hanem a jobb oldali Properties és Style oldalsávok segítségével adhatjuk meg. Ezek gyakorlatilag a webfejlesztő alkalmazásokban megszokott jellemzőket tartalmazzák, vagyis mindent testreszabhatunk, amit amúgy egy adott elem esetében a HTML5 és CSS kódokban is megtehetnénk.

A kódoláshoz itt bekapcsolhatunk osztott képernyőt is, így bal oldalon mindig látjuk a munkafelületet, jobb oldalon pedig a kódszerkesztőt. Egy kattintás a kívánt elemre, s máris írhatjuk – vagy éppen bedobálhatjuk az Actions listából – a hozzá tartozó programkódot.

S ha már itt tartunk, rögtön elértünk egy nagyon lényeges különbséghez: a VisualNeo Web utasításkészletében erősen vegyítődnek az asztali rendszereket érintő és a webes, szerver oldal kihasználására szolgáló parancsok. Rengeteg van, gyakorlatilag a multimédiától (hangok, videók stb. lejátszása), a JSON fájlok menedzselésén át és a MySQL adatbázisok kezelésén át, a térképek és webkamerák használatáig mindenre találunk megoldást. Természetesen itt is megvannak a megszokott if, while, loop stb. utasítások, vannak vektoros rajz funkciók, dolgozhatunk űrlapokkal is. De az ilyen száraz dolgokon túl akadnak izgalmasabb lehetőségek is: importálhatunk – és animálhatunk, forgathatunk stb. – 3D objektumokat, van kvíz modul (nem olyan összetett, mint mondjuk az Adobe Captivate-ben, de akkor is praktikus), integrálhatunk az alkalmazásunkba PayPal fizetési lehetőséget, de még MusicVisualizer modult is találunk a gyűjteményben. De készíthetünk vele fogd és dobd módszerre alapuló puzzle játékokat, rajzprogramot, virtuális túra appot stb (emitt néhány példa alkalmazás). is. Ezekhez is kapunk beépített funkciót. Képtelenség lenne itt mindent felsorolni, de tényleg számos remek JS modul áll a rendelkezésünkre, hogy kihasználjuk őket a készülő alkalmazásunkban.

Bár gyakorlatilag bármilyen weben elterjedt képfájlt beemelhetünk a felületre, a VisualNeo Web tartalmaz egy halom SVG ikont is, amelyeket használhatunk magukban (SVG Icon objektum), vagy mondjuk gombokon. Így az alapvető ikonok összeszedésével nem lesz különösebb feladatunk, hacsak nem akarunk valami nagyon egyedit alkotni.

Kiemelt szerep jut a felületek tervezésekor a Container elemnek, ehhez ugyanis számtalan funkciót tudunk hozzárendelni: használhatjuk automatikus slideshow-k alapjául, videolejátszóként, szövegek animálására, vagy például a kvíz modul megjelenítésére is.

Ellentétben a megszokott HTML5 animációs alkalmazásokkal, a VisualNeo Web nem rendelkezik idősávval, így a pontos időzítéseket másként, például a Timer modul segítségével tudjuk megoldani, de még ennél is egyszerűbb, ha a kódban iktatunk be néhány Delay utasítást. Szóval nem gond az időzített megjelenítés vagy akció itt sem, csak nem tudunk idővonalon pozícionálni. Egyébként az elemek animálására, mozgatására is van megoldás.

A kényelmes idővonal hiányáért cserébe viszont kapunk egy halom olyan eszközt, amelyek a konkurensekből hiányoznak. Ilyen Language Editor, amellyel több nyelvre is lefordíthatjuk a felületet, a Plugin Generator, amellyel saját kiegészítőket hozhatunk létre, a neoPHP Server, amely jól jön a gyors és egyszerű lokális teszteléshez, vagy éppen az SQLite Database Browser, amely egy praktikus kis adatbázis-kezelő.

Tulajdonképpen minden eszközt megkapunk, hogy kényelmesen és gyorsan fejleszthessünk HTML5 és JS alapú alkalmazásokat, gyakorlatilag bármilyen témakörben: készíthetünk multimédiás bemutatókat, adatbázis-kezelő programokat, üzleti alkalmazásokat. Ja, és természetesen komplett weboldalakat is gond nélkül összerakhatunk ezzel a programmal. Csak a fantáziánk szab határt annak, mit alakítunk ki a lehetőségekből. Diákoknak, tanároknak, marketingeseknek éppúgy remek eszköz interaktív bemutatók készítéséhez, mint időszűkében lévő programozóknak, akik gyorsan és egyszerűen szeretnének megoldani valamilyen feladatot. A cross-platform appok fejlesztése ennél egyszerűbb már nem is lehetne.

Így lesz alkalmazás egy HTML5 oldalból

Ha már összeállítottuk leendő alkalmazásunkat, multimédiás bemutatónkat, több lehetőségünk is van annak publikálására. Ha weboldalként szeretnénk közzétenni, akkor egyszerűen exportáljuk HTML5 formátumban, mindenestül. Ilyenkor van lehetőségünk a HTML kód tömörítésére (Minify) is, illetve ha nem egyszerű oldalt, hanem Webes alkalmazása (PWA) szeretnénk létrehozni, akkor a Platform Options linkre kattintva beállíthatjuk annak jellemzőit is, plusz jól jön majd hozzá a PWA Builder oldal is. Ha kifejezetten Chrome alkalmazás létrehozásán törjük a fejünket, akkor arra külön opciót tudunk választani, ahogy arra is, hogy windowsos EXE programként kerüljön exportálásra az anyag. Végül ott a lehetőség a mobil alkalmazás készítésére, amely iOS és Android alatt egyaránt használható lesz. Itt és a maces, linuxos változatok exportálásánál viszont van még némi tennivalónk az export után.

Ha a kész alkalmazást windowsos EXE-ként hasznosítanánk, a legegyszerűbb, ha a rögtön így exportáljuk a VisualNeo Web felületéről. Ha viszont macOS-re és Linuxra készítenénk alkalmazást, akkor le kell töltenünk például az NW.js segédletet, amellyel némi ügyeskedés után az exportált HTML5 + JS anyagból elkészül a natívan futtatható maces vagy linuxos program. Ez nem jelent többlet költséget, csak némi extra időt, amíg összerakjuk.

Ha mobil alkalmazást készítünk, akkor a VisualNeo Web szintén egy HTML5 alapú csomagot rak össze nekünk, egyetlen ZIP fájlba. Ezzel több dolgot is tehetünk. Az egyik megoldás, hogy regisztrálunk egy VoltBuilder fiókot, előfizetünk a szolgáltatásra és oda feltöltve az exportált ZIP fájlt, pár percnyi várakozásért cserébe már tölthetjük is le az iOS és Android appokat, adott esetben akár az alkalmazásboltokba feltehető verzióban. A VoltBuilder ingyen is használható, de akkor csak androidos appokat kapunk és kizárólag debug változatban, ami tökéletes a teszteléshez, viszont nem alkalmas a store-okba való feltöltésre.

Alternatívaként bevethetjük az Apache Cordova szolgáltatást is, amely szintén – többek között – arra hivatott, hogy HTML forrásokból is megoldható legyen a cross-platform appok fejlesztése. Ugyan kevésbé kényelmes, viszont költséghatékonyan képes átalakítani a HTML5 forrást iOS vagy Android alkalmazássá.

Összegzésül: appok fejlesztése több platformra, egyszerűen

Mindent egybevetve a VisualNeo Web egyszerre összetett és egyszerű. Dacára annak, milyen professzionális eszköztárral rendelkezik, tényleg gyerekjátéknak tűnik vele a cross-platform appok fejlesztése. Ha valaki villámgyors alkalmazásfejlesztésbe kezdene, s elsősorban webes alkalmazásokban vagy okostelefonos appokban gondolkodik, akkor megúszhatja vele egyszerű fogd és dobd alkotói folyamattal. De ha valaki időt szán a dolgokra és nem riad vissza némi kódszerkesztésről sem, annak további lehetőségeket is biztosít ez a fejlesztőrendszer. Használatának elsajátítása eleve nem tűnik nehéznek, de aki igazán szeretne elmélyülni a lehetőségeiben, annak nagyon jól jöhet a VisualNeo Web Youtube csatornája, ahol sok remek oktató videó található, illetve a VisualNeo fórum, ahol mind a Win, mind a Web változatokkal kapcsolatban lehet kérdezni a többi felhasználótól és a fejlesztőktől. Emellett pedig akadnak remek tutorial anyagok, példa programokkal is.

Hasonlóan a VisualNeo Win-hez, itt is van a programból ingyen tesztelhető, korlátozásoktól mentes próbaverzió. Ennek lejárta után, ha minden szempontból megfelelt a VisualNeo Web az elvárásainknak, megvásárolhatjuk azt a készítők oldalán. Az 59 eurós ár ebben a kategóriában barátinak nevezhető.

Ne maradjon le erről sem!