How to build and package tizen web and native projects (hybrid projects)

Hi there!

I've been developing for the samsung tizen platform for a while. the biggest problems we were facing, was the build and package process of hybrid projects. because of the fact that the tizen platform is not so popular yet, there is still a huge need of information on how to use it and the community is not so strong. Most of the time you don't get satisfatory answers and help on their official site. Not to mention that many of the sites result in 404 or everything is written in Korean.

For those reasons, i decided to share my experiencies with you in a very compressed that gets to the point without much "bla bla bla" :) And here are the choosen topics we will handle in this post:

• how to install the tizen sdk
• how to create web and native projects direct from the command line
• how to import it into the tizen studio IDE
• how to link native service projects with web projects
• how to build web project
• how to build native project
• how to create a security certificate and use it
• how to package web project (generate .wgt)
• how to package native project (generate .tpk)
• how to package a hybrid project (generate .wgt with native dependencies in it)
• how to install and run it on the wearable devices. 

The next post, i will focus on how to build it on a continuous integration like jenkins. So stay tuned and save this page if you are interested in tizen development too.

Hope you like it enjoy it.

OS (Operation System)

Well, first of all let me say that i am a ubuntu user, so the steps bellow was done on ubuntu 16.14 LTS.

Install tizen SDK

• download it from: https://developer.tizen.org/ko/development/tools/download?langredirect=1#installmanager
• navigate to the donwloaded folder over terminal and give install permission to ti by typing: chmod +x {downloaded_file.bin}
• install it by typing: ./{downloaded_file.bin}
• just follow the wizard instructions and at the end open the Tizen Package Manager as proposed
• As soon as the tizen package manager has opened, install all packages wihout exception.
  (I know you'll think: why shall i install all if i don't need it all - Believe me, you'll thank me later :) That's the way we found that everything works just fine.)
• Install all in the suggested location ex: /home/{username}/tizen-sdk and so on. 
• At the end you'll end up with a folder structure in your home like this: tizenIDE-data, tizen-sdk, tizen-sdk-data, tizen-studio and tizen-studio-data

Create web and native projects direct from command line

To do so, you'll need to ensure that your PATH is pointing to the downloaded tizen tools. Open your ".bashrc" file located in your home directory. (press Ctrl+h to show hidden files) in there, add the following lines (if not there yet)

### exporting tizen tools
export PATH=$PATH:/home/ricardo/tizen-sdk/tools/ide/bin/
###source tizen-autocomplete
source /home/ricardo/tizen-sdk/tools/ide/bin/tizen-autocomplete

Creating a default workspace first

Create a folder like: ws_tizen_studio somewhere in your home. Ex: /home/ws_tizen_studio
this will be your workspace. As soon as you start the tizen studio IDE you can point to it. To do so, navigate to /home/ricardo/tizen-studio/ide and double click the eclipse icon. As soon as you open your IDE for the first time, it will suggest a workspace directory. Change it to /home/ws_tizen_studio

Great, now we can create our sample projects like this (i am using here wearble-2.3.1 but feel free to use whatever version you need) In your terminal type:

Create a sample tizen web project

tizen create native-project -p wearable-2.3.1 -t ServiceApp -n native -- /media/truecrypt5/dev/ws_tizen_studio/

Create a sample tizen web project

tizen create web-project -p wearable-2.3.1  -t WebBasicapplication -n web -- /media/truecrypt5/dev/ws_tizen_studio/

If you are wondering how i know which tizen project types exist and how i figured it out, just type:
tizen list web-project or tizen list native-project to see all project types available

Import projects into tizen studio IDE

Ok, if everything went fine, the next step will be to import those created projects into our brand new tizen studio IDE. IMPORTANT NOTE: You for sure will be asking yourself why i create the projects over command line, if i could create it over the IDE right? Well, after many days trying to figure it out why we couldn't build and package our projects, we found it out that if we create it over the tizen command line tool (CLI) than it works just fine.

Import native project

