NativeScript laat toe om native apps te maken vanuit een Javascript framework, zoals Vue of Angular.
Deze apps worden dan vertaald naar iOS en Android waardoor je dus maar 1 codebase hebt voor beide operating systems.

Maar wat als je een native API moet aanspreken? Want javascript is natuurlijk geen Java of Swift.
Laten we dit eens bekijken. Voor dit voorbeeld ga ik een notificatie tonen op Android.

Om te beginnen maak ik een nieuwe NativeScript app, dit gaat gemakkelijk met de NativeScript cli-command `tns create`:

Als je eerder met Angular2 gewerkt hebt, zal je de omgeving meteen herkennen.
Alle Angular cli commands werken dan ook zoals verwacht.

Laten we beginnen met een start scherm, met daarop een knop `show notification`.
In de terminal de angular command: “ng generate component start”.
Nu moet ik de router aanpassen om naar onze start component te linken.

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { StartComponent } from "./start/start.component";

const routes: Routes = [
    { path: "", component: StartComponent, pathMatch: "full" },
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

De gegenereerde start component heeft standaard een knop, opmerkelijk hier is dat de .html pagina geen normale html is. NativeScript gebruikt immers zijn eigen tags, maar de werking is dezelfde.
Ik gebruik deze knop om een notificatie te tonen.

<Button text="Show notification!" class="btn btn-primary" 
(tap)="showNotification()"></Button>

In de volgende stappen ga ik de native Android apis aanspreken, om dit te makkelijk te maken gebruik ik de package  “tns-platform-declarations”. Deze package declareert de Java classes, zodat ik ze kan aanspreken.
Als je een externe API wil aanspreken, kan je deze ook zelf genereren met de dts-generator: https://github.com/SitePen/dts-generator.

Ik begin met de package toe te voegen: “npm i tns-platform-declarations”.
Hierna maak ik een nieuwe file in de root directory: “refrerence.d.ts”.
In reference.d.ts plak ik: “/// <reference path=”./node_modules/tns-platform-declarations/android-26.d.ts” />”
Dit zorgt er voor dat je Android gerichte intelliSense kan gebruiken.
Voor deze specifieke demo ga ik Android API 26 gebruiken.

In de start component hebben we een aantal dingen nodig, namelijk:

  • Een channel: notificaties worden gelinkt aan channels, je kan er per app meerdere maken, maar dat is voor onze demo niet nodig.
  • Notification-builder: deze helper class maakt het makkelijker om notificaties op te bouwen.
  • NotificationManager: deze stuurt de notificatie naar het android systeem, en toont dus de notificatie.
  • Context: de applicatie context, hier halen we de notificatie manager uit.

Begin met volgende imports en declaraties:

import { Component, OnInit } from '@angular/core';
import { android as app } from 'tns-core-modules/application'; // de namespace android kunnen we niet gebruiken

const CHANNEL_ID = "demo-app-id"; // de identificatie van de notificationChannel
const CHANNEL_NAME = "demo app channel"; // de naam van de notificationhannel
const CHANNEL_IMPORTANCE = 4; // de belangrijkheid, 2 is laag, 3 is standaard, 4 is hoog 

@Component({
  selector: 'ns-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.css'],
  moduleId: module.id,
})
export class StartComponent implements OnInit {

  channel: android.app.NotificationChannel;
  context: android.content.Context;
  notificationManager: android.app.NotificationManager;
  builder: android.support.v4.app.NotificationCompat.Builder;

  ngOnInit() {
  }
}

In de onInit definieer ik de channel:

ngOnInit() {
    this.context = app.context;
    this.notificationManager = this.context.getSystemService("notification");
    this.channel = new android.app.NotificationChannel
      (
        CHANNEL_ID,
        CHANNEL_NAME,
        CHANNEL_IMPORTANCE
);

    this.notificationManager =
this.context.getSystemService(android.app.NotificationManager.class);
    this.notificationManager.createNotificationChannel(this.channel);
  }

En dan uiteindelijk in de showNotification functie:

showNotification() {
    this.builder = new android.support.v4.app.NotificationCompat.Builder(this.context, CHANNEL_ID);
    this.builder
      .setContentTitle('Demo-app notification!')
      .setContentText('This notification was sent by the demo app')
      .setSmallIcon(android.R.drawable.ic_dialog_info)
      .setBadgeIconType(android.support.v4.app.NotificationCompat.BADGE_ICON_SMALL);
    
    this.notificationManager.notify(12, this.builder.build());
  }

Et voila:

Previous Post Angular tips & tricks die uw toepassingen verbeteren
Menu