Added NativeScript examples

examples/horizon-nativescript-chat-app/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+hooks
+platforms
+.vscode
+
+*.js
+*.map
+*.log

examples/horizon-nativescript-chat-app/README.md

@@ -0,0 +1,29 @@
+This is an example of how to integrate [Horizon](http://horizon.io/) with a [NativeScript](https://www.nativescript.org/) app.
+
+### Prerequisites
+
+* Install Rethinkdb: https://rethinkdb.com/docs/install/
+* Install Horizon: `npm install -g horizon`
+
+
+## Server Setup
+
+### Create horizon server
+
+```
+hz init nschatApp
+cd nschatAPP
+hz serve --dev  --allow-unauthenticated true --auto-create-collection true --auto-create-index true
+```
+
+##Start Android version
+```
+npm i
+tns run android
+```
+
+##Start iOS version
+```
+npm i
+tns run ios
+```

examples/horizon-nativescript-chat-app/app/App_Resources/Android/AndroidManifest.xml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="1"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-sdk
+		android:minSdkVersion="17"
+		android:targetSdkVersion="__APILEVEL__"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@drawable/icon"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme" >
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboardHidden|orientation|screenSize">
+
+				<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

examples/horizon-nativescript-chat-app/app/App_Resources/Android/app.gradle

@@ -0,0 +1,15 @@
+// Add your native dependencies here:
+
+// Uncomment to add recyclerview-v7 dependency
+//dependencies {
+//	compile 'com.android.support:recyclerview-v7:+'
+//}
+
+android {  
+  defaultConfig {  
+    generatedDensities = []  
+  }  
+  aaptOptions {  
+    additionalParameters "--no-version-vectors"  
+  }  
+} 

examples/horizon-nativescript-chat-app/app/App_Resources/iOS/Info.plist

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundleExecutable</key>
+	<string>${EXECUTABLE_NAME}</string>
+	<key>CFBundleIconFile</key>
+	<string>icon.png</string>
+	<key>CFBundleIcons</key>
+	<dict>
+		<key>CFBundlePrimaryIcon</key>
+		<dict>
+			<key>CFBundleIconFiles</key>
+			<array>
+				<string>icon-40</string>
+				<string>icon-60</string>
+				<string>icon-72</string>
+				<string>icon-76</string>
+				<string>Icon-Small</string>
+				<string>Icon-Small-50</string>
+			</array>
+			<key>UIPrerenderedIcon</key>
+			<false/>
+		</dict>
+	</dict>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>${PRODUCT_NAME}</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiresFullScreen</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+</dict>
+</plist>

examples/horizon-nativescript-chat-app/app/App_Resources/iOS/build.xcconfig

@@ -0,0 +1,5 @@
+// You can add custom settings here
+// for example you can uncomment the following line to force distribution code signing
+// CODE_SIGN_IDENTITY = iPhone Distribution 
+// ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+// ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = Brand Assets;

examples/horizon-nativescript-chat-app/app/app.css

@@ -0,0 +1,13 @@
+.title {
+    font-size: 30;
+    horizontal-align: center;
+    margin: 20;
+}
+
+.message {
+    font-size: 20;
+    color: #284848;
+    horizontal-align: center;
+    margin: 0 20;
+    text-align: center;
+}

examples/horizon-nativescript-chat-app/app/app.ts

@@ -0,0 +1,13 @@
+import application = require("application");
+var moment = require("moment");
+
+require('nativescript-websockets');
+
+function fromNow(value:Date): any {
+  if(value){
+    return moment(value).fromNow();
+  }
+}
+
+application.resources['fromNow'] = fromNow;
+application.start({ moduleName: "main-page" });

examples/horizon-nativescript-chat-app/app/config.ts

@@ -0,0 +1,5 @@
+let options = {
+    SERVER_URL:'192.168.56.1:8181' //Genymotion 
+}
+
+export = options;

examples/horizon-nativescript-chat-app/app/main-page.ts

@@ -0,0 +1,10 @@
+import { EventData } from "data/observable";
+import { Page } from "ui/page";
+import { HorizonDemo } from "./main-view-model";
+
+// Event handler for Page "navigatingTo" event attached in main-page.xml
+export function navigatingTo(args: EventData) {
+    // Get the event sender
+    var page = <Page>args.object;
+    page.bindingContext = new HorizonDemo();
+}

examples/horizon-nativescript-chat-app/app/main-page.xml

@@ -0,0 +1,24 @@
+<Page id="page" xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <ActionBar title="Horizon {N} Chat">
+  </ActionBar>
+  <GridLayout rows="*,auto">
+      <GridLayout>
+        <ListView items="{{ messages }}" id="list">
+            <ListView.itemTemplate>
+               <GridLayout class="messages" columns="50,*,auto">
+                  <Image height="50" width="50" src="{{ avatar }}"></Image>
+                  <Label textWrap="true" verticalAlignment="center" col="1" text="{{ text }}"></Label>
+                  <Label verticalAlignment="top" horizontalAlignment="right" col="2" text="{{ timeStamp | fromNow }}"></Label>
+              </GridLayout> 
+            </ListView.itemTemplate>
+        </ListView>
+      </GridLayout>
+
+      <GridLayout row="1" columns="*,auto">
+          <TextField hint="Enter message ....." row="1" text="{{ newMessage }}"></TextField>
+          <Button row="1" col="1" text="Send" tap="{{ addMessage }}"></Button>
+      </GridLayout>
+
+  </GridLayout>
+</Page>
+

examples/horizon-nativescript-chat-app/app/main-view-model.ts

@@ -0,0 +1,67 @@
+var Horizon = require('@horizon/client/dist/horizon-dev');
+import {Observable} from 'data/observable';
+import {ObservableArray} from 'data/observable-array';
+import frame = require("ui/frame");
+import {ListView} from 'ui/list-view';
+var config = require('./config');
+
+const SERVER_URL = config.SERVER_URL;
+
+export class HorizonDemo extends Observable {
+    public messages: ObservableArray<any>;
+    public newMessage: string;
+    private horizon;
+    private chat;
+    private avatar_url = `http://api.adorable.io/avatars/50/${new Date().getMilliseconds()}.png`;
+
+    constructor() {
+        super();
+        this.messages = new ObservableArray();
+
+        this.horizon = new Horizon({ host: SERVER_URL });
+
+        this.horizon.onReady()
+            .subscribe(status => { console.log(status.type) })
+
+        this.horizon.onDisconnected()
+            .subscribe(status => { console.log(status.type) })
+
+        this.horizon.onSocketError()
+            .subscribe(status => { console.log(status.type) })
+
+        this.chat = this.horizon('messages');
+
+        this.getChats().subscribe((newMessage: any) => {           
+            newMessage.map((val,index)=>{
+                this.messages.setItem(index,val);
+            });
+            this.messages.reverse();            
+        });
+    }
+
+    private getChats() {
+        return this.chat
+            .order('timeStamp', 'descending')
+            .limit(10)
+            .watch();
+    }
+
+    public addMessage() {
+        this.chat
+            .store({
+                text: this.newMessage,
+                timeStamp: new Date(),
+                avatar: this.avatar_url,
+            }).subscribe((res) => {
+                console.log(`Adding new message:`);
+               let lv =  <ListView>frame.topmost().getViewById('list');
+               lv.scrollToIndex(this.messages.length - 1);
+            },
+            (error) => { console.log(error) });
+        this.set('newMessage', '');
+    }
+
+    private getStatus() {
+        return this.horizon.status();
+    }
+}

examples/horizon-nativescript-chat-app/app/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "tns-template-hello-world-ts",
+	"main": "app.js",
+	"version": "2.0.0",
+	"author": "Telerik <[email protected]>",
+	"description": "Nativescript hello-world-ts project template",
+	"license": "Apache-2.0",
+	"keywords": [
+		"telerik",
+		"mobile",
+		"nativescript",
+		"{N}",
+		"tns",
+		"appbuilder",
+		"template"
+	],
+	"repository": {
+		"type": "git",
+		"url": "[email protected]:NativeScript/template-hello-world-ts.git"
+	},
+	"bugs": {
+		"url": "https://github.com/NativeScript/template-hello-world-ts/issues"
+	},
+	"homepage": "https://github.com/NativeScript/template-hello-world-ts",
+	"android": {
+		"v8Flags": "--expose_gc"
+	},
+	"devDependencies": {
+		"nativescript-dev-typescript": "^0.3.0"
+	}
+}

