Recently I was contacted by Toptal to join their network as a developer. I heard some good stuff about them before so I decided to give it a go. Toptal is "a network comprised of the most thoroughly screened, talented freelance engineers in the world". To enter the network you have to pass 4 tests. The first one is an interview - a simple English test, the second one is Codility test. The third one is a one-to-one test with a senior developer from the network when you need to solve two problems at limited time. And the last one is to create a full application.

Anyway, I am not going to talk about Toptal, rather than the project they gave me to do as the last part of the screening process. The full text of the project as well as the solution you can find on my GitHub. In this post I will only go through the main things and make some general remarks how development should be done and what you should pay attention, I won't cover every detail because there is too much code. For all the details you have code on GitHub.

Authentication

Since I needed to create API with every operation done using JavaScript I decided to use Angular to create a SPA. And since there is an API and SPA I decided to authenticate users using tokens. I didn't want to use Devise since the basic gem doesn't offer token authentication and then you need to add some other gem to be able to do that so I decided to use so called JWT (JSON web token). More about that technology you can find here.

Token generation, encoding and decoding is very simple using existing ruby gem. Only thing you need to do is gather everything in a whole. The general idea when user needs to be authenticated is to generate an API call with the parameters of email and password. If it turns out that this is the valid user, the token is being generated and returned to the user as a JSON response. That response also contains a data what user it is (user_id). The whole token is saved in the browser's local storage. Instead, a token can be stored in a cookie (therefore cookie is used as a storage), more about that you can find on this link.

Then, each time the client sends a request to the API, the token is being added to the header of that request. To do this, an interceptor is created on Angular side which intercepts each request and does this part of the job.

On the API side, the token is being extracted from the header of that request and checked whether it is valid (the expiration time is being set on the token). If it is valid than user_id is being used to get data for current_user. If token is invalid or there isn't any token, API returns http code 401 - which prevents unauthorized access to the API if someone is not authenticated...

Authoriza﻿tion

Authorization is certainly another important thing in every application but unfortunately it is something that is not paying too much attention. Of course, everyone has their own idea of how authorization should be implemented and I don't think there is any general best practice but I think that this approach, which I applied here, is more than good. It is necessary to do authorization on the API side and also in the web application. On API side because calls can be directed only to an API without any application involved and within application users without enough permissions should be forbidden access to the certain parts of the application as well as the forms for inserting new data.

I defined three types of user in the application - regular user, admin and user manager. A regular user has permission to only list her expenses and to create them, user manager has the right to list all the users in the application, edit them and create a new one, admin has the right to create expenses for herself and to list and edit expenses of all users in the system as well as to create new and edit existing users.

- Api

I didn't want to use Cancancan or Pundit or similar gems because I wanted to save myself some time and the authorization on the API is more than simple. All you have to do is to create a before_action filter and each controller then has to define who has the right to access the actions within it. If someone doesn't have permissions then you need to return http code :forbidden. This of course can't be tested in the application but there are tests you can write to check if everything is fine.

moduleApiclassUsersController<Api::BaseControllerbefore_action:is_authorized?privatedefis_authorized?if@current_user.is_regularrenderjson:{error:"Doesn't have permissions"},status::forbiddenreturnendendendend

- Angular

Angular part is a little more complex... First you should remove links from menu if certain user doesn't have permissions and then you should also disable the possibility for the same users to manually enter routes in the browser, which would allow them to visit those pages. It is pretty much easy to disable links in the menu but to do the other part you need to put some more effort in it. The most important part can be found in the file angular/services/auth.coffee:

I think this is more than elegant solution for authorization. The whole code you can find on GitHub as I mentioned before.

Rails API

When you set up the basics of the application with authentication and authorization then you must set up the API part of the Rails. There is an excellent RailsCast about it and many tutorials online so I won't go into details. Of course, you can use Grape instead of Rails but I decided to stick with Rails because I've never before worked with Grape and I wanted to save time on this part too. The thing you have to keep in mind are the routes and the fact that each API call must return JSON response. You can use active model serializer or Jbulder or you can even go without that of course. But I used Jbulder because you definitely need an easy way to properly create JSON you want to return to the user that made the request. Again I have to mention that you have a great RailsCast episode how to use Jbuilder so I won't write on this topic further.