File >> Import >> select your native project.

Import web project

File >> New >> Tizen Project > template >> wearable v2.3.1 >> We application >> Basic UI >> More properties >> unmark: Use default location >> browse: select created web project >> finish

Link native service projects with web projects

In the tizen studio IDE >> select your web project >> right mouse click >> properties > tizen studio >> package >> multi >> select native project > OK

Build web project

tizen build-web -- /home/ws_tizen_studio/web
the command above will create a .buildResult folder inside your project structure. In this folder you will encounter the project files without all unnecessary files. There is not .wgt yet. Those steps will be described a few steps later. To visualize the .buildResult folder it in your tizen studio IDE, make sure the hidden files are visible. To do so:

Tizen Studio IDE >> project explorer >> dropdown arrow >> unselect: *.resources >> OK

Build project native

IMPORTANT NOTE: native projects can be run on wearable only if set to Release and arm. Debug and x86 works fine for the emulator only. The command bellow will create a Release folder inside your project with the binary and resources you'll need to package your .tpk file. How to package this project will be described next. Stay tuned.

tizen build-native -a arm -c llvm -C Release --  /home/ws_tizen_studio/native

Create a security certificate

Before we can package the projects, we need a security certificate. In order to create your own certificate, run this:

Command: 
tizen certificate -a {profileName} -p {password} -c {landcode} -s {state} -ct {city} -o {ogranization} -u {organizationUnit} -n "{yourName}" -e {yourEmail}

Ex:
tizen certificate -a tizen_profile -p 123456 -c BR -s Pernambuco -ct Recife -o None -u Development -n "Ricardo Ferreira" -e email@yourCompany.com

Ok, now you'll need to add your brand new certificate to the cli-config. To do so, enter:
tizen security-profiles add -n tizen_profile -a /home/{youName}/tizen-sdk-data/keystore/author/author.p12 -p 123456

Running the command bellow, you'll be able to see all available certificates. You should see now your created "tizen_profile" certificate in the list:
tizen security-profiles list

than check if certificate was also added to the cli-config by typing:
tizen cli-config -l

If there is no certificate added, just add it by running this command:
tizen cli-config "default.profiles.path=/home/{yourName}/tizen-sdk-data/ide/keystore/profiles.xml"

Ok, now we are good to go and to package our projects. Lets move on!

Package web project

tizen package -t wgt -s tizen_profile -- /home/ws_tizen_studio/web/.buildResult
You should see now a file called web.wgt in the folder .buildResult

Package native project

tizen package -t tpk -s tizen_profile -- /home/ws_tizen_studio/native/Release
You should see now a file called org.exemple.native-1.0.0-arm.tpk

Package a hybrid project

The next step is now to put both projects together. Because at the moment we have single packages for each project (web.wgt and org.exemple.native-1.0.0-arm.tpk) Our goal is to have a single package called web.wgt which contains both projects and its dependencies in it. The command bellow will achieve that for us:

tizen package -t wgt -s tizen_profile -r /home/ws_tizen_studio/native/Release/org.example.native-1.0.0-arm.tpk -- /home/ws_tizen_studio/web/.buildResult/web.wgt

Take a look at the old web.wgt package. It has been overridden and now we have a hybrid application with both projects inside of it.

Install and run it on a Smart Watch

