Follow treslines by email clicking Here!

Thursday, January 12, 2017

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. :)

Thursday, October 13, 2016

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!

Wednesday, May 11, 2016

How to define build strategies in your android app over BuildConfig

Hi there!

Today i'm gonna show you, how your could define your build strategies in android studio in an elegant, enhanceable way using the strategy design pattern.

Most of the times, Google defines its product making usage of best practises and good, enhanceable design pattern. I saw recently, in a big project we got, that they were not taking advantage of this and instead of that, they were using enumerations, resulting in a bunch of switch cases and later on another bunch of if-else cases and a lot of repeated code that breaks the DRY-principle and even more important the open-close-principle.

What does it mean to be programming respecting the open-close-principle? It means that every time a new component is created, that i don't have to change running code. i.e. I don't have to create another enum type, another switch-case to identify this type and later on another if-else case to know, depending on the comparation result, what kind of environment i want to set.

That's the code we got. This code has a lot of problems. It is fragile. Every new environment forces you to change a chain of steps in the code. Further it forces you to hold 4 variables in a static way to be able to share it over the application instead of hold only one object responsible for that. We define new enum types and define a new if statement running the risk of breaking existing logic. All of this can be avoided using the strategy pattern.

Let's take a look at the actual code, before enhancing it to visualize the problems:

    // somewhere in code this method was called passing the enum defined in BuildConfig
    setEnvironmentKeys(BuildConfig.ENVIRONMENT);
    // later in the class who defined this method over if-statements we identify the environment
    public static void setEnvironmentKeys(ENV env){
        try{
         if (MainApplication.isProduction()) {
                CONTENT_SERVER_URL = "https://content.mycompany.com/";
                PROFILE_SERVER_URL = "https://profile.mycompany.com/";
                IMAGE_SERVER_URL = "https://image.mycompany.com/log";
                Utils.GOOGLE_DEVELOPER_KEY = Utils.getStringRes(R.string.key_production);
            } else if (env == MainApplication.ENV.STAGING) {
                CONTENT_SERVER_URL = "http://content-staging.mycompany.com/";
                PROFILE_SERVER_URL = "http://profile-staging.mycompany.com/";
                IMAGE_SERVER_URL = "http://image.staging.maycompany.com/";
                Utils.GOOGLE_DEVELOPER_KEY = Utils.getStringRes(R.string.key_staging);
            }  else if (env == MainApplication.ENV.STAGING_TWO) {
                Utils.GOOGLE_DEVELOPER_KEY = Utils.getStringRes(R.string.key_staging);
                CONTENT_SERVER_URL = "http://content-staging2.mycompany.com/";
                PROFILE_SERVER_URL = "http://profile-staging2.mycompany.com/";
                IMAGE_SERVER_URL = "http://image.staging2.mycompany.com/";
            }else if (MainApplication.isDev()) {
                Utils.GOOGLE_DEVELOPER_KEY = Utils.getStringRes(R.string.key_development);
                CONTENT_SERVER_URL = "https://content.dev.mycompany.com/";
                PROFILE_SERVER_URL = "https://profile.dev.mycompany.com/";
                IMAGE_SERVER_URL = "https://image.dev.mycompany.com/";
            }
        }catch(Exception e){
            Log.wtf(TAG, "Couldn't set ENV variables. Setting to Production as default.");
        }
    }
    
    // and somewhere was defined the enum with the build types
    public enum ENV {
        DEVELOPMENT("DEVELOPMENT"),
        STAGING("STAGING"),
        STAGING_TWO("STAGING_TWO"),
        OPS_PREVIEW("OPS_PREVIEW"),
        PRODUCTION("PRODUCTION"), ;

        private final String name;

        private ENV(String s) {
            name = s;
        }

        public boolean equalsName(String otherName){
            return (otherName == null)? false:name.equals(otherName);
        }

        public String toString(){
            return name;
        }

    }

The code above is functional but when it comes to enhancement, maintainability and so on, then we can see some problems on that. We will discuss this later on. Let's now see how we could do it better by using the strategy pattern. First have a look at the uml diagram of it.