Angular app

This was a new ground for me, I've never built a SPA before but for two weeks how long did this project last I am very satisfied with what I've achieved. There are several ways to integrate your Rails API with Angular application. Again I chose the simplest option, although probably not the best. I used Angular gem. I think that in a bigger project the best way is to completely separate API part of its SPA part and not use this gem but in this situation it served the purpose really well.

I won't post pieces of the code here because you have a whole project on GitHub, but I would like to note that I used Slim for making templates, CoffeeScript instead of a plane JavaScript because I like cleaner code and I used Bootstrap too. I made a couple of filters in order to extract information about date and time from the column in the database that stores datetime together for nicer display. Everything else is pretty straightforward.

Timezone

The part of the project that I had the most headache is the part with printing data for expenses arranged by weeks. Why was this such a big problem? As I wrote in a previous blog post, it's very important how you work with time zones in your application. The best practice is to store everything in UTC time in the database. When a user enters a date and time in the form (her local time) you have to store that time in the UTC format in the database and then when you need to display that time to the user you have to convert it back into her local time. Pretty standard stuff... Except for one little thing - the requirement is to display expenses arranged by weeks and by weeks it's meant from the user's perspective. From user's perspective a week isn't the same as a week on the server which is in UTC time. So, you have to deal with UTC time because you have to prepare JSON response in your API but in the same time you have to deal with user's local time (starting and ending of the week) and arrange JSON response according to that. If a user is, for example, in Belgrade (CET) and if she inserts an expense for Monday, July 27th at 1 AM it would be 31st week of the year according to her. But by the server's time, it is Sunday July 26th at 11 PM, which means it is 30th week for the UTC time. I solved this problem by sending time zone offset as a parameter to the API and by adding it to a time I stored in the database. You must also pay attention to the edge cases when you calculate weeks when start of a week is in one year and its ending is in the next year.

TestS

Last but not least - tests! Writing tests is very important and you shouldn't neglect it even if you have tight deadline. I did lot more here than it was expected from me but unfortunately I didn't have time to write tests for JavaScript, but the procedure is pretty standard... I used Factory Girl and Faker to create data and also Database Cleaner to clean data after running tests.

Next, you should write unit tests - tests for models, since this is not a big database there is only two models to test, user and expense:

require'rails_helper'describeExpensedoit'has a valid factory'doexpect(build(:expense)).tobe_validendit'is invalid without an amount'doexpect(build(:expense,amount:nil)).to_notbe_validendit'is invalid without a description'doexpect(build(:expense,description:nil)).to_notbe_validendit'is invalid without a time'doexpect(build(:expense,for_timeday:nil)).to_notbe_validendit'is invalid with a time set in the future'doexpect(build(:expense_future)).to_notbe_validendit'should belong to a user'doexpense=build(:expense)user=build(:user)expense.user=userexpect(expense.user).tobeuserendend

And finally functional tests - for testing your controllers. I am especially proud of this part of the application since I covered entire API - authentication, authorization as well as creating expenses, users and so on...

require'rails_helper'describeAuthControllerdo# because of the jBuilder I need to render viewsrender_viewsdescribe'POST #register'docontext'with valid credentials'doit'returns user id'do#build a user but does not save it into the databaseuser=build(:user_regular)post:register,{email:user.email,password:user.password,format::json}expect(response.status).toeq200parsed_response=JSON.parseresponse.bodyexpect(parsed_response['user']['id']).to_notbe_nilendendcontext'with invalid credentials'doit'does not have email'dopost:register,{password:"pass",format::json}expect(response.status).toeq401parsed_response=JSON.parseresponse.bodyexpect(parsed_response['errors']).to_notbe_nilexpect(parsed_response['errors']['email'][0]).toeq"can't be blank"endit'does not have password'dopost:register,{email:"email@email.com",format::json}expect(response.status).toeq401parsed_response=JSON.parseresponse.bodyexpect(parsed_response['errors']).to_notbe_nilexpect(parsed_response['errors']['password'][0]).toeq"can't be blank"endendenddescribe'POST #authenticate'docontext'with valid credentials'doit'returns token'douser=create(:user_regular)post:authenticate,{email:user.email,password:user.password,format::json}expect(response.status).toeq200parsed_response=JSON.parseresponse.bodyexpect(parsed_response['token']).to_notbe_nilendit'returns token with 3 parts separated by comas'douser=create(:user_regular)post:authenticate,{email:user.email,password:user.password,format::json}expect(response.status).toeq200parsed_response=JSON.parseresponse.bodyexpect(parsed_response['token'].split('.').count).toeq3endit'returns first name and last name of the user'douser=create(:user_regular)post:authenticate,{email:user.email,password:user.password,format::json}expect(response.status).toeq200parsed_response=JSON.parseresponse.bodyexpect(parsed_response['user']['first_name']).toequser.first_nameexpect(parsed_response['user']['last_name']).toequser.last_nameendendcontext'with invalid credentials'doit'does not return token'douser=create(:user_regular)post:authenticate,{email:"no_"+user.email,password:user.password,format::json}expect(response.status).toeq401endendenddescribe'POST #token_status'docontext'with valid token'doit'returns OK code'douser=create(:user_regular)token=AuthToken.issue_token({user_id:user.id})post:token_status,{token:token,format::json}expect(response.status).toeq200endendendend