In order to install the hybrid application in our wearable, we must connect to it first. First of all, go into your watch settings, enable wifi-connection, click on the wifi connection and scroll down to see the watch IP. (you'll need it to install the hybrid application) NOTE: Your PC must be connect to the same wifi connection also. Otherwise you can't transfer the package from the PC to the watch.
Ok, now navigate to the tools directory by typing:

cd /home/{yourName}/tizen-sdk/tools
./sdb connect {ip_watch}

As soon as the watch is connected, type: (you may try to execute the command above several times till the connection is established - It depends on the connection quality sometimes)

./sdb install /home/ws_tizen_studio/web/.buildResult/web.wgt

If you have some logs in your native app (for testing purposes) you can enable it by typing this:
./sdb dlog org.example.native

NOTE: If for some reason you want to repeat those steps, don't forget to run the command bellow to clean old builds:
tizen clean -- /home/ws_tizen_studio/web
tizen clean -- /home/ws_tizen_studio/native

That's all. Hope you like it. :)

😱👇 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👇

Be sure to read, it will change your life!

Show your work by Austin Kleon: https://amzn.to/34NVmwx

This book is a must read - it will put you in another level! (Expert)

Agile Software Development, Principles, Patterns, and Practices: https://amzn.to/30WQSm2

Write cleaner code and stand out!

Clean Code - A Handbook of Agile Software Craftsmanship: https://amzn.to/33RvaSv

This book is very practical, straightforward and to the point! Worth every penny!

Kotlin for Android App Development (Developer's Library): https://amzn.to/33VZ6gp

Needless to say, these are top right?

Apple AirPods Pro: https://amzn.to/2GOICxy

😱👆 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👆

How to add / import javascript dependencies dynamically into your html

Hi there!

Today i'm gonna show you, how to import / add javascript dependencies dynamically to your html files. I'm playing with object orientation in javascript and in this context, I've created a class that does exactly that and I'd like to share with you.

'use strict'

/** 
 * Use this class to import all dependencies dynamically into your html.
 * This class imports the dependencies only if not exits already.
 * 
 * Usage example: 
 * add this line to your html. Ex: index.html
 * < script  src="../yourProjectPath/js/dependencies.js" > < / script >
 * 
 * Then in your program.js used in this index.html, use it like this:
 * var dependencyArray = [];
 * dependencyArray.push("../../js/constants.js");
 * dependencyArray.push("../../js/utils.js");
 * dependencyArray.push("../../js/home.js");
 * var deps = new Dependency();
 * deps.addToBody(dependencyArray);
 * or alternativelly
 * deps.addToHead(dependencyArray);
 * 
* @author Ricardo Ferreira
 */
var Dependency = function(){
 
 //*****************************************************************************
 // Private methods 
 // As per convention, private methods in javascript starts with underscore "_"
 //*****************************************************************************
 
 /**
  * private method - Use this method to import all dependencies into the html head or body. 
  * @param {String} tag value "head" or "body". Other values than that will return false
  * @param {Array} srcArray - A string array with the source paths relative to this file
  * @returns {Bool} true the dependency has been added successfully.
  * @author Ricardo Ferreira
  */
 function _into (tag, srcArray ) {
  if(srcArray){
   // this way to check for an array is 2/3 faster 
   // then "srcArray instanceof Array" and much faster
   // then "Array.isArray(srcArray)"
   if(srcArray.constructor === Array){
    var index1;
    var index2;
    var bodyTag  = "body"; 
    var headTag  = "head";
    var srcTag   = "src";
    var scriptTag  = "script";
    var shallAddDependency;
    for (index1 = 0; index1 < srcArray.length; index1+=1) {
     // check if dependency does not exist already
     shallAddDependency = true;
     var srcPathDelimiter = "/";
     var srcPath = srcArray[index1];
     var scriptTagArr = document.body.getElementsByTagName(scriptTag);
     var javascriptName = _getJavascriptName(srcPath, srcPathDelimiter);
     for (index2 = 0; index2 < scriptTagArr.length; index2+=1) {
      var javascriptSrc = scriptTagArr[index2].src;
      if( _contains( javascriptSrc, javascriptName ) ){
       shallAddDependency=false;
       break;
      }
     }
     if(shallAddDependency){
      var script = document.createElement( scriptTag );
      script.setAttribute( srcTag, srcPath );
      if(tag === headTag){
       document.head.appendChild( script );
      }else if(tag === bodyTag){
       document.body.appendChild( script );
      }else{
       return false;
      }
     }
    }return true;
   }return false;
  }return false;
 }
 
 /**
  * private method - Use this method to find out the javascript file name. 
  * @param {String} srcPath that contains the whole javascript path
  * @param {String} pathDelimiter is the delimiter used to split the path
  * @returns {String} the javascript file name. Ex: home.js
  * @author Ricardo Ferreira
  */
 function _getJavascriptName (srcPath, pathDelimiter){
  var arrayOffset = 1;
  var split = srcPath.split(pathDelimiter);
  var javascriptName = split[split.length-arrayOffset];
  return javascriptName;
 }
 /**
  * private method - Use this method to check if a substring is part of another string. 
  * @param {String} string that could contain substrings
  * @param {String} substring to be checked inside of string
  * @returns {Bool} true if substring is part of string.
  * @author Ricardo Ferreira
  */
 function _contains (string, substring) { 
  var invalidIndex = -1;
  return string.indexOf(substring) != invalidIndex; 
 };
 
 //*****************************************************************************
 // Public methods
 //*****************************************************************************

 /**
  * Use this method to import all dependencies into the html body. 
  * @param {Array} srcArray - A string array with the source paths relative to this file
  * @returns {Bool} true if dependencies has been added, false otherwise.
  * @author Ricardo Ferreira
  */
 this.appendToBody = function( srcArray ) {
  var bodyTag = "body"; 
  return _into(bodyTag , srcArray);
 },
 /**
  * Use this method to import all dependencies into the html head. 
  * @param {Array} srcArray - A string array with the source paths relative to this file
  * @returns {Bool} true if dependencies has been added, false otherwise.
  * @author Ricardo Ferreira
  */
 this.appendToHead = function( srcArray ) {
  var headTag = "head"; 
  return _into(headTag, srcArray);
 }

}; 

That's all. Hope you like it!

😱👇 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👇

Be sure to read, it will change your life!

Show your work by Austin Kleon: https://amzn.to/34NVmwx

This book is a must read - it will put you in another level! (Expert)

Agile Software Development, Principles, Patterns, and Practices: https://amzn.to/30WQSm2

Write cleaner code and stand out!

Clean Code - A Handbook of Agile Software Craftsmanship: https://amzn.to/33RvaSv

This book is very practical, straightforward and to the point! Worth every penny!

Kotlin for Android App Development (Developer's Library): https://amzn.to/33VZ6gp

Needless to say, these are top right?

Apple AirPods Pro: https://amzn.to/2GOICxy

😱👆 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👆

How to create REST web services in pure java as easy as with node.js - This is so beautiful!!!

Hi there!

Today i'm gonna show you how to create REST web services as fast and as simple as with node.js, but with PURE java!!! Yes!!!! it is possible and so beautiful and clean :) I love it and i am sure you'll love it too, if you love java like i do. ;)

Now a days everybody is using and speaking from node.js, javascript, angular, ruby, etc. There are so many "frameworks" to do "more or less" the same thing, that i was wondering me, if there was nothing to help the java-community with. And yessssss...... there is! :)

Putting things together and inspired by the post of "creating REST api quickly using java" i decided to give them a try and create a more detailed post of it. It works so fine and nice that i must share it with you!

Technologies involved

• We will be using SparkJava which is a tiny, compact framework, designed to develop web applications with minimal effort.
• To create DAO's out of the box and manipulate database as easy as like stealing candy from a babies... :) we will use ormlite jdbc for java. Another great tool i love.
• As a database we will use MySQL. 

Don't worry, we will see how to add those tools to your project in a few minutes step by step. There is no mystery using it.

Creating a maven project

With your IDE, i use eclipse Enide 2015, Version: Mars Release (4.5.0), Build id: Nodeclipse-20150706-0921 in this example, create a simple maven project like that:

Open the pom.xml and insert the following code to get the jars from spark, ormlite and mysql-connector:

<!-- library dependencies -->

<dependencies>

<dependency>

<groupId>com.sparkjava</groupId>

<artifactId>spark-core</artifactId>

<version>2.2</version>

</dependency>

<dependency>

<groupId>com.j256.ormlite</groupId>

<artifactId>ormlite-jdbc</artifactId>

<version>4.48</version>

</dependency>

<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>5.1.38</version>

</dependency>

</dependencies>

Defining an Entity User

Well, now we are fine to start with our service. Let's define first an user class. Use the code snippet bellow:

package com.companyname.modulename.server.model;

import com.j256.ormlite.field.DatabaseField;
import com.j256.ormlite.table.DatabaseTable;
 
@DatabaseTable(tableName = "users")
public class User {
    
    @DatabaseField(generatedId = true)
    private int id;
    
    @DatabaseField
    private String username;
    
    @DatabaseField
    private String email;
    
    public User() {
        // ORMLite needs a no-arg constructor 
    }
    
    public int getId() {
        return this.id;
    }
    
    public String getUsername() {    
        return this.username;
    }
    
    public void setUsername(String username) {
        this.username = username;
    }
    
    public String getEmail() {
        return email;
    }
    
    public void setEmail(String email) {
        this.email = email;
    }
}

Defining the Server with the services inside

Now to the cool things. :) Let's define a GET and POST method to insert and retrieve data from the database.

