PhoneGap: lényeg, lehetőségek és alkalmazások készítése az Adobe platformon

Mi az a PhoneGap?

PhoneGap — egy mobilalkalmazás-fejlesztési platform, amelyet eredetileg a Nitobi Software hozott létre 2009-ben. 2011-ben az Adobe felvásárolta a Nitobit, és a PhoneGap-et kereskedelmi termékként kiadta, a keretrendszer magját pedig Cordova néven átadta az Apache Software Foundationnak.

A létrehozás története és fejlődése

A PhoneGap-et a 2008-as iPhoneDevCamp konferencián hozták létre, ahol a Nitobi Software fejlesztői bemutatták a webalkalmazások natív konténerbe csomagolásának technológiáját. Az első nyilvános verzió 2009-ben jelent meg, és azonnal felkeltette azon webfejlesztők figyelmét, akik az Objective-C megtanulása nélkül keresték a belépést a mobilpiacra.

A PhoneGap fő innovációja az volt, hogy a fejlesztők ismert webtechnológiákat — HTML, CSS és JavaScript — használhattak olyan alkalmazások létrehozásához, amelyek az alkalmazásboltokon keresztül telepíthetők az eszközre, és hozzáférnek a natív funkciókhoz: kamera, GPS, névjegyek és gyorsulásmérő.

Az Adobe Developer Relations (2015) adatai szerint a csúcsidőszakban világszerte több mint 600 ezer fejlesztő használta a PhoneGap-et. A platform különösen népszerű volt a webstúdiók és szabadúszók körében, akik iOS és Android mérnökök felvétele nélkül akarták bővíteni portfóliójukat mobilprojektekkel.

Különbségek a PhoneGap és az Apache Cordova között

A fő különbség a PhoneGap és az Apache Cordova között a terjesztési modellben és a kiegészítő szolgáltatásokban rejlik. A Cordova egy tiszta nyílt forráskódú keretrendszer az Apache Foundation irányítása alatt, míg a PhoneGap annak kereskedelmi terjesztése exkluzív Adobe képességekkel.

A PhoneGap fő előnye és legfontosabb kereskedelmi különbsége az Apache Cordovával szemben — a PhoneGap Build szolgáltatás, amely átveszi a fordítás szakaszát. A fejlesztő feltölti a forrásfájlokat az Adobe szerverére, kiválasztja a célplatformokat, és kész bináris fájlokat kap az Android SDK, Xcode és a kapcsolódó fordítási eszközök telepítése nélkül.

Ezenkívül a PhoneGap integrációt tartalmazott az Adobe Creative Clouddal, lehetővé téve a tervezők számára, hogy a Photoshopból közvetlenül a PhoneGap projektstruktúrába exportálják a maketteket. Ez a funkció keresett volt a dedikált mobilfejlesztő nélküli kis csapatokban.

PhoneGap Build: alkalmazások felhőben fordítása

PhoneGap Build — egy Adobe webszolgáltatás, amely a PhoneGap/Cordova alkalmazás forráskódját telepítőfájlokká fordítja iOS (.ipa), Android (.apk), Windows Phone (.xap) és más platformok számára. A felhasználónak nem kell telepítenie a számítógépére a cél operációs rendszerek SDK-it.

A fordítási folyamat három lépésből áll: a fejlesztő archiválja a projektet (vagy megad egy Git tárolót), feltölti a build.phonegap.com oldalra, és kiválasztja a platformokat. Néhány perc múlva a szerver visszaadja a kész bináris fájlokat az alkalmazásboltokba történő feltöltéshez.

A PhoneGap Build kétféle előfizetést támogatott: ingyenes (legfeljebb 2 alkalmazás, nyilvános fordítás) és fizetős (legfeljebb 25 alkalmazás, privát fordítás, egyedi ikonok és tanúsítványok). Az iOS-hez Apple Developer Program feltöltési tanúsítványra volt szükség, amelyet a felhasználó a személyes fiókjába töltött fel. A Build működési mechanizmusa egyszerű volt: a felhasználó ZIP archívumot küldött vagy Git tárolót adott meg, a szerver automatikusan meghatározta a platformokat, és a vezérlőpulton keresztül visszaadta a kész bináris fájlokat.

Az Adobe Blog (2017) szerint havonta több mint 500 ezer fordítás történt a PhoneGap Builden keresztül. A szolgáltatás különösen népszerű volt oktatási intézményekben és hackathonokon, ahol a résztvevők nem fértek hozzá Mac infrastruktúrához. A fejlesztők a Build-et használták prototípusok bemutatására is az ügyfeleknek közvetlenül az eszközökön, környezet beállítása nélkül.

PhoneGap kód és beállítás példák

A PhoneGap projekt szerkezete megegyezik a Cordováéval. A különbség csak a config.xml konfigurációs fájlban van, ahol a <gap> elem hozzáadásra kerül a PhoneGap verziójának és az Adobe alkalmazás azonosítójának megadásával.

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.adobe.phonegap.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:gap='http://phonegap.com/ns/1.0'>
    <name>PhoneGapApp</name>
    <description>
        PhoneGap alkalmazás
    </description>
    <gap:platform name='ios' />
    <gap:platform name='android' />
    <gap:plugin name='cordova-plugin-camera' />
    <gap:config platform='ios' min-version='13.0' />
