Exciting Announcements at WWDC 2012: New MacBook Pro, Mountain Lion, and iOS 6
The cat is finally out of the bag. Apple announced some amazing new hardware and software at the WWDC 2012 keynote. There were some expected...
1 min read
PhoneGap is an open-source framework for quickly building cross-platform mobile apps using HTML and JS. It is used for building something called hybrid apps which are a mix between native smartphone apps and web apps.
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 :
All of the coding is done using HTML, CSS, JavaScript. The files and assets are present in the folder “www”. The app is initialized from “index.html” file. Running the app will show the following screen:
Open “index.html” and write the following code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
console.log('Ready to use');
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Hello World !!!!!</h1>
<br />
<ol>
<li style="color:red">Red</li>
<li style="color:green" >Green</li>
<li style="color:yellow" >Yellow</li>
<li style="color:blue" >Blue</li>
</ol>
<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>
</p>
</body>
</html>
Run the project :
We have made a simple App using phonegap. Happy Coding !!!!!!!!!!!!!!!!!
How Businesses can Use Twitter
Have you ever noticed just how many businesses and brands are starting to pop up on the various different social media platforms and want to know if...
How Golang is thriving in the software industry
Choosing the right programming language is the most crucial thing for the developers in today’s time. You need to choose a language which is robust...