How to use the terminal to include cordova plugins

Wappler General How To
#1

for mobile apps. if i want to use a plugin that is on npm for example. how can i include it in the build?

Mobile Apps: Top 5 Cordova Integration Wish List
Framework7 how to enable Flashlight?
#2

Answering myself :sweat_smile:

lets say you want to add the camera plugin https://www.npmjs.com/package/cordova-plugin-camera

you simply type this in wappler terminal

cordova plugin add cordova-plugin-camera
3 Likes
#3

Exactly :smile:

1 Like
#4

Hi, to include a info.plist file for the project am I required to use a plugin?

https://cordova.apache.org/plugins/?q=plist&platforms=cordova-ios

#5

So that would add the camera plugin to your project but how do you actually use a plugin in your design? In your case the camera.

#6

Check the docs of the plugin Brad :slight_smile:

#7

lol, I have yet to find a plugin with ‘useful’ documentation past the installation point. They all require a degree in programming. Take this one for example:

Useless documentation … (no, I don’t expect you to tell me how to do it :slightly_smiling_face:). They are all written by the coder who expect you to be just as good of coder as them.

I’m just ranting here. Not really a Wappler issue. :wink:

2 Likes
#8

its not hard

    function ChatTakePicture() {
        navigator.camera.getPicture(UploadChatImageSuccess, UploadChatImageError, {
            targetHeight: 480,
            targetWidth: 640,
            correctOrientation: true,
            quality: 100,
            allowEdit: false,
            destinationType: Camera.DestinationType.DATA_URL,
            encodingType: Camera.EncodingType.PNG
        });
    }

    function ChatPicPicture() {
        navigator.camera.getPicture(UploadChatImageSuccess, UploadChatImageError, {
            targetHeight: 480,
            targetWidth: 640,
            quality: 100,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            allowEdit: false,
            destinationType: Camera.DestinationType.DATA_URL
        });

    }

    function UploadChatImageError(message) {
        Toast(message);
    }

    function UploadChatImageSuccess(imageData) {
        var blob = dataURIToBlob("data:image/jpeg;base64," + imageData);
}
#9

So, where does that code go and how would you run it? Say from a button or something. I am sure if I knew how one worked I could figure out more.

Like I would really love to use this one to show a badge with a new job order count. Looks simple but docs are horrible.

#10

thats really basic question
you’re going to need a lot of learning

you do onClick and choose a function ChatTakePicture() for example to use the camera

<a onclick="ChatTakePicture();">Take Pic </a>

#11

That’s for sure! :wink:

Trouble is finding documentation or tutorials to learn.

#12

Because its JS basics related not cordova or wappler related :slight_smile:

you will get by. like i did :slight_smile: