PhoneGap Starter (for PhoneGap Build)

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!

ripple

To complete this example, you will need:

  1. 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.
  2. http://localhost/ in the browser should pull up a page. Make sure this is working.
  3. 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.
  4. 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.
  5. 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.
  6. Run this within the Chrome Ripple emulator. You’ll see an alert fire.
  7. Feel free and play with any other API’s or CSS styling or whatnot.
  8. You can package these files up in a zip and send them up to PGP to compile.
  9. EASY!

pgbuild

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>

2 thoughts on “PhoneGap Starter (for PhoneGap Build)”

  1. 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.

Comments are closed.