How we built a job board in one week with JHipster
•Download as PPTX, PDF•
12 likes•10,545 views
@KileNiklawski with @IpponUSA presents on how we built a job board in one week using JHipster. About JHipster: Our goal is to generate for you a complete and modern Web app, unifying: - A high-performance and robust Java stack on the server side with Spring Boot - A sleek, modern, mobile-first front-end with AngularJS and Bootstrap - A powerful workflow to build your application with Yeoman, Bower, Grunt and Maven
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to How we built a job board in one week with JHipster
Similar to How we built a job board in one week with JHipster (20)
Recently uploaded
Recently uploaded (20)
How we built a job board in one week with JHipster
- 1. HOW WE BUILT A JOB BOARD IN ONE WEEK WITH JHIPSTER Kile Niklawski Ippon Technologies
- 2. 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
- 3. 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 3
- 4. 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
- 5. 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
- 6. DAY 1 Generate the app, customize UI, and deploy to the cloud
- 7. 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
- 8. Generate the Base Project
- 9. Database
- 10. 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
- 11. Check out the Entities
- 12. CRUD + Search Built-in
- 13. 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
- 14. 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
- 15. DAY 2 Add Candidate Features
- 16. 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
- 17. Landing Page
- 18. Job Details
- 19. Company Details
- 20. DAY 3 Added code coverage analysis and built user profile
- 21. 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
- 22. 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!
- 23. 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
- 24. DAY 4 Recruiter pages, résumé upload, job application
- 25. 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é
- 26. Registration
- 27. Company Details
- 28. Create a Job
- 29. Jobs Created
- 30. Applicants
- 31. 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
- 32. User Profile
- 33. Apply for Job
- 34. DAY 5 Went to the beach
- 35. 35
- 36. 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
- 37. CONCLUSION
- 38. 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
- 39. 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/