</widget>

Ez a konfigurációs fájl meghatározza az iOS és Android támogatással rendelkező alkalmazást, megadja a minimális iOS 13 verziót, és csatlakoztatja a kamera bővítményt. A PhoneGap Buildbe történő feltöltéskor a szerver automatikusan felismeri ezeket a beállításokat, és lefordítja a projektet a szükséges függőségekkel.

Példa alapszintű JavaScript kódra az eszköz készenléti eseményének kezelésével és natív párbeszédablak meghívásával:

document.addEventListener('deviceready', function() {
  console.log('PhoneGap készen áll');

  document.getElementById('btnAlert')
    .addEventListener('click', function() {
      navigator.notification.alert(
        'Üdvözlet a PhoneGap-ből!',
        function() { console.log('OK'); },
        'Üzenet',
        'Bezár'
      );
    });
});

A deviceready esemény — kötelező belépési pont minden PhoneGap és Cordova alkalmazásban. Ezen esemény nélkül a natív API hívások nem működnek, mert a híd még nincs inicializálva. A készenlét után az összes bővítmény elérhető, beleértve a notification.alert funkciót a natív párbeszédablakokhoz.

A PhoneGap előnyei és hátrányai

A PhoneGap számos előnnyel rendelkezett, amelyek a 2010-es évek közepén népszerűvé tették, de voltak korlátai is, amelyek 2018 után piaci részesedésének csökkenéséhez vezettek.

Erősségek

A PhoneGap fő előnye — alacsony belépési küszöb a webfejlesztők számára. A HTML, CSS és JavaScript olyan technológiák, amelyeket minden frontend szakember ismer, lehetővé téve a webstúdiók számára, hogy gyorsan belépjenek a mobilalkalmazás-piacra iOS és Android mérnökök felvétele nélkül.

A PhoneGap Build felhőszolgáltatás megoldotta az infrastruktúra problémáját: a Windowsos csapatok Mac vásárlása nélkül tudtak iOS alkalmazásokat fordítani. Ez kritikus volt a korlátozott eszközköltségvetéssel rendelkező startupok számára.

Gyengeségek

A PhoneGap fő hátránya — a teljesítmény. A WebView lassabb, mint a natív UI keretrendszerek, különösen összetett animációk, nagy listák és grafikai feldolgozás esetén. A HTML5Rocks tesztek (2016) szerint egy 1000 elemből álló lista megjelenítése PhoneGap-ben 200–400 ms-ig tartott, szemben a natív alkalmazás 16–30 ms-ával.

További korlátok közé tartozott a felhasználó eszközén lévő WebView verziójától való függés, a natív bővítmények hibakeresési problémái és az új iOS és Android API-khoz való hozzáférés hiánya a megfelelő Cordova bővítmények megjelenéséig.

PhoneGap ma: támogatás és migráció

2020-ban az Adobe bejelentette a PhoneGap és a PhoneGap Build támogatásának megszüntetését. A vállalat átadta a fejlesztéseket a közösségnek azzal az ajánlással, hogy térjenek át az Apache Cordovára vagy a Capacitorra. A PhoneGap Build bezárt, és a felhő fordítás már nem elérhető.

A meglévő PhoneGap projektek esetében a Capacitorra való migráció ajánlott — ez a legközvetlenebb út minimális kódváltoztatással. Elég az inicializációs szkripteket lecserélni és a konfigurációt frissíteni. Minden JavaScript kód és HTML sablon változatlan marad, mivel a Capacitor ugyanazokat a híd elveket használja.

Alternatív lehetőség — közvetlen áttérés az Apache Cordovára. Ehhez a platformok helyi telepítésére van szükség CLI-n keresztül és a helyi fordítás beállítására, de teljes mértékben megőrzi a kompatibilitást a meglévő bővítményekkel és az alkalmazás architektúrájával.

A bezárás ellenére a PhoneGap történelmi jelentőségét nehéz túlbecsülni. Éppen a PhoneGap mutatta meg a piacnak, hogy a webtechnológiák alapul szolgálhatnak mobilalkalmazásokhoz, utat nyitva a modern hibrid és platformok közötti keretrendszerek számára. A felhő fordítás koncepcióját, amelyet először a PhoneGap Build-ben valósítottak meg, később átvette az Ionic Appflow, a Visual Studio App Center és más folyamatos integrációs szolgáltatások mobil projektekhez.

A PhoneGap architekturális döntései — a híd a WebView-n keresztül, a bővítményrendszer és a config.xml-en keresztüli konfiguráció — de facto szabvánnyá váltak a hibrid fejlesztésben. Még a modern Capacitor projektekben is látható a PhoneGap öröksége: ugyanazok a bővítményekkel való munkavégzés elvei és hasonló fordítási folyamat.

A régi PhoneGap projekteket karbantartó fejlesztők számára a kulcskészség a bővítmény híd megértése és a bővítmények modern Android és iOS verziókhoz való adaptálásának képessége. Enélkül az alkalmazás frissítése az áruházak új követelményei szerint lehetetlenné válik az elavult rendszerengedélyek miatt.