Ionic 3 Market

Ionic 3 Market

U ovom ću blog postu pokazati kako unutar Ionic aplikacije direktno pristupiti nekoj drugoj aplikaciji koja se nalazi na Google Play Store ili Apple Store koristeći Ionic Native Market plugin.

Kreiranje aplikacije

Za početak kreiram novu Ionic aplikaciju.

$ ionic start IonicMarket blank
$ cd IonicMarket
$ ionic cordova platform add android

Pristup trgovini aplikacija

Prema službenoj dokumentaciji, Market plugin instaliram sljedećim naredbama:

$ ionic cordova plugin add cordova-plugin-market
$ npm install --save @ionic-native/market

Navodim ga unutar app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Market } from '@ionic-native/market';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Market,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Sada ću na početnoj stranici home.ts kreirati funkciju pokaziAplikaciju() koja će biti aktivirana prilikom klika na gumb. Toj funkciji proslijedim jedan parametar, a to je ID aplikacije.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Market } from '@ionic-native/market';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
              private _market: Market) {
  }

  pokaziAplikaciju(){
    this._market.open('com.roadhousegames.lotb');
  }

}

Na ekranu će se nalaziti samo jedan gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 Market App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click)="pokaziAplikaciju()" ion-button full>Pokazi aplikaciju</button>
</ion-content>

Konačan rezultat vidi se na sljedećoj slici:

Ionic 3 Market

Zaključak

Ovaj plugin na vrlo jednostavan način rješava potrebu otvaranja Google Play Store tj. Apple Store trgovine unutar Ionic aplikacije.

Struktura aplikacije prema package.json

{
  "name": "IonicMarket",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.10.0",
    "@ionic-native/market": "^4.10.0",
    "@ionic-native/splash-screen": "~4.10.0",
    "@ionic-native/status-bar": "~4.10.0",
    "@ionic/storage": "2.1.3",
    "cordova-android": "7.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.11",
    "typescript": "~2.6.2"
  },
  "description": "Ionic Market App",
  "cordova": {
    "plugins": {
      "cordova-plugin-market": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *