Introduction To Samsung Gear App Development - Part 1

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 this article is mainly dealing with Samsung Gear development.



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

Download the Tizen SDK: Download Tizen SDK as per the 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, since 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 following error message:



Download the Java Runtime Environment and install it on your computer. You can download JRE from this link. Download as per your Operating System requirement and install it.



After Installing the JRE now you are ok to install Tizen SDK. Again run the exe and install it on your computer.



Note: Before installing you 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 and from there click SDK image radio button .



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



After installing the SDK Image, click Install to install the Tizen SDK



Here you can select as per your requirement as Mobile or Wearable. Since we are developing Samsung Gear App I have only selected wearable from here. After that click Next.



Click 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.



Code Part

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

Click - Start programs, then 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, then Tizen Web project.

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



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 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. Open 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 I have changed the Title, text and added the image.

By default the html will add 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 following error message as "can’t open preview". Asked to add some settings under Window, then Preferences



To solve the error I have followed the instructions given on this link.

Click on Window, then Preferences from your Tizen IDE.



Next select Tizen SDK, Web, then Simulator and change same like the following mage as per your installed path of tizen-Sdk.



Next Select Tizen SDK, Web, then Chrome and change same like the following image as per you installed the 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 open. You can click on Create New and give some proper name for your Emulator.



There are 2 different kinds of emulator available, one is Standard which is SQUARE shaped Gear and next is CIRCLE shaped Gear.



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

To run our project in Emulator. Right click on our project, select Run As, then 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 run in Circle Type Emulator as in the following screenshot:



Run in Simulator: You can also view the output in Simulator. Right click the project, select Run As and click Tizen Web Simulator Application.



If you select the Simulator and run the project, the project will  run in Web Simulator as in the following screenshot:



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 be 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, Sample Template and select any one sample Template available from the list. I have selected Basic, then 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 following output:



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