And now the little code of if:

   
  // this method is called somewhere in code
  setEnvironment(BuildConfig.ENVIRONMENT);
  
  // then we set the environment and use it without any change in code
  private Environment environment;
  public void setEnvironment(final Environment env){
   environment = env;
  }
  /**
   * In your android studio look for the tab: "Build Variants" (bottom left side)
   * and select "Build Variant > debug" while developing the application.
   * This will automatically instantiate this class and assign this value to BuildConfig.ENVIRONMENT
   * @author Ricardo Ferreira
   */
  public class DeveloperEnvironment extends Environment{
   private final static String CONTENT_SERVER_URL = "https://content.dev.mycompany.com/";
   private final static String PROFILE_SERVER_URL = "https://profile.dev.mycompany.com/";
   private final static String S3_AMAZON_SERVER_URL = "https://s3.amazon.dev.mycompany.com";
   private final static String GOOGLE_DEVELOPER_KEY = "123456";
   public DeveloperEnvironment() {
    super(CONTENT_SERVER_URL, PROFILE_SERVER_URL, S3_AMAZON_SERVER_URL, GOOGLE_DEVELOPER_KEY);
   }
  }
  /**
   * Build environment strategy - Every environment phase should extend from this strategy.
   * This way, you can access your app's environment configuration over the system class 
   * BuildConfig.ENVIRONMENT everywhere without the necessity of enumerations, switch cases 
   * or a bunch of if-else statements. If you create new environments, no change in your code
   * will be needed. 
   * @author Ricardo Ferreira
   */
  public abstract class Environment{
   private final String CONTENT_SERVER_URL;
   private final String PROFILE_SERVER_URL;
   private final String S3_AMAZON_SERVER_URL;
   private final String GOOGLE_DEVELOPER_KEY;
   // ... other environment variables ...
 public Environment(
   final String contentServerUrl, 
   final String profileServerUrl,
   final String s3amazonServerUrl, 
   final String googleDeveloperKey) {
  super();
  this.CONTENT_SERVER_URL = contentServerUrl;
  this.PROFILE_SERVER_URL = profileServerUrl;
  this.S3_AMAZON_SERVER_URL = s3amazonServerUrl;
  this.GOOGLE_DEVELOPER_KEY = googleDeveloperKey;
 }
 public String getContentServerUrl() {
  return CONTENT_SERVER_URL;
 }
 public String getProfileServerUrl() {
  return PROFILE_SERVER_URL;
 }
 public String getS3AmazonServerUrl() {
  return S3_AMAZON_SERVER_URL;
 }
 public String getGoogleDeveloperKey() {
  return GOOGLE_DEVELOPER_KEY;
 }
  }

Coming back to our initial discussion. Imagine now you need to add a new enviromnet. lets say staging. with the approach above you just have to say to someone: create a class who extends from environment, analogical DeveloperEnvironment, define it in your build.gradle, like you would do for the other approach also and done! It would work just fine without touching already written, functional code.The other way around you would have to change the enum, change the if-else statements.

Here is how you could define the strategies in your build.gradle. This will automatically assign the right value to the variable ENVIRONMENT depending on which environment you choose over Android Studio by selecting the tab Build Variants on the bottom left side of your IDE:

buildTypes {
        debug {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            debuggable true
            setApplicationIdSuffix("dev")
            versionNameSuffix " Dev"
            buildConfigField "com.treslines.learn.environment.Environment", "ENVIRONMENT", "new com.treslines.learn.environment.DeveloperEnvironment()"
            buildConfigField "boolean", "DEBUGLOG", "true"
            manifestPlaceholders = [
                    appName         : "MyApp Debug"
            ]
        }
        Staging {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.debug
            debuggable true
            setApplicationIdSuffix("staging")
            versionNameSuffix " Staging"
            buildConfigField "com.treslines.learn.environment.Environment", "ENVIRONMENT", "new com.treslines.learn.environment.StagingEnrivornment()"
            buildConfigField "boolean", "DEBUGLOG", "true"
            manifestPlaceholders = [
                    appName         : "MyApp Stg"
            ]
        }
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.release
            zipAlignEnabled true

            buildConfigField "com.treslines.learn.environment.Environment", "ENVIRONMENT", "new com.treslines.learn.environment.ProductionEnrivornment()"
            buildConfigField "boolean", "DEBUGLOG", "false"
        }
    } 

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

Tuesday, March 15, 2016

Fast CPF formatter to be used in Android's EditText View combined with a TextWatcher

