Click here to Skip to main content
15,881,092 members
Articles / Web Development / HTML

Gear Pre-development Preparation

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
3 Jul 2014Public Domain13 min read 20.4K   258   3   1
Developing applications for Wearable Technology is made easy with the Tizen SDK for Wearable and Samsung Mobile SDK 1.5, you can go ahead and create for the new Samsung Gear!

Hello Gear!

The tutorial found below teaches developers how to build “Hello Gear!”, a sample gear application, using the Tizen SDK for Wearable. It also teaches how to test the applications using the Emulator.

Today we will be discussing the necessary pieces for gear application development, and also create a basic standalone gear application which will be tested on the emulator.

First off, let's download all the necessary pieces that we will need to develop applications for Gear. Go to the Samsung Developer site at http://developer.samsung.com/samsung-gear.

Download all documentation and samples for reference as highlighted below:

Image 1

After that, click on the Tizen SDK for Wearables. This will re-direct you to the download page where you can get the install manager and SDK image. Select the appropriate package for your platform.

Now let's go back to the Samsung Gear page. Click on the "Samsung Mobile SDK (Accessory package)," which will lead you to the mobile SDK page where we can download the latest package that contains the accessory library.

Image 2

Samsung wearable devices and android devices use Samsung Accessory Protocol to communicate. Data is sent over Bluetooth to relay messages from phone to wearables, find the phone from the wearable, and vice versa.

Let's install the Tizen IDE for Wearable. First, launch the Tizen Install Manager.

Image 3

Click on Advanced, make sure "SDK image" is selected, then use the browse button to locate the image of the Tizen IDE or Wearable, and click OK.

Image 4

Click Next, tick the box if you agree to the License Agreement, click Next, then Install. A window will pop up prompting you to install Intel HAXM. Install if you don't already have it installed.

In order to get your feet wet with a convetional "Hello World" let's develop an application for the Wearable device. Let's open the Tizen IDE for Wearable first. It will prompt you for the workspace you want to use. If you have an existing workspace, you may select that, or if you want a separate workspace you can create one as well.

Image 5

A Tip of the day window will show up. Click close to dismiss it. To create a project, click on File at the top of the screen. Select New, then click Tizen Wearable Web Project.

Image 6

You will see a new window where you can select different project types. For this application you will be selecting Wearable UI Basic Application Template. Name it, then click Finish. Make sure the project name has no spaces in it.

Image 7

We now have a project we can work with. To start off, let's change the text displayed on the screen. To start off, let's change the text displayed on the screen. Double-click the index.html file on the Project Explorer on the left. For example, you can Find the "Hello World!" text to display "Hello Gear!" as shown below.

HTML
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width-device-width, user-scalabe=no"/>
    <title>Wearable UI</title>
    <link rel="stylesheet" href="lib/tou/themes/default/tau.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">Wearable UI</h2>
        </header>
        <div class="ui-content content-padding">
            <ul class="ui-listview">
                <p>Hello, Gear!</p>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="lib/tau/js/tai.min.js"></script>
<!-- load javascript file for your application -->
<script src="js/app.js"></script>
<script src="js/LowBatteryCheck.js"></script>
</html>

If you want to build the project, hit F10. If you want to see what the UI looks like, click on Preview. This will display the user interface like so:

Image 8

If you want to deploy the project on an emulator, simply click on the Emulator Manager found on the lower left-hand corner of the screen.

Image 9

An Emulator Manager window will appear where you can create wearable device emulators. Click Add New, give it a name, keep all the default settings for now, then click confirm. To launch the created emulator, click on the play button.

Image 10

And there we go. You now have a working emulator that displays the time. You can also check the pre-installed apps if you want to.

Image 11

To launch the application we made, just right-click on the application folder, select Run As, and click Tizen Wearable Web Application.

Image 12

Then you will see HelloGear displayed on the screen of your emulator. Now if you want to test on an actual device you would need a certificate with DUID (Device Unique IDentifier). Getting a certificate will be discussed later.

To change the colour of the text displayed open style.css and add the style rule ui-listview. We will change the font size to small and change the font colour to aqua. Now the text "HelloGear" will be shown with a small font size and be aqua.

CSS
body {
    margin: 0px auto;
    background-color:#222;
}

.contents {
	display: flex;
	display: -webkit-flex;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height:320px;
}

.content-padding {
	margin-top: 16px;
	margin-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
}

.content_text {
	font-weight:bold;
	font-size:5em;
	color:#fff;
}

.ui-listview{
    font-size: small;
    color: aqua;
}

If you want to run the application, make sure to hit F10 to build it.

