Tips and Tricks

Debug PhoneGap apps while they are running on your device

Remote debugging with weinre

[Remote Debugging Tools]

You can also run [weinre] locally. [weinre]: http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/ [Remote Debugging Tools]:http://docs.build.phonegap.com/en_US/debugging_remote_debugging_tools.md.html#Remote%20Debugging%20Tools

PhoneGap Developer App

the PhoneGap Developer App. The PG Developer App is a “shell” application that you can install on a real device (both Android and iOS with Windows Phone coming soon) and test with a local copy of your code. You can skip the SDK. You can test iOS on Windows. All you need is the core PhoneGap CLI

http://www.raymondcamden.com/2014/04/21/PhoneGap-Developer-App http://app.phonegap.com/

Debugging iOS PhoneGap Apps with Safari's Web Inspector

Note that you can only inspect UIWebView content in apps that were transferred to a device from XCode.

http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html

Chrome Remote Debugging

If you are doing Android PhoneGap debugging and have an Android 4.4 device and Chrome 30+, you can use the new WebView Debugging tools added in Android 4.4. If you are using Cordova 3.3 or higher, this is already supported, and only requires the Debuggable flag in your AndroidManifest.xml.

https://developer.chrome.com/devtools/docs/remote-debugging

Handling Form Validation

AngularJS Form Validation

Inspired by the AngularJS Form Validation we'll prefer:

• client side validation
• use the built in Angular form properties
• show errors after submitting the form

Below an example of form template.

<div bs-panel title="Esqueci minha senha">
	<form name="forgotForm" ng-submit="Forgot.submitForm(forgotForm.$valid)" novalidate>
		<div class="form-group" ng-class="{ 'has-error' : forgotForm.email.$invalid && !forgotForm.email.$pristine && submitted }">
			<label>Email</label>
			<input type="email" name="email" ng-required="true" placeholder="[email protected]" ng-model="Forgot.informations.mail" class="form-control" />
			<p ng-show="forgotForm.email.$invalid && !forgotForm.email.$pristine && submitted" class="help-block">E-mail inválido.</p>
		</div>
		<div class="form-group">
			<label>Mensagem</label>
			<textarea rows="4" placeholder="Mensagem opcional" ng-model="Forgot.informations.message" class="form-control"></textarea>
		</div>
		<button class="btn btn-primary btn-block" ng-disabled="forgotForm.$invalid">Recuperar minha senha</button>
	</form>
</div>

And the corresponding controller.

submitForm: function(isValid) {
	$scope.submitted = true;
	if (!isValid) {
		AppFunc.Toast('Confere os erros acima');
	}
	else {
		$scope.Forgot.sendMail();
	}
},

Angular Form Properties $valid, $invalid, $pristine, $dirty

forgotForm.email.$invalid && !forgotForm.email.$pristine && submitted

Angular Validation Rules

Disabling HTML5 Validation, novalidate

Disabling the Submit Button, ng-disabled

Showing an Error Message, ng-show

Adding Conditional Classes, ng-class

Since we are using Bootstrap, we will use the classes they provide (has-error). This will get us that nice error and color around our form-group.

Hide white splash screen on Cordova

The AutoHideSplashScreen config isn't supported on android, so to fix this, the SplashScreenDelay must be increased to allow hide manually.

source: http://stackoverflow.com/questions/20339647/phonegap-build-ios-app-has-blank-white-screen-after-splash-screen

We should use the following config on config.xml:

<!-- Do not auto hide splash on iOS -->
<preference name="AutoHideSplashScreen" value="false" />
<!-- Do not auto hide splash on Android -->
<preference name="SplashScreenDelay" value="10000"/>

in app www/js/index.js:

onDeviceReady: function() {
	if (navigator.splashscreen) {
		navigator.splashscreen.hide();
	}
}