package com.companyname.modulename.server;

import static spark.Spark.get;
import static spark.Spark.post;

import java.sql.SQLException;

import com.companyname.modulename.server.model.User;
import com.j256.ormlite.dao.Dao;
import com.j256.ormlite.dao.DaoManager;
import com.j256.ormlite.jdbc.JdbcConnectionSource;
import com.j256.ormlite.support.ConnectionSource;
import com.j256.ormlite.table.TableUtils;

import spark.Request;
import spark.Response;
import spark.Route;

public class Server {

 private static Dao userDao;
 // other DAO's my be defined here...

 // TUTORIAL EXECUTION DATE: 18/01/2016
 // IMPORTANT: Before runnning this class: make sure your mysql server is running
 //
 // Run as > Java Application... Than you should see a message similar to
 // that bellow:
 //
 // [Thread-0] INFO spark.webserver.SparkServer - == Spark has ignited ...
 // [Thread-0] INFO spark.webserver.SparkServer - >> Listening on 0.0.0.0:4567
 // [Thread-0] INFO org.eclipse.jetty.server.Server - jetty-9.0.2.v20130417
 // [Thread-0] INFO org.eclipse.jetty.server.ServerConnector - Started ServerConnector@6255aad1{HTTP/1.1}{0.0.0.0:4567}
 // [qtp1296900317-19] INFO spark.webserver.MatcherFilter - The requested route [/favicon.ico] has not been mapped in Spark
 
 
 // In your Browser type in: http://localhost:4567/users/1
 // than you should see: User: username=test, email=test@test.net
 public static void main(String[] args) throws SQLException {
  initMySQL();

  // define the http action methods here...
  // get sample: http://localhost:4567/users/1
  get("/users/:id", new Route() {
   public Object handle(Request req, Response res) throws Exception {
    final User user = userDao.queryForId(req.params(":id"));
    if (user != null) {
     return "Username: " + user.getUsername(); // or JSON? :-)
    } else {
     final int httpNotFound = 404;
     final String msg = "User not found";
     res.status(httpNotFound); 
     return msg;
    }
   }
  });

  // post sample: (using postman)
  // http://localhost:4567/users?username=ricardo&email=ricardo@test.com
  post("/users", new Route() {
   public Object handle(Request request, Response response) throws SQLException {
    final String username = request.queryParams("username");
    final String email = request.queryParams("email");

    final User user = new User();
    user.setUsername(username);
    user.setEmail(email);

    final int createdUserId = userDao.create(user);
    final int httpCreated = 201;
    response.status(httpCreated);
    return createdUserId;
   }
  });
 }

