Canarys | IT Services

Blogs

Creating Apps Using Phonegap Framework in IOS

,
Share

Creating apps for different operating system is not a reliability so for reducing developr work for all devices, the phonegap framework comes into picture with a highly responsive for all devices, write program in Javascript/Jquery  and give a build in any platform. So here i am going to demonstrate the “HOW TO GENERATE IOS BUILD USING PHONEGAP IN XCODE”.

Download latest zip file from the below link

http://phonegap.com/install/

and save into your desktop(or anywhere).

before creating your project, make sure u have installed Node.js.

check using terminal  $ npm

if not installed pls install latest from here http://nodejs.org

i downloaded the latest Phonegap file and save it on desktop.

IOS Phonegap

IOS Phonegap

open the terminal from the applications. and open the directory where u saved phonegap file, for ios create a project using below keywords

$ cd desktop/phonegap-2.9.1/lib/ios/bin

bin $ ./create ~/desktop/projectfolder  bundleidentifiername projectname

EX :

bin $ ./create ~/desktop/HelloWorld  com.hello  Helloworld

and hit enter and without any error you will get your project on dektop inside project folder.

make sure it contains all required folder ex: cordova, cordovelib, www folders

open with xcode the generated project and give a build without any error u will get a cordova welcome screen.

IOS Phonegap

 

your project folder contains www folder inside that folder all required folder are there for project, if u copy paste any file/image under www folder that will reflect into your xcode also.

now u can add any new html/css/js file under www folder.

IOS Phonegap

now open www folder under that open index.html file in the project folder and modify the code as your requirement.

if u want to call any new html page inside the html page use below line of code

 window.document.location.href=’new.html’;   // for calling new html file

it should be under www folder

for calling any javascript file or css file  in html page use below line of code 

  

href=“index.css” rel=“stylesheet” type=“text/css” />

 

if files are under subfolder inside the www main folder then mention the file path also
ex:

href=subfolder/index.css” rel=“stylesheet” type=“text/css” />

  type=“text/javascript” src=“subfolder/cordova.js”>

Useful links for learning Javascript, HTML and CSS 

1. w3schools.com

Phonegap Resources link : docs.phonegap.com/en/3.4.0/index.html

now we done with the basic example of helloworld in ios using phonegap.

In Next part of the tutorial we will learn audio recording and playing using phonegap………

Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.