Hi there! Today i'm gonna show to you, how i solved a common problem, while dealing with brazilian cpf in edittext view in android studio.

Problem/Chalange: Mask a CPF editText field such a way, that as soon as the user starts typing digits in it, the text field inserts or updates its needed signs for the user automatically.

The first solution was very elegant and well thought and well done with a mask like ###.###.###-## but as soon as the user starts typing very fast in the text field, the mask algorithm was very slow and swallowed some digits in some cases.

For this reason, i took the chalange to myself and decided to create my own, fast cpf formatter. Bellow the solution that solved the problem and that you may use in your apps as you may need.

Solution:


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        new CpfWatcher((EditText) findViewById(R.id.inputCpf));

    }

    public class CpfWatcher implements TextWatcher {

        private EditText inputField;
        private int flag = 0;
        private int signsBeforeChange = 0;
        private int dots = 0;
        private int dash = 0;
        private String txtBeforeChange;

        public CpfWatcher(final EditText inputField) {
            this.inputField = inputField;
            this.inputField.setInputType(InputType.TYPE_CLASS_NUMBER);
            this.inputField.setHint("###.###.###-##");
            this.inputField.addTextChangedListener(this);
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            final String input = s.toString();
            inputField.removeTextChangedListener(this);
            final String formattedCpf = formatCpf(input);
            inputField.setText(formattedCpf);
            inputField.addTextChangedListener(this);
            placeCursorDependingOnUserAction(start, formattedCpf, findOutIfUserWasTypingOrDeleting(input));
        }

        private void placeCursorDependingOnUserAction(int start, String formattedCpf, Action action) {
            switch (action){
                case TYPING:{
                    dots = formattedCpf.length() - formattedCpf.replace(".", "").length();
                    dash = formattedCpf.length() - formattedCpf.replace("-", "").length();
                    signsBeforeChange = dots+dash;
                    inputField.setSelection(formattedCpf.length());
                    break;
                }
                case DELETING:{

                    if(start-1 < 0){
                        inputField.setSelection(0);
                    }else if(txtBeforeChange.equalsIgnoreCase(formattedCpf)){
                        inputField.setSelection( start );
                        flag++;
                    }
                    else{
                        dots = formattedCpf.length() - formattedCpf.replace(".", "").length();
                        dash = formattedCpf.length() - formattedCpf.replace("-", "").length();
                        int sigsAfterChange = dots+dash;
                        if(signsBeforeChange > sigsAfterChange){
                            inputField.setSelection( start-1 );
                            signsBeforeChange = sigsAfterChange;
                        }else{
                            inputField.setSelection( start );
                        }
                    }
                    break;
                }
            }
        }

        private Action findOutIfUserWasTypingOrDeleting(String input) {
            Action action = Action.TYPING;
            if(flag <=input.length()){
                flag = input.length();
                action = Action.TYPING;
            }else{
                flag = input.length();
                action = Action.DELETING;
            }
            return action;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            txtBeforeChange = s.toString();
        }

        @Override
        public void afterTextChanged(Editable s) { /* NOP*/ }

        public  Editable getCpf(){
           return inputField.getText();
        }

    }

    public enum Action {
        TYPING, DELETING
    }

    private String formatCpf(String cpf) {
        String[] sign = new String[]{".", ".", "-"};
        String[] signRegEx = new String[]{"\\.", "\\.", "-"};
        int[] signPos = new int[]{4, 8, 12};
        return formatCpfDependingOnLentgh(sign, signPos, removeAllSigns(cpf, signRegEx));
    }

    private String removeAllSigns(String cpf, String[] signRegEx) {
        String empty = "";
        String tmp = cpf;
        for (String sign : signRegEx) {
            tmp = tmp.replaceAll(sign, empty);
        }
        return tmp;
    }

    private String formatCpfDependingOnLentgh(String[] sign, int[] signPos, String cpfWithoutAnySign) {
        String tmp = cpfWithoutAnySign;
        int aLentgh = tmp.length();
        if (aLentgh <= signPos[0] - 1) {
            // nothing to format
        }else if(aLentgh == signPos[0]-1) {
            tmp = create1Punctuation(tmp, sign);
        }
        else if (aLentgh > signPos[0] - 1 && aLentgh < signPos[1] - 1) {
            tmp = create2Punctuations(tmp, sign);
        }
        else if (aLentgh == signPos[1] - 1) {
            tmp = create3Punctuations(tmp, sign);
        }
        else if (aLentgh > signPos[1] - 1 && aLentgh < signPos[2] - 2) {
            tmp = create3Punctuations(tmp, sign);
        }
        else if (aLentgh == signPos[2] - 2) {
            tmp = create4Punctuations(tmp, sign);
        }
        else if (aLentgh > signPos[2] - 2 && aLentgh < signPos[2]) {
            tmp = create4Punctuations(tmp, sign);
        } else {
            tmp = trunk4Punctuations(tmp, sign);
        }
        return tmp;
    }

    private String create1Punctuation(String tmp, String[] punc) {
        return tmp + punc[0];
    }

    private String create2Punctuations(String tmp, String[] punc) {
        String s1 = tmp.substring(0, 3);
        String s2 = tmp.substring(3, tmp.length());
        return s1 + punc[0] + s2;
    }

    private String create3Punctuations(String tmp, String[] punc) {
        String s1 = tmp.substring(0, 3);
        String s2 = tmp.substring(3, 6);
        String s3 = tmp.substring(6, tmp.length());
        return s1 + punc[0] + s2 + punc[1] + s3;
    }

    private String create4Punctuations(String tmp, String[] punc) {
        String s1 = tmp.substring(0, 3);
        String s2 = tmp.substring(3, 6);
        String s3 = tmp.substring(6, 9);
        String s4 = tmp.substring(9, tmp.length());
        return s1 + punc[0] + s2 + punc[1] + s3 + punc[2] + s4;
    }

    private String trunk4Punctuations(String tmp, String[] punc) {
        String s1 = tmp.substring(0, 3);
        String s2 = tmp.substring(3, 6);
        String s3 = tmp.substring(6, 9);
        String s4 = tmp.substring(9, 11);
        return s1 + punc[0] + s2 + punc[1] + s3 + punc[2] + s4;
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Tuesday, January 19, 2016

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! :)





