PhoneGap is an hybrid apps which are a mix between native smartphone apps and web apps.. It is used for building something called
Building an app for all famous smartphone platform – iOS, Android, Windows Mobile etc requires different frameworks and languages. This increases the cost of development and also the effort involved in maintaing an app. PhoneGap solves this by using web technologies to build mobile apps. While PhoneGap works great for simple apps, native apps are still the required for complex apps that need more control over devices which hybrid apps do not provide.
At NewGenApps, we develop all sorts of apps including cross-platform hybrid apps using frameworks like PhoneGap, Titanium. We understand it might be a bit overwhelming for a developer to get started with these platforms. Here’s a small Tutorial explaining how to build a simple Phonegap app.
Developing a Sample Application using Phonegap for iOS Platform
1. Prerequisites :
- Install Xcode from the Mac App Store or Apple Developer Downloads
- Install the Xcode Command Line Tools (Xcode Preferences -> Downloads -> Components -> Command Line Tools -> Install).
- Download the latest release of Apache Cordova
○ extract its contents
○ Apache Cordova iOS is found under lib/ios
2. Create a New Project:
- Launch Terminal.app
- Drag the bin folder (located in the permanent folder location of Cordova, from the “Install CordovaLib” section above) to the Terminal.app icon in your Dock, it should launch a new Terminal window
- Type in ./create <project_folder_path> <package_name> <project_name> then press “Enter”
<project_folder_path> is the path to your new Cordova iOS project (it must be empty if it exists)
<package_name> is the package name, following reverse-domain style convention
<project_name> is the project name
- Locate your new project folder that you just created
- Launch the .xcodeproj file in the folder
The project will look like this :
3. Writing Code :
Open “index.html” and write the following code :
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” />
document.addEventListener(“deviceready”, onDeviceReady, false);
console.log(‘Ready to use’);
<h1>Hello World !!!!!</h1>
<li style=”color:green” >Green</li>
<li style=”color:yellow” >Yellow</li>
<li style=”color:blue” >Blue</li>
<p>Don’t know how to get started? Check out <em><a target=”_blank” href=”http://www.phonegap.com/start#ios-x4“>PhoneGap Start</a></em>
Run the project :
We have made a simple App using phonegap. Happy Coding !!!!!!!!!!!!!!!!!