April 3, 2017

JavaScript Running On A Wearable? Yes, And Its Native.

A while ago some folks asked me, if it’s possible to use NativeScript and Angular with Android Wear.

tl:dr; It’s possible, easy to setup in 5 steps and with FlexBox in NativeScript you can even handle small screens.

NativeScript is a framework to build truly native apps for iOS and Android based on JavaScript. Furthermore it plays nice together with TypeScript and the famous Angular framework.

I show you, how you can setup a simple app for Android Wear in 5 Steps and implement a little clock app using native gestures and animations. You can see the final result here:

Animation of the final App

Setup NativeScript with Angular for Android Wear: (2 Steps)

I hope you already installed NativeScript and the Android SDK on your machine. If not you can follow the instructions from NativeScript.

Now create a new NativeScript Angular project via:

Afterwards open app/App_Resources/AndroidManifest.xml with your favorite IDE and add/edit it as follows:

Done!

Run Project: (3 Steps)

First we need a Android Wear emulator, you can create one via CLI or in Android Studio (,aybe you need to download the Android Wear images first). I’m going to use the CLI:

You can find a sample configuration here.

Now we start the emulator from inside Android AVD (“Start …”) or via CLI. The reason is, NativeScript looks for an already opened emulator and deploys the app there.

Next just start NativeScript via the Visual Studio Code Plugin or another CLI:

It should deploy the standard NativeScript, Angular App on your Android Wear emulator and look like this. Now you have your first Android Wear app build with NativeScript. Congratulations!

 

Simple World Clock:

To proof the functionality, I build a little app showing the actual time in NYC, Berlin and Tokyo. I’ll be using Moment Timezone to get the time for each location.

You can find the final version of the clock at GitHub.

Layout:

The layout is based on FlexBox so, it can handle the various screen sizes and rotations best. There is only one screen and it should show the city name and the actual time at that location.

In the final app this container is packed into another FlexBox layout, so we can add arrows to switch between the cities and add gesture control.

Gestures:

We want to use a swipe up and down gesture to switch between the locations, this is quite easy. Just add a swipe attribute to the layout:

This calls the “onSwipe()” Method in our Angular Component and handles the swipe events:

While this works very well on a normal Android emulator,  there may be some issues on Android Wear.

Animations:

In NativeScript you can animate elements either from JavaScript/ TypeScript or trough CSS regular animations. It also should be possible to use Angular Animations, but for simplicity’s sake I’m going to use plain CSS animations. The example uses animations via an elementRef and the NativeScript Animation API. You have to add a reference in your template, so you can access the element via code:

In your component just add a reference and animate the element on a tap or swipe.

Now you have your first own App running on a Wearable and using the basic functionalities of NativeScript.

Related Posts

Admin Admin
Developer at thecodecampus </>


Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

```
code block
example
```

Your email address will not be published.