The end

If you are a great developer and you want to try yourself to do some similar project, and if you want to work for the Toptal as a freelance developer, to fulfill your dreams to work from home or some exotic island you can sign up here, I enjoyed participating in such a process of selection of candidates.

Hello again. It's been awhile since I wrote something but I am too busy building my startup Warrantly so I really don't have time to write often. Nevertheless, now it's time to share something new. Being a Java developer for years I switched to Ruby on Rails a year ago because we decided it could be the best tool to build a startup. Boy it was a great decision! Since then I am really enjoying exploring Ruby and Rails and I don't have any desire going back to Java again.

Don't get me wrong, Java is a great programming language but with Rails you can create a new functional website in literally minutes! And with Java you have to decide which framework to use, how to connect everything to work properly and you will spend hours figuring out that. A year and a half ago I wrote how to start a new project with Spring because it is too complicated and I wanted to write down few steps you need to do to connect everything to work properly. Now I will show you how to do the same thing with Rails and it is so damn simple you will need only 15 minutes.

PREREQUISITE

First you need to install Ruby and Rails 4 and you can find tutorials everywhere how to do that so I won't explain that part. You don't need any IDE to code your program, you can use any text editor (I prefer Sublime) and you'll need a console. Now it could be a little more complicated if you are using Windows but it won't make you some serious trouble.

CREATE NEW APP AND ADD GEMS

In your console, go to the directory you want to use to store your project and type ﻿﻿this:

CONFIGURE DATABASE

If you want to connect your project with a database then you need to configure your database.yml file located under config directory:

ZURB FOUNDATION + HAML

Since we are using ZURB and HAML now you need to go to your console again and run this line:

We are installing Foundation and overriding application layout file under view directory because we want to use HAML. Now under assets/stylesheets directory find the file application.css and rename it to application.scss. You don't need to do that but if you want to use sassy css in your whole app it is good practice to do this in this step. By the way, you are probably asking what the hell are sass and scss, are they the same thing or not? I won't explain here more on this subject but you can find great explanation about them in one railscast episode.

SIMPLE FORM

Installing simple form gem is also one liner:

ScafFold + DATABASE MIGRATION

This was really skinny tutorial but I don't want to write 5 pages long post about simple stuff. Basically the application is ready to use. You can now create model, views, migration files just using one rails command, the powerful scaffold:

In your migration file which is created with this command (under db/migrate) you can add some code, this for example:

To reflect these changes to your database you need to run three commands:

With these commands you created actual database, load you schema, populated it with some seed data (if you have any under seeds.rb file) and ran your migration file to create a database table. Find more about these commands, you will need them during your development.

THE END

I hope this can help you like my previous post about SPRING did it. If you plan to launch some startup, maybe Rails is the right tool for you.

Yes it's true - I founded a startup! This is the reason why I neglected writing a blog for last couple of months. So, in the future, I'll write mainly on startup topics. For months now I tried to think of a good idea for sturtup. After couple of very bad ideas and couple of less bad ideas but not good enough, I finally got the right one. During the last couple of months this idea evolved into well structured product. There are 5 guys in the team, we are almost at the end of building our MVP and we are already in the talk with few companies that are interested in using this software. In the next couple of lines I'll describe what we are building.

