Cordova PhoneGap CLI iOS complete tutorial

Cordova/PhoneGap is a great tool to create native mobile apps using Html/Css/Javascript.

Software you need...

Node.js (on Mac)
XCode (on Mac)

You can do all of this without Mac as well, if you have a virtual mac machine (VMWare)

Cordova Official site has all you need to setup a project.

Here are steps:

Design your full App/Site within Windows Machine / Mac. once you are done with your project on windows, Then head over to a MAC computer.
just make sure following file is referenced within your index.html file:
<script type="text/javascript" src="cordova.js"></script>

install Node.js

Run Therminal

sudo npm install -g cordova
Create a folder and navigate to it, Then
sudo cordova create hello com.example.hello HelloWorld
sudo cordova platform add ios


now within your directory you should see a WWW folder, replace the content of this folder with the project files your created on windows pc. after you are done copying then...

sudo cordova build iOs

This will create the the proj file for you which you can use within xcode for deployment/testing (platforms/ios/<project name>.xcodeproj). you can open this project within xcode.
if you try to open it in xcode then you might see some permission errors, to resolve these error's, either try to add yourself to WWW (or root directory) and choose Apply to enclosed items. OR try to run this command.

Cd ~
sudo  chown -R your_user:<your_group> Document/Cordova/my_project (Group name is usually staff)

whenever you make a change to your WWW folder or config file then you must first BUILD the project with cordova, then do the chown command and then open the project in Xocde and test it with emulator or a real device.

to Test it with Real device, log into your Apple Developer account. then create a Dev Certificate an App ID(this is once per app) and a dev provisional profile). Add your Device to the Device list.

Then connect your device with PC and test it on Real Device.

When its time to launch, create a prod certificate, prod provisional profile. then header over to your xcode project properties, for Signing authority use the "Production profile" you created in apple Developer account.

Make sure you have all images in config file are actually available with correct dimensions , I was having problem uploading the launcher image for "iphone 5" devices. so i simply went to xcode & then navigate to Resources > images.xcassets.
I Imported images there and dragged to correct places. Apple requires all images to be in place for icons and splash screens.

Now you can create a "Archive" for your project "Product > Archive". when archive is created successfully you may select it and choose "Submit to app store". (make sure phone is NOT plugged intp your mac)

Go to iTunes connect site and add a new APP. App version and Bundle Id (com.site...) must match with your xcode info. fill out the fields and you are ready to roll.

You may need to set your files be not read only on your Windows machine before you copy them to your Mac.

use Assets Manager to do the Icons & Launch screen. for Icons you can use free app

Asset Manager Tips:
For Icons...Click on any icon, right below you should see 1x or 2x etc and then a number 29pt. basically it means a icon of 29x29 pixel, 2x means (29*2=58) pixels.
For Launch Screen.... Select any launch image box, open the "Right View" Then click on Attribute Inspector...this will show you the expected size of launch screen. Retina 4 is for iphone 5 and so on(640*960 as @2x & 640*1136 as -568h@2x, mostly you will get this nasty error from Apple for missing icon)

if you are having "owner/group" error while archiving   then please clear out the Install Owner and Install Group values under project build settings.
if you are getting "Set Mode permission" error...then exit out of Xcode, remove the staff group, run the chown command (shown above) and then try opening project in xcode again.

Posted by:

Comments History


by: on
for Android & Ios images, I use http://pgicons.abiro.com/

Then I use the below in config.xml file to auto map all images generated from the above website.



  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="SplashScreenDelay" value="3000" />
  
      <platform name="android">
        <!-- you can use any density that exists in the Android project -->
        <icon src="res/icon/android/ldpi.png" density="ldpi" />
        <icon src="res/icon/android/mdpi.png" density="mdpi" />
        <icon src="res/icon/android/hdpi.png" density="hdpi" />
        <icon src="res/icon/android/xhdpi.png" density="xhdpi" />
        <icon src="res/icon/android/xxhdpi.png" density="xhdpi" />
        <icon src="res/icon/android/xxxhdpi.png" density="xhdpi" />

        <splash src="res/screen/android/hdpi-portrait.png" density="port-hdpi"/>
        <splash src="res/screen/android/ldpi-portrait.png" density="port-ldpi"/>
        <splash src="res/screen/android/mdpi-portrait.png" density="port-mdpi"/>
        <splash src="res/screen/android/xhdpi-portrait.png" density="port-xhdpi"/>

        <splash src="res/screen/android/hdpi-landscape.png" density="land-hdpi"/>
        <splash src="res/screen/android/ldpi-landscape.png" density="land-ldpi"/>
        <splash src="res/screen/android/mdpi-landscape.png" density="land-mdpi"/>
        <splash src="res/screen/android/xhdpi-landscape.png" density="land-xhdpi"/>
        
      </platform>


 
      <platform name="ios">

        <icon src="res/icon/ios/icon-60_3x.png" width="180" height="180" />
        <!-- iOS 7.0+ -->
        <!-- iPhone / iPod Touch  -->
        <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
        <icon src="res/icon/ios/icon-60_2x.png" width="120" height="120" />
        <!-- iPad -->
        <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
        <icon src="res/icon/ios/icon-76_2x.png" width="152" height="152" />
        <!-- iOS 6.1 -->
        <!-- Spotlight Icon -->
        <icon src="res/icon/ios/icon-40.png" width="40" height="40" />
        <icon src="res/icon/ios/icon-40_2x.png" width="80" height="80" />
        <!-- iPhone / iPod Touch -->
        <icon src="res/icon/ios/icon.png" width="57" height="57" />
        <icon src="res/icon/ios/icon_2x.png" width="114" height="114" />
        <!-- iPad -->
        <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
        <icon src="res/icon/ios/icon-72_2x.png" width="144" height="144" />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="res/icon/ios/icon-small.png" width="29" height="29" />
        <icon src="res/icon/ios/icon-small_2x.png" width="58" height="58" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/icon/ios/icon-50.png" width="50" height="50" />
        <icon src="res/icon/ios/icon-50_2x.png" width="100" height="100" />
        
        
        <!-- images are determined by width and height. The following are supported -->
        <splash src="res/screen/ios/Default.png" width="320" height="480"/>
        <splash src="res/screen/ios/Default_2x.png" width="640" height="960"/>
        <splash src="res/screen/ios/Default-Portrait.png" width="768" height="1024"/>
        <splash src="res/screen/ios/Default-Portrait_2x.png" width="1536" height="2048"/>
        <splash src="res/screen/ios/Default-Landscape.png" width="1024" height="768"/>
        <splash src="res/screen/ios/Default-Landscape_2x.png" width="2048" height="1536"/>
        <splash src="res/screen/ios/Default-568h_2x.png" width="640" height="1136"/>
        <splash src="res/screen/ios/Default-667h_2x.png" width="750" height="1334"/>
        <splash src="res/screen/ios/Default-Portrait-736h_3x.png" width="1242" height="2208"/>
        <splash src="res/screen/ios/Default-Landscape-736h_3x.png" width="2208" height="1242"/>
      </platform>

Then I add these two plugins, one for fix cordova IOS statusbar issue, and other to fix the splash screen delay in android.

<!-- cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git -->
<!-- cordova plugin add cordova-plugin-statusbar -->

Thanks


 
by: on
for icons use:
https://github.com/AlexDisler/cordova-icon

for splash screen use: 
https://github.com/AlexDisler/cordova-splash
 

Name :  

Email :  

Comment Below