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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
"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.
|
1 2 3 |
$ ionic start IonicNativeSettings blank $ cd IonicNativeSettings $ ionic cordova platform add android |
Open Native Settings
Plugin Open Native Settings instaliram sljedećim naredbama:
|
1 2 |
$ 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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.
Ovo na ekranu izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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> |
Zaključak
Struktura projekta prema package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
{ "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" ] } } |
