Cordova iOS alkalmazásfejlesztés a telepítéstől a telepítésig

iphone_1737513_1920

A hibrid alkalmazásfejlesztés az Android számára egyszerű, legyen szó fejlesztésről vagy gyártási konfigurációról. De én személy szerint egy kicsit bonyolultnak tartom a Cordova iOS beállítását, fejlesztését és telepítését.

A legtöbb hibrid alkalmazás-fejlesztő, aki tanulási szakaszban van, nem képes felfedezni a hibrid iOS-alkalmazások fejlesztési folyamatát pusztán azért, mert nem rendelkezik mac-szal. Az iOS alkalmazások fejlesztéséhez pedig az iOS SDK és az XCode szükséges (ellentétben az asztali operációs rendszeren futó Android SDK-val).

Ezért ennek az útmutatónak a célja a hibrid iOS-alkalmazások fejlesztésének alapvető munkafolyamatának bemutatása Mac-en. Így a fejlesztők láthatják, hogyan történik ez akkor is, ha nem tudják fejleszteni az alkalmazásokat.

Kordova projekt készítése

Kezdésként nyissa meg a terminált és hozzon létre egy új cordova projektet (csak akkor használja a sudo-t, ha jogosultsági problémái vannak, pl. EACCESS hibák):

sudo cordova create iosdemo cd iosdemo sudo cordova platform add ios

Az útmutató elkészítésekor a cordova iOS platform verziója 4.3.1.

Nem változtatjuk meg az alkalmazás bármely forráskódját - inkább folytatjuk az alapértelmezett mintakóddal, amelyet a cordova automatikusan ad hozzá, amikor a Create parancsot futtatjuk. Feltételezzük azonban, hogy a beépülő modulok hozzáadják a kódot a wwwmappába a normál fejlesztési folyamat során.

A következő lépés a cordova build parancs futtatása. Ez átalakítja az alkalmazás kódunkat egy .xcodeproj fájlba, amelyet a következő lépésben használunk.

sudo cordova build ios

A létrehozott Xcode Project fájl itt lesz:

[Your App Folder]/platforms/ios/[Your App Name].xcodeproj

Most az Android esetében a kód aláírása a .jks formátumú Keystore fájl segítségével történik. Az iOS rendszerben azonban meg kell adnia egy Apple fejlesztői fiókot az iOS alkalmazások terjesztéséhez. Ez azért van, hogy elő tudjuk állítani az alkalmazás terjesztéséhez szükséges tanúsítványokat és előkészítési profilokat .

A fejlesztői fiókkal kapcsolatos árakról és egyéb információkról lásd ezt az oldalt.

Fejlesztési tanúsítványok létrehozása

Miután elkészült a fiók, továbbléphetünk és bejelentkezhetünk Apple fejlesztői fiókjába.

Az irányítópult képernyőjének ilyennek kell kinéznie:

Projekt megnyitása Xcode-ban

Kattintson a gombra Certificates, Identifiers & Profiles. Ezzel el kell jutnia a következő képernyőre, amely alapértelmezés szerint a fiókjából kiállított tanúsítványokat jeleníti meg:

Tanúsítványok, azonosítók és profilok

Az iOS Certficates főként kétféle: Fejlesztés vagy Terjesztés. Kattintson a Plus (+) gombra a lista jobb felső sarkában, amely megnyitja a következő oldalt:

IOS-tanúsítvány hozzáadása

Először hozzunk létre egy fejlesztési profilt. Válassza az iOS App Development lehetőséget, majd kattintson a Folytatás gombra.

Ezzel el kell jutnia a következő képernyőre, ahol tanúsítvány-aláírási kérelem vagy CSR-fájl létrehozását és feltöltését kéri.

CSR-fájl feltöltése

Kövesse a képernyőn megjelenő utasításokat a létrehozásához, és folytassa. Miután a tanúsítvány elkészült, töltse le a Mac számítógépére, és kattintson rá duplán. Ez hozzáadja a Mac kulcstartó-hozzáféréséhez.

Fejlesztési tanúsítvány letöltése

Forgalmazási tanúsítványok létrehozása

Terjesztési tanúsítványok létrehozása hasonló a fejlesztési tanúsítványok létrehozásának folyamatához. Azonban itt is válassza App Store and Ad Hocszármazó Productionszakaszt a Add iOS Certifcate Page:

IOS-tanúsítvány hozzáadása

Az alkalmazásazonosító létrehozása

Válasszon App IDsa Identifiersszakaszból. Ez megnyitja a meglévő alkalmazásazonosítók listáját. Ezután kattintson a jobb felső sarokban található Plus gombra (+). Ez megnyitja az iOS alkalmazásazonosítók regisztrálása oldalt.

Regisztrálja az iOS alkalmazásazonosítókat

Válassza a Kifejezett alkalmazásazonosító lehetőséget. Az alkalmazásleírás bármilyen kapcsolódó név lehet - ez jelenik meg az alkalmazásazonosító listában az adott alkalmazásazonosítóval szemben.