 // make sure your mysql server is running, than:
 // connect and start to previously created MySQL database called spark
 // with username: root and password: 123456
 private static void initMySQL() throws SQLException {
  final String databaseUrl = "jdbc:mysql://localhost/spark";
  final ConnectionSource connectionSource = new JdbcConnectionSource(databaseUrl);
  ((JdbcConnectionSource) connectionSource).setUsername("root");
  ((JdbcConnectionSource) connectionSource).setPassword("123456");
  // creates tables and DAO's to be used in GET/POST or whatever 
  // you may define in main method
  createTablesIfNotExitsAlready(connectionSource);
  initDAOs(connectionSource);
 }

 private static void createTablesIfNotExitsAlready(final ConnectionSource connectionSource) throws SQLException {
  TableUtils.createTableIfNotExists(connectionSource, User.class);
  // other tables may be defined here...
 }

 private static void initDAOs(final ConnectionSource connectionSource) throws SQLException {
  userDao = DaoManager.createDao(connectionSource, User.class);
  // other DAO's may be defined here...
 }

}

Creating the database

Just one more thing! :) Before you can run this, make sure you have created the database called spark with user root and password 123456. To do so, under linux, first install the mysql server by typing this line in your terminal: (to open a terminal press Ctrl+Alt+T)

• sudo apt-get install mysql-server

