From Hell To Heaven: Safeguarding your application – Part 1

Have you ever wondered how to safeguard your application when using the database and a cache like Redis? What if one of them is down? What should we do? These are questions that every developer should ask themselves when building an API that needs to be reliable 24/7.

In this guide, we will be configuring a cache error handler that will cover every scenario where Spring Cache annotations are used.

Building the cache error handler

The reason to build a custom error handler is simple: we want the application working even though the cache is down. Read more...

From Hell To Heaven: Increase app’s performance with Redis

Welcome to my new series “From Hell To Heaven“. These series will be about different cases of programmers dealing with issues that anyone can find in a typical day. In this first post, we will be implementing Redis as a second level cache layer using Spring Boot.

Introduction

I have been working on a couple of projects and encountered several performance issues. This issue relied mostly on reading the same data multiple times in the same endpoint. Using second layer cache is a common solution to this issue and that’s what we are going to do today! You will see how easy it will be to integrate Redis as a cache layer using Spring boot.

What is Redis?

Redis is an in-memory data structure used as a database or cache. Being in-memory provides a huge benefit in performance; reading and writing are way faster than persisting to disk. It also provides a way of persisting data utilizing RDB and AOF, making it perfect to keep the data when restarting the server.

Implementation

Dependencies and Configuration

Your project will need

spring-boot-starter-data-redis Read more...

SurveyJS – Learn how to create easy surveys

As background story, I finished university with a graduation project for a company, which you can find it here. The goal was to do something similar to Google Forms integrated with an ISO 9001 document management system, so I needed a good library to build surveys. It had to meet the following requirements:

  • Good Documentation
  • JSON-based library
  • Custom CSS
  • Send data to a server or at least provided a method

After intensive research, I encountered many libraries but they didn’t meet at least one requirement, except for SurveyJS. It has complete documentation with examples and provided helper methods to get data, therefore I decided to use it. After finishing the project, I thought it would nice to post the implementation applied to a production project, so let’s get started!

What is SurveyJS?

SurveyJS is a JSON-based javascript library that allows you to have full control of its use. You can modify the main object with additional functionality, send and receive data to a server at any moment, and the best part is that it is based on JSON! It’s even compatible with different javascript frameworks and libraries like React, Angular, JQuery, and Vue.

How do I use it?

In simple words, we will just need to create a simple structured object the way SurveyJS wants. The implementation I have includes the follow: integration with MongoDB simple methods to manage the data, and using SurveyJS jQuery library.

In the code below, there’s schema we will be using in the project. Most of the variables are self-explanatory and required by my project, but I want to focus on the questions array.

survey.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'use strict'
var mongoose = require('mongoose');
 
let schema = new mongoose.Schema({
  surveyName: String,
  business: [String],
  department: String,
  period: {
    start: Date,
    end: Date
  },
  responsible: String,
  clients: [String],
  questions: [{
    name: String,
    title: String,
    formType: String,
    isRequired: Boolean,
    inputType: String,
    choices: [String],
    clients: [String],
    service: String,
    mininumRateDescription: String,
    maximumRateDescription: String,
    choicesValue: [{
      name: String,
      value: Number
    }],
    rateValues: [Number],
    showChoices: Boolean,
    created: Date
  }],
  uniqueResponses: Boolean,
  finalGrade: Number,
  active: Boolean,
  general: Boolean,
  created: Date
})
 
module.exports = mongoose.model('Survey', schema);

Building a survey

Every field declared is going to be used as it is except for formType. We will just set the field type right after getting data from MongoDB (MongoDB complains saving “type” field). After receiving data from our server, we will build a survey model and send it to SurveyJS method. Let’s create a function called buildSurvey:

