มาใช้ JHipster สร้าง Spring Boot + Angular App

3 min readApr 23, 2019

ถ้าเราจะสร้าง Full Stack Application โดยสักตัว เราอาจจะต้องสร้าง application project ทั้งฝั่ง Frontend และ Backend ที่ละ project จนครบทั้งหมดก่อนแล้วถึงจะได้ full-stack application ขึ้นมา ทำให้อาจจะเสียเวลานิดนึง (บางคนอาจจะชอบสร้างที่ละ project แบบนี้) โดยเฉพาะอย่างยิ่งถ้า backend เป็น Spring Boot และ frontend เป็น Angular หรือ React ยิ่งยุ่งยากเข้าไปใหญ่ แต่เรามีเครื่องมือหนึ่งที่ทำให้สร้างได้ง่ายและรวดเร็ว นั้นก็คือ JHipster ซึ่งเป็นเครื่องมือที่สะดวกและครบถ้วนสำหรับสร้าง Web App หรือจะเป็น Microservice ก็ตาม ด้วย Spring Boot และ Angular หรือ React ดังนั้นในบทความนี้จะมาสร้าง Web App ง่ายๆ ด้วย JHipster กันดู

JHipster?

เป็น open-source project ที่รวม web development framework ในใช้งานแพร่หลายเข้าไว้ด้วยกัน นั้นก็คือ Bootstrap, Angular/React และ Spring Boot เข้าไว้ด้วยกัน ซึ่ง Bootstrap เป็น web-component framework ที่มีผู้ใช้งานเป็นส่วนใหญ่

JHipster เริ่มพัฒนาโดย Julien Dubois ในปี 2013 เป็น open-source บน Github มีนักพัฒนา 19 คนเป็น Core team developer และ มี contributor มากกว่า 430 คน ร่วมกันพัฒนา โดยโค้ดส่วนใหญ่ประกอบด้วย JavaScript (33%), Java (27%) และ TypeScript (25%) ที่เหลือกเป็น HTML และอื่นๆ

Core ของ JHipster เป็น Yeoman generator ซึ่งเป็น code generator ที่รันด้วยคำสั่ง yo เพื่อสร้าง application ที่สมบูรณ์หรือส่วนของ application โดยใช้ Yeoman Workflow ใช้สำหรับสร้าง frontend application (client-side) ประกอบด้วย 3 ส่วน

Scaffolding tool (yo)
Build tool (npm/Yarn, webpack)
Package manger (npm/Yarn)

มาผสานกับ Spring Boot ของ Spring framework ส่วนของ backend application (server-side)

Install JHipster

ติดตั้ง JHipster ง่ายๆ ด้วยคำสั่ง npm install -g generator-jhipster โดยจะต้องติดตั้ง Java 8 และ Node.js LTS หลังจากติดตั้งสามารถตรวจสอบด้วยคำสั่ง

$ jhipster --version
INFO! Using JHipster version installed globally
5.8.2$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)$ node --version
v10.15.3

JHipster รองรับ Java 8 เท่านั้น

Create Application Project

ในบทความนี้จะสร้าง blog app ง่ายๆ โดยใช้ boilerplate code ของ JHipster ดัวยคำสั่ง jhipster เพื่อเรียกใช้งาน JHipster

เลือกตัวเลือกต่างๆ ดังนี้ (ในขั้นตอนนี้จะมีตัวเลือกให้เลือกสำหรับสิ่งที่เราต้องการใช้ใน project) เพื่อสร้าง Spring Boot + Angular simple project

รอสักพักให้ JHipster สร้าง project และ install dependency ต่างๆ ที่จำเป็นให้ทั้ง frontend และ backend (จะนานหน่อยในครั้งแรก)

และใช้คำสั่ง ./mvnw เพื่อรัน application เมื่อเรียบร้อย สามารถเข้าถึง application ได้ด้วย URL http://localhsot:8080/

จะได้หน้าแรกของ boilerplate blog application ซึ่งสามารถ login ด้วย username/ password “admin”

สำหรับ project สามารถใช้ IntelliJ IDEA ในการพัฒนาได้เหมือน Spring Boot project ธรรมดา

Generated Code Project Structure

สำหรับโครงสร้าง Project ที่สร้างด้วย JHipster นั้นจะเหมือนกับ Java/Spring project ทั่วไป แต่จะมีส่วนของ frontend code เข้ามา

Backend

เหมือนกับ Java project ทั่วไป Java code อยู่ใน /src/main/java
ใน /src/main/resources มี static file ต่างๆ ที่ใช้ใน Java code
Unit/Integration Test อยู่ใน /src/test/java

Frontend

Frontend code (TypeScript สำหรับ Angular) จะอยู่ใน /src/main/webapp
app folder จะเป็นที่สำหรับ main app ของ frontend
Unit Test อยู่ใน /src/test/javascript

โดยที่ค่าต่างๆ ที่เลือกตอนสร้าง project ของ JHipster จะอยู่ใน .yo-rc.json

{
    "generator-jhipster": {
        "promptValues": {
            "packageName": "com.iphayao.myapp",
            "nativeLanguage": "en"
        },
        "jhipsterVersion": "5.8.2",
        "applicationType": "monolith",
        "baseName": "blog",
        "packageName": "com.iphayao.myapp",
        "packageFolder": "com/iphayao/myapp",
        "serverPort": "8080",
        "authenticationType": "jwt",
        "cacheProvider": "ehcache",
        "enableHibernateCache": false,
        "websocket": false,
        "databaseType": "sql",
        "devDatabaseType": "h2Disk",
        "prodDatabaseType": "postgresql",
        "searchEngine": false,
        "messageBroker": false,
        "serviceDiscoveryType": false,
        "buildTool": "maven",
        "enableSwaggerCodegen": false,
        "jwtSecretKey": "YWQyZTVhNzQ4YTdmYjdjOGU4NDlhYz",
        "clientFramework": "angularX",
        "useSass": false,
        "clientPackageManager": "npm",
        "testFrameworks": [],
        "jhiPrefix": "jhi",
        "entitySuffix": "",
        "dtoSuffix": "DTO",
        "otherModules": [],
        "enableTranslation": true,
        "nativeLanguage": "en",
        "languages": ["en"]
    }
}

สรุป

จากการที่ทดลองใช้งาน JHipster สร้าง Spring Boot + Angular application เบื้องต้นนั้นจะเห็นได้ว่าด้วยพลังของ JHipster ทำให้เราใช้ไม่กีคำสั่งและเลือกตัวเลือกต่างๆ ที่ JHipster รองรับก็ทำให้เราสามารถสร้าง Web App แบบง่ายๆ ได้แล้ว แต่ว่าไม่เพียงเท่านี้ JHipster ยังรองรับ Framework ที่สำคัญๆ อีกมากมายให้เลือกใช้ ซึ่งจะทำให้ Application หรือ Service ของเรามีความสามารถได้มากมาย

อ้างอิง

DocGist

Edit description

gist.asciidoctor.org