AngularJS 2 + TS example

[snekbaev]

Hi,

is it possible to have aforementioned example? I'm new to NS including the subject tech. Trying to find my way to get sms received broadcast receiver configured. If I just copy NotificationServiceStartReceiver into .ts file, rebuild and run the thing I get an exception:

java.lang.RuntimeException: Unable to instantiate receiver com.tns.broadcastreceivers.NotificationServiceStarterReceiver: java.lang.ClassNotFoundException: Didn't find class "com.tns.broadcastreceivers.NotificationServiceStarterReceiver" on path: DexPathList[[zip file "/data/app/com.theapp.Beeper-1/base.apk"],nativeLibraryDirectories=[/data/app/com.theapp.Beeper-1/lib/arm, /data/app/com.theapp.Beeper-1/base.apk!/lib/armeabi-v7a, /vendor/lib, /system/lib]]

I do have permissions configured correctly: static manifest + runtime via permissions plugin. Also registered the receiver in the manifest with priority 999. Exception happens when Sms is inbound

[petekanev]

Hey @snekbaev could you provide a code sample? TypeScript is no different than JavaScript in that the transpiled code executes the same way. At first sight the issue appears to stem from the fact that you haven't named the class you are extending the same way you've declared it in the manifest.

[snekbaev]

Hi,

here is the snippet from the manifest right before the end:

    <receiver android:name="com.tns.broadcastreceivers.NotificationServiceStarterReceiver">
                <intent-filter android:priority="999">
                        <action android:name="android.provider.Telephony.SMS_RECEIVED" />
                </intent-filter>
        </receiver>
    </application>

NotificationServiceStarterReceiver.ts contents:

declare var android: any;

console.log("about to extend");

android.content.BroadcastReceiver.BroadcastReceiver.extend("com.tns.broadcastreceivers.NotificationServiceStarterReceiver", {

    constructor() {
      console.log("in ctor");

    },
    onReceive: function() {
        //var helper = require("../service-helper");
        //var utils = require("utils/utils");
        //helper.setupAlarm(utils.ad.getApplicationContext());
        console.log("In android.content.BroadcastReceiver.BroadcastReceiver.extend(com.tns.broadcastreceivers.NotificationServiceStarterReceiver");
    }
});

console.log("extended");

I don't see any console log messages either

[petekanev]