survey.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function buildSurvey(survey) {
 
   //STEP 1. Set each form type to type (ONLY IF BRINGING DATA FROM MONGODB)
    survey.questions = survey.questions.map(question => {
      question.type = question.formType;
      return question;
    });
 
    //STEP 2. Group the survey by a specific field (service in my case) in order to separate the survey in pages
    let groupedSurvey = commonFactory.groupBy(survey.questions, 'service');
    let pages = [];
 
    //STEP 3. Loop through "service" and create a page with all the questions. Push it to the pages array.
    Object.keys(groupedSurvey).forEach((element) => {
      pages.push({
        questions: groupedSurvey[element]
      });
    });
 
   $scope.completeSurvey = survey;
   //STEP 4. Build the surveyModel using the pages previous built.
   Survey.Survey.cssType = "bootstrap"; //Sets SurveyJS default CSS as Bootstrap (to match theme)
    var surveyModel = new Survey.Model({
      title: survey.surveyName,
      pages: pages
    });
    
    //Configuration options for the model.
    surveyModel.showProgressBar = "top";
    surveyModel.pagePrevText = "Atras";
    surveyModel.pageNextText = "Siguiente";
    surveyModel.completeText = "Completar encuesta";
    surveyModel.completedHtml = "<h5>Gracias por completar la encuesta! </h5>"
 
    //STEP 5. Select main survey container and instantiate a new survey passing the model, custom CSS, and a custom method when submitting data.
    $(".survey").Survey({
      model: surveyModel,
      css: surveyCustomCSS,
      onComplete: sendDataToServer
    });
}
 
let surveyCustomCSS = {
    root: "survey-container",
    row: "row-separator",
    pageTitle: "sv_p_title",
    question: {
      root: "sv_q",
      title: "sv_q_title"
    },
    checkbox: {
      root: 'sv_q_checkbox'
    },
    radiogroup: {
      root: 'sv_q_radiogroup'
    },
    rating: {
      root: 'sv_q_rating',
      item: 'sv_q_rating_item'
    },
    navigationButton: "btn  btn-primary"
  };

The function accepts an object as parameter, which is then processed to match library’s structure. The pages section is optional, you can send the questions array and it will generate a single page full of questions. We will be implementing custom CSS to match the theme used, which is based in Bootstrap. I had to do some tweaks like more spaces between page title and question and fix checkbox, radio group and rating CSS, since it looked bad with Bootstrap Alpha 4 (looked like default browser elements).

Saving a survey

