In this post, we are going to create a simple basic app using PhoneGap. Phonegap is a software development framework which is used to create cross-platform mobile applications. Phonegap is leading framework which is used to create cross-platform apps. To start with PhoneGap you must have a practical knowledge of HTML, CSS, and JS. You can extend it features using Node.js. PhoneGap produces apps for all popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile OS etc.
What we are going to cover ?
- Running PhoneGap, creating a new project.
- Editing the project
- Installing PhoneGap client on mobile.
- Running the app on the mobile
- Uploading the project to GitHub
- Deploying app from Phonegap Build
Presuming that you have already installed PhoneGap and git in your system, Let's move forward in creating the application. If you haven’t installed yet, download PhoneGap from here and Git for here. Install it as normal application software and you are good to go.
Step 1
Open PhoneGap by navigating to start > programs > PhoneGap Desktop. After the program launches, click on the plus icon, then click on create a new PhoneGap project. Choose the path, give an appropriate name with an ID as well. Finally, click on the create project button.
Step 2
Now you will see that your project is already in running state. If you are connected to a WiFi then it's well and good, else create a hotspot from your mobile and then connect your machine to that hotspot. After connecting click on stop icon beside your project, then again click on the play button. You will see at the bottom like “Server is running on http://192.168.xxx.xxx:3000“. Now to edit the project you need to navigate to the path where you have setup your PhoneGap project, i.e. your LOCAL Path. Click on the link under the local path of your project. In the window which opens, navigate to the www folder. This is basically the folder where you can make changes to the app. Inside the www directory, you can see a file named index.html, open it with any standard editor (Notepad, Notepad ++, Sublime..). Now replace it completely with the bellow code which I’ve shared. It is a simple code which uses all three CSS, HTML and JS. Save the file after replacing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<title>My First Phonegap Application</title>
<style type="text/css">
body{
background-color:beige;
}
.app h1{
text-align: center;
}
.app > .container{
border-style: solid;
border-width: 1px;
border-radius: 5px;
box-shadow: 1px 1px black;
margin: 10px;
}
.app > .holder{
text-align: center;
}
.holder > button{
border-style: solid;
border-width: 1px;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 1px blue;
}
</style>
<script type="text/javascript">
function fun1()
{
alert("You have cliked on Button 1");
}
function fun2()
{
alert("You have clicked on Button 2");
}
</script>
</head>
<body>
<div class="app">
<h1>My First App</h1>
<div class="container">
This is the dummy content of my first app. I've purely developed it using basic CSS and HTML.
</div>
<div class="holder">
<button onclick="fun1()">Click Me</button>
<button onclick="fun2()">Click Me</button>
</div>
</div>
</body>
</html>
Step 3
In Google Play search for “PhoneGap Developer“, it is basically the mobile client of PhoneGap. This app can be thought of an emulator, which runs the app before deploying it using the PhoneGap build. Download it and install it.
Step 4
After installing the PhoneGap Developer app, open it. You can see the server address field. Inside that field, type the address where the server of your PhoneGap desktop client is running. This IP can be found from the Desktop client.
After typing the server address, click on connect. Once downloaded all the files from the local server (PhoneGap Desktop Client), It will load up the app. There you can see it working. Bellow are some screens of the dummy app.
Step 5 and Step 6 Will be covered in another post, since these two steps require a length process. Specially uploading the code to GitHub. But for time being you can test(debug) your apps directly in your mobile using the PhoneGap Developer App. Hope this post helped. Share this with your friends. Got any queries, drop them in the comment section.
