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

Question

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

Answer 1

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