I'm completely new to phonegap. I started with phonegap build - by running 'npm install -g phonegap'.
My system is windows7.
When i run the command 'phonegap run android' i'm getting console messages as follows:
[phonegap] detecting Android SDK environment..
[phonegap] using the local environment
[phonegap] compiling Android...
[phonegap] successfully compiled Android app
[phonegap] trying to install app onto device
[phonegap] successfully installed onto device
I can see the app running on my device (sony Xperia -E).
But when i put in my javascript code:
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log('Received Event: ' + id);
//HERE
alert(navigator.camera)
}
i keep getting alert which say 'undefined'. I checked the same with navigtaor.geolocation, and it wasnt undefined.
I guess it something to do with camera plugin. Am i right?
Please Help
Thanks Forwards
You have to add these things:
--> app/res/xml/plugins.xml
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
--> app/AndroidManifest
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
After looking itno this project i figured out where was my mistake
I tried to use the 'ondeviceready' eventhandler which comes with index.js.
Dont know why yet, but this handler fires when camera is undefined.
After i specified my own handler on the page
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
alert(navigator.camera);
}
camera became defined
It is supposed to have the cordova-plugin-camera plugin added to your PhoneGap/Cordova project, so just this way you'll get the example working.
See the right command:
cordova plugin add cordova-plugin-camera
Before running phonegap application, make sure you add the lib:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
If you omit loading the plugin before building the app it will not work, I also had problems sometimes with installed plugins, so if you did install them, try removing and re-adding them, that worked for me. You can check what plugins are installed by:
phonegap local plugin list
For more information please visit: Official Phonegap Documenattion
Regarding: navigtaor.geolocation it is a standard HTML5 call so if the geolocation plugin is not installed (at least on Android) it will be interpreted as a standard HTML5 geolocation call.
This worked for me, I guess someone needs to make a release.
cordova plugin remove cordova-plugin-camera && cordova plugin add https://github.com/apache/cordova-plugin-camera
Related
When using the NFC library the Ionic docs recommend
(https://github.com/chariotsolutions/phonegap-nfc)
(https://ionicframework.com/docs/native/nfc) I get a ''plugin not installed'' error when trying to reach the code in my component calling the ndef or nfc providers on my Android One Plus through the 'ionic serve --devapp' CLI command. It also says the devapp does not support this plugin, but I am unclear about how I am supposed to go about using this package testing wise in that case.
After specifying version 4 as per suggestion of this post for Ionic 3 I got a different error. This is with rxjs-compat installed and none of the nfc/ndef code actually used aside the imports in the module and component, and the injection into the constructor.
This is using "import {Ndef, NFC} from '#ionic-native/nfc';" instead of /nfc/ngx like above.
Uncaught TypeError: Object(...) is not a function
at index.js:405
at Module../node_modules/#ionic-native/nfc/index.js (index.js:599)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap:84)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
When I try to build the app instead of serving it with the devapp I come across this (perhaps unrelated) error, even though I am running the app in Android Studio on Windows 10 and have both my Java, Android and Gradle paths defined in my environment variables.
ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_181
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
I have added the imports and the provider in the app module.
import {Ndef, NFC} from '#ionic-native/nfc';
#NgModule({
...
providers: [
NFC,
Ndef,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
This is how I inject the providers into my class.
import { Component } from '#angular/core';
import {ToastController} from '#ionic/angular';
import {Ndef, NFC} from '#ionic-native/nfc';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private nfc: NFC, private ndef: Ndef, private toast: ToastController) {
}
Maybe I am completely on the wrong path about this, but following the documentation or any of the suggestion threads available on similar topics have not lead anywhere. Am I approaching this wrong?
EDIT: After running everything in a new project and making sure I go through each and every step without making any errors, I again end up with the INSTALL PLUGIN ERROR, like such.
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.warn]: "Native: tried calling NFC.removeNdefListener, but the NFC plugin is not installed."
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.log]: "Angular is running in the development mode. Call enableProdMode() to enable the production mode."
[ng] [console.log]: "calling _sync"
[ng] [console.error]: "ERROR" "plugin_not_installed"
[ng] [console.info]: "[WDS] Live Reloading enabled."
[ng] [console.log]: "calling _reload"
[ng] [console.log]: "done _reloading"
[ng] [console.log]: "Ionic Native: deviceready event fired after 836 ms"
This error appears in my console only when I open up the Android version of the app in DevApp after serving it with serve --devapp. It does not appear when I run it in the browser, it then just gives me the ''Cordova'' not available error, which I imagine is standard for plugins that don't work on certain devices. This is done following the exact step by step process, including the code in the ionic docs. https://ionicframework.com/docs/native/nfc
EDIT2: It might have to do with an XML processing error. When running through the same steps as before I came across an error I dismissed earlier when installing the plugin due to it resolving itself after installing both the iOS and Android platforms on Cordova. The error below happens after running the 'ionic cordova plugin add phonegap-nfc' command. The plugin however DOES install, and is listed under 'cordova plugin list' afterwards, but the installation might not be done completely correctly. The plug-in is not listed under the plugins in config.xml for example.
Failed to install 'phonegap-nfc': Error: Unable to graft xml at selector "/manifest/uses-sdk" from "C:\Users\cliem\Desktop\dev\nfctest\nfctest2\platforms\android\app\src\main\AndroidManifest.xml" during config install
at ConfigFile_graft_child [as graft_child] (C:\Users\cliem\Desktop\dev\nfctest\nfctest2\node_modules\cordova-common\src\ConfigChanges\ConfigFile.js:122:19)
Long story short, don't use a Java version over 8. Nfc plugin does not work with ionic serve --devapp and needs to be tested with ionic cordova run android instead. Console needs to be read out from chrome://inspect.
If you have the latest version of cordova which is 9.0.0, try
$ sudo npm uninstall -g cordova to uninstall it and install in back again with a previous version
$ sudo npm uninstall -g cordova#8.x
This worked for me
I've written a small application to test the working of cordova app on XDK.
The source code is same as this question
However, I am attaching the code here :
(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Login */
$(document).on("click", ".uib_w_9", function(evt)
{
//intel.xdk.notification.showBusyIndicator();
/*$.post("http://url/test.php", {test:'1'},
function(res){
alert(res);
}
);*/
$.ajax({
beforeSend: function(){
intel.xdk.notification.showBusyIndicator();
},
type: "GET",
url: 'http://url/test.php',
data:{test:'1'},
success: function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
error:function(res){
alert(res);
intel.xdk.notification.hideBusyIndicator();
},
dataType: 'text'
});
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
This is the JS file of the application.
The screenshot of the app in XDK emulator :
Now When I do a build of the app using XDK cloud, I get a .apk file.
On uploading the file to GenyMotion Emulator, screen below :
The click doesn't do anything, nor does the showBusyIndicator() show, nor the alert appear.
What am I missing and what is going wrong ?
I've plans to use this ide for a proper project and hence the testing, some help will be appreciated.
UPDATE
I did a Cordova Hybrid App build initially and that caused the problem.
When I did a legacy android build, then the problem was solved.
So what do I need to do to get it to work with the Cordova Build ?
Build Page :
There is a known issue with AJAX when Intel XDK builds apk with Cordova CLI version 4.1.2. on Android version > 4.4
There is a workaround, go to Project Settings -> Build Settings -> Android, change Cordova CLI version from 4.1.2 to 3.5 and AJAX should work.
Per the Cordova documentation for version 3.5:
http://cordova.apache.org/docs/en/3.5.0/cordova_events_events.md.html#Events
I used the following code in an attempt to disable the back button. The onDeviceReady event fires but the back button event does not.
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
}
Amongst other interesting messages I am getting this message in my console:
exec() call to unknown plugin App.
I've seen several answers to this issue including the following to edit the config.xml file and add this:
<feature name="App">
<param name="android-package" value="org.apache.cordova.App" />
</feature>
None of this is working.
To disable the native back button functionality you need to call preventDefault() on the event object passed to the handler:
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
e.preventDefault();
}
If you are getting other errors, I'd suggest removing and re-adding the android platform (make sure you have the latest version of Cordova installed first):
$ npm update cordova -g
$ cordova platform remove android
$ cordova platform add android
It would be best if you could share more of your project, so I can see where something is going wrong. Other checks you can do:
Ensure you have all plugins installed for any other functionality you might be using cordova plugin ls will give you a list of any installed.
Ensure you reference <script type="text/javascript" src="cordova.js"></script>.
Check the device ready event is being fired.
Check there are no JavaScript errors when you debug in Safari dev tools with the app running.
Tipped off by this error:
exec call to unknown plugin App
I examined the App.java file which holds the App plugin included with the cordova build, I found the following line:
protected static final String TAG = "CordovaApp";
This did not match the corresponding exec() call made in the cordova.js file which came with 3.5. So, I changed it to
protected static final String TAG = "App";
Now the Event overrides for cordova all work per the documentation.
Cheers.
Has anyone gotten the clipboard plugin to work with "PhoneGap Build"?
I can't get it to work. I'm currently useing phonegap 3.1.0
My app is for android and IOS. I've only tested the clipboard plugin on android so far, and it isn't working.
in my config.xml:
<gap:plugin name="com.verso.cordova.clipboard" />
in my javascript:
window.plugins.clipboard.copy('some text',function(){alert('success');},function(response){alert('error:' + response);});
window.plugins.clipboard.paste(function(text){alert('paste success:' + text);},function(response){alert('paste error:' + response);});
The way I have it above, the script runs, but for both the copy and paste calls, the error function is executed and the response is "Class not found".
I have tried the above call window.plugins.copy, cordova.plugins.copy
both of those just cause the script to abort.
phonegap is loading just fine and the deviceready function has already fired before I attempt the above calls.
Under the plugins tab on the phonegap build webpage for my app:
Installed 3rd Party Plugins
com.verso.cordova.clipboard 0.1.0
This appears to be unrelated to the copy/paste plugin. In phonegap 3.1 you have to reference all the phonegap plugins you want to use. In this case, I'm guessing you have a function that checks if the user has an internet connection? If so, you need to add to your config.xml
I'm porting a Phonegap 2.7 application to Phonegap 3. The application is hosted, so phonegap loads an external url instead of a local html. This hosted webapp loads cordoba.js, however I'm unable to use plugins such as splashscreen and notifications from the hosted webapp:
navigator.splashscreen.hide();
// Uncaught TypeError: Cannot call method 'hide' of undefined
navigator.notification.vibrate(500);
// Uncaught TypeError: Cannot call method 'vibrate' of undefined
The hosted application required the same Cordova file that was included when I created the Phonegap 3 project. Why am I unable to use this API's? This worked fine on Phonegap 2.7.
UPDATE: Events are triggered correctly:
document.addEventListener('deviceready', callback, false);
callback is correctly called, so there is some kind of cordova interaction already. Problem seems plugins.
Call the plugin directly with cordova.exec. it goes like this:
cordova.exec(function(response){}, function(errorText){}, "PluginName", "method", []) ;
Cordova exec()!
I wonder if your cordova.js file just doesn't have the navigator.splashscreen object. In Cordova 3.0, all of the plugins were separated out, and the cordova.js file just became the bridge code. When the app runs, it loads all of the plugin .js files via ajax - see the cordova_plugins.js file in a built project. As it loads these files, Cordova will fix up the namespaces for you, so that navigator.splashscreen namespace actually maps to the splashscreen js code. I'm betting you are not loading this cordova_plugins.js file which means the clobbering isn't working.
It's still working because the bridge code works. When you use exec() you're just running the command that navigator.splashscreen.hide does: https://github.com/apache/cordova-plugin-splashscreen/blob/master/www/splashscreen.js#L26
If I were you, I'd try to rebuild the app the new Cordova 3.x way, with the cordova cli. That way you won't have to actually call the exec function manually which seems pretty brittle (the exec() probably won't change, but it seems like a pain looking up the exec calls for every plugin interaction you need.)
BTW I'm not sergio on irc, so feel free to give him the answer if he posts since he answered your question first. I'm just trying to explain why that happens and why it doens't work for you anymore - basically, 2.7 and 3.x are pretty different in terms of plugins.