examples/horizon-nativescript-chat-app/package.json

@@ -0,0 +1,30 @@
+{
+	"description": "NativeScript Application",
+	"license": "SEE LICENSE IN <your-license-filename>",
+	"readme": "NativeScript Application",
+	"repository": "<fill-your-repository-here>",
+	"nativescript": {
+		"id": "org.nativescript.nativescriptchatapp",
+		"tns-android": {
+			"version": "2.0.0"
+		},
+		"tns-ios": {
+			"version": "2.0.0"
+		}
+	},
+	"dependencies": {
+		"@horizon/client": "^1.0.1",
+		"moment": "^2.13.0",
+		"nativescript-websockets": "1.2.1",
+		"tns-core-modules": "2.0.1"
+	},
+	"devDependencies": {
+		"babel-traverse": "6.9.0",
+		"babel-types": "6.9.0",
+		"babylon": "6.8.0",
+		"filewalker": "0.1.2",
+		"lazy": "1.0.11",
+		"nativescript-dev-typescript": "^0.3.0",
+		"typescript": "^1.8.10"
+	}
+}

examples/horizon-nativescript-chat-app/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="./node_modules/tns-core-modules/tns-core-modules.d.ts" /> Needed for autocompletion and compilation.

examples/horizon-nativescript-chat-app/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "noEmitHelpers": true,
+        "noEmitOnError": true
+    },
+    "exclude": [
+        "node_modules",
+        "platforms"
+    ]
+}