This article gets you up to speed on how to integrate your HTML/CSS/JS app with PhoneGap/Cordova into an iOS app using a Mac and prepare it for App Store submission. This article assumes you’ve already followed the steps on http://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/ to:
Download Node.js
Add PATH statements to .profile
In this article, I am referencing Mac OS X Mavericks 10.9.3 and Xcode 5.1.1 on a Mac Mini. Cordova CLI 3.5.0 was installed. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service.
Download OS X Mavericks and Xcode if you haven’t already:
http://www.apple.com/osx/apps/app-store.html
Before you can install the app you create with PhoneGap on your device, you need to sign up as a Developer with Apple and go through the business documentation, Certificate Signing, Developer Certificate process, and more, all of which are detailed on Apple’s web site (https://developer.apple.com/programs/ios/), under Prepare for App Submission. Nevertheless, you can skip all those steps and still see your work in the the iOS Simulator included with Xcode — you just won’t be able to view the app in your device or App Store. Xcode is a free download you can download now, but the Developer status comes at $99 a year.
Although you can develop the HTML/CSS/JS portion of an iPhone app on a Windows machine, you’ll still need a Mac with Xcode to convert the code to the binary that is uploaded to the App Store. You need a Mac to make iPhone apps. (PhoneGap Build can create this binary for you from your files, but you still need a Mac to download and install certain certificate files.)
If you are new to creating apps for the App Store, you’ll want to peruse the App Store Review and other Guidelines to make sure your app meets the rules: https://developer.apple.com/app-store/review/ You are strongly encouraged to make use of these documents before you start your project, lest you run afoul of Apple’s rules for what apps they will and will not allow in the App Store.
PhoneGap/Cordova now uses the command-line interface (CLI) to generate the files needed to start the project. This article covers the creation of an app from CLI creation to upload binary to Apple.
Resources:
http://docs.phonegap.com/en/3.5.0/guide_platforms_index.md.html#Platform%20Guides
http://phonegap-tips.com/articles/the-nodejs-command-line-interface-for-phonegap.html
Install Cordova CLI
1. With Node.js installed, open the Terminal app by clicking on it in the dock at bottom and issue the following command:
sudo npm install -g cordova
Pay attention to the inconsistency in the PhoneGap documentation between the use of “phonegap” and “cordova” in the command line. For instance, the Command-line Interface online page uses “phonegap” while the InAppBrowser API online page uses “cordova.” They are not interchangeable when using CLI. As seen in the above command, we are asking to download “cordova.” So we would replace all instances of “phonegap” in the documentation with “cordova,” or the command will generate a “not found”-type error.
2. Give the root password and hit Enter. I got a series of ERR lines, ending with:
npm ERR! not ok code 0
I kept pasting the command and hitting Enter over and over until it completed (maybe three times). When successful, you should get a long list of lines beginning with “npm http,” then finally ending with a series of words containing the @ symbol and digit/dot pairings, terminating with your username at the end.
Create Cordova Project Files with CLI
1. Open a Finder window and select the folder you want to create your project’s folder inside of, such as /PhonegapApps
2. Open the Terminal app (click on its icon in the dock below, or click on the magnifying glass at top right and type in “terminal”), type cd and a space (for “change directory”), drag the selected folder to the Terminal screen, let go, click on the Terminal to select it, then hit Return. This will orient all commands to that folder.
For this project, all of your commands will always begin with “cordova.” Some online tutorials and PhoneGap documentation will tell you to use “phonegap;” in that case, change it to “cordova” and it should work fine.
3. Type the following in the terminal:
cordova create myApp
Basic files are generated in the /myApp folder.
4. Enter the new folder you created in Terminal with the cd (change directory) command:
cd myApp
5. CLI only downloaded the skeleton files needed for all platforms. Now you need to download the specific files for iOS:
cordova platform add ios
6. Open the /myApp/platforms folder to see a new folder, /ios.
7. Cordova included several files for a default one-screen app, complete with splashscreen and icon. To build the default Cordova PhoneGap app, type:
cordova build ios
8. After a time, the Xcode file was built and saved as: myApp/platforms/ios/HelloWorld.xcodeproj. Double-click on this file to open it in Xcode.
If you’re unfamiliar with the Xcode environment, read this paragraph. Otherwise, skip to the next one. When the Xcode screen comes on, look at the top and see a progress bar showing you the progress of the open process. Lower down, you’ll see a familiar Play triangle near the top left, a square Stop button, and to the right, HelloWorld (which is the default app name) > iPhone Retina (3.5-inch) (which is the clickable name of the simulator or device). Below that at left is a string of small icons. The far left icon is a file folder icon; click on it to see the app directory. If the app files are not showing, there is a drop-down triangle to the left of an icon that represents your Xcode app. You can click on the small triangle to view the project contents.
9. Click on the Play triangle to view the project in the 3.5-inch device simulator. An iPhone screen appears, showing the PhoneGap logo above the words APACHE CORDOVA with “Device is Ready” pulsing. This shows that the project is successfully showing the default index.html screen.
10. Experiment. Try this with the iPhone simulator:
a) Click on the simulator then on Hardware > Device and choose among the available devices.
b) Click on Window > Scale and resize the simulator.
c) With Edit > Copy Screen you can grab it and possibly save for uploading as screenshots, if your screen and simulator sizes are large enough.
d) Click on Debug > Open System Log… to view the console output in separate windows. I personally did not find this information helpful.
11. In Xcode, click on the square Stop icon. The Simulator screen reverts to the device home screen with its icons. Click and hold on the app icon until it quivers, and an X appears. Confirm, then Hardware > Home. I recommend you delete the icon before creating a new build lest errors pile up. Sometimes the old code is not fully overwritten with a new cordova build process.
Add the InAppBrowser Plugin
PhoneGap has the ability to add more features to the app via plugins. PG does not automatically install every feature and that keeps the code footprint down. This page gives the commands needed to download many different plugins: http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs. The following link gives us a chart showing plugin support across platforms: http://docs.phonegap.com/en/3.5.0/guide_support_index.md.html#Platform%20Support
We’ll incorporate the InAppBrowser (IAB) API. The IAB allows us to open external URL links from within the app. Some developers would prefer this over the default of leaving the app and opening a web browser, shutting down the web browser when done, then restarting the app again. The IAB opens the link in its own frame, with a Done button bringing the user back into the app.
We first download the IAB as a plugin using CLI.
Resource:
https://github.com/apache/cordova-plugin-inappbrowser/blob/master/doc/index.md
Step I: download the plug-in
1. Still in your project’s folder in Terminal, type the add command:
cordova plugin add org.apache.cordova.inappbrowser
2. Verify that the plugin is installed with the ls (list) command:
cordova plugin ls
Step II: add to the config.xml file
1. Open the myApp/www/config.xml file in a text editor (I use TextWrangler) and make sure the following is above the </widget> line. Add it if it isn’t:
<feature name="InAppBrowser"> <param name="ios-package" value="CDVInAppBrowser" /> </feature>
The config.xml page is one of the reasons CLI (command line interface) is so good. We add our platform-related information to that page rather than opening up page after page in the different platform SDKs. The SDKs use the information in config.xml to prepare its own platform version.
2. While we’re on that page, change the other sections:
a. Change the version=”0.0.1″ to the correct version, like version=”1.0.0.″ When you fill out the fields for the app in the Apple dev site, you’ll put this in the version field, not “1.0,” or the app will not pass validation.
b. Change the <description> line.
c. Change the <author> section.
d. Make sure the “widget id” is the name of your app in reverse domain style, like com.developername.myApp. It needs to match up with the wording you put in the Apple dev site — the case must match or it will not pass validation.
e. Change the <name> to be what you want under the icon on the device’s home screen. 11 characters or fewer, because the name won’t wrap if it’s too long. This will also change the .xcodeproj filename. Spaces are permitted.
There are more options to change, which are noted here:
http://docs.phonegap.com/en/3.5.0/config_ref_index.md.html#The%20config.xml%20File
http://docs.phonegap.com/en/3.5.0/guide_platforms_ios_config.md.html#iOS%20Configuration
——————————
Issue found when creating this article
At first, the default project was called HelloCordova by Cordova in the config.xml <name></name> section, which I overwrote as myApp. Later I entered “My App” in <name></name> and later again changed it to “myApp” to investigated what changed in the build.
What happened in Xcode is that all those names are being remembered in the Xcode scheme – all except the current myApp. The HelloCordova and My App both default to Mac OS X in the scheme, and the only other selectable scheme is CordovaLib.
If you changed the <name> section and experience this problem, just remove the iOS platform with cordova platform rm ios in Terminal and add it back again with cordova platform add ios . That removed all the old data and started afresh. Note that this command will also remove all icons and splashscreen files too, and you’ll need to drag them back into Xcode the next time you do a cordova prepare ios or cordova build ios.
——————————
3. Make sure all pages using a Cordova API reference has the following in the <head> above all other .js references, and references cordova.js as being in the root folder:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
Cordova.js will be added to the /www folder whenever you do a cordova prepare or cordova build. Make sure your pages access that folder for cordova.js.
4. Now let’s test it. Completely replace PhoneGap’s /myApp/www/index.html page with the following lines that start and end with the HTML lines (open index.html from the Finder, not within Xcode):
<!– ***** START BELOW THIS LINE ***** –>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewpoint" content="user-scalable-no, initial-scale=1, width=device-width">
<!-- Set the viewport width to device width for mobile. May introduce problems with iOS 7 on iPhone, though. -->
<meta name="viewport" content="width=device-width">
<title>Hello World test</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
<script>
function onDeviceReady() {
}
</script>
<style type="text/css">
html, body { background-color: #FFFFCC; margin: 0; padding: 0; }
#wrapper { margin:0; width:100%; padding-top: 2em; }
p { color: black; font-family: Helvetica; padding:.5em; margin: .5em; }
p.button { font-size: .8em; border-radius: 8px; border: 1px gray solid; background-color: white; text-align: center; display: block; }
p.note { font-family: Courier; color: black; font-size: .7em; font-style: italic; text-align: left;}
a { text-decoration: none; }
</style>
</head>
<body onLoad="onBodyLoad()">
<div id="wrapper">
<p class="button"><a href="#" onclick="window.open('http://docs.phonegap.com/en/3.3.0/guide_support_index.md.html#Platform%20Support','_blank');"> IAB with location bar (showing URL)</a>
</p>
<p class="note">
<a href="#" onclick="window.<br>
open('http://URL',<span style="color:red;">'_blank'</span>);">
</p>
<p class="button"><a href="#" onclick="window.open('https://groups.google.com/forum/#!forum/phonegap','_blank','location=no');"> IAB without location bar</a>
</p>
<p class="note">
<a href="#" onclick="window.<br>
open('http://URL','_blank',<span style="color:red;">'location=no'</span>);">
</p>
<p class="button"><a href="#" onclick="window.open('http://docs.phonegap.com/en/3.2.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser','_blank','closebuttoncaption=Return');">IAB with "Return" button text change</a>
</p>
<p class="note">
<a href="#" onclick="window.<br>
open('http://URL','_blank',<br>
<span style="color:red;">'closebuttoncaption=Return'</span>);">
</p>
<p class="button"><a href="#" onclick="window.open('http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/','_system');">URL opens in system web browser (must shut down browser then re-open app)</a>
</p>
<p class="note">
<a href="#" onclick="window.<br>
open('http://URL',<span style="color:red;">'_system'</span>);">
</p>
<p class="button"><a href="http://www.phonegap.com">Plain URL (no return to app; must remove app from memory before re-opening app)</a>
</p>
<p class="note"><span style="color:red;"><a href="http://URL"></span>
</p>
</div>
</body>
</html>
5. Save the page. Whenever you make a change to a project’s files, you must do the following steps before opening the project in Xcode. In Terminal:
cordova prepare ios
6. Open the .xcodeproj file in Xcode, then Project > Clean. That purges the old files and makes sure you have the current build. Then you Build and Run in the sim of your choice.
Add the Dialogs Plugin
I don’t like the default JavaScript alerts. The title of the alert gives the filename of the page, like index.html, rather than something nicer (or left empty). The Dialogs plugin gives us a few more options to customize the alert. See the resources for more options than the sample I’m giving below.
Resources:
https://github.com/apache/cordova-plugin-dialogs/blob/master/doc/index.md
http://docs.phonegap.com/en/3.1.0/cordova_notification_notification.md.html#Notification
1. Still in your project’s folder in Terminal, type the add command for the plugin:
cordova plugin add org.apache.cordova.dialogs
2. Add to config.xml above the </widget line>:
<feature name="Notification"> <param name="ios-package" value="CDVNotification" /> </feature>
3. Enter the alert code above the </head> line. The function confirmation() is the code for the alert that the button will pop up; function alertDismissed() is the code that will execute when the user taps the Done button in the alert:
<script type="text/javascript" charset="utf-8">
function alertDismissed() {
// do something, like redirect to an external page, or do nothing
window.open('http://iphonedevlog.wordpress.com', '_blank');
}
function confirmation() {
navigator.notification.alert(
'Here is the alert!', // message
alertDismissed, // callback (execute the above function of this name)
'Your Title Here', // title
'Done' // text of the close button
);
}
</script>
4. Add a button to execute the above confirmation() function. You can put this after the <body> line:
<button onclick="confirmation(); return false;" style="padding:1em; margin=1em; background-color:#ddd;">Pop the alert</button>
If you want more than one notification dialog on a page, then copy the above over and over for each dialog, but give each one different function and callback names to keep them unique for each one containing its own purpose.
Add FastClick.js
You can skip this step if you wish. But I’m adding it to all my projects, so I’m putting the steps here to record my flow.
What does FastClick do? When you tap on a button or link, the system waits 300ms to see if you will tap again (a double-tap). If you don’t tap again within that 300ms period, then it assumes a single-tap and executes. FastClick removes this 300ms delay so your taps execute right away. All my buttons need single-tap only, so this is ideal.
Resource:
https://github.com/ftlabs/fastclick
1. Go to the resource page above and right-click on the Minified link and save it to the hard drive with Save Link As… or similar, saving it as fastclick.js.
2. Copy it to your /myApp/www folder.
3. In all your pages where the file needs to be used, add above the </head> line:
<script type='application/javascript' src='/path/to/fastclick.js'></script>
Change /path/to/fastclick.js per page where needed so it points to the file.
4. In all your pages where the file needs to be used, before the function onDeviceReady() line, add:
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
If onDeviceReady() is not used on the page, enclose the above in <script></script> tags and put it above the </head> line. Now all your taps should result in a faster response time.
5. Sometimes you’ll need FastClick to ignore certain elements. You can do this easily by adding the needsclick class:
<a href="index.html" class="needsclick">Ignored by FastClick</a>
Please read the section below about the /Merges folder.
Add Your Icons
Resources:
http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
https://developer.apple.com/library/iOs/qa/qa1686/_index.html
You may have noticed that the Cordova icon appears on your home screen on your test device. Let’s replace it with your own.
1. Create PNG icons in these sizes and filenames:
iOS 7.0+, iPhone / iPod Touch
icon-60.png, 60x60px
icon-60@2x.png, 120×120
iPad
icon-76.png, 76x76px
icon-76@2x.png, 152×152
iOS 6.1, Spotlight Icon
icon-40.png, 40x40px
icon-40@2x.png, 80×80
iPhone / iPod Touch
icon.png, 57×57
icon@2x.png, 114×114
iPad
icon-72.png, 72×72
icon-72@2x.png, 144×144
iPhone Spotlight and Settings Icon
icon-small.png, 29×29
icon-small@2x.png, 58×58
iPad Spotlight and Settings Icon
icon-50.png, 50×50
icon-50@2x.png, 100×100
2. In Terminal:
cordova prepare ios
2. Double-click on the /myApp/platforms/ios/myApp.xcodeproj file to open it in Xcode.
3. In Xcode, click on the project’s yellow /Resources folder, then on /icons to open it.
4. Right-click on the images in /icons and select Delete and Move to Trash.
8. Drag your own icon images from Finder to that folder. A dialog box pops up: In “Add to targets,” make sure your app name is selected. Select the box for “Copy items into destination group’s folder.” Select the Folders’s radio button for “Create folder references for any added folders.” Click Finish. Your images should now be in the folder.
Add Your Splash Screens
Resources:
http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md
1. The splash screen (“launch screen” by Apple) is the image loaded before the app’s home screen appears. We add splash screen functionality with a plugin. In Terminal, making sure it starts within your myApp folder, add the plugin with:
cordova plugin add org.apache.cordova.splashscreen
(To remove a plugin, type cordova plugin list and view the list of available plugins, then type cordova plugin rm and copy/paste the plugin line at the end ( like cordova plugin rm org.apache.cordova.splashscreen), then hit Enter.)
2. Create your splash screens in the following sizes according to what devices you are supporting:
Default-568h@2x~iphone.png (640×1136 pixels)
Default-Landscape@2x~ipad.png (2048×1496 pixels)
Default-Landscape~ipad.png (1024×748 pixels)
Default-Portrait@2x~ipad.png (1536×2008 pixels)
Default-Portrait~ipad.png (768×1004 pixels)
Default@2x~iphone.png (640×960 pixels)
Default~iphone.png (320×480 pixels)
3. Open your index.html page and add this code to dismiss your splashscreen when the app starts:
function onDeviceReady() {
navigator.splashscreen.hide();
}
4. In config.xml add:
<feature name="SplashScreen"> <param name="ios-package" value="CDVSplashScreen" /> </feature>
5. In Terminal:
cordova prepare ios
6. Double-click on the /myApp/platforms/ios/myApp.xcodeproj file to open it in Xcode.
7. In Xcode, click on the project’s yellow /Resources folder, then on /splash to open it.
8. Right-click on the images and select Delete and Move to Trash.
9. Drag your own splash images from Finder to that folder. A dialog box pops up: In “Add to targets,” make sure your app name is selected. Select the box for “Copy items into destination group’s folder.” Select the Folders’s radio button for “Create folder references for any added folders.” Click Finish. Your images should now be in the folder.
10. Also open the /icons folder and Delete/Move to Trash all the icons there. Shut down the project window.
Note: If you need to remove the platform and add it back, the command will remove all the icons and splash screens as well, and replace them with the Cordova icon and splash screen images. You’ll need to delete those in Xcode and drag yours back.
Test the App in the Simulator
Go ahead and replace the Cordova default files in /www with your own, if you have them. Update the files as noted above. Remove the default folders CLI had created in the /www folder: /js, /css, /img. Put all your project assets there.
1. In Terminal,
cordova prepare ios
2. Double-click on myApp.xcodeproj as before.
3. When Xcode opens, choose the scheme you want (what sim you want to use). Watch carefully. Did you see your splash screen appear? Exit your app in the sim with Hardware > Home. Do you see your myApp icon on the screen? Exit Xcode and the sim.
Test the App in the Device
1. To test the app in an iOS device, you have to be a paid Developer, then set up the online certificates for the device. Only after the certificates have been installed will Xcode recognize your device and add it to the scheme. Otherwise, the scheme will only show what’s available among the simulators.
You connect the device to the Mac and turn the device on; in Xcode, select the scheme for your device, then click on the Play triangle to build and run it. At lower right you can watch the Xcode console update with your app updates. If you don’t see the console, then go to View > Debug Area > Activate Console.
2. There’s a second way to run it in your device. When I plug in my device and type:
cordova run ios
. . . it creates the .dmg file and loads it onto my device. It leaves it up to me to tap the icon on the screen to start it up, unlike Xcode, which loads the app and opens to the app’s home page. I could not figure out how to quit the terminal process, so I used command-w to close the window.
About the /myApp/merges Folder
What if you need to use different versions of pages for different platforms? I needed the home page of my app to be different on Android and iOS. That’s what the /myApp/merges folder is for. The /myApp/merges/ios folder is the same as your /myApp/www folder, so I moved the index.html file to the /merges/ios folder. When I did a cordova platform add android, it created a /merges/android folder. I copied the index.html file there and made the changes for the Android version. So when I do a cordova build ios or cordova build android it will use the correct file for each build.
FastClick.js is not used in some versions of Android. For this reason, I moved the fastClick.js file to /merges/ios, then copied it to /merges/android. I opened the copy in /merges/android and deleted the contents, that way all the links in the html pages would not generate errors.
When styling links for YouTube in the InAppBrowser, onclick=”window.openwindow.open()” works in iOS to open a YouTube link in IAB but not in Android (it didn’t work in my Nexus 7). So I put differnt versions of those pages in /merges/android and /merges/ios, each page with its own link style:
iOS: <a href=”#” onclick=”window.open(‘http://www.youtube.com/watch?v=nxP0wgBf6Zk’, ‘_blank’);”>link</a>
Android: <a href=”http://www.youtube.com/watch?v=nxP0wgBf6Zk”>link</a>
The Android link did not appear in IAB, but that was fine – the user simply used the Back button to return to the app.
For another use, if you have a /www/css folder and want different style sheets for each app, just create a /css folder inside each /merges platform folder (like /myApp/merges/android/css) and put the css there instead of in a /myApp/www/css folder. That will style each platform differently according to your CSS files.
To quickly test this, simply move the /www/index.html file to its /merges/ios counterpart. Open the index.html file and add the following right after <body>:
<p> </p> <h2>This index.html page is in the /platforms/merges/ios folder.</h2>
Go ahead and test in your device with cordova build ios. The above text should appear at the top of the screen.
About the /myApp/hooks Folder
If you open /myApp/hooks, you’ll see a readme text file there. That folder is for adding scripts that will execute as part of your CLI operation. For instance, you can add a before_build script which will automatically add all your plugins before the actual build commences. So each time you create a new app, you’ll copy/paste that file into the new app’s /hooks/before_build folder. I’m not familiar enough with this process to explain it here, but if you already know node.js scripting, you might look into it. For instance, this page gives the hooks steps for automatically creating app icons (requires installation of Homebrew and ImageMagick): https://github.com/AlexDisler/cordova-icon. Other uses would be to add all the usual plugins.
Test Your Code
Ideally, you would have finished all these steps before you began testing your app, but I put them all down here so we could get the Cordova project up and running. I’m putting these steps here for completeness.
1. Double-check that your app meets the HIG (Human Interface Guidelines), the rules Apple uses to determine properly designed apps for the App Store. Link found in the iOS Dev Center online: https://developer.apple.com/devcenter/ios/index.action
2. Double-check that your app does not go afoul of these App Review Guidelines. Link found in the iOS Dev Center online: https://developer.apple.com/devcenter/ios/index.action
3. Make sure your HTML is valid. http://validator.w3.org/
4. Validate your Javascript. http://www.javascriptlint.com/online_lint.php
5. You may want to minify your JS. http://www.minifyjs.com/javascript-compressor/
6. Do image optimization/compression. http://imageoptim.com/
7. Remove the default folders CLI created in the /www folder: /js, /css, /img if you haven’t already.
8. Make sure all pages which use a Cordova API references this in the <head>:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
Don’t just copy/paste the above everywhere; change src=”cordova.js” to ../cordova.js or even ../../cordova.js, depending on the folder.
9. [Personal note] Don’t forget to add the JavaScript search function to the app: http://iphonedevlog.wordpress.com/2013/09/02/easily-add-search-functions-to-your-app/
Update Cordova
1. If you encounter issues with an individual plugin, by all means let your debugging include removing the plugin and adding it again. To do that, follow these steps:
a. In terminal: cordova plugin ls to see the plugins installed. Highlight the plugin you want to remove, and copy it.
b. In terminal: cordova plugin rm and paste in the copied plugin (like this: cordova plugin rm org.apache.cordova.inappbrowser). Hit Enter.
c. To install again, in terminal: cordova plugin add and paste in the copied plugin (like this: cordova plugin rm org.apache.cordova.inappbrowser). Hit Enter.
Note that Cordova does not have a way to update plugins. If you know of an updated plugin, then you simply following the a, b, c steps above to install the new plugin version.
2. If you need to update Cordova 3.x, then do this way:
npm update -g cordova3. To update a particular platform (perform this command one at a time for each platform):
cordova platform update iosAdd Screenshots for App Store
The App Store requires a screenshot for each size of device your app supports. Images must be at least 72 dpi, in the RGB color space, and the file must be .jpeg, .jpg, .tif, .tiff, or .png. Choose up to 5.
3.5-inch Retina Display Screenshots
Default@2x~iphone.png (640×960 pixels)
Default~iphone.png (320×480 pixels)
4-inch Retina Display Screenshots
Default-568h@2x~iphone.png (640×1136 pixels)
iPad Screenshots
Default-Landscape@2x~ipad.png (2048×1496 pixels)
Default-Landscape~ipad.png (1024×748 pixels)
Default-Portrait@2x~ipad.png (1536×2008 pixels)
Default-Portrait~ipad.png (768×1004 pixels)
Here are a few ways to get screengrabs of your app.
I.
1. Connect the device to your Mac.
2. On the device, go to the screen you want to capture.
3. In Xcode, choose Window > Organizer, and click Devices to display the Devices organizer.
4. In the Devices organizer, select Screenshots under the device.
5. Click New Screenshot for each screen you want.
II.
Or, to capture a screenshot on your device, you press the Lock and Home buttons simultaneously. Your screenshot is saved in the Saved Photos album in the iPhoto app.
III.
If you don’t have a device, then you’ll need to do a screen grab of the pages in a browser and knit them together in an image editor.
More about testing
PhoneGap Developer App
Cordova PhoneGap released this app to help you test your app. With this software, you can develop your app on the desktop, then see the changes instantly on your mobile device. There’s no need to re-sign, re-compile, or reinstall your app to test your code. You’ll have access to the device APIs that aren’t available in web browsers.
Resource:
http://phonegap.com/blog/2014/04/23/phonegap-developer-app/
iExplorer App
This app lets you navigate your device’s folder on the desktop. This was good when I wanted to check if the camera shot a picture and what image name it was given. Good also to check the contents of a database. It’s free to use as a demo.
Resource:
http://www.macroplant.com/iexplorer/
Desktop Safari Web Inspector
Using the Safari browser, you can install your app on your iOS device and monitor its usage on your desktop monitor, including console feedback.
Google Chrome Dev Tools
Open Google Chrome, hit the hamburger options icon > Tools > Developer tools, and click on the mobile device icon. Select various devices from the drop-down menu to see your app in different device configurations.
Resource:
http://blog.chromium.org/2014/09/responsive-web-design-with-devtools.html
Other Ways to Test
1. You can run the project in a web server via CLI (although you can’t test all the plugins this way):
cordova prepare ios cordova serve ios
Open a web browser like Chrome or Firefox and paste the following into the URL field:
http://localhost:8000
Open Firebug or Developer tools, then click on the ios link. Run your code thoroughly to look for problems. When finished, click on the Terminal screen to select it, then on Control + C keys to terminate the server.
I noticed that Developer Tools could not find cordova.js using the cordova serve method. That file is created in the /platforms folder. So you can open platforms/ios/www/index.html in a browser to test.
2. For more testing possibilities, use the weinre (Web Inspector Remote) software at http://people.apache.org/~pmuellr/weinre/docs/latest/
3. Nice article: http://www.smashingmagazine.com/2014/09/03/testing-mobile-emulators-simulators-remote-debugging/
Xcode Settings for Deployment to App Store
These are the settings to change in Xcode to produce the file you’ll upload to the App Store. You do these steps after setting up Development and Distribution provisional files online.
1. Double-click on your .xcodeproj file to open in Xcode. Just to the left of the project file list is PROJECT/MyApp and TARGETS/MyApp (that’s how I named it in config.xml <name=). Click on PROJECT/MyApp. You should have these headings in blue: Basic, Levels, and Build Settings, showing that they are selected. Below them is a series of bold headings.
2. For the heading, Base SDK, “Latest iOS” should be selected. This is the latest iOS version this version of Xcode supports.
3. Below the Code Signing heading is Debug and Release. To the right, the “iOS Developer” should be chosen for Debug and “iOS Distribution” selected for Release.
4. Now click on TARGETS/MyApp. Exactly the same selections should be made here as well. Under the Code Signing heading is Provisioning Profile. Choose Distribution provisioning profile in the drop-down.
5. Still under TARGETS/MyApp, click on the General link in the menu bar and read the selections to make sure they are correct. Scroll down and look at the listing of icons and make sure none are missing or wrong. Scroll down further and check out the launch images/splash screens and correct any missing or wrong images there. (I missed 768×1004 and 1536×2008).
6. Also, if you don’t have matching provisioning profiles, you’ll be alerted in this space, and a Fix Issue button will give you an opportunity to make amends.
7. Go ahead and click on the other links in the menu bar to see what’s there.
Back up your files
1. Open Keychain Access (click on the magnifier icon at top right of your desktop and type in “keychain” and select the app). Right-click on the certificates and export each one to your computer (giving each one a name similar to the name in the Keychain Access line), then send it off to a safe backup location. Warning: if these files are lost, you won’t be able to upload successive versions of your apps to the App Store.
2. Back up your password files. Go to /Users/[name]/Library/Keychains and copy the .keychain files there to a safe place. /Library is a hidden folder.
To show the hidden files, type in Terminal:
defaults write com.apple.finder AppleShowAllFiles TRUE
. . . and hit Return. Then type in Terminal:
killall Finder
. . . and hit Return. The desktop will go blank, then after a while will refresh. Open the Documents folder, then in Finder, Go > Enclosing Folder, and see the hidden files in gray, including /Library.
To hide the hidden files, repeat both commands, but substitute FALSE in place of TRUE.
3. Now would be a good time to create a “snapshot” in Xcode of your work at this point in time (in Xcode, File > Create Snapshot). A Snapshot is a copy of the project stored away. You’ll be able to revert to this version at a later date if you need to. If everything is working fine, then do a File > Create Snapshot of your current working project.
You can delete these snapshots by going to Window > Organizer, click on Projects at top, then on the project name at left. After clicking on a Snapshot, click on the Delete Snapshot icon at lower right. This will free up a lot of memory after you’re sure you will no longer need the earlier versions. If you need to revert to an earlier version (snapshot) of the project, you will first create a new folder in Finder, then click on the Restore Snapshot icon to save it to that folder. You’ll have two versions of the project; this way the reverted version will not overwrite the previous version.
4. Fill out the Application Assets Template located here: http://wp.me/pyIb9-1o
5. You’ll need to go online to the Apple Developer site, sign in, and click on the iTunes Connect link. Click on Manage Your Applications and either Add New App, or choose an existing app to upgrade. Follow the steps online and transfer all the information into the fields from the Application Assets Template you just filled out, as well as the screengrabs you made.
You need to finish to the point you see a button saying that it is “Waiting for Binary.” With that status, you are ready to upload a binary.
Upload a Binary to the App Store
1. A binary of the app is the compiled version of the app that is made up of 0’s and 1’s. To compile your app for the App Store, first make sure your device is unconnected.
2. If you made any last-minute changes to the PhoneGap project, do a cordova prepare ios command in a terminal window.
3. In Xcode, do a Product > Clean while holding down the option key.
4. Then set Product > Destination > iOS Device.
5. Then do a Product > Archive and wait for the app to build.
6. The Organizer window should open. Click on Distribute. If all went well, then follow the steps until the app has been successfully validated and uploaded to the App Store. If you get errors, check out the Troubleshooting section of the App Distribution Guide by Apple: https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012582-CH1-SW1
Further Recommended Steps
If you are going to be involved with PhoneGap regularly, keep up to date with the release announcements of upcoming versions, updated plugins, and other news.
Next Steps: http://docs.phonegap.com/en/3.5.0/guide_next_index.md.html#Next%20Steps
PhoneGap Blog: http://phonegap.com/blog/
PhoneGap Twitter feed: http://twitter.com/phonegap
Facebook: http://www.facebook.com/PhoneGap
Join Google Groups: https://groups.google.com/forum/#!forum/phonegap
Credits:
Mac®, OS X®, Apple®, Xcode®, App Store℠, iPad®, iPhone®, iPod® and Finder® are trademarks of Apple Inc.
Filed under: iPhone, PhoneGap Tagged: App Store, app submission, Apple submission certificate, Cordova, inAppBrowser, iPhone, PhoneGap, Provisioning Profiles, Splashscreen API, Xcode 4
