Note: You can download the Source Code  from the link  Source Code Download Link

Introduction

What is Gear Group Messaging (GGM) System for Samsung Gear Smartwatch?

In this article we see how to send Group Message from web server to Samsung Gear Smartwatches. The main aim of this Group Message System for Samsung Gear Smartwatch is to send fast and important message to groups from the web server. We have Email, Smartphone messaging system then why we need the group messages to Smartwatch. The answer to this question is very simple. Now let’s consider the CEO of a company wants to meet all the Project Managers of a company in 10 minutes. The CEO can send an email to all the managers and also send Text message to Smartphones. It’s not sure all the Project Managers can see the mail and also all Project managers can see the smartphone messages as they might be not on desk or in a meeting or at cafeteria. In this case there will be a possibility of not seeing the messages send by the CEO. Now we consider that all the Project Managers wearing Samsung Gear Smartwatch. The CEO can send message from web site as “4 Pm Meeting”. After the CEO post the new message the message will be displayed immediately in everyone’s Samsung gear Smartwatch. This group message System is not only for a company, but this Group Messaging system can be used for family, friends, etc.

The main advantage will be anyone can post the message within office Group. Only one message can be posted. Every time the new message will be updated with an old image.

From the above GIF Image we can see that from my MVC web application using AngularJS and Web API I will be updating the message to the database and the updated result will get back from the database using Web API get method. In my Samsung Gear app I have used the AngularJS controller to get the result of WEB API and bind the result message in Samsung Gear. We will see in detail how to create an application. 

Shanu Gear Group Messaging (GGM) Architecture 

Here we can see my GGM Architecture in detail. The Group message can be viewed in both Samsung Gear as well as at GGM Website.

Note: If you are new to Samsung Gear App development using TIZEN IDE, then kindly view my previous article which explain in detail how to Install Tizen SDK and create your first hello world program using Tizen IDE:

In this article we will see in detail how to:

  1. Create Group Message Web Server using MVC, AngularJS and Web API 2.This application will be used to post Messages to group rom website.
  2. Create Simple Samsung Gear App to display Date and Current Time using AngularJS.
  3. Create Samsung Gear App with AngularJS to display the current message from WEB API.

Prerequisites need to install for developing Samsung Gear App

To start developing our first App for Samsung Gear we need the fallowing software to be installed.

  1. Tizen SDK

    (Tizen is consist of set of tools for Developing Tizen web and native applications .It contains IDE for developing our applications and Emulator to view our outputs)

  2. SDK Image
  3. Visual Studio 2015 - you can download it from here.

Building the Sample

You can also view my previous articles related to AngularJS using MVC and the WCF Rest Service.

Description

Create Group Message Web Server using MVC, AngularJS and Web API 2. This application will be used to post Messages to the group from website.

  1. Create Database and Table

    We will create a MessageDetails table under the Database ‘MessageDB’. 

    The following is the script to create a database, table and sample insert query. Run this script in your SQL Server. I have used SQL Server 2014.
-- =============================================                                
-- Author      : Shanu                                
-- Create date : 2015-10-01                                   
-- Description : To Create Database,Table and Sample Insert Query                             
-- Latest                                
-- Modifier    : Shanu                                 
-- Modify date : 2015-10-01                            
-- ============================================= 
--Script to create DB,Table and sample Insert data 
  
USE MASTER 
GO 
  
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB 
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'MessageDB'
DROP DATABASE MessageDB 
GO 
  
CREATE DATABASE MessageDB 
GO 
  
USE MessageDB 
GO   
  
-- 1) //////////// StudentMasters 
  
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'MessageDetails'
DROP TABLE MessageDetails 
GO 
  
CREATE TABLE [dbo].[MessageDetail]( 
       [msgID] INT IDENTITY PRIMARY KEY
       [grpMessage] [varchar](500) NOT NULL,
        [msgDate]  datetime
)
  
   Select * from MessageDetail
   -- 1) Stored procedure to Select Student Details
  
