Phonegap plugin does not work using remote build - android

I'm using this Google Analytics plugin for my Phonegap project https://github.com/phonegap-build/GAPlugin.
Everything works fine when I run it in the Android emulator. But when I use Phonegap remote build the plugin does not work. The plugin is listed along with other working plugins in the Phonegap app page.
Here's my code:
In config.xml
<gap:plugin name="com.adobe.plugins.gaplugin" version="2.3.1" source="pgb" />
In index.html
<script type="text/javascript" src="cordova.js"></
<script type="text/javascript" src="GAPlugin.js"></script>
<script type="text/javascript" src="js/index.js"></script>
In www/index.js after the device is ready (I censored the GA ID)
var gaPlugin = window.plugins.gaPlugin;
gaPlugin.init(function () {
log.innerHTML += 'ga ok.';
}, function (e) {
log.innerHTML += 'ga failed.' + e;
}, "UA-XXX-Y", 10);
gaPlugin.trackPage(function () {
log.innerHTML += 'tracked';
}, function () {
log.innerHTML += 'nope';
}, "test.com");
When I look into the build log I can't find any text "gaplugin". I don't know if it is even building the plugin or if I'm getting an error. I can't even use the debugger because the target is never listed.
Thanks for any help.

It turns out that if you're using hydrate, you have to re-install the APK instead of just reloading when you add a new plugin.

Related

Framework7 router does not work after converting project to apk

I have tried out this tutorial to develop an android application via Cordova and Framework7. It works in the browser and also Android Emulator (ADK). I converted the project to the apk with Cordova build command and transferred the apk file to my device.
The application works, however, the list which is the application based Framework7 (indeed on Vue) does not show anything. It looks like Vue not initialized.
Here is the HTML code:
<template id="page-alt-sayfa">
<f7-page>
<f7-navbar title="Alt Sayfa" back-link="Geri" sliding></f7-navbar>
<f7-block-title>
<!-- sayfa id'sini data obj içinde ara-->
{{this.$root.$data['icerik'][$route.params['sayfaId']].baslik}}</p>
</f7-block-title>
<f7-block-title>Dondurucuya Konur mu?</f7-block-title>
<f7-block inner>
<img style="width:95%;overflow:hidden" :src="'./img/sembolik/'+$route.params['sayfaId']+'.png'"/>
<br>
<div v-if="this.$root.$data['icerik'][$route.params['sayfaId']].dondurucu">
<div class="chip">
<div class="chip-media bg-green"><i class="material-icons">dns</i></div>
<div class="chip-label">Dondurucuya Konulur</div>
</div>
</div>
Here is initializing Framework7 and Vue:
...
<script src="cordova.js"></script>
<script src="js/framework7.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/framework7-vue.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script src="js/app.js"></script>
</body>
</html>
Here a screenshoot from my phone.
(source: ultraimg.com)
How can the problem be solved?
Edit:
Here is my router code:
// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// Init Page Components
Vue.component('page-about', {
template: '#page-about'
})
Vue.component('page-form', {
template: '#page-form'
})
Vue.component('page-dynamic-routing', {
template: '#page-dynamic-routing'
})
Vue.component('page-alt-sayfa', {
template: '#page-alt-sayfa'
})
// Handle device ready event
// Note: You may want to check out the vue-cordova package on npm for cordova specific handling with vue - https://www.npmjs.com/package/vue-cordova
document.addEventListener('deviceready', () => {
console.log("DEVICE IS READY!");
}, false)
// Init App
new Vue({
el: '#app',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: [
{
path: '/about/',
component: 'page-about'
},
{
path: '/alt-sayfa/:sayfaId/',
component: 'page-alt-sayfa'
}
]
},
data: {
mesaj: 'Merhaba',
icerik: icerik
}
});
I recently faced a similar problem. The routing was working well when tested my computer browser and emulator. But when I built the apk, it just did not work. It turned out I had a case sensitivity issue with the names of the views in my code. My computer and emulator ignored it and did the routing, but my phone didn't.
Have you crossed-checked the spelling of the names of your views to make sure it is not a case-sensitivity issue?
I do not find the where is the problem stems from. However, I find a npm template and reorganized my code according to this template and it worked
Template is:
https://framework7.io/vue/templates.html
I installed it with this command:
cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

console.log not working when running an Android app in Cordova

I have a basic Cordova application with a simple console.log() function at the end.
My index.html file looks as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("Device is ready!");
}
</script>
</body>
</html>
As you can see it's basically the same as the automatically generated file with some console.log script at the bottom.
Unfortunately when I run the app on Android using cordova emulate android, I cannot seem to find the output from console.log(..) anywhere. However, it works fine on browsers.
console.log(..)only works on browser console, not on command line.
To get log that appears on your app use alert(...);.
Anyway if you wanted to see your logs by consol.log() you should use an IDE like Android Studio or use ddms located where your adb is installed. (run ddms.bat)
Use
cordova plugin add cordova-plugin-console
This plugin will enable console logging.
It has various methods for console printing
console.log
console.error
console.exception
console.warn
console.info
console.debug
console.assert
console.dir
console.dirxml
console.time
console.timeEnd
console.table
By default plugin is not installed so you will have to add it manually.
Reference.
Regards.