Thursday, August 20, 2015

How to run/install pagseguro on android without thirdpart apps

Hi there!

Today i'm gonna show to you, how to run PagSeguro on Android Apps without any third part app from PagSeguro.

Everybody knows how important it is to offer payment methods in our apps. PagSeguro is a very common payment method in Brazil, but very tricky to get it run correctly on android apps. In fact almost every payment method is very annoying to implement! :)

For this reason I decided to implement my own PagSeguro solution and share a complete sample with the world.

First Step - Get a PagSeguro Account

To do so, register yourself on pagseguro, log in and go to: Vender > Ferramentas para desenvolvedores > Sandbox



There you'll find a automatic created test buyer (comprador de teste) and a test seller (vendedor de teste) like in the images bellow. kepp it open, then you'll need those values in the app we will see here.




Second Step - Fork or just download the sample from Github

The sample was developed using android studio and tested on my pagseguro sandbox account. It is available from here: https://github.com/treslines/pagseguro_android. The image bellow shows some transactions i made using my sandbox account:


What you'll get?

The pictures bellow show how the app looks like. It addresses already navigations issues e user notifications.
















Go download it!

Go now to github: https://github.com/treslines/pagseguro_android. download it and test it. Any feedback or contribution to make it better is welcome!

That's all! Hope you like it!

Thursday, August 13, 2015

Android AlertDialog utilities, redirect to google play store, check if third part app is istalled

Hi there!

Today i'm gonna share some utility methods i use very often while developing. Creating a popup dialog, a confirm dialog, ok-cancel-dialog, check if a third part app is installed, redirect to google play store if some app is missing and so on are common tasks in our daily business.

/**
 * Use this class to create alert dialogs on the fly, redirect to google play store and so on...< br / >
 * < br / >Author: Ricardo Ferreira, 8/13/15
 */
public final class AppUtil {