Warrant.ly is a system that allows retailers to issue online warranties to customers instead of paper ones. In this way, all problems that may occur with the purchased device within the warranty period can be easily solved through the website. The customer will report the problem to the retailer and they can arrange the repair easily through the website as well. The customer will also be able to check its status. What is more important to the customers, they will be able to keep their warranties in this system even though they were issued the old-fashioned way – in a paper form. The customer just needs to enter basic information about the device and to take a picture of the warranty.

This is just a basic description, retailers will get much more possibilities in this software so they can really improve their business. They can create and offer extended warranty plans to their customers and also send some offers about specific devices to targeted users.

We already presented our startup to some investors. We attended mini Seedcamp event in Belgrade in April and we got very good feedback although we didn't manage to get into Seedcamp program. Also, some other startup incubators in the region contacted us about possibilities of joining them. We'll see what's the best option for us at the moment.

That's it for now, come back soon on this site to find more news about this startup and startups in general. And of course, if you are a retailer and you are interested about possibilities our software offers, please contact me. I guarantee that your business can only improve and progress by using Warrantly.

I've started several times by now to work on the Spring project from scratch, where I had to combine several different tools so that I can begin to program something concrete. That procedure eats time, and every time I forget something how I done it previously. Since I started writing this blog, it would be probably smart to write down the whole procedure if I forget anything next time, and perhaps also help someone to start a project and not spend hours banging their heads on how to combine a couple of tools in one whole project.

Prerequisite

This won't be literally step-by-step tutorial, I expect that everybody can download the latest versions of these tools that I will use. You will need Eclipse, Maven, Tomcat, MySql and you should download and install the latest versions. You don't need to download Spring and Hibernate since we will tell Maven to download it for us (we will configure XML file). And finally you should download Twitter Bootstrap because I will use it for front-end part in our JSP. If you haven't heard for this tool, it is basically a set of CSS and JavaScript files developed by Twitter so programmers can easily and fast create some fancy pages and features on these pages. You will also need jQuery because Twitter Bootstrap uses it.

Eclipse + Maven + project structure

Let's roll! When you open Eclipse you should create Maven project, BUT I suggest that you create simple Java project. After that you should convert it into Maven project. I like to do this way because when you create maven project the wizard will ask you to enter many confusing things about the project, and you could be puzzled with it if you didn't work with Maven before. When you create Java project, you only need to enter project name, the wizard for converting this project to Maven will do the rest. For this converting you should select your project and under configure submenu you should find 'Convert to Maven project'. Now you have your Maven project. Next thing you should do is to set your project structure, that is to create all the folders in the proper places of your project that you will be needed to launch the site in the browser. I suggest that you first delete the source folder 'src' and create your own source folders: 'src/main/java', 'src/main/webapp' and 'src/main/resources'. After that you should create the other folders (css, img, js) under 'src/main/webapp', you can see the structure on next picture:

In this step you should also create landing-page.jsp and that will be the first page that is displayed in the browser when you start your project. For now, you can insert in this file any text you want, you just want to test if that text is displayed in the browser when you start your project. Later we will modify this file.

The next thing you need to add here is three files: applicationContext.xml, spring-servlet.xml and web.xml. Now, you should edit these files if you want to run the project. I am not going to post the code that you need to add in these files, but you can download my project from: https://github.com/nikolatodorovic/spring_hibernate_mysql_maven_tomcat and you can see the content of these files. There are plenty of explanations about these files on the Internet and it would be probably good to read them.

The last thing, but maybe the most important is to configure pom.xml file. It is the main file for Maven and it contains information about the project and configuration details that Maven uses to build the project. In this file, you are telling Maven to use Spring and other tools. Therefore you don't need to download anything about Spring or Hibernate, only you need to do is to configure this file and Maven will do it for you. Again, I won't post code here, you should download it and copy/past from my project. Every other explanation about this you can find across the Internet.

Maven build + Tomcat

So, we now want to start this project and we need Tomcat for that. But first we need to build it. You can easily do this by using Maven commands. I recommend that you create run configuration with defined goals and after that you can build your project within Eclipse, you don't need to use command line. When you create new run configuration you should select your project (base directory) and enter 'clean install war:inplace' in goals field. That command will create WAR file from your files.