-- Author      : Shanu                                                               
-- Create date :  2015-10-01                                                           
-- Description : MessageDetail                                           
-- Tables used :  MessageDetail                                                              
-- Modifier    : Shanu                                                               
-- Modify date :  2015-10-01                                                              
-- =============================================  
-- exec USP_Message_Select
-- =============================================                                                          
Create PROCEDURE [dbo].[USP_Message_Select] 
AS                                                               
BEGIN      
         Select Top 1 grpMessage,msgDate
            FROM
                MessageDetail         
END
  
 -- 2) Stored procedure to insert/Update MessageDetail
  
-- Author      : Shanu                                                               
-- Create date :  2015-10-02                                                           
-- Description : MessageDetail                                           
-- Tables used :  MessageDetail                                                              
-- Modifier    : Shanu                                                               
-- Modify date :  2015-10-02                                                              
-- =============================================  
-- exec USP_Message_Insert 'se'
-- =============================================                                                           
CREATE PROCEDURE [dbo].[USP_Message_Insert]                                             
   (                      
     @grpMessage           VARCHAR(100)     = ''  
      )                                                     
AS                                                               
BEGIN       
IF NOT EXISTS (SELECT * FROM MessageDetail )
            BEGIN
                   INSERT INTO MessageDetail
                    ([grpMessage],msgDate)
                    VALUES (@grpMessage,GETDATE())
              
                    Select 'Inserted' as results
            END
         ELSE
             BEGIN
                     UPDATE MessageDetail
                             SET grpMessage  = @grpMessage     ,
                                 msgDate     = GETDATE()         
                     Select 'Updated' as results
              END     
END

In this script I have created two stored procedure one is to select the current message from database and another procedure to Insert the New Message for first time and update the new message if the record find.

2) Create our MVC Web Application in Visual Studio 2015:

After installing our Visual Studio 2015.Click Start -> Programs-> select Visual Studio 2015- Click Visual Studio 2015

Click New -> Project - > Select Web -> ASP.NET Web Application. Select your project location and enter your web application Name.

Select MVC and in Add Folders and Core reference for. Select the Web API and click ok.

Add Database using ADO.NET Entity Data Model

Right click our project and click Add -> New Item.

Select Data->Select ADO.NET Entity Data Model> Give the name for our EF and click Add.
Here click New Connection and provide your SQL-Server Server Name and connect to your database.
Select the data as MessageDB as we have created the database using my SQL Script.
Click next and select the tables need to be used and click finish.
Click Next and select our tables and Stored Procedure that are needed and click Finish. 

Here we can see now we have created our MessageModel.
Once Entity has been created, the next step is we add WEB API to our controller and write function to select/Insert/Update and Delete.

Steps to add our WEB API Controller

Right click Controllers folder, click Add, then Controller.

As we are going to create our WEB API Controller. Select Controller and Add Empty WEB API 2 Controller. Give your Name to Web API controller and click OK. Here for my Web API Controller I have given name “MessagesController”.

As we all know Web API is a simple and easy to build HTTP Services for Browsers and Mobiles; Web API has four methods asGet/Post/Put and Delete where: 

  • Get is to request for the data. (Select)
  • Post is to create a data. (Insert)
  • Put is to update the data.
  • Delete is to delete data.

In our example we will use Get method, since we need to get all the Puzzle Question details from the database.

Get Method

In our example I have used only Get method as I am using to select data from database to display the Word Puzzle game. We need to create object for our Entity and write our Get Method to perform Select operations. 

Select Operation

We use get Method to get all the details of MessageDetail from stored procedure USP_Message_Select_Result using entity object and we return the result as IEnumerable.
Here we can see in get Method I have used the USP_Message_Select to get the result. 
We use this method in our AngularJS and display the result in MVC HTML page.

public class MessagesController : ApiController
    {
               MessageDBEntities objAPI = new MessageDBEntities();
               // to get message from database
               [HttpGet]
               public IEnumerable<USP_Message_Select_Result> Get()
               {             
                      return objAPI.USP_Message_Select().AsEnumerable();
               }
}

