สอนสร้างระบบ Point of Sale (POS) ด้วย JavaFX และ Spring Boot

 การสร้างระบบ Point of Sale (POS) ที่สามารถใช้ได้จริงในธุรกิจขนาดเล็กสามารถเริ่มต้นได้ด้วย JavaFX และ Spring Boot ซึ่งเป็นเครื่องมือยอดนิยมในสายงาน Java ทั้งสองนี้ช่วยให้สามารถพัฒนาแอปพลิเคชันที่มีประสิทธิภาพและมีส่วนติดต่อผู้ใช้ (UI) ที่สวยงามได้ง่ายๆ บทความนี้จะแบ่งออกเป็นหลายตอนเพื่อให้คุณสามารถเข้าใจและนำไปใช้งานได้อย่างต่อเนื่อง

---

ตอนที่ 1: การเตรียมความพร้อม

1. ติดตั้งเครื่องมือ

• Java Development Kit (JDK): ดาวน์โหลดและติดตั้ง JDK เวอร์ชันล่าสุด
• IDE: ใช้ IntelliJ IDEA หรือ Eclipse เพื่อเขียนโค้ด
• Maven/Gradle: สำหรับการจัดการ Dependency

2. สร้างโปรเจกต์ Spring Boot

• ใช้ Spring Initializr (https://start.spring.io) เพื่อสร้างโปรเจกต์พร้อม Dependency:
  • Spring Web
  • Spring Data JPA (ถ้ามีฐานข้อมูล)
  • Lombok

3. สร้างโปรเจกต์ JavaFX

• เพิ่มไลบรารี JavaFX ลงในโปรเจกต์โดยใช้ Maven หรือ Gradle:

  <dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>20</version>
  </dependency>
  

---

ตอนที่ 2: การสร้าง Backend สำหรับจัดการสินค้า

1. โมเดลสินค้า (Product Model)

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Product {
    private Long id;
    private String name;
    private double price;
    private String imageUrl;
    private String category;
}

2. สร้าง Controller สำหรับสินค้า

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @GetMapping
    public List<Product> getAllProducts() {
        return List.of(
            new Product(1L, "Coffee", 2.50, "https://example.com/images/coffee.png", "Beverage"),
            new Product(2L, "Tea", 1.75, "https://example.com/images/tea.png", "Beverage"),
            new Product(3L, "Sandwich", 4.00, "https://example.com/images/sandwich.png", "Food"),
            new Product(4L, "Cake", 3.25, "https://example.com/images/cake.png", "Dessert")
        );
    }
}

---

ตอนที่ 3: การสร้าง UI ด้วย JavaFX

1. การแสดงสินค้าใน Grid View

• ใช้ GridPane ในการแสดงรายการสินค้าแต่ละชิ้น

  private GridPane createProductGrid(ObservableList<Product> products) {
    GridPane grid = new GridPane();
    grid.setPadding(new Insets(10));
    grid.setHgap(15);
    grid.setVgap(15);
  
    int column = 0, row = 0;
    for (Product product : products) {
        VBox productBox = createProductBox(product);
        grid.add(productBox, column, row);
  
        column++;
        if (column == 3) { // 3 Columns ต่อแถว
            column = 0;
            row++;
        }
    }
    return grid;
  }
  

2. เพิ่ม Tab สำหรับแยกประเภทสินค้า

TabPane categoryTabs = new TabPane();
for (String category : groupedProducts.keySet()) {
    Tab tab = new Tab(category);
    tab.setGraphic(createCategoryIcon(category));
    categoryTabs.getTabs().add(tab);
}

3. ไอคอนสำหรับประเภทสินค้า

private Node createCategoryIcon(String category) {
    String iconUrl = categoryIcons.getOrDefault(category, "https://example.com/icons/default.png");
    ImageView icon = new ImageView(new Image(iconUrl));
    icon.setFitWidth(16);
    icon.setFitHeight(16);
    return icon;
}

---

ตอนที่ 4: การเพิ่มฟีเจอร์ Cart และ Checkout

1. ระบบตะกร้าสินค้า

• เพิ่มสินค้าจากหน้า Product ไปยังตะกร้า

  Button addButton = new Button("Add");
  addButton.setOnAction(e -> cart.add(product));
  

2. การพิมพ์ใบเสร็จ

• ใช้ TextArea หรือสร้างไฟล์ PDF

  private void printReceipt(List<Product> cartItems) {
    System.out.println("Receipt");
    for (Product product : cartItems) {
        System.out.println(product.getName() + " - $" + product.getPrice());
    }
  }
  

---

สรุป

บทความนี้ได้นำเสนอแนวทางในการสร้างระบบ POS แบบง่ายด้วย JavaFX และ Spring Boot ครอบคลุมตั้งแต่การสร้าง Backend, การแสดงสินค้าใน UI, การจัดการประเภทสินค้า และระบบตะกร้าสินค้า พร้อมฟีเจอร์ Checkout บทความถัดไปอาจเพิ่มเติมการเชื่อมต่อฐานข้อมูลหรือฟีเจอร์ที่ซับซ้อนยิ่งขึ้น!