how we built a job board in one week with jhipster - @kileniklawski @ipponusa
TRANSCRIPT
![Page 1: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/1.jpg)
HOW WE BUILT A JOB BOARD IN ONE WEEK WITH JHIPSTERKile NiklawskiIppon Technologies
![Page 2: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/2.jpg)
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
![Page 3: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/3.jpg)
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
![Page 4: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/4.jpg)
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
![Page 5: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/5.jpg)
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
![Page 6: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/6.jpg)
DAY 1Generate the app, customize UI, and deploy to the cloud
![Page 7: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/7.jpg)
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
![Page 8: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/8.jpg)
Generate the Base Project
![Page 9: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/9.jpg)
Database
![Page 10: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/10.jpg)
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
![Page 11: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/11.jpg)
Check out the Entities
![Page 12: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/12.jpg)
CRUD + Search Built-in
![Page 13: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/13.jpg)
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
![Page 14: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/14.jpg)
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
![Page 15: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/15.jpg)
DAY 2Add Candidate Features
![Page 16: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/16.jpg)
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
![Page 17: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/17.jpg)
Landing Page
![Page 18: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/18.jpg)
Job Details
![Page 19: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/19.jpg)
Company Details
![Page 20: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/20.jpg)
DAY 3Added code coverage analysis and built user profile
![Page 21: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/21.jpg)
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
![Page 22: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/22.jpg)
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!
![Page 23: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/23.jpg)
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
![Page 24: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/24.jpg)
DAY 4Recruiter pages, résumé upload, job application
![Page 25: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/25.jpg)
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é
![Page 26: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/26.jpg)
Registration
![Page 27: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/27.jpg)
Company Details
![Page 28: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/28.jpg)
Create a Job
![Page 29: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/29.jpg)
Jobs Created
![Page 30: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/30.jpg)
Applicants
![Page 31: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/31.jpg)
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
![Page 32: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/32.jpg)
User Profile
![Page 33: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/33.jpg)
Apply for Job
![Page 34: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/34.jpg)
DAY 5Went to the beach
![Page 35: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/35.jpg)
![Page 36: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/36.jpg)
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
![Page 37: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/37.jpg)
CONCLUSION
![Page 38: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/38.jpg)
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
![Page 39: How we built a job board in one week with JHipster - @KileNiklawski @IpponUSA](https://reader035.vdocuments.us/reader035/viewer/2022070513/5882bde01a28abb2478b54c7/html5/thumbnails/39.jpg)
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/