Insert/Update Operation 
To Insert and Update I will pass the user posted message as parameter to the procedure and display back the result to MVC page from AngularJS controller.
//to Update Student Details
               [HttpGet]
               public IEnumerable<string> messageinsert(string grpMessage)
               {
                      if (grpMessage == null)
                              grpMessage = "";
                      return objAPI.USP_Message_Insert(grpMessage).AsEnumerable();
               }

Creating AngularJS Controller

Firstly, create a folder inside the Script Folder and I will give the folder name as “MyAngular”.
Now add your Angular Controller inside the folder.

Right Click the MyAngular Folder and click Add -> New Item -> Select Web -> Select AngularJs Controller and give name to Controller. I have given my AngularJS Controller as “Controller.js”

Once the AngularJS Controller is created, we can see by default the controller will have the code with default module definition and all.

If the AngularJS package is missing then add the package to your project.

Right Click your MVC project and Click-> Manage NuGet Packages. Search for AngularJs and click Install.

Steps to Create AngularJs Script Files

Modules.js: Here we add the reference to the Angular.js javascript and create a Angular Module named “RESTClientModule”.

/// <reference path="../angular.js" /> 
/// <reference path="../angular.min.js" />  
/// <reference path="../angular-animate.js" />  
/// <reference path="../angular-animate.min.js" />   
var app;
 (function () {
    app = angular.module("RESTClientModule", ['ngAnimate']);
})();

Controllers: In AngularJS Controller I have performed all the business logic and return the data from WEB API to our MVC HTML page.

1) Variable declarations:

First I declared all the local Variable which needs to be used .For each variable I have added the comments.

app.controller("AngularJs_ImageController", function ($scope, $timeout, $rootScope, $window, $http) {
//Global Variables
$scope.date = new Date();
   $scope.MyName = "shanu";
   $scope.grpMessage = "";
   $scope.grpMessageAdd = "";

2) Select Group Message Function:

To display the latest message from database using $http.get I will get the result and bind to the MVC page using $scope.grpMessage variable.

selectMessageDetails();
    function selectMessageDetails() {
        $http.get('/api/Messages/').success(function (data) {
            $scope.Message = data;
            if ($scope.Message.length > 0) {
                $scope.grpMessage = $scope.Message[0].grpMessage
            }
        })
   .error(function () {
       $scope.error = "An Error has occured while loading posts!";
   });
    }

Here we can see in New Group Message “4 PM Meeting”, the final message which was updated to the database.
Insert/Update Group Message Function

In this method I will be posting the user entered Message to API and insert/update to the database using Stored procedure.

//Save Message
    $scope.saveDetails = function () {
        $scope.messageDetails = $scope.grpMessageAdd;
        if ($scope.grpMessageAdd = "")
        {
            alert("Enter Message");
            return;
        }
        $http.get('/api/Messages/messageinsert/', { params: { grpMessage: $scope.messageDetails } }).success(function (data) {
            $scope.StudentsInserted = data;
            alert($scope.StudentsInserted);
            selectMessageDetails();
        })
      .error(function () {
          $scope.error = "An Error has occured while loading posts!";
      });
    }

Here we can see the gif image and we update the text. After the data is updated to the database; result will be updated in New Group Message.
Create Simple Samsung Gear App to display Date and Current Time using AngularJS
Note: If you are new to Samsung Gear App development using TIZEN IDE, then kindly view my previous article which explain in detail about how to Install Tizen SDK and create your first hello world program using Tizen IDE.

Click - Start programs, then Tizen IDE.

For the first time it will ask you to select your Workspace. You can browse and select folder to create all your project under the folder. Click OK to start your new project.
Once you have done click on File, New, then Tizen Web project.
Creating our First Wearable UI Template: We can see a window like the following. Firstly, we start with Wearable UI Template. Select the Template and Wearable UI and click on Basic. Give name for your project and click Finish.

Once you have created, you can see your Project on the left side of Project Explorer. Create new folder inside your newly created project for adding all the AngularJS reference files. I have created the folder name “MyAngular” and copied all AngularJS and jQuery related reference files to this folder. Also created new JavaScript file as “controller.js” for AngularJS controller creation.

In the Controller.JS javascript file we will create for AngularJS Model and Controller like below.
In this JS file first I create AngularJS Module and then Controller.

In controller I have declared all the variable need to be used as date to display the current date and time. Myname to display my name from controller to an HTML page.

I have used the timer to run every second and call the function “CounterFunction” for every second. In this function I updated the current time and displayed the current time in an html page.

/// <reference path="angular.js" /> 
/// <reference path="angular.min.js" />  
/// <reference path="angular-animate.js" />  
/// <reference path="angular-animate.min.js" />  
var app;
  
(function () {
    app = angular.module("RESTClientModule", ['ngAnimate']);
})();
  
app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http) {
  
    //Global Variables
    $scope.date = new Date();
    $scope.MyName = "Shanu";
    $scope.counterval = 0;
     
    $scope.CounterFunction = function(){
        $timeout(function() {
          $scope.getTime();
          $scope.CounterFunction();
        }, 1000)
      };
      $scope.getTime = function(){
          $scope.counterval= $scope.counterval+1;
          $scope.date = new Date();
      }
  
      // Kick off the interval
      $scope.CounterFunction();
});

