December 12, 2013

PhoneGap Installation and running Sample Application on iOS



Pre-requisites


Softwares

     iOS SDK
     Xcode command line tools
     Node.js
     Cordova (Zip)

Setup Environment Variables


     NODEJS_HOME
     CORDOVA_IOS

PATH Environment Variable Update

1) Open a terminal prompt

2) Type sudo vi /etc/launchd.conf (note: this file might not yet exist)

3) Put contents like the following into the file

# Set environment variables here so they are available globally to all apps
# (and Terminal), including those launched via Spotlight.
#
# After editing this file run the following command from the terminal to update
# environment variables globally without needing to reboot.
# NOTE: You will still need to restart the relevant application (including
# Terminal) to pick up the changes!
# grep -E "^setenv" /etc/launchd.conf | xargs -t -L 1 launchctl
#
# See http://www.digitaledgesw.com/node/31
# and http://stackoverflow.com/questions/135688/setting-environment-variables-in-os-x/
#
# Note that you must hardcode the paths below, don't use enviroment variables.
# You also need to surround multiple values in quotes, see MAVEN_OPTS example below.
#

# Nodejs Installed path. By default the path is your home directory->.npm directory path
setenv NODEJS_HOME $HOME/.npm

# Choose the location where you have unzipped the cordova iOS folder
setenv CORDOVA_IOS /cordova-ios


PATH Environment Variable Update

create .bash_profile file in your home folder
Enter the following content

#!/bin/bash
export PATH=$PATH:$NODEJS_HOME:$CORDOVA_IOS/bin

Install phonegap

If you are behind a proxy please set the proxy to npm (Node.js) command
Syntax:-
(For HTTP) $ npm config set proxy http://proxy.company.com:port
(For HTTPS) $ npm config set https-proxy http://proxy.company.com:port

Run the install command

$ sudo npm install -g phonegap
$ sudo npm install -g cordova

Note: If you face any errors
  • Remove the .npm directory from the home folder
  • Upgrade npm (sudo npm install -g npm)
  • Clear the global npm cache (sudo npm cache clear)
  • Clear the user npm cache (npm cache clear)

Create Project

Syntax: phonegap create
$ phonegap create hello com.example.hello "HelloWorld"

By default the skeleton folder structure will be created.
Note: if you didn’t get the default skeleton (www, js, css folders and other files), please copy from the sample-hello-world project of phonegap to your www project folder

$ cd hello
$ cordova platform add ios
$ phonegap build ios



Adding Plugins to your project

Pre-requisites

                       Install Git
Tip: If you are behind a proxy then please add it your configuration
Syntax: git config —global http.proxy http://proxyusername:proxypassword@server.company:port
Ex: git config —global http.proxy http://abc:123@xyz.com:8081

                       Add git\bin to your PATH environment variable
                       You need to download the git files from https://git-wip-us.apache.org. So make sure that the above specified URL is not blocked by your firewall
                       Navigate to your project directory in command prompt by changing the directory
cd

Note:
If you have some issues download cordova zip (unzip cordova-ios zip) and copy it to your home directory-> ~/.cordova/lib/ios/cordova/3.2.0/

Install Plugin

Syntax: phonegap local plugin add
Ex:- phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Tip: If this doesn’t run then try with cordova
Syntax: cordova plugin add
Ex:- cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Add the Feature to config.xml (Ex: Accelerometer)

    name="Accelerometer">
        name="ios-package" value="CDVAccelerometer" />
   


Remove Plugin

Syntax: phonegap local plugin remove
Ex:- phonegap local plugin remove https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Tip: If this doesn’t run then try with cordova
Syntax: cordova plugin remove
Ex:- cordova plugin remove https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Alternative
You can install “plugman” to plug and play with plugins by following this link
Using Plugman to Manage Plugins
Note: plugman doesn’t take proxy

References

Post a Comment

Featured Post

Java Introdcution

Please send your review and feedback to psrdotcom@gmail.com