Як створити повноцінний додаток на Java та Angular: покрокова інструкція - javascript.org.ua

Створення повноцінного додатку може здатися складним на перший погляд, але з правильними інструментами та фреймворками це перетворюється на керований і навіть приємний процес. У цій статті ми проведемо вас через етапи створення повноцінного додатку, використовуючи Java для бекенду та Angular для фронтенду. Ми будемо дотримуватись архітектури MVC (Model-View-Controller) для бекенду, використаємо Lombok для мінімізації шаблонного коду і забезпечимо, щоб додаток на Angular працював як автономний. Крім того, ми реалізуємо операції CRUD (Create, Read, Update, Delete) для простого об’єкта.

Необхідні умови

Перед тим як розпочати, переконайтеся, що у вас встановлено наступне:

Java Development Kit (JDK) 17 або новіше
Maven (для керування залежностями в Java)
Node.js (для Angular)
Angular CLI (npm install -g @angular/cli)
IDE (IntelliJ IDEA, Eclipse або VS Code)
Postman (для тестування API)

Крок 1: Налаштування бекенду (Java Spring Boot)

1.1 Створіть проект Spring Boot

Використовуйте Spring Initializr для створення проекту Spring Boot з наступними залежностями:

Spring Web (для створення RESTful API)
Spring Data JPA (для роботи з базою даних)
Lombok (для зменшення обсягу шаблонного коду)
H2 Database (для бази даних в пам’яті або використовуйте MySQL/PostgreSQL для продакшн середовища)

Завантажте проект і імпортуйте його в вашу IDE.

1.2 Опис моделі

Створимо просту сутність Product. Вона буде представляти дані, з якими ми будемо працювати.

package com.example.demo.model;  

import jakarta.persistence.*;  
import lombok.Data;  

@Data  
@Entity  
public class Product {  
 @Id  
 @GeneratedValue(strategy = GenerationType.IDENTITY)  
 private Long id;  

 private String name;  
 private double price;  
 private String description;  
}

@Data з Lombok генерує геттери, сеттери, методи toString, equals та hashCode.
@Entity позначає цей клас як сутність JPA.
@Id та @GeneratedValue налаштовують первинний ключ.

1.3 Створення репозиторію

Наступним кроком створимо інтерфейс репозиторію для обробки операцій з базою даних.

package com.example.demo.repository;  

import com.example.demo.model.Product;  
import org.springframework.data.jpa.repository.JpaRepository;  

public interface ProductRepository extends JpaRepository {  
}

JpaRepository надає методи CRUD «з коробки».

1.4 Реалізація шару сервісів

Шар сервісів містить бізнес-логіку.
Створіть клас ProductService.

package com.example.demo.service;  

import com.example.demo.model.Product;  
import com.example.demo.repository.ProductRepository;  
import lombok.RequiredArgsConstructor;  
import org.springframework.stereotype.Service;  

import java.util.List;  

@Service  
@RequiredArgsConstructor  
public class ProductService {  

 private final ProductRepository productRepository;  

 public List getAllProducts() {  
 return productRepository.findAll();  
 }  

 public Product getProductById(Long id) {  
 return productRepository.findById(id).orElseThrow(() -> new RuntimeException("Product not found"));  
 }  

 public Product createProduct(Product product) {  
 return productRepository.save(product);  
 }  

 public Product updateProduct(Long id, Product productDetails) {  
 Product product = getProductById(id);  
 product.setName(productDetails.getName());  
 product.setPrice(productDetails.getPrice());  
 product.setDescription(productDetails.getDescription());  
 return productRepository.save(product);  
 }  

 public void deleteProduct(Long id) {  
 productRepository.deleteById(id);  
 }  
}

@Service позначає цей клас як компонент сервісу.
@RequiredArgsConstructor генерує конструктор для впровадження залежностей.

1.5 Створення контролера

Контролер обробляє HTTP запити та взаємодіє з шаром сервісів.

package com.example.demo.controller;  

import com.example.demo.model.Product;  
import com.example.demo.service.ProductService;  
import lombok.RequiredArgsConstructor;  
import org.springframework.web.bind.annotation.*;  

import java.util.List;  

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

 private final ProductService productService;  

 @GetMapping  
 public List getAllProducts() {  
 return productService.getAllProducts();  
 }  

 @GetMapping("/{id}")  
 public Product getProductById(@PathVariable Long id) {  
 return productService.getProductById(id);  
 }  

 @PostMapping  
 public Product createProduct(@RequestBody Product product) {  
 return productService.createProduct(product);  
 }  

 @PutMapping("/{id}")  
 public Product updateProduct(@PathVariable Long id, @RequestBody Product productDetails) {  
 return productService.updateProduct(id, productDetails);  
 }  

 @DeleteMapping("/{id}")  
 public void deleteProduct(@PathVariable Long id) {  
 productService.deleteProduct(id);  
 }  
}

