Noncommital Premarital Mischief

    ng2-platform
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Build Status npm version npm bitHound Overall Score bitHound Dependencies bitHound Code

    ng2-platform

    The aim of this project is provide a cross platforms access to native feature available on Browser, Mobile (Ionic 2) and Desktop (Electron). Each Feature will espose methods with RxJs Observable making their api agnostic among various platform.

    Feature Description Browser Ionic2 Electron
    Analytics Send Google Analytics Available Available Available
    Camera Take or select picture Available (only take photo) Available TODO
    Clipboard Copy and Paste Available Available Available
    Download Download file in backgroud Need improve TODO TODO
    Location Get current GPS position Available Available Available
    Push Push notification Available (with SW) Available TODO
    Qrcode Generate and scan QR Code TODO Available TODO
    Share Share link on social network Available (Chrome Origin Trials) Available TODO
    Upload Upload a file Available Available TODO
    Storage Localstorage for caching Available Available TODO
    Core Platform service Available Available Available

    Project status

    This project is just started, I am looking for collaborators to expand the Electron's features (although the implementation will be same as the Browser for most of the cases) since are not fully implemented/tested at this moment. I will use as much as possible native api for the Browser platform this means that things will works only in latest browsers version. NOTE: the code is not yet optimize but it works in most of the case, if doesn't work in your use case just open an issues I will be eager to look into it!

    Install

    npm install ng2-platform

    For Ionic 2 use case, for each feature you will going to use in your project, you must add the correspondent cordova plugin:

    ionic plugin add cordova-plugin-device
    ionic plugin add phonegap-plugin-push --variable SENDER_ID="1234567890"
    ionic plugin add phonegap-plugin-barcodescanner
    ionic plugin add cordova-plugin-x-socialsharing
    ionic plugin add cordova-plugin-camera
    ionic plugin add cordova-plugin-geolocation
    ionic plugin add cordova-plugin-file
    ionic plugin add cordova-plugin-file-transfer
    ionic plugin add cordova-plugin-google-analytics

    How it works

    Each Feature have a:

    • XxxService: containing the abstract feature declaration (with options and result interface)
    • factoryXxxService: factory function to create the right instace of the service base on the platform.
    • XxxServiceXxxplatform: native implementation for each platform (foo.browser.ts, foo.ionic.ts, foo.electron.ts, etc)

    Exemple

    • In your app main module
    // app.module.ts
    import { Ng2PlatformModule } from 'ng2-platform';
    ...
     
    @NgModule({
        ...
        imports[
            ... // your modules
            Ng2PlatformModule.forRoot({
                appName: 'MyAppName',
                appVersion: '1.0',
                FCMSenderId: '1234567890',
            }),
        ]
        ...
    })
    export class AppModule ...
    • Example for take a picture using the PC/Laptop Camera and upload it to some API
    // user-profile.component.ts
    import { Component } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import { CameraService, UploadService } from 'ng2-platform';
    ...
     
    @Component({
        selector: 'us-user-profile',
        templateUrl: 'user-profile.component.html',
        changeDetection: ChangeDetectionStrategy.Default
    })
    export class UserProfileComponent implements OnInit {
     
        constructor(
            private _uploadService: UploadService,
            private _cameraService: CameraService,
        ) {
     
        }
     
        ngOnInit() {
            // If the upload API need some custom headers you can set it before call the upload method
            this._uploadService.setApiHeaders({
                'X-CSRFToken': 'your_token', // Your custom auth token
                'Referer': 'www.exemple.com', // For Ionic 2 you might need this
            });
        }
     
        takePhoto() {
            this._cameraService.takePhoto({ allowEdit: true, imageSize: 300 })
                .catch((error) => {
                    console.error('Take photo error', error);
                    return Observable.empty();
                })
                .subscribe((dataURI) => {
     
                    const uploadAvatar = this._uploadService
                        .upload<string>('/api/user/logo/', 'avatar_url', dataURI);
     
                    uploadAvatar.uploadProgress$
                        .subscribe((progress) => {
                            console.info('Uploading in progress:', progress);
                        });
     
                    uploadAvatar.uploadResult$
                        .catch((error) => {
                            console.error('Upload error:', error);
                            return Observable.empty();
                        })
                        .subscribe((response) => {
                            console.info('Upload success with api response', response);
                        });
                });
        }
     
    }
     

    Todos

    • Write Tests
    • Add exemple website
    • Implementing and test on Electron
    • Consider add vanilla Cordova platform (not bing on ionic-native)

    License

    MIT

    Install

    npm i ng2-platform

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • thomasgaz