Now we have WAR file and we need to start Tomcat instance so that we can deploy this WAR file to that instance. You can copy and past this WAR file in the folder: 'tomcat_home\webapps' but don't do that. Every time you make some change on any file inside your project, you need to stop Tomcat instance, do another Maven build, copy/past new WAR file in this location and start Tomcat instance again. This is really pain in the ass... Instead of that, you should configure your Tomcat so it can read your files from your workspace. And if you do that, when you modify something in your JSP while your Tomcat instance is running you even don't need to stop that instance, do another Maven build and start Tomcat again. You just need to refresh your browser to see those changes. This procedure saves time incredibly! And it is very easy to accomplish this, you need to create one XML file with the name of your project, put it in: 'tomcat_home\conf\Catalina\localhost' and insert this code in the file:

Of course, you need to set your own path. By doing this, you are telling Tomcat where is located your source folder with JSP files, CSS files, JS files... When you do that you only need to restart Tomcat if you make some changes on the back-end, not on the front-end.

Now this is the time to test if this is working. If you did everything correct, when you enter your project name in the browser, your login page should be displayed. You can change some text in that file so you can test if refreshing of the browser displays changes on that page.

Spring

Next thing we'll do is to create a few basic pages, create layout for our project and use a little of Twitter Bootstrap for front-end. You should have a project structure as it is shown on the next picture:

From this picture and downloaded files, you can see what you should do with Twitter Bootstrap's files. You should also create controller files where is all the logic located. These are very simple files so I don't need to explain how it works, I hope you can manage it yourself. Be sure to set up your pom.xml file correctly to use Spring.

Hibernate + mySql

Now let's go to another step - adding some database in the project. If you downloaded this project from gitHub you can find a file in it called database.sql. You should run that file on your own database so you can configure this project correctly. When you install mySql, you should choose what client you will use for managing you databases. I am using Heidi (www.heidisql.com), but you can use whatever you want... After creating this database, you should open file jdbc.properties located in WEB-INF folder and edit it according to your database connection parameters.

After you created database, you need to configure pom.xml file so you can use Hibernate in your project. If you copied my pom file, you should be fine. At the end you have to create hibernate.cfg.xml file under 'src/main/resources' and copy/past content from my project. Now it is all set up for using Hibernate and you can create model classes, DAO classes and service classes. This is a very good procedure how you can organize your code, but you can organize it anyway you like.

The End

And that's basically it. I won't go into details on how to use Spring, Hibernate, you can find all the necessary infos on the Web. Also, study my project and you can learn how to set up your configuration files, how to add pages, entity classes and so on... Since you read this this far, I hope it was useful :) Please leave a comment if you have any suggestion.

Hi everyone! This is my first blog post ever. After several years having very ugly looking personal website, I decided it's time to make some radical changes and to launch a completely new presentation. So, few days ago I started looking for a easy-to-use tool that I can use to build some nice looking but simple website. And I came across Weebly. It turned out that this is really cool online tool with which you can create website within a few hours! Another great thing about Weebly is that you get free web hosting on their server when you create a site. Only you need to do is to create some good content, choose a theme and it is ready to go.The next thing that you should consider is to choose your web address. Weebly lets you use address in a form "yourAddress.weebly.com". If you don't like it and you want to have some cool address, you can always register some domain. I finally decided to register www.nikolatodorovic.com because I don't want some wacko use that cool name for website instead of me... You have plenty of sites where you can register your domain, maybe the best known is goDaddy, but I decided to register it on nameCheap.com. It cost around $10/year and domain name was available to use after only few minutes. Some domestic sites for registration say that you need to wait for 24/48 h which is really stupid... Another cool thing about this nameCheap site is that when you spend some amount of money on their site (maybe about 50$) you can use 'coupon code' which allows you to have a discount when you purchase some service. So, with that coupon you can buy a domain name for about $4/year.The last thing before publishing a site is to connect your domain to website created with Weebly. That procedure requires only few minutes since you have to enter IP addresses which Weebly provides to you to specific fields on your domain registrar's control panel. All the instructions you need is on Weebly's website so if you ever wanted to create your own personal website, this is your chance.