• Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
test
Code4Developers

Code4Developers

Code4Developers
  • Home
  • Categories
  • Video Tutorials
    • Angular 5
  • News
  • About us
  • Contact us
  • Login
  • Angular
  • JavaScript
  • NativeScript
  • TypeScript

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

  • Arif Khoja
  • March 6, 2018
  • 3 minute read
wearable-apps
Total
0
Shares
0
0
0

A while ago i was Searching, if it’s possible to use NativeScript and Angular with Android Wear. 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.

WearableApp

I will 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:

#> tns create --ng AndroidWatch

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

<!-- add this line -->
<uses-feature android:name="android.hardware.type.watch" />
 
<!-- edit android:theme -->
<application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.DeviceDefault">

Done!

Run Project: (3 Steps)

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

#> android avd

You can find a sample configuration here.

AVD-Setup

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.

#> emulator @{AVD Name}

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

#> tns run android

It should deploy the standard NativeScript, Angular App on your Android Wear emulator and look like this.

AndroidWatchNsDemoApp

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.

<FlexboxLayout flexDirection="column">
    <FlexboxLayout flexDirection="row" justifyContent="center">
        <Label text="Berlin" class="h3"></Label>
    </FlexboxLayout>
    <FlexboxLayout flexDirection="row" justifyContent="center">
        <Label text="12" class="h1 time"></Label>
        <Label text=":" class="h1 time"></Label>
        <Label text="42" class="h1 time"></Label>
        <Label text="15"></Label>
    </FlexboxLayout>
</FlexboxLayout>

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:

<FlexboxLayout flexDirection="column" 
               justifyContent="space-between" 
               (swipe)="onSwipe($event)"></FlexboxLayout>

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

onSwipe(args: SwipeGestureEventData) {
    switch (args.direction) {
      case SwipeDirection.up:
          this.nextTimeZone()
          break;
      // ... more cases
    }
  }

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:

<FlexboxLayout flexDirection="column" #timeContainer>

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

@ViewChild("timeContainer") container: ElementRef;
 
nextTimeZone() {
    let container = <View>this.container.nativeElement;
    let promise = container.animate({
      translate: { x: 0, y: -200},
      duration: 300
    });
    promise.then(() => {
      // do sth. after the animation
    })
  }

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

Arif Khoja
Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.

Views: 6,714

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on X (Opens in new window) X
  • Click to share on Pinterest (Opens in new window) Pinterest
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print

Like this:

Like Loading...

Related Posts

Total
0
Shares
Share 0
Tweet 0
Pin it 0

Leave a ReplyCancel reply

Subscribe to Website via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Recent Posts
  • Getting Started with AWS Step Functions: Orchestration Made Simple

    Getting Started with AWS Step Functions: Orchestration Made Simple

    2 months ago
  • React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications

    2 years ago
  • Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size

    2 years ago
  • Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    Unlocking the Power of React Hooks: A Comprehensive Guide with Examples

    2 years ago
  • Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    Celebrating a Decade of Phenomenal Growth: Insights and Reflections on 10 Years of Software Engineering

    2 years ago
  • Angular Custom Elements: Creating Reusable Components with Angular

    Angular Custom Elements: Creating Reusable Components with Angular

    3 years ago
  • Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    Connect Firebase Realtime NoSQL Database with Angular App from Scratch

    5 years ago
  • How to Build an Inclusive Esports Community

    How to Build an Inclusive Esports Community

    5 years ago
  • Best Digital Icebreakers

    Best Digital Icebreakers

    5 years ago
  • Email alerts when a docker container stopped in AWS ECS CLUSTER

    Email alerts when a docker container stopped in AWS ECS CLUSTER

    5 years ago
Subscribe to Website via Email

Enter your email address to subscribe to this website and receive notifications of new posts by email.

Featured Posts
  • javascript 1
    Spread syntax (three dots) in JavaScript
    • March 21, 2018
  • Angular 2
    Angular 6 CRUD – Part 1: Project Setup, Routing, Service
    • May 9, 2018
  • javascript 3
    Local Storage and Session Storage
    • May 22, 2017
  • Angular 4
    Angular 4 Project Structure
    • June 18, 2017
  • AWS 5
    Email alerts when a docker container stopped in AWS ECS CLUSTER
    • July 24, 2020
Code4Developers
Learning is never ending process

Input your search keywords and press Enter.

 

Loading Comments...
 

    %d