Hybrid Application development for Android is a breeze, be it for development or production configuration. But I personally find Cordova iOS setup, development, and deployment a bit complicated.
Most of the Hybrid Application Developers who are in the learning stages are not able to explore hybrid iOS app development process simply because they don't own a mac. And developing iOS apps requires the iOS SDK and XCode (unlike the Android SDK which runs on any Desktop OS).
Therefore the aim of this guide is to show the basic workflow of hybrid iOS app development on a Mac. This way developers can see how it's done even if they can't develop the apps.
Creating a cordova project
Begin by opening the terminal and creating a new cordova project (use sudo only if you have permission issues, ie. EACCESS errors):
sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add iosAt the time of writing this guide the cordova iOS platform version is 4.3.1.
We wont modify any source code of the app – rather, we'll simply continue with the default sample code that is added by cordova automatically when we run the create command. However it is assumed we will add plugins modify code in the www folder during normal development flow.
The next step is to run the cordova build command. This will convert our app code to an .xcodeproj file which we will use next.
sudo cordova build iosThe generated Xcode Project file will be here:
[Your App Folder]/platforms/ios/[Your App Name].xcodeprojNow in the case of Android the code signing is done using the Keystore file which is in .jks format. However in iOS it is required that you have a Apple developer account for distributing iOS apps. This is so that we can generate the Certificates and Provisioning Profiles required for distributing the app.
For pricing and other info about a Developer account refer to this page.
Creating Development Certificates
Once you have the account ready we can proceed further and login to your Apple developer account.
The dashboard screen should look something like this:
Click on Certificates, Identifiers & Profiles. This should take you to the following screen, which by default displays Certificates issued from your account:
iOS Certficates are of mainly two types: Development or Distribution. Click on the Plus (+) button in the top right corner of the list which will open the following page:
First let's create a development profile. Select iOS App Development and click continue.
This should bring you to the following screen, where you are asked to create and upload a Certificate Signing Request or CSR file.
Follow the on-screen instructions to generate it, and continue. Once the certificate is ready, download it to your Mac, and double click it. This will add it to Keychain Access in the Mac.
Creating Distribution Certificates
Creating distribution certificates is similar to the process for creating development certificates. However here we select App Store and Ad Hoc from Production section in the Add iOS Certifcate Page:
Creating the App ID
Select App IDs from Identifiers section. This will open the list of existing app IDs. Next click on the Plus button on the top right (+). This will open the Register iOS App IDs page.
Select Explicit App ID. The App Description can be any related name – this is what will be displayed in the app id list against the particular app id.
An app id is a string in the format AB11A1ABCD.com.mycompany.myapp where AB11A1ABCD is the app id prefix which is by default the team ID and com.mycompany.myapp is the bundle ID which is unique to each app.
Its recommended that the bundle id must be in a reverse-domain name style string. For example, the company MYCOMPANY may have two apps (App1 and App2). So the HTTP URL for each app is usually app1.mycompany.com and app2.mycompany.com. Hence the bundle IDs for each app will be com.mycompany.app1 and com.mycompany.app2
Next select any services from the checklist that you need to use in your app, such as Push Notifications, Wallet etc. Next click on continue and confirm the details and finally register the app id.
Adding devices to your developer account
Select All from the Devices section. This will open the list of already added devices to your Apple developer account. Only these devices are allowed to run the app during development.
To add a new device, click on the Plus button in the top right (+). The following screen will be displayed:
Here the name can be any easily understandable name, for example iPhone 5s ABC Pvt Ltd. The device UDID is the unique ID associated with each Apple device.
To find the UDID of a device follow these steps:
- Connect the device to your Mac.
- Open the System Information app located in the /Applications/Utilities folder.
- Select USB under Hardware in the left column.
- On the right, select the connected device under USB Device Tree. The device ID, or “Serial Number”, appears below.
Once you have entered the device UDID and name click continue, then confirm the details and register.
Creating a Development Provisioning Profile
To create a development Provisioning Profile click on Provisioning Profiles -> All. This should show all the profiles, development as well as distribution. Next click on the Plus button on the top right (+) This should show the following page:
Here select iOS App Development and click continue. In the dropdown that is displayed select the App ID we created previously and continue.
Next A checklist of certificates is displayed from which we can select one or multiple. These are development certificates and not distribution ones. The generated provisioning profile will be linked to these certificates.
When you click Continue, a checklist of devices is displayed. Select one, multiple, or all. Only selected devices will be allowed to run the app using this provisioning profile.
Next, after clicking continue, enter the name for the provisioning profile, and download the generated .mobileprovision file.
Notes: it's the same process to create your Adhoc Distribution Provisioning Profile. It's also very similar to create your AppStore Distribution Provisioning Profile, except for that one we don't select devices, as the app will be available publicly through the AppStore.
Now that we have all that we need we can continue generating the actual ipa using Xcode.
Cordova build command converts our app code to an xcode project. Using Xcode we create an .ipa file which is the actual app to be installed.
Before moving forward double tap on both Certificates to add them to your keychain.
Continuing in Xcode
Next, double tap the .xcodeproj file which should open it in Xcode. (Please use the latest version of Xcode – I have used Xcode 8.3.2.)
The Xcode screen should look something like the above.
Click on the App Name on the top left corner fo the window. This will open the detailed view on the right side.
Then click on Targets-> App Name:
This will display the following details tab:
Click on general, which should display this:
Uncheck the Automatically Manage Signing Checkbox.
This should display the following error, stating AppNAme requires a provisioning profile:
Next, under Signing (Debug), click the Provisioning Profile Dropdown and select the import profile option. In the file selection dialog that pops up, navigate to the path where the development provisioning profile is downloaded, and select it. It will have an extension of .mobileprovision.
After you select that, the error should be gone, and it should show Team as the Team Name in your Apple developer account and Signing Certificate Name.
Do the same thing for the Signing (Release) section – but in the file selection dialog select the Ad Hoc distribution Profile.
Now that the Code signing steps are done we either
- run the app directly on device
- run the app on a simulator
- generate an ipa file for distribution
- upload app to appstore
Running the app directly on device
To run the app on a device connect the device to the Mac via USB. Then in the top left corner in the list of devices select the connected device, and click the run or play button (black triangular button):
The build status will be displayed in the status bar on the top of the window. If all goes fine, the app should be installed on the device, and it should automatically load in a while.
Note: the steps are the same for running the app on a simulator. But instead of an actual device we use the available iPhone and iPad simulators from the device list.
Generate an ipa file for distribution
This approach can be done in case you need to distribute the app to the testing team, etc. However the device used by them must have a UDID present in the provisioning profile.
From the Xcode menu select Product -> Clean, then Product -> Archive. The Archives organizer appears and displays the new archive.
In the righthand side panel select the Export option and a list of options will appear.
To distribute your app to users with designated devices, select “Save for Ad Hoc Deployment.” The app will be code signed with the distribution certificate.
To distribute your app for internal testing, select “Save for Development Deployment.” The app will be code signed with your development certificate.
In the dialog that appears, choose a team from the pop-up menu and click Choose.
Next the device selection dialog pops up. Select either All devices or specific devices and click next.
Next the review dialog is displayed. Here it will show the signing certificate and provisioning profile used for generating the build. Review and click next. Finally the file save as a popup is displayed to select the location in the file system to store the exported app file.
The app is exported as .ipa` file .
To run this file on device simply double tap it which will open it in iTunes.
Then connect your device (this should show a small device icon on the top left corner of the iTunes window). Tapping on it will show the device summary such as apps, music etc on the device. Select the apps tab, and in the left pane select the app to be installed and click install. Wait for the process to complete and click apply. This should install the ipa file on your device.
To debug the app:
- open Safari
- open the app on the device
- in the Safari menu bar select
Develop --> Your Device Name --> Your App.