Sample app utilize Kii Cloud push notification built with ionic2
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
resources
src
.editorconfig
.gitignore
README.md
config.xml
ionic.config.json
package.json
tsconfig.json
tslint.json
typings.json

README.md

Kii push sample in ionic2.

This sample demostrates how to crete application using Kii Cloud with ionic2. We focus on utilize push notification in this sample.

Push plugin

The sample is built with phonegap-plugin-push.

We also have kii-cordova-plugin. However kii-cordova-plugin doesn't support silent push handling/ customizing notification. If you plan to implement those features, using phonegap-plugin-push would be better choice.

Preparation

Prerequisite

Before start, please prepare Kii Cloud application APNS/ FCM configured.

FCM guide

APNS guide

To do this, you may need Appled Developer/ FCM account and create/configure proper application in those service as well.

Install ionic

npm install -g ionic
npm install -g typings

Clone source codes

git clone git@github.com:KiiPlatform/kii-push-ionic2.git
cd kii-push-ionic2

Resolve dependencies

npm install
ionic platform add ios android
ionic plugin add phonegap-plugin-push
typings install

Change configration

Configure id of the widget

Edit ./config.xml and change id in the widget

...
<widget id="com.kii.push3" ...
...

Please replace com.kii.push3 with the valid buidle id/ package name of which owned by you.

Configure Kii Cloud application ids

Edit ./src/app/kii.service.ts

...
export class KiiService {
    init(): void {
        let appID =  "9ab34d8b"
        let appKey = "7a950d78956ed39f3b0815f0f001b43b"
        let appSite = KiiSite.JP
...

Please replace appID, appKey and appSite with the one you've created on developer.kii.com. You need to setup GCM Key and APNS p12 files for the app properly.

Configure GCM Sender ID

Edit src/app/app.main.component.ts

...
    installPush() {
        let push = PushNotification.init({
            android: {
                senderID: "12345679"
            },
...

Please replace senderID with your FCM application's one.

Build and Run

ionic run ios
ionic run android

Notes of developing App using Kii SDK with ionic2

Create app with blank template.

ionic start myApp blank --v2

Place Kii SDK

Download Kii Cloud SDK

Extract zip file and place KiiSDK.js. {Your app root directory}/src/assets/js

Load Kii SDK from src/index.html

<script src="assets/js/KiiSDK.js"></script>

Install type definition

npm install @types/kii-cloud-sdk --save-dev

Note:

After completed steps above you can use Kii SDK in typescript codes. Kii SDK is not exported as module. You'll use SDK as global definition. i.e. No import statement is used and you can just use APIs like browser app shown in the guides.

Note that before platform.ready() is called, you can not use KiiSDK.

Use library requires typings

Some library requires typings instead of @types in npm. In this case, you may need to configure complierOptions in tsconfig.json Please make sure to keep the reference to type information defined in both @types in npm and typings.

ex.)

  "compilerOptions": {
    "typeRoots" : ["./typings"],
    "types" : ["kii-cloud-sdk","cordova-plugin-device","phonegap-plugin-push"],
  ...

For details please read typescript official guide.