When the installer prompts the window to define the password for the root user, type 123456 and complete the installation.

Creating the Table User with MySQL Workbench

That is a nice exercise. I was not used to it, and that's way i'm showing it here also. Download it and double click it to install from here https://dev.mysql.com/downloads/workbench/ Once you are done with, start it and create a new db called spark like that:

Once you've opened it, there should be a connection available. This is the connection you've previously installed. Double click it and connect with your credentials. root and 123456

Than this window will open. Here create a new schema called spark and inside of it, create a table called User with id, username and email like shown bellow(the record there will not appear yet, be patient :)

Lets play with now!

Ok, now we are fine. Note that we have not written much code. Most of the work was infrastructure. Real code there is almost nothing. Ormlite abstracts table creation, manipulation and so on. Spark defines urls and http actions. Ok, if everything went well, you should be able to run the Server.class as Java Application. You should see the following statement in the console(which means your server is running well and the service is listening to it on port 4567):

[main] INFO com.j256.ormlite.table.TableUtils - creating table 'users'

[main] INFO com.j256.ormlite.table.TableUtils - executed create table statement changed 0 rows: CREATE TABLE IF NOT EXISTS `users` (`id` INTEGER AUTO_INCREMENT , `username` VARCHAR(255) , `email` VARCHAR(255) , PRIMARY KEY (`id`) ) ENGINE=InnoDB 

[Thread-0] INFO spark.webserver.SparkServer - == Spark has ignited ...

[Thread-0] INFO spark.webserver.SparkServer - >> Listening on 0.0.0.0:4567

[Thread-0] INFO org.eclipse.jetty.server.Server - jetty-9.0.2.v20130417

[Thread-0] INFO org.eclipse.jetty.server.ServerConnector - Started ServerConnector@2695c365{HTTP/1.1}{0.0.0.0:4567}

Testing the service

Well, now we should be able to test our services. Lets POST something using postman.

After that, try to execute a GET to retrieve the previous inserted data.

You could also check the data in the database by running this command line:

SELECT * FROM spark.users; You should see the record now:

That's all! hope you like it! :)

😱👇 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👇

Be sure to read, it will change your life!

Show your work by Austin Kleon: https://amzn.to/34NVmwx

This book is a must read - it will put you in another level! (Expert)

Agile Software Development, Principles, Patterns, and Practices: https://amzn.to/30WQSm2

Write cleaner code and stand out!

Clean Code - A Handbook of Agile Software Craftsmanship: https://amzn.to/33RvaSv

This book is very practical, straightforward and to the point! Worth every penny!

Kotlin for Android App Development (Developer's Library): https://amzn.to/33VZ6gp

Needless to say, these are top right?

Apple AirPods Pro: https://amzn.to/2GOICxy

😱👆 PROMOTIONAL DISCOUNT: BOOKS AND IPODS PRO 😱👆