Introduction to Samsung Gear App Development

• Download shanuFirstGearApp.zip - 3.7 MB

Introduction

Nowadays, Smartwatches are mandatory to be used in our daytoday life. If you ask me a question since we already have Smartphone,s so why we need Smartwatches, then I will answer as it’s important to use Smartwatch as well Smartphones in today’s busy world. For example, let’s consider now we are in a meeting and at the same time we are getting some continues calls. Wwe couldn’t check who’s calling at the moment. If suppose it’s a very important and urgent call then we will be missing it without seeing who’s calling. Consider, if we are using the Smartwatch, then without disturbing the meeting we can check who’s calling and if it’s an important call, we can attend it.

In this article we will see in detail:

1. Prerequisites need to install for developing Samsung gear App.
2. Create Simple Samsung gear App to display Text and Image.
3. Create and run Sample Template available for Samsung Gear Calculator and Touch Paint App.

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

You can find this Tizen SDK and SDK image from http://developer.samsung.com/gear/ .Here I have been using STANDALONE TIZEN SDK as in this article is mainly dealing with Samsung Gear development.

From the above link click on the TIZEN SDK for STANDALONE which will redirects to https://developer.tizen.org/development/tools/download?langswitch=en

Download the Tizen SDK : Download Tizen SDK as per requirement of Operating System you are using. Here from this list I have downloaded for Windows 64 bits as my Operating System is Windows 8 with 64 bit. .  

Download SDK Image:After downloaded the Tizen SDk from the same web page you can find SDK Image.Select as per your Operating System and save it to your local computer. Here I have downloaded for Windows 64 bits as my Operating System is Windows 8 with 64 bit.

After downloading both Tizen SDK and SDK Image.From your saved folder run the Tizen SDK Exe to install it on your computer.

When you start installing the Tizen SDK and if you didn’t install Java Runtime Environment on your computer you will get the error message like below.

Download the Java Runtime Environment and install it on your computer. You can download JRE from this link http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html .Download as per your Operating System requirement and install it.

After Installing the JRE now you are ok to be install Tizen SDK. Run again the exe and install it on your computer.

Note: Before installing you need need to select and install the SDK Image which you downloaded and saved in your computer. To Install the SDK image click on Advanced label before installing the Tizen SDK.

When you click on Advanced label popup window will open from there click on SDK image radio button .

Browse for your folder where you have downloaded the SDK Image. Select the SDK Image zip file and click ok.

After installing the SDK Image now click on Install to install the Tizen SDK

 

Here you can select per your requirement as Mobile or Wearable .since we are developing Samsung Gear App I have selected only wearable from here and click next.

Click on Install to install your TIZEN SDK.

After successful installation now you are ready to develop your Samsung Gear App for smartwatches. Before start working restart your computer.

Using the code

After installing the Tizen SDK from your program files click on Tizen IDE to create your first Samsung Gear App.

Click -> Start programs -> Click Tizen IDE.

For the first time it will as 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 -> Tizen Web project.

Yes the main advantage was been that the Tizen project we can developed using HTML and JavaScript. So this will be big advantage for Web developer.

Creating our First Wearable UI Template: We can see a window like below .first 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 in the left side of Project Explorer. I have added my Image in this project to display a Image on our Gear App.

You can see index.html file .pen the html file to write your hello text and Add image in that.

When you double click on the html file .The file will be open in editor window where you can add your own text and image to be displayed .Here you can I have changed the Title, text and added the image.

By default the html will added the JavaScript file which we will see in detail in my next part.

<!DOCTYPE html>
<html>
<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>
       <div class="ui-page ui-page-active" id="main">
             <header class="ui-header">
                    <h2 class="ui-title">SAMSUNG GEAR</h2>
             </header>
             <div class="ui-content content-padding">
                    <ul class="ui-listview">
                           <p>SHANU App for SAMSUNG GEAR </p>
                           <p align="center"><img src="shanu.jpg" /> </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>
</body>
</html>

That’s all now you have successfully created your first Samsung Gear App.

You can preview the program by clicking on preview button at the top

Note: When I click the preview button for the first time I got the below error message as can’t open preview. Asked to add some settings under Window> Preference  

To solve the error I have fallow the instructions given from this link

https://developer.tizen.org/ko/forums/sdk-ide/tizen-web-simulator-could-not-be-found?langswitch=ko

Click on Window-> Preferences from your Tizen IDE.

 

Next Select Tizen SDK-> Web -> Simulator and change same like this image below as per you installed path of tizen-Sdk.

Next Select Tizen SDK-> Web -> Chrome and change same like this image below as per you installed path of tizen-Sdk and chrome installation path.

Now click on the Preview Button at the top and you see the output of your first Samsung Gear App,

Run on Emulator: To run on Emulator click on the Emulator Manager at the bottom of project Explorer

The Emulator Manager will be open you can click on Create New and give some proper name for your Emulator.

There is 2 different kind of emulator available one is Standard which is SQURE Shape Gear and next is Circle shape Gear

You can select any one we can see the output in both emulators one by one.

To run our project in Emulator .Right click on our project -> Select Run As -> Tizen Web Application.

Now we can see our first Samsung gear app will be running in Square type Emulator.

If you select the Emulator Type as Circle and Run the project the project will be run in Circle Type Emulator as below.

Run in Simulator: You can also view the output in Simulator .Right Click the project->Select Run As -> tizen Web Simulator Application.

If you select the Simulator and Run the project the project will be run in Web Simulator as below.

3.Create and Run Sample Template available for Samsung Gear Calculator and Touch Paint App.

You can also find some default Sample Template available from your project template .To get more familiar about Samsung gear App development .you can open the existing sample app and check for how it’s working.

Here let’s see how to open the sample App and play with it.

Clcik File -> New Project->Select Sample Template -> select any one sample Template available from the list .I have selected Basic-> Calculator. Give name for the Project and Click finish.

You can see the sample code written in index.html for displaying the Calculator in your Gear.

Run the program in emulator and you can see the output like below.

Points of Interest

Hope you like this and now you might be having more clear idea to start working with Samsung gear App development for Smartwatch and have fun.

History

shanuFirstGearApp.zip - 2015-09-26