Example use cordova plugin

[gmferreir1]

Anyone have an example of using any Cordova plugin ?

[xereda]

I need this too …

[rstoenescu]

All information can be found on Cordova website.

Example of using Battery status plugin: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html

[gmferreir1]

But as I add it in the quasar ?

[xereda]

@rstoenescu I miss an example using google maps.

[rstoenescu]

@gmferreir1 /cordova folder is a Cordova generated folder. You manage it with Cordova CLI. Treat that folder just as you would with a Cordova project. All Cordova CLI commands must be issued from that folder. The www folder is mapped to your Quasar’s /dist folder which is generated by building with Quasar CLI. Please tell me if there’s a need for further explanations.

Example of adding a Cordova plugin: in /cordova issue cordova plugin add __NAME_OF_PLUGIN

[gmferreir1]

Thank you @rstoenescu all right here.

[gmferreir1]

@rstoenescu Call the cord this way is correct?
export default {
data () {
return {}
},
mounted () {
document.addEventListener(‘deviceready’, onDeviceReady, false)
}
}
but it does not work

show error: ✘ http://eslint.org/docs/rules/no-undef ‘onDeviceReady’ is not defined

[rstoenescu]

@gmferreir1 You don’t need to ensure that device is ready. Quasar takes care of it for you automatically. And anyway registering for that event in a component would be far too late in the life of an app. The error is displayed in your case because you’re registering a trigger with onDeviceReady which you didn’t define.

Bottom line, you don’t need to register the event.

[xereda]

I need a simple example of an implementation. I did not find anything with Quasar, nor in the issues, nor here in the forum.

[gmferreir1]

@rstoenescu Thanks, helped a lot, now I understand how it works. I was able to implement.

@xereda follows implementation cordova camera, worked form me. Do not forget to add the plugin.
Then run, quasar build, after cordova build

export default {
data () {
return {}
},
methods: {
test () {
Dialog.create({
title: ‘Warning’,
message: ‘You are about to run out of disk space.’,
buttons: [
‘Cancel’,
{
label: ‘Empty Trash Bin’,
handler () {
// empty the trash bin, yo
}
}
]
})
},
onDeviceReady () {},
getPicture () {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
saveToPhotoAlbum: true
})
function onSuccess () {
alert(‘success’)
}
function onFail () {
alert(‘Failed’)
}
}
},
mounted () {
document.addEventListener(‘deviceready’, this.onDeviceReady, false)
}
}

[rstoenescu]

Build your app just like any normal site. Make a build with Quasar CLI, wrap it with Cordova, learn Cordova CLI to make an executable for your specific platform(s) and just run it on your phone. There’s nothing specific that you need to do for Cordova. That’s one of the main power of Quasar. Help me understand what exactly you need. I just want to make you click to see the big picture, make you have that “A-ha!” moment. Quasar deals with lots of optimizations for your code so you won’t have to.

[xereda]

@rstoenescu said in Example use cordova plugin:

Build your app just like any normal site. Make a build with Quasar CLI, wrap it with Cordova, learn Cordova CLI to make an executable for your specific platform(s) and just run it on your phone. There’s nothing specific that you need to do for Cordova. That’s one of the main power of Quasar. Help me understand what exactly you need. I just want to make you click to see the big picture, make you have that “A-ha!” moment. Quasar deals with lots of optimizations for your code so you won’t have to.

So I have direct access to the “navigator” object?

[rstoenescu]

@gmferreir1 again, no need to deal with onDeviceReady event. That is triggered way way before anything is drawn on the screen. Quasar and Vue itself couldn’t have even initiated if Quasar didn’t used that trigger when App starts. Please read about it in Cordova docs and you’ll understand why.

[rstoenescu]

@xereda yep. Here’s a basic example with barcode scanner cordova plugin from quasar play: https://github.com/quasarframework/quasar-play/blob/dev/src/components/play/play-url-list.vue

[xereda]

@rstoenescu said in Example use cordova plugin:

@xereda yep. Here’s a basic example with barcode scanner cordova plugin from quasar play: https://github.com/quasarframework/quasar-play/blob/dev/src/components/play/play-url-list.vue

How do I simulate this? Without having an Android device here?

[gmferreir1]

@rstoenescu Now I understand completely, thank you very much for your time. The framework is show

[rstoenescu]

@xereda android emulators. I’m not near a laptop but if you got android sdk installed and configured with an emulator, “cordova run” should trigger it. Note that you need an actual phone for some plugins like barcode scanner since the emulator can’t emulate taking photos with the camera, obviously.

[xereda]

@rstoenescu I’m trying to emulate, but the app gets black screen. I’ll search on …

[xereda]

@xereda said in Example use cordova plugin:

@rstoenescu I’m trying to emulate, but the app gets black screen. I’ll search on …

http://g.recordit.co/WqxmooIgoH.gif