U ovom ću blog postu pokazati kako započeti s razvojem Ionic aplikacija za iOS platformu.
Najveći broj aplikacija koje sam do sada radio najprije bi napravio za Android platformu, a onda bi istu prebacio na iOS. Tu je znalo biti svakakvih izazova zato što iOS ima svojih specifičnosti.
Mac tj. macOS
Iako postoje načini da se već postojeća Android aplikacija prepakira u iOS aplikaciju na Windows OS-u, koristeći npr. Ionic Appflow, ipak je preporuka koristiti Mac uređaj tj. macOS.
Na Mac-u je moguće raditi iOS i Android aplikacije dok je na Windows OS-u moguće raditi samo Android aplikacije.
Nakon dosadašnjih iskustava čini mi se bolje kompletan razvoj prebaciti na Mac te u startu napraviti iOS verziju Ionic aplikacije koju će onda biti jednostavnije prebaciti na verziju za Android. U svakom slučaju jednostavnije nego kada se radi obrnuto.
npm, ionic, cordova,…
Na Mac je potrebno instalirati sve pakete kako bi se uopće mogao kreirati Ionic projekt.
|
1 2 3 |
npm install -g n npm install -g ionic npm install -g cordova |
Apple Developer Program
Registracijom na Apple Developer Program ($99 tj. $299 godišnje) dobije se pristup najnovijim alatima za razvoj i distribuciju iOS aplikacija.
Jednostavnije rečeno, bez ovoga ne mogu ništa sa svojom aplikacijom. Niti ju mogu kvalitetno testirati (TestFlight), niti objaviti na App Storeu.
XCode
Kako bi aplikaciju mogao pokrenuti na iOS uređaju ili objaviti na App Storeu potreban mi je XCode, trenutno koristim verziju 10.2 na macOS-u Mojave 10.14.4.
Kreiranje Ionic aplikacije
Kreiram novi projekt i odmah dodajem iOS platformu kako bi ga mogao pokrenuti na simulatoru i na “pravom” uređaju.
|
1 2 3 |
ionic start iOSdemoIonic cd iOSdemoIonic ionic cordova platform add ios |
Nakon što je projekt kreiran prvo što trebam promijeniti su id i name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<?xml version='1.0' encoding='utf-8'?> <widget id="com.tomislavstankovic" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>iOSdemoIonic</name> <description>An awesome Ionic/Cordova app.</description> <author email="hi@ionicframework.com" href="https://www.tomislavstankovic.com/">Tomislav Stanković</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:*" /> <preference name="ScrollEnabled" value="false" /> <preference name="android-minSdkVersion" value="19" /> <preference name="BackupWebStorage" value="none" /> <preference name="SplashMaintainAspectRatio" value="true" /> <preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="3000" /> <platform name="android"> <allow-intent href="market:*" /> <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" /> <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" /> <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" /> <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" /> <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" /> <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" /> <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" /> <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" /> <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" /> <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" /> <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" /> <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" /> <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" /> <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" /> <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" /> <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" /> <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" /> <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <icon height="57" src="resources/ios/icon/icon.png" width="57" /> <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" /> <icon height="40" src="resources/ios/icon/icon-40.png" width="40" /> <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" /> <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" /> <icon height="50" src="resources/ios/icon/icon-50.png" width="50" /> <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" /> <icon height="60" src="resources/ios/icon/icon-60.png" width="60" /> <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" /> <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" /> <icon height="72" src="resources/ios/icon/icon-72.png" width="72" /> <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" /> <icon height="76" src="resources/ios/icon/icon-76.png" width="76" /> <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" /> <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" /> <icon height="29" src="resources/ios/icon/icon-small.png" width="29" /> <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" /> <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" /> <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" /> <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" /> <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" /> <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" /> <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" /> <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" /> <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" /> <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" /> <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" /> <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" /> <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" /> <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" /> <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" /> <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" /> </platform> <plugin name="cordova-plugin-whitelist" spec="1.3.3" /> <plugin name="cordova-plugin-statusbar" spec="2.4.2" /> <plugin name="cordova-plugin-device" spec="2.0.2" /> <plugin name="cordova-plugin-splashscreen" spec="5.0.2" /> <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" /> <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" /> <engine name="ios" spec="~4.5.5" /> </widget> |
Aplikaciju kroz Xcode mogu pokrenuti na simulatoru ili na fizičkom uređaju putem datoteke .xcodeproj tj. .xcworkspace.