Now we have created AngularJS controller next part as we all know that in Tizen Samsung Gear project we have created is web project and we can find the index.html in project explorer. Now in this HTML page we bind the result of controller variable to display the result.
We add all the AngularJS reference at the bottom of HTML page.
In html tag we add the data-ng-app and in the body tag we add the data-ng-controller.Next we bind the name from AngularJS to our page using {{ MyName }}.Same like this we bind the Current Date and time.

<!DOCTYPE html>
<html data-ng-app="RESTClientModule">
<head>
       <meta name="viewport" content="width=device-width,user-scalable=no">
       <title>Gear & AngulrJS</title>
       <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
       <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
       <!-- load theme file for your application -->
       <link rel="stylesheet" href="css/style.css">
</head>
<body data-ng-controller="AngularJs_Controller">
       <div class="ui-page ui-page-active" id="main">
             <header class="ui-header">
                    <h2 class="ui-title">Gear & AngulrJS</h2>
             </header>
             <div class="ui-content content-padding">
                    <ul class="ui-listview">
                           <p>{{ MyName }} </p>
                            <p>  {{date | date:'yyyy-MM-dd'}}</p>  
                              <p>  {{date | date:'hh:mm:ss a'}}</p
                    </ul>
             </div>
       </div>
       <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
       <script type="text/javascript" src="js/circle-helper.js"></script>
       <script src="app.js"></script>
       <script src="lowBatteryCheck.js"></script>     
<script src="MyAngular/angular.js"></script>
<script src="MyAngular/angular-animate.js"></script>
<script src="MyAngular/controller.js"></script>
</body>
</html>

When we run this project in simulator we can see the result as in the following screenshot:
Output with Emulator:
Create Samsung Gear App with AngularJS to display the current message from WEB API

This is our main Samsung Gear App which is to display the newly updated message to be displayed in Samsung Gear. I will be using Timer and every 1 second I call the method to display the updated Group Message from WEB API using AngularJS controller.

Click - Start programs, then Tizen IDE.

For the first time it will ask you to select your Workspace. You can browse and select folder to create all your project under the folder. Click OK to start your new project.
Once you have done click on File, New, then Tizen Web project.
Creating our First Wearable UI Template: We can see a window like the following. Firstly, we start with Wearable UI Template. Select the Template and Wearable UI and click on Basic. Give name for your project and click Finish.

Once you have created, you can see your Project on the left side of Project Explorer. Create new folder inside your newly created project for adding all the AngularJS reference files. I have created the folder name “MyAngular” and copied all AngularJS and jQuery related reference files to this folder. Also created new JavaScript file as “controller.js” for AngularJS controller creation.