survey.js - Send data to server
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
function sendDataToServer(survey) {
    const data = survey.data;
 
    //Builds response object with user information
    const response = {
      job: $rootScope.client.job,
      results: [],
      timestamp: new Date(),
      client: {
        _id: $rootScope.client._id,
        username: $rootScope.client.username
      }
    };
 
    //Build a result for each answered question
    for (var question of Object.keys(data)) {
      //Gets selected question
      const selectedQuestions = $scope.completeSurvey.questions.filter(e => {
        return e.name === question;
      });
 
      //if no questions found, break the loop
      if (selectedQuestions.length === 0)
        break;
 
      //grabs the selected question
      const selectedQuestion = selectedQuestions[0];
 
      response.surveyId = $scope.completeSurvey._id;
      //builds a result object with the selected question and the answer
      const result = {
        service: selectedQuestion.service,
        question: question,
        formType: selectedQuestion.formType,
        answer: data[question],
        rates: selectedQuestion.rateValues
      };
 
      //Questions that has a value process differently...
      if (selectedQuestion.formType === 'checkbox' || selectedQuestion.formType === 'dropdown' || selectedQuestion.formType === 'radiogroup') {
        //grabs the possible values per question
        const values = selectedQuestion.choicesValue.map(e => {
          return e.value;
        });
        //if there are multiple question, the answer will be one concatenated string
        if (data[question] instanceof Array) {
          result.answer = data[question].join();
          const answerValues = [];
          //set the value per answer
          data[question].forEach(e => {
            answerValues.push(values[selectedQuestion.choices.indexOf(e)]);
          });
          //sets the joined value of all answers
          result.value = answerValues.join();
        } else {
          result.value = values[selectedQuestion.choices.indexOf(data[question])] + '';
        }
      }
 
      response.results.push(result);
    }
 
    $http.post('/api/surveys/responses/', response)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

As you may have noticed, there’ a function called “sendDataToServer” that I pass to the survey object with the goal of saving user’s response to the database. This function processes the result and builds up a response object based in the survey response database schema, which follows the idea of how Google Forms saves the data: timestamp column accompanied by all the questions columns with a row of answers. The function concludes with a post request to the node server with the response that does a batch insert to the database.

Conclusions

I hope this guide will be helpful for those who are looking for any implementation of this nice library. Let me know if you have any questions or comments regarding this topic (which I know I can write better code, time was not in my favor at that time). I will be updating this post with images previewing the working survey, also, I am planning to make a guide about the administrator section.

Learning Gulp Basics | Javascript

In the past trimester, I was given a project of creating anything with MEAN.JS and it was the first time I used gulp, so I decided it was time to learn more about what gulp is and how does it work; with the help with a friend I understood how it worked. So now, let’s get started with gulp basics:

What is Gulp?

Gulp is a task runner and build system that uses the philosophy of code over configuration (I’m looking at you, Grunt!). At first glance, I had no idea what was happening in that gulpfile.js, but then I started reading and noticed very interesting things, like it’s simplicity for starters. You will mainly use four functions:

  • gulp.task:
    Defines a task and it’s purpose.

    gulpfile.js
    JavaScript
    1
    2
    3
    4
    5
    6
    gulp.task('sass', function() {
    return gulp.src(paths.src.sass + 'style.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest(paths.build.sass)
    .pipe(livereload()));
    });

    This example is taken from a chat I made for the class. I’m creating a task to compile SASS into CSS using gulp-sass dependancy. The function .pipe allows gulp to connect to other plugins/functions as you can see in the example.

  • gulp.dest:
    Sets the output file.
  • gulp.watch:
    Listes for any update in a file, if it, it can execute a task like recompiling sass.

    gulpfile.js
    JavaScript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    gulp.task('watch', () => {
    livereload.listen();
    // Watch .js files
    gulp.watch(paths.src.scripts + '**/*.js', ['scripts']);
    // Watch .scss files
    gulp.watch(paths.src.sass + '**/*.scss', ['sass']);
    // Watch image files
    gulp.watch(paths.src.images + '**/*', ['images']);
    gulp.watch(defaultAssets.server.allJS, ['server:restart']);
    //server restart
    gulp.watch(['./app.js'], ['server:restart']);
    gulp.watch(['./app/client/**/*.js'], ['server:restart']);
    });

    In this example, I’m watching all the javascript and sass files, so gulp can execute the task made

  • gulp.src:
    Sets the files we are going to use.

    • Read more...

    Binary Search | Search Algorithm

    The theory

    A binary search algorithm is a search algorithm that uses the concept of divide and conquer in order to find a target value’s position. Basically, this search algorithm compares the target value with the middle element of the collection.

    If it is equal, return the position. If it is not equal, then we will need to check if the value is either greater or less than the target value. This is to know what side of the collection we need to split.

    Binary Search Requirements

    There’s a condition applied to the binary search array, which is that the array must be sorted. This is because it uses the value (in our case an integer), to compare and check if the selected position has the target value or check where to go.

    Binary Search Array Algorithm

    Implementation

    First things first, we will create our binary search class with the search methods.

    public class BinarySearch {

    public int search(int[] array, int number) {
    return search(array, number, 0, array.length);
    }

    private int search(int[] array, int target, int start, int end) {
    int mid = (start + end) / 2;

    if (end < start) {
    return -1;
    }

    if (array[mid] == target) {
    return mid;
    } else if (array[mid] > target) {
    return search(array, target, 0, mid - 1);
    } else {
    return search(array, target, mid + 1, end);
    }
    }
    }

    Read more...

    Modifying and Updating a JAR File| Java

    A Brief Introduction…

    It all started when a co-worker asked for help when trying to update an IP Address of a java API, however, he only had the JAR file available. With another co-worker, we dug up the internet and tried to find a way to do this, and we finally did. I thought of sharing what we acquire for any future help.

    Requirements

    In order to do any of the operations mentioned in the title, you will need to have java and JDK installed, a desired jar you want to modify, and basic knowledge of commands for the terminal. In order to get the .java file from the JAR, I would recommend a program called JD-GUI. You will just need to open the jar file, and look for a desired file and save it.

    JAR Process

    For this tutorial, we will be using the linked list jar we created in another tutorial. As we open the jar file with JD-GUI, I will choose to add another constructor in the Node.java class.

    jd-gui-node

    After saving it, we will be opening and modifying the java class with your favorite Java Editor. If you noticed, a jar is composed of .class files, which contains pure byte code and we wouldn’t be able to read it that easy. We will convert the .java file to .class through the command line and with the javac command: javac Node.java

    javac

    Note: I am following the same folder structure as the JAR file. linkedlist>Node.class.

    Until now, we have modified and generated the Node.class file, so we are just missing update the current file in the JAR. In order to do this, we will need to use the jar uvf command: jar uvf LinkedList.jar linkedlist/Node.class. The -u in the command means that we will be updating/inserting a specific file inside the JAR.

    jd-uvr-java

    Ta-da! You just have modified and update a JAR file in a very simple way. Please open the jar file using JD-GUI again and check if the changes were done correctly.

    jd-gui-working

    If you wish to extract a specific file without requiring JD-GUI, it will be with using the -x argument within the jar command: jar xvf LinkedList.jar linkedlist/Node.class .

    I hope you have learned how to modify and update any JAR file. Please let me know if you have any other further questions or comments.

    Linked List | Data Structures

    A brief introduction

    Linked List is a linear collection of objects, which is composed of nodes pointing to the next node. Each node contains a value and a reference to the next node in the sequence. Most of the operations applied in a linked list (add, remove, search, etc.) will require sequencial scanning most of the time.

    single-linked-list
    As you can notice, each node will always have a pointer to the next node and a value, this is called a single linked list. If a node has a link to the previous and to the next one, it is called a double linked list or a circular linked list.

    Implementation

    The first step will be creating a node class:

    public class Node<T>{

    private Node next;
    private T value;

    public Node(){
        
    }
    
    public Node(T value){
        this.value = value;
    }
    
    public Node getNext() {
        return next;
    }

    public void setNext(Node next) {
        this.next = next;
    }

    public T getValue() {
        return value;
    }

    public void setValue(T value) {
        this.value = value;
    }
}

    This is a POJO (Plain Old Java Object) of a Node class, which contains a value and another Node that will be the “Next” node. If you ask yourself about the “T” I have in there, I am declaring the Node class as Generic, enabling the option to choose what datatype to use. Now, we will be creating varios operations used, starting with the add.

    public class MyLinkedList<T>{

    private Node head;
    private static int counter;

    public void add(T value){

    if (head == null) {
    head = new Node(value);
    } else {
    Node temp = new Node(value);
    Node current = head;

    while (current.getNext() != null) {
    current = current.getNext();
    }

    current.setNext(temp);
    }

    counter++;
    }
    }
    Read more...

    Activity Class | Android Tutorials #3

    After creating an android project, the first thing you will notice is the activity class. An activity is the primary class for user interaction, it is a single-focused task that a user can do.

    Activity Class

    Each activity should be modular and support one-focused thing a user can do in an app. For example, one that handles only the login of your application. It handles and takes care of the UI you will need for that specific window, using setContentView(view)

    Activity Life Cycle

    In simple words, an activity can be divided in three states:

    • Resumed/Running State: visible, user interacting
    • Paused: Visible, user not interacting, can be terminated
    • Stopped: Stopped, no longer visible, android terminates it.

    Android-Activity-Lifecycle

    As we can see in the image and code-wise, it contains 7 methods used in the life cycle:

  • onCreate()

    • Called when the Activity is created, it set ups the initial state. It does the following 4 functions:
    – Call super.onCreate();
    – set the activities contentView, which tells android what the activity user interface should be
    – retain reference to UI views as necessary
    – Configure views as necessary

  • onRestart()

    • Called if the activity has been stopped and is about to be started again
    Typical Actions:
    – Special processing needed only after having been stopped

  • onStart()

    • Called when the activity is about to get visible
    Typical Actions:
    – Start when visible-only behaviors
    – Loading persistent application state

  • onResume()

    • Called when activity is visible and about to start interacting with user
    Typical actions:
    – Start foreground-only behaviours, like animations or background soundtrack

  • onPause()

    • Called when an activity is about to change to another activity
    Typical actions:
    – Shutdown foreground-only behaviours, like animations
    – Save persistant state

  • onStop()

    • Called when activity no longer visible, may be restarted later
    Typical actions:
    – Cache state
    Note: May not be called if Android kills your application

  • onDestroy()

    • Called when activity is about to be destroyed
    Typical Actions:
    – Release activity resources, like private threads
    Note: May not be called if Android kills your application

    Read more...

    Creating a new project | Android Tutorials #2

    In the previous lesson, we learn about the different kind of IDEs that exist for android development. Now, we will be using Android Studio to create a project and review each file and folder created, and thinks to consider.

    Before we begin…

    If you have not downloaded Android Studio, you can download it from here. We will also need JDK (Java Development Kit), which you can download from here, and we need Android SDK, which is already included with the Android Studio. After downloading and installing, we are more than ready to begin this lesson.

    Creating a new project

    After opening Android Studio for the first time, it will display a window where you can create or open a project, if it doesn’t appear let’s just create a new one by going to File > New > New Project, a screen like the following will appear:

    s1

    Under “Application Name”, we will be writing how our application will be named and displayed as an app when we run it in our phones, I will be calling my application: “TextDisplayer”, and under “Company Domain”, we will write any name so that the package name follows this pattern: “com.companyname.appname”. Hit next after setting the project location path.

    The next step will be choosing the targeted devices, phone, tablets, android wear, TV, auto, and Glass. You can select multiple devices, this will depend in your app’s focus. We will be selecting the Phone and Tablet only and now we need to select the minimum SDK for our app. We will be considering various factors: the lower the minimum SDK, the less features you will get, however, we will be targeting more devices. You will notice that there’s a percentage provided by the IDE, which allows you to check an estimate of the devices that runs in that specific version and later. I will be choosing API 19: Android 4.4 (KitKat), considering I will be running this in my phone (connected with USB Debugging On).

    s2

    Now for the last step, we can choose an activity from the ones that are listed or add no activity. These activities are pre-configured and comes with Android Studio as templates to avoid “reinventing the wheel” and fasten the process of creating one of the listed activities. We will be looking at most of the activities later on, but now we will be choosing an empty activity, which means a page with absolutely nothing in it. You choose a name for that activity and click finish. This is how we can create a project in Android Studio.

    s3

    Let the gradle process finish and let’s start checking what files has been created. Under “manifests”, we can find AndroidManifest.xml, which basically functions as the configuration file for activities (all activities will be declared here), permissions (Internet, Contacts, etc.), and other related to the application. The java folder contains all the java classes and activitiesthat the application will use, right now we only have MainActivity, and we can find the JUnit Test Package. We will also find a resource folder that contains all the layouts, drawables, icons, and strings used by the application. If you ask yourself what’s under Gradle Scripts, you are very curious! Gradle Scripts contains properties, settings, dependencies, android SDK version, minimun SDK Version, and many other app-related settings. For example, you can add more dependencies like Google Gson, etc. in build.gradle (app).

    s4

    What’s Next?

    We have seen how to create a project, went through each folder and check what’s inside (not into detail), and we could also run the project by clicking play/run icon, requiring a smartphone with USB Debugging On or an emulated device.

    In the next tutorial, we are going to detail the Activity class and define every method that you could use, XML files like the layouts, strings, etc.. Theory is always good!

    IDEs Overview | Android Tutorials #1

    In this tutorial, I will be writing an overview of different IDEs and Frameworks that exists for android development. At the end of this post, you will find several links that could be useful.

    Eclipse

    The first IDE we will be looking at is Eclipse, that’s where it started. Eclipse has an android plugin (ADT Plugin), which the last update occurred in mid 2015. I have not gone into deep waters with eclipse and android, however, there has been support issues with it. I wouldn’t recommend starting with this.

    Android Studio

    Based in Eclipse ADT’s Plugin and IntelliJ IDEA, Android Studio was born and now it is the official IDE for android development. I started with Android Studio, I would so it is very intuitive and complete. It provides many ways of simplifying your work, like:

    • Code templates to help you build common app features (login, empty activities, master-detail flow, etc.)
    • Device emulation (Installing Genymotion is recommended if you are going to emulate)
    • Many Plugins to save work
    • Drag and Drop views to build layout fast
    • and so on

    Android Studio has its downsides like:

  • An update to the IDE can break something in your project
  • You have to run the application everytime you want to see a change (No Real-Time/Live Preview like the Hybrid Frameworks)
  • Gradle build is very nice, however, it may take couple of minutes to compile the project (not really a downside, though)

    • Read more...