-
Notifications
You must be signed in to change notification settings - Fork 6
Tips and Tricks
You can also run weinre locally. We recommend to check Getting Started with weinre.
Weinre console is useful for JS debug on device. For example:
> StatusBar.overlaysWebView(false);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/
PhoneGap Developer APP embed Core Cordova Plugins, you can check the list of them on its github repository: https://github.com/phonegap/phonegap-app-developer/blob/master/config.xml
You also can fork it and add Plugins to fit your project: http://docs.phonegap.com/references/developer-app/custom-build/ios/
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
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
Seems a good alternative but I didn't test it yet. Nice post here for more details: debugger-gapdebug.
https://taco.visualstudio.com/en-us/docs/run-app-apache/
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 class="scrollable">
<div class="scrollable-content section">
<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 && 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 && 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">Recuperar minha senha</button>
</form>
</div>
</div>
</div>And the corresponding controller.
submitForm: function(isValid) {
$scope.submitted = true;
if (!isValid) {
AppFunc.Toast('Confere os erros acima');
}
else {
$scope.Forgot.sendMail();
}
},forgotForm.email.$invalid && !forgotForm.email.$pristine && submittedSince 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.
The AutoHideSplashScreen config isn't supported on android, so to fix this, the SplashScreenDelay must be increased to allow hide manually.
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();
}
}