@RestController поєднує @Controller та @ResponseBody.
@RequestMapping прив'язує HTTP запити до методів обробки.

1.6 Налаштування програми

Додайте наступні властивості до application.properties для налаштування бази даних H2:

spring.datasource.url=jdbc:h2:mem:testdb  
spring.datasource.driverClassName=org.h2.Driver  
spring.datasource.username=sa  
spring.datasource.password=password  
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect  
spring.h2.console.enabled=true

Крок 2: Налаштування фронтенду (Angular)

2.1 Створіть додаток Angular

Виконайте наступну команду для створення нового додатку на Angular:

ng new angular-frontend --standalone

Прапорець --standalone забезпечує використання автономних компонентів, і використовуйте --standalone, якщо ваша версія Angular менша за 17.
Якщо ваша версія 17 або більша, ви можете використовувати:

ng new angular-frontend

2.2 Генерація компонентів та сервісів

Згенеруйте ProductService та ProductComponent:

ng generate service services/product  
ng generate component components/product

2.3 Реалізація сервісу продукту

У файлі src/app/services/product.service.ts додайте наступний код:

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  
import { Product } from '../models/product.model';  

@Injectable({  
 providedIn: 'root',  
})  
export class ProductService {
private apiUrl = 'http://localhost:8080/api/products';  

 constructor(private http: HttpClient) {}  

 getAllProducts(): Observable {  
 return this.http.get(this.apiUrl);  
 }  

 getProductById(id: number): Observable {  
 return this.http.get(`${this.apiUrl}/${id}`);  
 }  

 createProduct(product: Product): Observable {  
 return this.http.post(this.apiUrl, product);  
 }  

 updateProduct(id: number, product: Product): Observable {  
 return this.http.put(`${this.apiUrl}/${id}`, product);  
 }  

 deleteProduct(id: number): Observable {  
 return this.http.delete(`${this.apiUrl}/${id}`);  
 }  
}

2.4 Реалізація компонента продукту

У файлі src/app/components/product/product.component.ts додайте наступний код:

import { Component, OnInit } from '@angular/core';  
import { ProductService } from '../../services/product.service';  
import { Product } from '../../models/product.model';  
import { FormsModule } from '@angular/forms';  
import { CommonModule } from '@angular/common';  

@Component({  
 selector: 'app-product',  
 standalone: true,  
 imports: [FormsModule, CommonModule],  
 templateUrl: './product.component.html',  
 styleUrls: ['./product.component.css'],  
})  
export class ProductComponent implements OnInit {  
 products: Product[] = [];  
 selectedProduct: Product = { id: 0, name: '', price: 0, description: '' };  

 constructor(private productService: ProductService) {}  

 ngOnInit(): void {  
 this.loadProducts();  
 }  

 loadProducts(): void {  
 this.productService.getAllProducts().subscribe((data) => {  
 this.products = data;  
 });  
 }  

 selectProduct(product: Product): void {  
 this.selectedProduct = { ...product };  
 }  

 saveProduct(): void {  
 if (this.selectedProduct.id) {  
 this.productService  
 .updateProduct(this.selectedProduct.id, this.selectedProduct)  
 .subscribe(() => this.loadProducts());  
 } else {  
 this.productService  
 .createProduct(this.selectedProduct)  
 .subscribe(() => this.loadProducts());  
 }  
 }  

 deleteProduct(id: number): void {  
 this.productService.deleteProduct(id).subscribe(() => this.loadProducts());  
 }  
}

2.5 Створення шаблону

У файлі src/app/components/product/product.component.html додайте наступний код:


Продукти  
Назва:        Ціна:        Опис:        Зберегти   
    {{ product.name }} - {{ product.price }}    Видалити    
 ```  ## Крок 3: Запуск програми  1.
Запустіть бекенд на Spring Boot, запустивши клас `DemoApplication`.
2. Запустіть фронтенд на Angular, використовуючи команду `ng serve` у директорії `angular-frontend`.
3. Відкрийте `http://localhost:4200` у вашому браузері, щоб побачити роботу програми.

## Висновок

Вітаємо! Ви створили повноцінне додаток на Java та Angular з операціями CRUD. Бекенд реалізує архітектуру MVC, а фронтенд є автономним додатком на Angular. Ви можете розширити це додаток, додавши більше функцій, таких як автентифікація, валідація або навіть розгорнути його в хмарі.

Щасливого кодування! 🚀



Перекладено з: [How to Build a Full Stack Java Angular Application: Step-by-Step](https://medium.com/@MohamedManbar/how-to-build-a-full-stack-java-angular-application-step-by-step-d53a17bdcba7)