In the Controller.JS JavaScript file we will create AngularJS Model and Controller like below.
In this JS file, firstly I will create AngularJS Module and then Controller.

In controller I have declared all the variable need to be used as date to display the current date and time, Myname to display my name from controller to html page and  Messages TO DISPLAY THE MESSAGE FROM api RESULT.

I have used the timer to run every second and call the function “getMessages” for every second. In this function I will update the MESSAGE which I receive from MVC Web API.

/// <reference path="angular.js" /> 
/// <reference path="angular.min.js" />  
/// <reference path="angular-animate.js" /> 
/// <reference path="angular-animate.min.js" />  
var app;
  
(function () {
    app = angular.module("RESTClientModule", ['ngAnimate']);
})();
  
app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http) {
    //Global Variables
    $scope.date = new Date();
    $scope.MyName = "Shanu";
    $scope.Messages = "";  
    $scope.CounterFunction = function(){
        $timeout(function() {
          $scope.getMessages();
          $scope.CounterFunction();
        }, 1000)
      };
      $scope.getMessages = function(){        
          $http.get('http://localhost/shanuMVCTEST/api/Messages/').success(function (data) {                             $scope.AllMessages = data;
              if ($scope.AllMessages.length > 0) { 
                  $scope.Messages=$scope.AllMessages[0].grpMessage;
              }
          })
          .error(function () {
              $scope.error = "An Error has occured while loading posts!";
          });
      }    
      $scope.CounterFunction();
});

Now we have created AngularJS controller next part as we all know that .In Tizen Samsung Gear project we have created is web project and we can find the index.html in project explorer. Now in this html page we bind the result of controller variable to display the result.

We add all the AngularJS reference at the bottom of HTML page. In HTML tag we add the data-ng-app and in body tag we add the data-ng-controller.
Next we bind the message from AngularJS to our page using {{ Messages }}.Same like this we bind the Current Date and time.

<!DOCTYPE html> 
<html data-ng-app="RESTClientModule"<head       <meta name="viewport" content="width=device-width,user-scalable=no"       <title>Circular UI</title> 
       <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css"       <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css"       <!-- load theme file for your application --> 
       <link rel="stylesheet" href="css/style.css"</head> 
<body data-ng-controller="AngularJs_Controller"       <div class="ui-page ui-page-active" id="main"             <header class="ui-header"                    <h2 class="ui-title"                    <span style="color:#fffff;font-size:x-large">Shanu Message Service</span></h2> 
             </header> 
             <div class="ui-content content-padding"                    <ul class="ui-listview"             <img src="shanu.jpg" /> <span style="color:#af2609;font-size:large">Message:</span> 
                             <br<span style="color:#FFFFFF;font-size:x-large"                               {{ Messages }} 
                               </span> 
                    </ul> 
             </div> 
       </div> 
       <script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script> 
       <script type="text/javascript" src="js/circle-helper.js"></script> 
       <script src="app.js"></script> 
       <script src="lowBatteryCheck.js"></script> 
       <script src="MyAngular/angular.js"></script> 
<script src="MyAngular/angular-animate.js"></script> 
<script src="MyAngular/controller.js"></script> 
</body> 
</html>
When we run this project in simulator we can see the result as displaying the current message as “4 PM Meeting”

Note to run this in Emulator we need to perform the fallowing settings in config.xml file to allow internet in your emulator from your Tizen Project.

Config.XML – Double click the Config.xml file and open to do the fallowing changes

Add this below setting in

Features & privileges for the App:
Privilege: http://tizen.org/privilege/internet
feature: http://tizen.org/feature/network.internet

Features Tab:

In features Tab click Add and then select the http://tizen.org/feature/network.internet  

Privileges Tab:

In privileges Tab click Add and then select the http://tizen.org/privilege/internet  

Policy Tab:

In Policy Tab click Add and then add * for any website and Allow Subdomain to true. Same like this you can add to localhost as well.  

Note: You can download the Source Code  from the link  Source Code Download Link