- PhoneGap is the open source framework that gets you building amazing mobile apps using web technology
- With PhoneGap you can build beautiful cross-platform apps using HTML, CSS and Javascript.
- PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.
- The PhoneGap CLI is the most powerful and flexible way to use PhoneGap. Built on top of Apache Cordova, you can create, serve, compile, and run apps from command-line terminal. Written in Node.js and distributed on npm, you can use the CLI on any platform and integrate it into any web development workflow.
Follow these steps to install PhoneGap and get an app running on your Android mobile device and browser.
Step 1: Download and Install PhoneGap Desktop App or you can also use NPM to install the PhoneGap CLI npm install -g phonegap
Step 2: Install the PhoneGap Developer Mobile App to run the PhoneGap project on your mobile device without code-signing or compiling
Step 3: Create your new PhoneGap app
Open the PhoneGap Desktop App and click the plus sign and select Create New PhoneGap project as shown below.
You will be prompted with the template list dialog as shown below, where you can choose to create an app based on a sample project.
Select Hello World Template and click on Next Button
Now choose the Local Path, Name and Optional Identifier and click on Create Project
Now you should see the project name marked with a left green border play button next to it and a green bar at the bottom. You should also see the server address indicating its running and active.
Step 4: Preview the app
You can use the PhoneGap Developer App paired with PhoneGap Desktop to immediately preview your app on a device without installing platform SDKs, registering devices, or compiling code. Type the Service address in the PhoneGap Developer app and click on Connect. PhoneGap Desktop starts a small web server to host your project and returns a server address , then you can enter into the PhoneGap Developer app running on your mobile device or in your desktop browser.
Now let us make some updates to the index.html file which is available under project folders www directory In my system this is the path C:\Users\Girish\PhoneGapProjects\myFirstApp\www
Let’s start by changing the PHONEGAP text that’s displayed in the app from <h1>PhoneGap</h1> to <h1>Welcome to PhoneGap</h1> . Now check your mobile device where the PhoneGap Developer app is running and you will see your application reload and automatically display the new text
References
- http://docs.phonegap.com/getting-started/
Learn more about PhoneGap concepts in the upcoming PhoneGap blog articles.
Happy Learning!