Cordova deviceReady not called on Android platform

I am trying to build a simple cordova app on iOS and Android. It worked fine on iOS. However it fails to execute on android. I am using Android Studio.
The html file still runs in android, but the addEventListener for deviceReady is not working.
This piece of code works fine in iOS but not in android:
<p id="ready" style="text-align: center">deviceready not called yet</p>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", function() {
console.log("cordova ready");
var readyElement = document.getElementById("ready");
readyElement.innerHTML = "deviceready called but not finished";
readyElement.innerHTML = "Ready";
console.log('Ready');
}, false);
</script>
I have included the both cordova-2.4.0.js and cordova.js in the project folder, but I have no idea why it doesnt connect properly.
After the page loads, the label 'device ready not called yet should be changed to device ready' , but it doesnt change in android. Can anyone suggest me the right way to do it ?
Note: 'cordova.js' is generated by the cordova in android , and 'cordova-2.4.0.js' is the one generated in iOS.
Even though I copied the iOS cordova-2.4.0.js file, it didnt worked.
Looks like I have to include only one cordova.js file generated by the cordova .
I removed the line:
<script type="text/javascript" src="cordova-2.4.0.js"></script>
and I used only:
<script type="text/javascript" src="cordova.js"></script>
and it worked.

Cordova social sharing plugin didnt work in android

I have installed this Cordova social sharing plugin via command line tool.
Everything is added correctly to my current project foleder,but the share option is didn't work
Here is my code
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.plugins.socialsharing.share('Message and link', null, null, 'http://www.x-services.nl');
}
I will get this error in my console
"TypeError: Cannot read property 'share' of undefined
My Cordova version is 5.1.1
EDIT
I've crated a blank Cordova project and added the plugin its works fine for me
there is no need of manual configuration.
But my project developed using Angularjs and Onsenui,may this was the problem?.
Did you include socialsharing.js in your project and load it like this?
<script type="text/javascript" src="js/socialsharing.js"></script>
Make sure the S are not upper case in the file name too...
you are getting error in console in google chrome console ?? in any browser not supported cordova plugin so you have to test in device and you have to also include file in hader
<script charset="utf-8" src="cordova.js" type="text/javascript">
</script>
<script type="text/javascript" src="js/SocialSharing.js">
</script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
onclick="window.plugins.socialsharing.share('Message only')"
}
and if you have any further confusion then message me

Android phonegap SpeechRecognizer issue : Cannot read property 'speechrecognizer'

I am new to cordova-android app development.I am using cordova 3.3.0 to create Android phonegap SpeechRecognizer application. I referred SpeechRecognizer. According to that i have executed below commands to create cordova android platform app.
1) cordova create SpeechrecognizerApp
2) cordova platform add android
3) phonegap local plugin add https://github.com/mayurloved/speechrecognizer.git
Afer that i imported that project in eclipse and it automatically created all required packeges and made all changes in config.xml. Then i copied all html contents of example page to my index.html file. All is done properly, but when i run my app, log shows error:
Uncaught TypeError: Cannot read property 'speechrecognizer' of undefined:20
index.html
<!DOCTYPE html>
<html>
<head>
<title>Speech Recognition plugin demo</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="SpeechRecognizer.js"></script>
</head>
<body>
<script type="text/javascript">
function onDeviceReady(){
console.log("Device is ready");
}
function recognizeSpeech() {
var maxMatches = 5;
var promptString = "Speak now"; // optional
var language = "en-US"; // optional
window.plugins.speechrecognizer.startRecognize(function(result){
alert(result);
}, function(errorMessage){
console.log("Error message: " + errorMessage);
}, maxMatches, promptString, language);
}
// Show the list of the supported languages
function getSupportedLanguages() {
window.plugins.speechrecognizer.getSupportedLanguages(function(languages){
// display the json array
alert(languages);
}, function(error){
alert("Could not retrieve the supported languages : " + error);
});
}
document.addEventListener("deviceready", onDeviceReady, true);
</script>
<button onclick="recognizeSpeech();">Start recognition</button>
<button onclick="getSupportedLanguages();">Get Supported Languages</button>
</body>
</html>
I haven't copied SpeechRecognizer.js in www folder as according to above link i don't require to copy it in my app because i am using cordova version >3.0. Please help me to solve this problem.
Thank you.
Did you launch phonegap build android after you add the plugin? When you install plugins, they are installed only in the /plugins folder of the project but not in the platform folder.
You have to run phonegap build or phonegap prepare for any platform to have the plugin fully installed.
And then after you can refresh the project in eclipse and you should see the java part of the plugin in the /src folder and the javascript in /assets/www/plugins
If the folder platforms\android\assets\www\plugins... is not there after the build, that may be because your project got corrupted.
In that case you can try to empty the plugins folder at the root of your project and re-install all plugins.
If that's not enough, you can retry emptying both platforms and plugins folder (think to save any customisation you may have done in platforms folders).

Categories

Resources