{"id":3284,"date":"2018-03-06T12:45:20","date_gmt":"2018-03-06T07:15:20","guid":{"rendered":"https:\/\/code4developers.com\/?p=3284"},"modified":"2020-08-26T06:39:40","modified_gmt":"2020-08-26T01:09:40","slug":"nativescript-and-angular-with-android-wear","status":"publish","type":"post","link":"https:\/\/code4developers.com\/nativescript-and-angular-with-android-wear\/","title":{"rendered":"JavaScript Running On A Wearable? Yes, And Its Native and Angular."},"content":{"rendered":"

A while ago i was Searching, if it\u2019s possible to use NativeScript<\/span><\/strong><\/a> and<\/span> Angular<\/a><\/strong><\/span> with Android Wear. It\u2019s possible, easy to setup in 5 steps and\u00a0with FlexBox in NativeScript you can even handle small screens.<\/p>\n

NativeScript is a framework to build truly native apps for iOS and Android based on JavaScript. Furthermore\u00a0it plays nice\u00a0together with TypeScript and the famous Angular framework.<\/strong><\/p>\n

\"WearableApp\"<\/p>\n

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\u00a0here:<\/p>\n

\"Animation<\/a><\/p>\n

Setup NativeScript with Angular for Android Wear: (2 Steps)<\/h2>\n

I hope you already installed NativeScript and the Android SDK on your machine. If not you can follow the instructions from NativeScript<\/a>.<\/strong><\/span><\/p>\n

Now create a new NativeScript Angular project via:<\/p>\n

#> tns create --ng AndroidWatch<\/pre>\n
Afterwards open app\/App_Resources\/AndroidManifest.xml with your favorite IDE and add\/edit it as follows:<\/p>\n
<!-- add this line -->\r\n<uses-feature android:name=\"android.hardware.type.watch\" \/>\r\n \r\n<!-- edit android:theme -->\r\n<application\r\n        android:name=\"com.tns.NativeScriptApplication\"\r\n        android:allowBackup=\"true\"\r\n        android:icon=\"@drawable\/icon\"\r\n        android:label=\"@string\/app_name\"\r\n        android:theme=\"@android:style\/Theme.DeviceDefault\"><\/pre>\n
Done!<\/p>\n
Run Project: (3 Steps)<\/h2>\n
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\u2019m going to use the CLI:<\/p>\n
#> android avd<\/pre>\n
You can find a sample configuration here.<\/p>\n
\"AVD-Setup\"<\/p>\n
Now we start the emulator from inside Android AVD (\u201cStart \u2026\u201d) or via CLI. The reason is, NativeScript looks for an already opened emulator and deploys the app there.<\/p>\n
#> emulator @{AVD Name}<\/pre>\n
Next just start NativeScript via the Visual Studio Code Plugin or another CLI:<\/p>\n
#> tns run android<\/pre>\n
It should deploy the standard NativeScript, Angular App on your Android Wear emulator and look like this.<\/p>\n
\"AndroidWatchNsDemoApp\"<\/p>\n
Now you have your first Android Wear app build with\u00a0NativeScript. Congratulations!<\/p>\n
Simple World Clock:<\/h2>\n
To proof the functionality, I build a little app showing the actual time in NYC, Berlin and Tokyo. I\u2019ll be using\u00a0Moment Timezone<\/a><\/span><\/strong> to get the time for each location.<\/p>\n
You can find the final version of the clock at\u00a0GitHub<\/a>.<\/span><\/strong><\/p>\n
Layout:<\/h3>\n
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.<\/p>\n
<FlexboxLayout flexDirection=\"column\">\r\n    <FlexboxLayout flexDirection=\"row\" justifyContent=\"center\">\r\n        <Label text=\"Berlin\" class=\"h3\"><\/Label>\r\n    <\/FlexboxLayout>\r\n    <FlexboxLayout flexDirection=\"row\" justifyContent=\"center\">\r\n        <Label text=\"12\" class=\"h1 time\"><\/Label>\r\n        <Label text=\":\" class=\"h1 time\"><\/Label>\r\n        <Label text=\"42\" class=\"h1 time\"><\/Label>\r\n        <Label text=\"15\"><\/Label>\r\n    <\/FlexboxLayout>\r\n<\/FlexboxLayout><\/pre>\n
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.<\/p>\n
Gestures:<\/h3>\n
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:<\/p>\n
<FlexboxLayout flexDirection=\"column\" \r\n               justifyContent=\"space-between\" \r\n               (swipe)=\"onSwipe($event)\"><\/FlexboxLayout><\/pre>\n
This calls the \u201conSwipe()\u201d Method in our Angular Component and handles the swipe events:<\/p>\n
onSwipe(args: SwipeGestureEventData) {\r\n    switch (args.direction) {\r\n      case SwipeDirection.up:\r\n          this.nextTimeZone()\r\n          break;\r\n      \/\/ ... more cases\r\n    }\r\n  }<\/pre>\n
While this works very well on a normal Android emulator, \u00a0there may be some issues on Android Wear.<\/p>\n
Animations:<\/h3>\n
In NativeScript you can animate elements either from JavaScript\/ TypeScript or trough\u00a0CSS regular animations. It also should be possible to use Angular Animations, but\u00a0for\u00a0simplicity\u2019s sake I\u2019m 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:<\/p>\n
<FlexboxLayout flexDirection=\"column\" #timeContainer><\/pre>\n
In your component just add a reference and animate the element on a tap or swipe.<\/p>\n
@ViewChild(\"timeContainer\") container: ElementRef;\r\n \r\nnextTimeZone() {\r\n    let container = <View>this.container.nativeElement;\r\n    let promise = container.animate({\r\n      translate: { x: 0, y: -200},\r\n      duration: 300\r\n    });\r\n    promise.then(() => {\r\n      \/\/ do sth. after the animation\r\n    })\r\n  }<\/pre>\n
Now you have your first own App running on a Wearable and using the basic functionalities of NativeScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
A while ago i was Searching, if it\u2019s possible to use NativeScript and Angular with Android Wear. It\u2019s possible, easy to setup in 5 steps and\u00a0with FlexBox in NativeScript you…<\/p>\n","protected":false},"author":7,"featured_media":3290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,2,120,121],"tags":[125,29,22,122,124,123],"powerkit_post_featured":[],"class_list":{"0":"post-3284","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"category-javascript","9":"category-nativescript","10":"category-typescript","11":"tag-android-wear-emulator","12":"tag-angular","13":"tag-javascript","14":"tag-native-script","15":"tag-smartwatch-applicaton","16":"tag-wearable-application"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/wearable-apps.png?fit=512%2C512&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-QY","jetpack-related-posts":[{"id":9279,"url":"https:\/\/code4developers.com\/what-is-new-in-angular-10\/","url_meta":{"origin":3284,"position":0},"title":"What is new in Angular 10?","author":"Yatendrasinh Joddha","date":"June 25, 2020","format":false,"excerpt":"Today Angular Teams has announced Version 10.0.0 of Angular! This release is smaller than typical, but it covers the entire platform, including the framework, Angular Material, and the CLI. What's new here? Optional Stricter Settings ng new --strict Enabling this flag initializes your new project with a few new settings\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/miro.medium.com\/max\/60\/0*ruU5G-8_hqEp3UBY?q=20","width":350,"height":200},"classes":[]},{"id":3007,"url":"https:\/\/code4developers.com\/angular-4-components\/","url_meta":{"origin":3284,"position":1},"title":"Angular 4 Components","author":"Nisarg Dave","date":"July 28, 2017","format":false,"excerpt":"In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development.\u00a0The advantage of the component-based approach is\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3435,"url":"https:\/\/code4developers.com\/angular-5\/","url_meta":{"origin":3284,"position":2},"title":"Angular 5 – Video Tutorials","author":"Nisarg Dave","date":"April 14, 2018","format":false,"excerpt":"Angular version 5 - Googles's popular and open source JavaScript framework for building and developing single page mobile and desktop application. The latest version of Angular, Angular 5 was announced to users in 1st November 2017. Angular 5 is focused on making the Angular application smaller , faster and easier\u2026","rel":"","context":"In "Angular 5"","block_context":{"text":"Angular 5","link":"https:\/\/code4developers.com\/category\/angular5\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3376,"url":"https:\/\/code4developers.com\/ionic-project-structure-installation\/","url_meta":{"origin":3284,"position":3},"title":"Ionic Project Structure and Installation","author":"Pratik Maniar","date":"April 1, 2018","format":false,"excerpt":"Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can build mobile, web, and desktop applications with one shared code. In this getting started with Ionic article we will talk\u2026","rel":"","context":"In "Ionic"","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Ionic","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":3284,"position":4},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":3284,"position":5},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3284"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3284\/revisions"}],"predecessor-version":[{"id":12842,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3284\/revisions\/12842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3290"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3284"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}