@snekbaev, you are extending a class with incorrect namespace (android.content.BroadcastReceiver~~.BroadcastReceiver~~) note the extra BroadcastReceiver. Also if you are going to extend the JavaScript way but in TypeScript, you should not that constructor will not be recognized as the constructor function, and should use init instead. `init: function() { console.log("Constructing object..."); }

[snekbaev]

I'm a bit confused because from your reply it feels like I have three BroadcastReceiver, but I have two because it was copied it from:

sample-android-background-services-master\app\broadcastreceivers\NotificationServiceStarterReceiver.js

does that mean the source is broken too? Nevertheless, I fixed my issue by having only one BroadcastReceiver:

android.content.BroadcastReceiver.extend("com.tns.broadcastreceivers.NotificationServiceStarterReceiver", {

I have three follow up questions:

1. what I noticed since started playing with NS is that sometimes I have to uninstall the app from the phone (manually) to get the changes. For example this issue - to see the fix I had to Ctrl+C the tns (livesync with watch) then uninstall the app and re-run the tns, which did the full build and pushed everything to the phone. Because even though tns does detect the changes, restarts the app - changes are not there. Is that a known issue with 2.3? Will this affect user updating the app from the store?
2. is there recommendations on how to build NS parts that utilize native functionality, like my current example, I don't get any intellisense, so basically left with manually browsing web, source files and guessing what goes where
3. I tried registering the receiver via

app.android.registerBroadcastReceiver(android.provider.Telephony.SMS_RECEIVED

but was getting Java null ref exception about priority , basically this fails right away:

new android.content.IntentFilter(android.provider.Telephony.SMS_RECEIVED);

Is that because this receiver requires the static configuration via the manifest + priority set at build time?
Thank you!

[petekanev]

@snekbaev fixed the typo in my previous comment. Also fixed the sample, thanks for pointing out the mistake in the source.

1. When extending native classes/interfaces through JavaScript/TypeScript you would need to REBUILD the application each time to trigger generation of the updated source. Livesync only pushes updated JavaScript sources, but will not rebuild the app, and thus bindings for your custom class will not be generated. This behavior is intended. Having said that - no, users will not face issues if/when updating the application with updated sources.

2. As of 2.4 we will generate typings - TypeScript definition files for the base android SDK classes, as well as the android support libraries referenced in the build script that we include in the android package (appcompat 4, appcompat 7). On build you will be able to specify the --androidTypings flag which will output a android.d.ts file which you only need to include in a metadata file (part of TypeScript specification) to enable autocompletion (intellisense) for the native android/java classes. Sometimes referencing the generated typings may not be necessary if Visual Studio Code is configured properly to read definitions from the Workspace.
   The generation of typings is an experimental feature that we are rolling out, so there may be bugs (unlikely, but they haven't been tested enough, and the android API isn't exactly... compatible with TypeScript)

3. It is not quite clear to me what you are doing and what the particular exception is. I'd be grateful if you could provide more info there.

Thanks!

[snekbaev]

Thank you for your help!

1. alright, I will be doing tns deploy in those cases without manual uninstallation
2. very nice :) I needed a way to read incoming sms, those APIs were added in version 19, whereas NS has d.ts file for version 17, so had to make this functionality in Android Studio first, now will port to NS app.
3. http://docs.nativescript.org/cookbook/application -> Registering a Broadcast Receiver (Android) try that with android.provider.Telephony.SMS_RECEIVED Console gives:

11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.callJSMethodNative(Native Method)
11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.callJSMethod(Runtime.java:716)
11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.callJSMethod(Runtime.java:697)
11-14 08:03:25.880 25538 25538 W System.err:     com.tns.Runtime.callJSMethod(Runtime.java:687)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.callJSMethodNative(Native Method)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:716)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:697)
11-14 08:03:25.881 25538 25538 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:687)

and phone's screen shows:

com.tns.NativeScriptException: 
Calling js method onClick failed

Error: Error in views/home/home.component.html:11:58 caused by: java.lang.NullPointerException: Attempt to read from field 'int android.content.IntentFilter.mPriority' on a null object reference
    android.content.IntentFilter.<init>(IntentFilter.java:427)
    com.tns.Runtime.callJSMethodNative(Native Method)
    com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
    com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
    com.tns.Runtime.callJSMethod(Runtime.java:716)
    com.tns.Runtime.callJSMethod(Runtime.java:697)
    com.tns.Runtime.callJSMethod(Runtime.java:687)
    com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
<redacted>

strange that I didn't get the top part in the console. Please note that I have static + dynamic (via plugin) permissions configured:

<uses-permission android:name="android.permission.SEND_SMS"/>
<uses-permission android:name="android.permission.READ_SMS"/>
<uses-permission android:name="android.permission.RECEIVE_SMS"/>

and android:minSdkVersion="19"

Right at this moment I'm looking at how the app is coming. "app" folder is 2.9MB and the built apk is 20-21MB. Start-up times are around 3-5 seconds on my N5 (tried also the release build). Do you think removing AngularJS 2 would help dramatically with the apk size and mainly with start-up times?

[sadiqna]

@snekbaev have you got success with background service nativescript angular.if provide any sample code or instructions

[cmargulhano]

@snekbaev?

[snekbaev]

Hi,
I managed to make it work back then. It was my first and the only NS project. I don't remember the details now, but occasionally to be able to see the broadcaster related changes a full deploy was required, otherwise it was just giving an error or running the older code. I'm not aware if they have changed anything in that respect (since v2.3 or v2.4), but working with the platform specific native stuff wasn't a joy. Had issues trying to find JS counterparts of Android API. Sometimes I was first writing the logic, including the broadcaster, in Android Studio first, then porting it to NS. I think I eventually made my own SMS related plugin or something like that and loaded the data using webworker. Also remember generating the typings manually.

You could also try to go the Android Studio route first, then port. Moreover, it is much easier to navigate through API in it, jump around implementations.

Hope this helps!
Thank you!

[cerireyhan]

@cmargulhano anyone made it work with nativescript-angular?

[NickIliev]

@cerireyhan the workflow for Angular application is no different from the plain JS one. Let me know if you are hitting a specific problem in your implementation.

[jorgeartigas]

@NickIliev I'm trying to use a method from AppComponent class inside MyJobService but im getting this error
How can I use other class methods?

TypeError: Cannot read property 'get' of undefined

this is the code

android.app.job.JobService.extend("com.tns.notifications.MyJobService", {
    onStartJob: function(params) {       
        console.log("Job execution ...");

        // Do something useful here, fetch data and show notification for example
        var utils = require("utils/utils");
        var context = utils.ad.getApplicationContext();

        var App = require("./app.component").AppComponent;
        var app = new App();

        app.get('logout', {})
          .toPromise()
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err)
          })

        var builder = new android.app.Notification.Builder(context);
        builder.setContentTitle("Scheduled Notification")
            .setAutoCancel(true)
            .setColor(android.R.color.holo_purple)//getResources().getColor(R.color.colorAccent))
            .setContentText("This notification has been triggered by Notification Service")
            .setVibrate([100, 200, 100])
            .setSmallIcon(android.R.drawable.btn_star_big_on);
           
        var mNotificationManager = context.getSystemService(android.content.Context.NOTIFICATION_SERVICE);

        // The id of the channel.
        const channelId = "my_channel_01";
        // The user-visible name of the channel.
        const name = "Channel name";
        // The user-visible description of the channel.
        const description = "Channel description";
        const importance = android.app.NotificationManager.IMPORTANCE_LOW;
        const mChannel = new android.app.NotificationChannel(channelId, name,importance);
        // Configure the notification channel.
        mChannel.setDescription(description);
        mChannel.enableLights(true);
        // Sets the notification light color for notifications posted to this
        // channel, if the device supports this feature.
        mChannel.setLightColor(android.graphics.Color.RED);
        mChannel.enableVibration(true);
        mNotificationManager.createNotificationChannel(mChannel);

        builder.setChannelId(channelId);

        mNotificationManager.notify(1, builder.build());

        return false;
    },
    
    onStopJob: function() {
        console.log("Stopping job ...");
    }
});