Az alkalmazásazonosító az AB11A1ABCD.com.mycompany.myapp formátumú karaktersorozat, ahol az AB11A1ABCD az alkalmazásazonosító előtag, amely alapértelmezés szerint a csapatazonosító és a com.mycompany.myapp a csomagazonosító, amely minden alkalmazáshoz egyedi.

Azt javasolja, hogy a csomag azonosítója fordított tartománynév stílusú karakterlánc legyen. Például a MYCOMPANY vállalatnak két alkalmazása lehet (App1 és App2). Tehát az egyes alkalmazások HTTP URL-je általában az app1.sajatcég.com és az app2.sajam.com. Ezért az egyes alkalmazások csomagazonosítói a com.mycompany.app1 és com.mycompany.app2 lesznek.

Ezután válassza ki azokat a szolgáltatásokat az ellenőrzőlistáról, amelyeket használnia kell az alkalmazásában, például Push Notifications, Wallet stb. Ezután kattintson a folytatásra, erősítse meg a részleteket, és végül regisztrálja az alkalmazás azonosítóját.

Eszközök hozzáadása a fejlesztői fiókhoz

Válasszon Alla Devicesszakaszból. Ez megnyitja az Apple fejlesztői fiókjához már hozzáadott eszközök listáját. Csak ezek az eszközök futtathatják az alkalmazást a fejlesztés során.

Új eszköz hozzáadásához kattintson a Plusz gombra a jobb felső sarokban (+). A következő képernyő jelenik meg:

eszköz képernyő hozzáadása

Itt a név bármilyen könnyen érthető név lehet, például iPhone 5s ABC Pvt Ltd.. Az eszköz UDID az egyes Apple-eszközökhöz társított egyedi azonosító.

Egy eszköz UDID-jének megkereséséhez kövesse az alábbi lépéseket:

  1. Csatlakoztassa az eszközt a Mac-hez.
  2. Nyissa meg az / Applications / Utilities mappában található System Information alkalmazást.
  3. Válassza az USB elemet a bal oldali oszlop Hardver alatt.
  4. A jobb oldalon válassza ki a csatlakoztatott eszközt az USB-eszközfa alatt. Az eszközazonosító vagy a „Sorozatszám” megjelenik alább.

Miután megadta az eszköz UDID-jét és a nevet, kattintson a Folytatás gombra, majd erősítse meg a részleteket és regisztráljon.

Fejlesztési előkészítő profil létrehozása

Fejlesztési Provisioning Profile létrehozásához kattintson a Provisioning Profiles -> All elemre. Ennek meg kell mutatnia az összes profilt, fejlesztést és terjesztést. Ezután kattintson a jobb felső sarokban található Plus gombra (+). Ennek a következő oldalt kell megjelenítenie:

Fejlesztési előkészítési profil létrehozása

Itt válassza ki iOS App Developmentés kattintson a folytatásra. A megjelenő legördülő menüben válassza ki a korábban létrehozott alkalmazásazonosítót, és folytassa.

Ezután megjelenik a tanúsítványok ellenőrzőlistája, amelyből kiválaszthatunk egyet vagy többet. Ezek fejlesztési tanúsítványok, és nem terjesztési igazolások. A létrehozott létesítési profil kapcsolódik ezekhez a tanúsítványokhoz.

Ha a Folytatás gombra kattint, megjelenik az eszközök ellenőrzőlistája. Válasszon egyet, többszörös vagy mindet. Csak a kiválasztott eszközök futtathatják az alkalmazást ezzel a kiépítési profillal.

Ezután a folytatás gombra kattintva adja meg a kiépítési profil nevét, és töltse le a létrehozott .mobileprovision fájlt.

Megjegyzések : Ugyanez a folyamat az Adhoc Distribution Provisioning Profile létrehozása. Nagyon hasonlít az AppStore terjesztési szolgáltató profil létrehozására, kivéve azt, hogy nem válasszuk ki az eszközöket, mivel az alkalmazás nyilvánosan elérhető lesz az AppStore-on keresztül.

Most, hogy minden megvan, amire szükségünk van, folytathatjuk az aktuális ipa előállítását az Xcode segítségével.

A Cordova build parancs átalakítja alkalmazáskódunkat egy xcode projektgé. Az Xcode használatával létrehozunk egy .ipa fájlt, amely a telepítendő alkalmazás.

Mielőtt továbblépne, koppintson duplán mindkét tanúsítványra, hogy hozzáadja őket a kulcstartójához.

Xcode-ban folytatva

Ezután koppintson duplán a .xcodeproj fájlra, amelynek meg kell nyitnia Xcode-ban. (Kérjük, használja az Xcode legújabb verzióját - én az Xcode 8.3.2-et használtam.)

Projekt megnyitása Xcode-ban

Az Xcode képernyőnek valami hasonlónak kell lennie, mint a fentiek.

Kattintson az alkalmazás nevére az ablak bal felső sarkában. Ez megnyitja a részletes nézetet a jobb oldalon.

Projektbeállítások

Ezután kattintson a Célok-> Alkalmazás neve:

