Embed Size (px)
Citation preview
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
[email protected]@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/
