Most PhoneGap “Hello World” examples make you go through the task of configuring PhoneGap on your system and making sure your system PATH is set with Android Virtual Device support and a bunch of command line interfacing… and it is CONFUSING for newcomers!
What if you just want to write your code… test your code in browser… then compile everything with PhoneGap Build services?
Well, then you read this tutorial!
To complete this example, you will need:
- Google Chrome
- Ripple Emulator Plugin from http://emulate.phonegap.com/
- ZIP file package
- An IDE to edit the code
- A web server (like IIS, APACHE, whatever)
- Be sure you have some sort of web server running locally. I recommend XAMPP as it is cross-platform and has probably more than you need to get started. Install it and make sure it is all working. The reason you will want this is that you can better test via browser emulation in this way and will avoid XMLHttpRequest cross-origin issues.
- http://localhost/ in the browser should pull up a page. Make sure this is working.
- Install an IDE. It can truly be any IDE that can edit HTML/CSS/JS. I’m using Dreamweaver in this example. Honestly – any IDE – Notepad works.
- Create a new directory within your local web files. For me, this is C:\xampp\htdocs\phonegap and this will map to http://localhost/phonegap/ in the browser.
- Have a look at the zip package I have provided. You will find index.html and cordova-2.6.0.js and a config.xml– this is ALL YOU NEED! Place these files within your phonegap directory.
- Run this within the Chrome Ripple emulator. You’ll see an alert fire.
- Feel free and play with any other API’s or CSS styling or whatnot.
- You can package these files up in a zip and send them up to PGP to compile.
- EASY!
Not bad, right? :)
Here’s the index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript">
var showMessageBox = function() {
navigator.notification.alert("Hello");
}
function init(){
document.addEventListener("deviceready", showMessageBox, true);
}
</script>
</head>
<body onload="init();">
<p>content</p>
</body>
</html>
What does the config.xml specify? Is it optional. When I generate the PhoneGap project with the “create” script, I don’t get “config.xml”. Just wondering, I got it to work without the config file.
Nevermind, I got it, it’s a file that PhoneGap Build uses. The info I found is here: https://build.phonegap.com/docs/config-xml