célpontok

Ekkor megjelenik a következő részletek lap:

célrészletek

Kattintson az általános gombra, amelynek ezt meg kell jelenítenie:

általános részletek

Törölje a jelet az Aláírás automatikus kezelése jelölőnégyzetből.

Ennek a következő hibát kell megjelenítenie, jelezve, hogy az AppNAme megköveteli a kiépítési profilt:

profilhiba

Ezután az Aláírás (Hibakeresés) alatt kattintson a Kiépítési profil legördülő menüre, és válassza az Importálási profil lehetőséget. A felbukkanó fájlválasztó párbeszédpanelen keresse meg azt az elérési utat, ahová a fejlesztési létesítményprofil letöltődik, és válassza ki azt. A .mobileprovision kiterjesztése lesz.

Miután ezt kiválasztotta, a hibának el kell tűnnie, és meg kell jelenítenie a Csapatot a csapatnévként az Apple fejlesztői fiókjában és az Aláíró tanúsítvány nevét.

Ugyanezt tegye az Aláírás (Engedélyezés) szakasznál is, de a fájlválasztó párbeszédpanelen válassza ki az Ad Hoc terjesztési profilt.

Most, hogy a kód aláírásának lépései megtörténtek, mi is

  • futtassa az alkalmazást közvetlenül az eszközön
  • futtassa az alkalmazást egy szimulátoron
  • generál egy ipa fájlt a terjesztéshez
  • töltse fel az alkalmazást az appstore-ba

Az alkalmazás futtatása közvetlenül az eszközön

Az alkalmazás eszközön történő futtatásához csatlakoztassa az eszközt a Mac-hez USB-n keresztül. Ezután az eszközök listájának bal felső sarkában válassza ki a csatlakoztatott eszközt, majd kattintson a Futtatás vagy lejátszás gombra (fekete háromszög gomb):

futtassa az eszközt futtassa az eszközt

A build állapota az ablak tetején lévő állapotsorban jelenik meg. Ha minden rendben van, az alkalmazást telepíteni kell az eszközre, és egy idő után automatikusan be kell töltődnie.

Megjegyzés : a lépések ugyanazok az alkalmazás futtatásához egy szimulátoron. De egy tényleges eszköz helyett az eszközlistából elérhető iPhone és iPad szimulátorokat használjuk.

Generáljon egy ipa fájlt terjesztéshez

Ez a megközelítés megtehető abban az esetben, ha el kell terjesztenie az alkalmazást a tesztelő csapatnak stb.

Az Xcode menüből válassza a Product-> Clean, majd Product-> lehetőséget Archive. Megjelenik az Archívum szervező, és megjeleníti az új archívumot.

ios archívumszervező

A jobb oldali panelen válassza az Exportálás lehetőséget, és megjelenik az opciók listája.

Az alkalmazás terjesztéséhez a kijelölt eszközökkel rendelkező felhasználók számára válassza a „Mentés az eseti telepítéshez” lehetőséget. Az alkalmazást kód aláírja a terjesztési tanúsítvánnyal.

Az alkalmazás belső tesztelés céljából történő terjesztéséhez válassza a „Mentés fejlesztői telepítéshez” lehetőséget. Az alkalmazás kóddal lesz aláírva a fejlesztői tanúsítvánnyal.

ios archívum szervező exportálása ad hoc formátumban

A megjelenő párbeszédpanelen válasszon egy csapatot az előugró menüből, majd kattintson a Kiválasztás gombra.

ios export kiválasztott csapat

Ezután megjelenik az eszközválasztó párbeszédpanel. Válassza az Összes eszköz vagy az adott eszköz lehetőséget, majd kattintson a Tovább gombra.

Ezután megjelenik az áttekintés párbeszédpanel. Itt mutatja meg a build létrehozásához használt aláíró tanúsítványt és kiépítési profilt. Ellenőrizze, majd kattintson a következő gombra. Végül megjelenik a fájl mentése felugró ablakban, hogy kiválassza a helyet a fájlrendszerben az exportált alkalmazásfájl tárolásához.

Az alkalmazást .ipa` fájlként exportáljuk.

A fájl eszközön való futtatásához egyszerűen dupla koppintással megnyithatja az iTunes alkalmazásban.

Ezután csatlakoztassa a készülékét (ennek az iTunes ablak bal felső sarkában egy kis eszköz ikont kell mutatnia). Ha megérinti, megjelenik az eszköz összesítője, például alkalmazások, zene stb. Válassza az alkalmazások fület, majd a bal oldali ablaktáblában válassza ki a telepíteni kívánt alkalmazást, majd kattintson a Telepítés gombra. Várja meg a folyamat befejezését, majd kattintson az Alkalmaz gombra. Ezzel telepítenie kell az ipa fájlt a készülékére.

Az alkalmazás hibakeresése:

  1. nyissa meg a Safarit
  2. nyissa meg az alkalmazást az eszközön
  3. válassza a Safari menüsoron Develop --> Your Device Name --> Your App.

Ez van, srácok!