Web Development Guides and Tutorials

  • facebook
  • twitter
  • github

Phone Gap Essentials

10th Nov 2015 21:26:20 Progress & Learning, Javascript by Kerry Owston

Phone Gap Getting Started

Phone Gap Build is a service that uses familiar front end languages like HTML5, CSS3 and JavaScript to build mobile apps. I have been exploring the process of creating an App Using Phone Gap Build. I’ve been promising myself I will build an app so I will be giving this method a try to see what I can achive.

Right now what I really want/need to be able to do is interact with a database of some kind and right now I really don’t know if Phone Gap and it’s related technologies will allow me to do this but I guess I will figure it out and a least learn how to create basic website like apps along the way.

So far I have been using the Adobe Phone Gap Build to turn what is essentially a website into an App that will work on iOS, Android and Windows. I’ve got this working and now have a working testing version on my mobile. 

To create an app this way you will need an adobe account, you will need this to sign into the Phone Gap Build service and you will need the website files to transform into your app. These files should ideally feature a design optimised for a good mobile experience. No tiny small buttons for fat fingers and that sort of thing. 

To build your app from your website files it is almost as simple as zipping it up and uploading, well it actually is that simple and you can get away with doing just that but to really make the most of your phones features you will need to include an XML file.

Name your XML file config.xml and place it in the root alongside your index.html file (which should be in the root of your project BTW)
Use your XML file to control things like:

  • Access to features like camera and geo location
  • Control Orientation
  • Set up icons - even tell iOS wether to give your icon that sheen look or not
  • Targeting specific devices and versions

There is a whole load of stuff you can set up, find out more about the phone gap xml configuration possibilities

Here is what a real live phone gap configuration XML file actually looks like:

<?xml version="1.0" encoding="UTF-8"?>
	<widget xmlns = "http://www.w3.org/ns/widgets"
		xmlns:gap = "http://phonegap.com/ns/1.0"
		versionCode="1"
		version   = "1.0">
		<name>My First App</name>
		<description>
APP Description</description>
		<author href="website.com" email="">
Your Name
		</author>
		<preference name="phonegap-version" value="3.3.0" />
		<preference name="fullscreen" value="false" />
		<preference name="target-device" value="universal" />
		<preference name="webviewbounce" value="false" />
		<preference name="DisallowOverscroll" value="true"/>
		<preference name="prerendered-icon" value="false" />
		<preference name="disallowOverscroll" value="true" />
		<preference name="orientation" value="portrait" />
		<preference name="stay-in-webview" value="true" />
		<preference name="ios-statusbarstyle" value="default" />
		<preference name="detect-data-types" value="true" />
		<preference name="exit-on-suspend" value="false" />
		<preference name="show-splash-screen-spinner" value="true" />
		<preference name="auto-hide-splash-screen" value="true" />
		<preference name="disable-cursor" value="false" />
		<preference name="splash-screen-duration" value="5000" />
		<preference name="android-minSdkVersion" value="14" />
		<preference name="android-targetSdkVersion" value="14" />
		<preference name="android-installLocation" value="auto" />
		<preference name="load-url-timeout" value="20000" />
		<preference name="KeepRunning" value="true"/>
		<preference name="BackgroundColor" value="0xffffffff "/>
		<preference name="DisallowOverscroll" value="false"/>

		<gap:platform name="android" />
		<gap:platform name="ios" />
		<gap:platform name="winphone" />

		<feature name="http://api.phonegap.com/1.0/network"/>
		<feature name="http://api.phonegap.com/1.0/camera"/>
		<feature name="http://api.phonegap.com/1.0/geolocation"/>
		<feature name="http://api.phonegap.com/1.0/file"/>

		<gap:plugin name="org.apache.cordova.camera"  />
		<gap:plugin name="org.apache.cordova.geolocation"  />
		<gap:plugin name="org.apache.cordova.device"  />
		<gap:plugin name="org.apache.cordova.dialogs"  />
		<gap:plugin name="org.apache.cordova.splashscreen"  />
		<gap:plugin name="org.apache.cordova.network-information"  />
		<gap:plugin name="org.apache.cordova.inappbrowser"  />
		<gap:plugin name="org.apache.cordova.console"  />
		<gap:plugin name="org.apache.cordova.network-information"  />

		<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
		<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
		<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
		<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
		<icon src="res/icon/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
		<icon src="res/icon/ios/icon-120.png" gap:platform="ios" width="120" height="120" />
		<icon src="res/icon/ios/icon-152.png" gap:platform="ios" width="152" height="152" />
		<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
		<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
		<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
		<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
		<icon src="res/icon/android/icon-144-xxhdpi.png" gap:platform="android" gap:density="xxhdpi" />
		<icon src="res/icon/windows-phone/icon-62-tile.png" gap:platform="winphone" />
		<icon src="res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background" />

		<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
		<gap:splash src="res/screen/ios/screen-iphone-landscape.png" gap:platform="ios" width="480" height="320" />
		<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
		<gap:splash src="res/screen/ios/screen-iphone-landscape-2x.png" gap:platform="ios" width="960" height="640" />
		<gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
		<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024 " />
		<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
		<gap:splash src="res/screen/ios/screen-ipad-portrait-2x.png" gap:platform="ios" width="1536" height="2008" />
		<gap:splash src="res/screen/ios/screen-ipad-landscape-2x.png" gap:platform="ios" width="2048" height="1496" />
		<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
		<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
		<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
		<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
		<gap:splash src="res/icon/android/icon-144-xxhdpi.png" gap:platform="android" gap:density="xxhdpi" />
		<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
		<gap:plugin name="com.phonegap.plugins.barcodescanner" />

		<access origin="*" subdomains="true" />
	</widget>

The Phone Gap Rabbit Hole

Of course there is a rabbit hole, in programming there is always a rabbit hole.
The Phone Gap course I followed to get to this point got me thinking I need to learn more about JavaScript because I’m just not acceptable in this area. But then I saw this other course about using Command line to learn Phone Gap so I was like oooo interesting but 5 min of this only made me feel even more inferior because I neither know enough about Command line or this other thing that is everywhere called node.js, something that sounds amazing in a way that I don’t really know how or why. So how can that be? Well amongst all the descriptions of what node.js does which I rally don’t understand the keywords I see are JavaScript and server and it is this that gives me hope that i can complete my goal of saving data to a database of some kind. 

Phone Build does after all work with JS libraries and frameworks I’m told.

Bottom Line - need a / a better grasp of:
JavaScript
ComandLine 
Node.js

Actually doesn’t seem so bad now I have written it down.