    /**
     * Shows a confirm dialog with a custom message and custom quit button text.
     * If you pass null to btnTxt, "ok" will be shown per default.
     *
     * @param context the apps context This value can't be null.
     * @param msg     the message to be shown. his value can't be null or empty.
     * @param btnTxt  the text to be shown in the quit button. For example "close"
     */
    public static void showConfirmDialog(@NonNull final Context context, @NonNull final String msg, final String btnTxt) {
        if (msg.isEmpty()) {
            throw new IllegalArgumentException("This value can't be empty!");
        }
        final AlertDialog dialog = new AlertDialog.Builder(context).setMessage(msg)
                .setPositiveButton((btnTxt == null ? "Ok" : btnTxt), new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                }).create();
        dialog.show();
    }

    /**
     * Shows a confirm dialog with a custom message, custom buttons and custom actions.
     *
     * @param ctx                the apps context. This value can't be null.
     * @param msg                the message to be shown This value can't be null or empty.
     * @param okBtn              the text to be shown in the ok button. If you pass null, ok will be shown per default
     * @param cancelBtn          the text to be shown in the cancel button. If you pass null, cancel will be shown per default
     * @param okAction           the action to be performed as soon as the user presses the ok button. if you pass null, nothing happens.
     * @param cancelAction       the action to be performed as soon as the user presses the cancel button. if you pass null, nothing happens.
     * @param backPressendAction the action to be performed as soon as the user presses the system back button. if you pass null, nothing happens.
     */
    public static void showOkCancelDialog(@NonNull final Context ctx, @NonNull final String msg, final String okBtn, final String cancelBtn, final AlertAction okAction, final AlertAction cancelAction, final AlertAction backPressendAction) {
        if (msg.isEmpty()) {
            throw new IllegalArgumentException("This value can't be empty!");
        }
        final AlertDialog dialog = new AlertDialog.Builder(ctx).setMessage(msg)
                .setPositiveButton((okBtn == null ? "Ok" : okBtn), new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                        if (okAction != null) {
                            okAction.perform();
                        }
                    }
                }).setNegativeButton((cancelBtn == null ? "Cancel" : cancelBtn), new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                        if (cancelAction != null) {
                            cancelAction.perform();
                        }
                    }
                }).setOnCancelListener(new DialogInterface.OnCancelListener() {
                    @Override
                    public void onCancel(DialogInterface dialog) {
                        dialog.dismiss();
                        if (backPressendAction != null) {
                            backPressendAction.perform();
                        }
                    }
                }).create();
        dialog.show();
    }

    public interface AlertAction {
        void perform();
    }

    /**
     * Use this method to check if a third part app is istalled or not
     * @param ctx the app's context
     * @param packageName the third part app's package name. something like: com.example.package
     * @return true if the app is installed.
     */
    public static boolean isAppInstalled(final Context ctx, final String packageName) {
        PackageManager pm = ctx.getPackageManager();
        boolean installed = false;
        try {
            pm.getPackageInfo(packageName, PackageManager.GET_ACTIVITIES);
            installed = true;
        } catch (PackageManager.NameNotFoundException e) {
            installed = false;
        }
        return installed;
    }

    /**
     *  Use this method to open the google play store
     * @param activity the app which wants to redirect to the google play store
     * @param googlePlayStoreId the third part app's package name. something like: com.example.package
     * @param requestCode the request code to be used in the method onActivityForResult in the app which called this method.
     */
    public static void navigateToGooglePlayStore(final Activity activity, final String googlePlayStoreId, final int requestCode) {
        try {
            activity.startActivityForResult(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + googlePlayStoreId)), requestCode);
        } catch (android.content.ActivityNotFoundException anfe) {
            // last chance: try again a second time with a different approach
            activity.startActivityForResult(new Intent(Intent.ACTION_VIEW, Uri.parse("http://play.google.com/store/apps/details?id=" + googlePlayStoreId)), requestCode);
        }
    }
}

Usage Example:

//... 
// check if app is istalled
return AppUtil.isAppInstalled(context,packageName);
//... 
// redirect to google play store
AppUtil.navigateToGooglePlayStore(activity ,googlePlayStoreId, requestCode);
//... 
// create a Ok-Cancel-Dialog
final String msg = "The app will no work without PagSeguro.";
        AppUtil.showOkCancelDialog(context, msg, "Install", "Cancel",
        new AppUtil.AlertAction() {
            @Override
            public void perform() {
                navigateToGooglePlayStore(PAG_SEGURO_PACKAGE_NAME);
            }
        }, new AppUtil.AlertAction() {
            @Override
            public void perform() {
                finish();
            }
        }, new AppUtil.AlertAction() {
            @Override
            public void perform() {
                finish();
            }
        });
//... code omitted

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