Open Native Settings

Otvaranje postavki mobilnog uređaja iz Ionic aplikacije

Prilikom izrade Ionic mobilnih aplikacija jedan od zahtjeva može biti da se iz aplikacije mogu otvoriti neke od postavki mobilnoj uređaja. Npr. postavke vezane uz geolokaciju, WiFi ili nešto treće. Puno je jednostavnije omogućiti korisniku da klikom na jedan gumb ode direktno na postavke koje su mu u tom trenutku potrebne kako bi unutar Ionic aplikacije nešto obavio nego da sam mora tražiti te iste postavke.

Od postavki kojima je moguće pristupiti koristeći ovaj plugin dostupno je sljedeće:

 "about", // ios
 "accessibility", // ios, android
 "account", // ios, android
 "airplane_mode", // ios, android
 "apn", // android
 "application_details", // ios, android
 "application_development", // android
 "application", // android
 "autolock", // ios
 "battery_optimization", // android
 "bluetooth", // ios, android
 "castle", // ios
 "captioning", // android
 "cast", // android
 "cellular_usage", // ios
 "configuration_list", // ios
 "data_roaming", // android
 "date", // ios, android
 "display", // ios, android
 "dream", // android
 "facetime", // ios
 "home", // android
 "keyboard", // ios, android
 "keyboard_subtype", // android
 "locale", // ios, android
"location", // ios, android
"locations", // ios
"manage_all_applications", // android
"manage_applications", // android
"memory_card", // android
"music", // ios
"music_equalizer", // ios
"music_volume", // ios
"network", // ios, android
"nike_ipod", // ios
"nfcsharing", // android
"nfc_payment", // android
"nfc_settings", // android
"notes", // ios
"notification_id", // ios
"passbook", // ios
"phone", // ios
"photos", // ios
"print", // android
"privacy", // android
"quick_launch", // android
"reset", // ios
"ringtone", // ios
"browser", // ios
"search", // ios, android
"security", // android
"settings", // ios, android
"show_regulatory_info",
"sound", // ios, android
"software_update", // ios
"storage", // ios, android
"store", // ios, android
"sync", // android
"tethering", // ios
"twitter", // ios
"touch", // ios
"usage", // ios, android
"user_dictionary", // android
"video", // ios
"voice_input", // android
"vpn", // ios
"wallpaper", // ios
"wifi_ip", // android
"wifi", // ios, android
"wireless" // android

Kreiranje aplikacije

Kreiram novi Ionic projekt i odmah dodajem Android platformu jer planiram aplikaciju pokrenuti na mobilnom uređaju.

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

Open Native Settings

Plugin Open Native Settings instaliram sljedećim naredbama:

$ ionic cordova plugin add cordova-open-native-settings
$ npm install @ionic-native/open-native-settings

Nakon toga ovaj plugin deklariram unutar app.module.ts datoteke.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    OpenNativeSettings,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Funkcionalnost se nalazi unutar home.ts datoteke tj. unutar HomePage klase, a sastojat će se od funkcija od kojih svaka otvara neku od ranije navedenih postavki mobilnog uređaja.

Open Native Settings

import { Component } from '@angular/core';

import { OpenNativeSettings } from '@ionic-native/open-native-settings/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private _openNativeSettings: OpenNativeSettings) { 
  }

   accessibility(){
     //this._openNativeSettings.open("accessibility");
     this._openNativeSettings.open(["accessibility", true]);
   }

   bluetooth(){
    //this._openNativeSettings.open("bluetooth");
    this._openNativeSettings.open(["bluetooth", true]);
   }

   date(){
    //this._openNativeSettings.open("date");
    this._openNativeSettings.open(["date", true]);
   }

   keyboard(){
    //this._openNativeSettings.open("keyboard");
    this._openNativeSettings.open(["keyboard", true]);
   }

   location(){
    //this._openNativeSettings.open("location");
    this._openNativeSettings.open(["location", true]);
   }

   manage_applications(){
    //this._openNativeSettings.open("manage_applications");
    this._openNativeSettings.open(["manage_applications", true]);
   }

   print(){
    //this._openNativeSettings.open("print");
    this._openNativeSettings.open(["print", true]);
   }

   storage(){
    //this._openNativeSettings.open("storage");
    this._openNativeSettings.open(["storage", true]);
   }

}

Ako neku od postavki pozivam na ovaj način this._openNativeSettings.open(“accessibility”) ekran s postavkama će se otvoriti umjesto ekrana Ionic aplikacije dok ako dodam parametar true na sljedeći način this._openNativeSettings.open([“accessibility”, true]) otvara se novi ekran s postavkama što se može vidjeti na sljedećoj slici.

Open Native Settings

Ovo na ekranu izgleda ovako:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Native Settings
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding text-center>
  <p>Plugin to open native screens of iOS/android settings.</p>
  <ion-row>
    <ion-col>
      <ion-button color="primary" (click)="accessibility()">Accessibility</ion-button>
      <ion-button color="secondary" (click)="bluetooth()">Bluetooth</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="tertiary" (click)="date()">Date</ion-button>
      <ion-button color="success" (click)="keyboard()">Keyboard</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="warning" (click)="location()">Location</ion-button>
      <ion-button color="danger" (click)="manage_applications()">Manage Applications</ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button color="light" (click)="print()">Print</ion-button>
      <ion-button color="medium" (click)="storage()">Storage</ion-button>
    </ion-col>
  </ion-row>
</ion-content>

Open Native Settings

Zaključak

Struktura projekta prema package.json

{
  "name": "IonicNativeSettings",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/open-native-settings": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "cordova-android": "7.1.4",
    "cordova-open-native-settings": "1.5.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.3.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-open-native-settings": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "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 *