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