How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA

HOW WE BUILT A JOB BOARD IN ONE WEEK WITH JHIPSTERKile NiklawskiIppon Technologies

Who am I?• Software Engineer/Architect and technology enthusiast• A decade of experience - mostly Java• Worked with various start-ups and large insurance,

finance, and government clients• Working for Ippon as a Software Architect

kniklawski@ipponusa.com@KileNiklawski

Ippon Technologies• 200 software engineers in France and the US➡ Paris, Nantes, Bordeaux➡ Richmond (Virginia), Washington (DC)

• Expertise➡ Digital, Big Data and Cloud➡ Java, Open-source, Agile

• Open-source Projects :➡ JHipster, ➡ Tatami …

• @ipponusa

Requirements• Job Board Site MVP

• Three types of users: Company, Recruiter, Candidate (job seeker)• Company can register and then post jobs• Recruiter can login and search for applicants• User can login and search for jobs

• You have one week!• 1 Product Owner• 1 Developer• 1 Scrum Master

What is JHipster?• Open Source• Yeoman app generator• Creates a full stack Java based web app• Uses Maven/Gradle, Grunt, Bower, Spring and AngularJS• Spring Boot• Responsive UI (HTML5/CSS3/Bootstrap)• Spring Data JPA backend• Security is wired up• Caching built-in, log management, monitoring, API docs

DAY 1Generate the app, customize UI, and deploy to the cloud

Writing User Stories• Candidate

• I want to log in, build a profile and be able to search and apply to jobs easily

• Recruiter• I want to log in, build a personal and company profile• I want to be able to post jobs• I want to be able to view the applicants for a job• I want to search the candidate pool to find a good match

• SysAdmin• I want to be able to monitor the status of the server, the application’s

services and be able to interact with the REST API• I want to be able to change the log levels from the browser

• Partner• I want to pull candidates, jobs and companies using a REST API

Generate the Base Project

Database

Get it Running• Created the UML diagram using Modelio• Exported model in XMI• Imported XMI using jhipster-uml tool• Now run it!

• mvn clean install• mvn spring-boot:run

Check out the Entities

CRUD + Search Built-in

Cloud Time• Wanted to use heroku but had to install Elasticsearch to a

local server in order to keep it free• Installed the heroku CLI• One-time setup for deployment

• heroku login• yo jhipster:heroku

• Every deployment• mvn clean install –Pprod• heroku deploy:jar –jar target/boardatjob.war

UI• Borrowed a few hours from a UI designer for a look-and-

feel• Chose to use the Compass CSS Authoring Framework• Replaced the main.scss file with the custom CSS from the

designer• Modified some image paths and added images• Copied the designer’s home page into the main.html• Separated common elements into the navbar template and

created a new header template

DAY 2Add Candidate Features

Candidate Features• Added a new listing template for the front page, tied in

Elasticsearch, added the job and company detail pages• Very little backend work required – mostly HTML and AngularJS

• Needed to sort the job listings• Had to modify a date field on the job object and add a liquibase

changeset• Modified the REST controller to pass the sort criteria to Spring Data

• Needed pagination (infinite scroll)• JHipster provides infinite scrolling but we did not select it• So we generated a new JHipster project with infinite scroll and

borrowed from that

Landing Page

Job Details

Company Details

DAY 3Added code coverage analysis and built user profile

Coverage and Static Analysis• Updated the Sonar version in the pom.xml• Ignored library files during analysis• Consolidated test reports in the same directory• Added code coverage for Java using Jacoco• Added code coverage for AngularJS using Karma• Would like to see these generated by JHipster• Run the analysis:

• mvn clean install• grunt test• mvn sonar:sonar

Faceted Search• How do we implement this?• Elasticsearch supports faceted search but not sure how to

get the information with the Spring Data Elasticsearch library (display job counts by location)

• Let’s move on!

User Profile• Added a user profile entity to support additional fields

• Design choice versus modifying the existing user entity generated by JHipster

• User profile is related by unique login id to the user entity• Modified registration to create a user profile• Modified the settings page to support additional fields for

user profiles• Found a minor bug in JHipster where refreshing the page

caused the user to lose his roles• Already fixed!

• Added storing of résumés as a blob in the user profile• Added a REST resource for upload/download requests• Used an AngularJS library for drag-and-drop uploads

DAY 4Recruiter pages, résumé upload, job application

Recruiter Features• Created a company page for the recruiter• Created pages to submit and review job listings• Added a list of job applications for listings submitted by the

recruiter to the home page• Added ability to review the cover letter and candidate

contact information• Added ability to download a candidate’s résumé

Registration

Company Details

Create a Job

Jobs Created

Applicants

Candidate Features• Modified the user profile screen to add fields and support

résumé uploads• Added screen for applying for a job and adding a cover

letter

User Profile

Apply for Job

DAY 5Went to the beach

MVP• Signed up for a free SendGrid account and configured the

sendmail settings in the application.yml file• Focused most of the day on fixing bugs• Believe it or not, some bugs still exist

CONCLUSION

What Did We Get?• How long does it take to get a new project up and running?

• Started adding features on Day 1• Scaffolding was generated• Deployed initial app to the cloud on Day 1

• Can we modify the generated code?• Modern and clean organization• Easily added 3rd party libraries with bower and maven

• A prototype that can be turned into a real, scalable production application

References• JHipster Site

• https://jhipster.github.io/• White Paper

• http://www.ipponusa.com/whitepaper/jhipster-for-techies-hipster-developer-diary/

• JHipster Demo• http://www.ipponusa.com/blog/jhipster-demo/