IONIC 4+ Capacitor: How to install a cordova plugin (Stepcounter) from github without ionic native?

0

Issue

I want to add a Cordova plugin which is available on GitHub to my IONIC 5+ Capacitor (Angular) project.

Also, I don’t know how to install and integrate this plugin, because the official manual says that after the step
npm install https://github.com/DigitalsunrayMedia/cordova-plugin-stepcounter
also
npm install ionic-native/???????

My problem is right here! What should I do with npm install ionic-native/???????? enter? The desired plugin does not exist as an Ionic Native plugin.

Is it sufficient, if I simply execute the following:

npm install https://github.com/DigitalsunrayMedia/cordova-plugin-stepcounter.git
npx cap sync

without the step of npm install ionic-native/????

I would also like to know if I can easily add and use it in Ionic Capacitor or if I have to make changes in a file.

How do I address this plugin in Typescript? Do I have to add anything to module.app?

Is it sufficient if I do it the way Capacitor prescribes:
import { Plugins } from '@capacitor/core';
const { Stepcounter } = Plugins;

I am very grateful for any advice! Thank youu 🙂
Best regards,
programmerg

Solution

Yes you can install plugin and use it without ionic-native, basically ionic-native is just typed wrapper of library.

The easiest way would be to implement service

import { Injectable } from '@angular/core';

declare var stepcounter: any;

@Injectable({
    providedIn: 'root'
})
export class StepCounterService {
    constructor() {}

    start(startingOffset) {
        return new Promise((resolve, reject) => {
            stepcounter.start(
                startingOffset,
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }

    stop() {
        return new Promise((resolve, reject) => {
            stepcounter.stop(
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }

    getTodayStepCount() {
        return new Promise((resolve, reject) => {
            stepcounter.getTodayStepCount(
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }

    getStepCount() {
        return new Promise((resolve, reject) => {
            stepcounter.getStepCount(
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }

    deviceCanCountSteps() {
        return new Promise((resolve, reject) => {
            stepcounter.deviceCanCountSteps(
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }

    getHistory() {
        return new Promise((resolve, reject) => {
            stepcounter.getHistory(
                message => {
                    resolve(message);
                },
                () => {
                    reject();
                }
            );
        });
    }
}

Now you inject it where you need so you can use it

PS. I assume you are using angular and typescript if you are using vanilla ionic and javascript you can install plugin and use it

Answered By – Vova Bilyachat

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More