To add interactivity to your project, add the bolded line below to app.js which is inside the js folder. This will now show an alert window saying "BYE" when you exit the application.

JavaScript
( function () {
    window.addEventListener( 'tizenhwkey', function( ev ){
        if(( ev.keyName == "back" ) (
            alert("BYE");
            var page = document.getElementsByClassName( 'ui-page-active' )[0],
                pageid = page ? page.id : "";
            if( pageid === "main" ) (
                tizen.application.getCurrentApplication().exit();
            } else {
                window.history.back();
            }
        }
    } );
} () );

Build the project and let's see how it works:

Image 13   Image 14

If you want to explore different samples, create a new project. Select File -> New -> Tizen Wearable Web Project.

Image 15

Select Sample -> Web App -> then select from the various template projects.

Image 16

For starters, I would recommend WearableWidgetSample. This would give you an overview of how to change headers, and how to control other UI elements.

Image 17

If you want to remove or uninstall your project, simply go to your emulator, right-click on it

Image 18

Click on the control panel. This will launch a control panel window. Then select uninstaller.

Image 19

Select the application you wish to uninstall, then click on the Uninstall button. Click OK to complete the uninstall.

Once you have created your own Gear application. As a developer you can monetize your Gear App and upload it to the Samsung Apps.

To do this, register this to the Samsung Apps Seller Office.

Generating Certification

It is necessary to code sign the application using the Tizen IDE for Wearable.

Follow the ‘Certification Process’ in http://developer.samsung.com/samsung-gear.

Now we will teach you how to get an authentication certificate. Before we start, it is important to have a finished Gear application, because that is what we will be uploading the Samsung App Seller Office. We will also need to use your Tizen IDE for Wearable for code signing. We also need access to the Samsung Apps Seller Office, located at http://seller.samsungapps.com.

Image 20

Let's get started. Make sure that your application has a valid certificate before submitting it to the Samsung App Seller Office. The certificate will be used to identify whether your application is authentic and will also be used if you wish to update it. To do this, please refer to the certification process in http://developer.samsung.com/samsung-gear. Following the instructions from the website, we shall get the DUID first, followed by registering the generated certificate. Let's open the Tizen IDE for Wearable.

Image 21

Make sure the Connection Explorer detects a wearable device. This can be an actual wearable device, or an emulator. Right-click on the selected device, then click "Properties."

Image 22

The DUID will be displayed on the infotree item. Take note of this, as this will be needed when registering for a certificate. An alternative to using the IDE would be getting the DUID from the gear page http://developer.samsung.com/samsung-gear. Scroll down until you see the button "Get the virtual Device Unique ID" shown below.

Image 23

Image 24

On the Tizen IDE for Wearable, click on the "Generate Certificate Request" button. This will show you a forum that you need to fill up with the necessary details marked with an asterisk. Make sure you add the DUID you received from the device. Once done, click OK and you will be prompted by a success message:

Image 25

To do this, simply use a PGP or Pretty Good Privacy support tool to generate a public key. The encryption tool varies from one operating system to another. For Windows it is recommended to use either GNU Privacy Guard for Windows or GPG, or Kleopatra. As for Ubuntu users, search for "Passwords and Keys" or Seahorse to create your own PGP key. Finally, Mac OS users can use the GPG Suite.

The following is a sample installation of GPG for Windows.

Image 26

Make sure the GPA component is selected to be installed. Go through the other standard install menus, and click Finish when done.

Image 27

Now, to create your own PGP key, launch the GPA application. Then click on the Keys tab, and choose New key. You will need to enter your full name and email address from which you are going to send your registration request.

Image 28

Enter a passphrase (and re-enter it). And boom, you have successfully created a PGP key you can share with the Samsung Development Center to intiate encrypted communication:

Image 29

The next step is to encrpyt your developer certificate request. To do this, import the Samsung Developer Center PGP key. Go to a PGP server, such as keyserver.pgp.com, then search the keys using the Samsung Development Center email address: gear2.sec@samsung.com or key ID (4D8CE45C).

Image 30

Get the PGP key, then save it on your system by clicking download. Drag and drop the key directly to the GPG application, or import it manually by going to the Key tab and selecting "Import Keys." And there you go:

Image 31

Open and select the created certificate request file, certificate-request.xml. You can find your request certificate under the /Tizen-Wearable-SDK-data/keystore directory, which may be hidden, so it's best if you use a search function for this.

Image 32

Press Encrypt.

Image 33

Then select the Samsung Developer Center key named Gear 2 Samsung from the public keys list. Click OK when you're done. Remember, PGP is not compatible with a web mail system. Therefore, you must encrypt your email message. Click on the Windows tab -> Clipboard:

Image 34

Then paste your message in the Clipboard window. To encrypt the message, click Encrypt:

Image 35

And select the appropriate Samsung Developer key from the list. There you have it:

Image 36

How to Submit Your Gear App to the Samsung Apps Seller Office

Image 37

Now send your generated certificaterequest.xml.gpg and the clipboard message to gear2.sec[at]samsung.com. Now that we know how to encrypt our application, let's wait for an email response from gear2.sec.

Image 38

Now let's look at how to decrypt the file sent to us by gear2.sec[at]samsung.com and then submit your Gear apps to the Samsung Apps Seller Office. It is important to decrypt your registration file after you receive it from the Samsung Developer Center. To perform this, click on the Windows tab once again, then select File Manager. Open the files to be decrypted, then choose decrypt, and then enter your passwords. Your registration file is now decrypted.

When you receive a valid author and distributor certificate, it is automatically added to your IDE's profile. However, you have the option to manually change it by clicking on the Window tab, then go to Preferences:

Image 39

Select Tizen SDK, then choose Security Profiles:

Image 40

Click Add in the profiles panel to add a signed profile. You may edit a certificate by clicking the edit button below. Remember that at least one distributor certificate is required, and you're not required to modify distributor certificates.

Let's go to the Samsung Apps Seller Office, located at http://seller.samsungapps.com. Log in by entering your email address and password. You can even use your Samsung account to log in to the site. If you don't have an account you can go ahead and click "Join Now" and fill in the necessary details. You've got to take note that you have to be a mobile seller to sell Gear applications.

Image 41

Once you've logged into the Samsung Seller Office. Go ahead and click on My Profile and "Add New Application"

Image 42

Enter the basic information of the application. Go ahead and put in the Application Title then check to see if it's available by hitting the Check button. Select an OS. In this case we'll select Android when you're submitting a Gear application. Then, for content type, Gear applications are Native by default, so we'll choose Native Application.

There are three types of Gear applications: the Linked type, Integrated type, and the Standalone type. First the Linked Gear application, this is also known as the Master Follower type. It is not included with the general host application. For this type, one must load or upload the follower as an APK and the Master differently. And when the user downloads the Follower app, and the Master app is not installed, the Follower app should deep link to Samsung apps to download the Master app. As the developer, you should implement the code for deep link. With the Integrated Gear application, the host-side APK contains the general host application. This means that when you download an integrated Gear application, the general host application and the host side APK is installed simultaneously with the wearables side widget. And finally, the Standalone type. This does not require an APK. This is when your application does not need a general host and can operate independently.

Image 43

Let's go back to our example. Now moving on the the Gear App Type, I will select Standalone and make sure the Gear Application box is ticked. Then upload the Binary file, so I'm going to go ahead and indicate whether my application uses Google Mobile Service. In this case I'll choose No. Then I'll upload my file, which is HappyClock.wgt. Remember it has to be a .wgt file. Click on Save.

Image 44

Now to fill out the Sales information. There are two parts here, whether it's Free or Paid. Since my application is Free I'll choose Free, but if you want to charge for your application you may need to apply for a Commercial Seller status to be able to select Paid. To do so, go ahead and click on the Go button to apply for a Commercial Seller status if you wish to apply for one.

Image 45

Once you've indicated the Selling Period of your application, go ahead and answer the Category information of the application. Since "HappyClock" is just a sample application I'll just use a Utilities category as its Primary and leave the Secondary as is. With Age Restrictions, I won't require it so I'll just select 0+ (0 and up). And since our application runs offline we choose Standalone in the "Runs Offline" category. Don't forget you can alter any information here that is applicable for application, such as the selling period, Category, and others. Let's go to the next page.

Image 46

On the next page go ahead an input the Description for your display, and don't forget as well as its tags. And then you can go also ahead and input or upload an icon image for your application. Don't forget it has to be 512 by 512 pixels. Then go ahead and upload screenshots of your application. Then select the supported languages. I chose English as my default. And for support put in your support details and any comments for the certification team. This is important so they can consider valuable information and explanation for QA failures. Go ahead and attach additional materials as needed and a link for certification review references.

Image 47

Once you click Next it should go to the review page of the Samsung Seller Office. Go ahead and look through the details. You can go back and check and edit your information if you need to. Once done, click on Confirm and that's about it.

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalsafe odin download Pin
Member 1136887212-Jan-15 0:48
Member 1136887212-Jan-15 0:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.