طراحی سیستم انتها به انتها برای یک برنامه React + Java + Cosmos DB

Summarize this content to 400 words in Persian Lang
در این راهنما، ما یک برنامه React + Java مقیاس پذیر با Cosmos DB به عنوان پایگاه داده طراحی خواهیم کرد. این راه‌اندازی برای برنامه‌هایی که نیاز به مقیاس‌پذیری بالا، تأخیر کم و در دسترس بودن چند منطقه دارند ایده‌آل است. ما همه چیز را از معماری گرفته تا استقرار پوشش خواهیم داد و آن را به مراحل عملی تقسیم خواهیم کرد.

1. برنامه ریزی و تجزیه و تحلیل نیازمندی ها

جمع آوری الزامات

Frontend Needs:

رابط کاربری پویا
به روز رسانی در زمان واقعی.
ناوبری بصری

نیازهای Backend:

API های مقیاس پذیر
مدیریت پیچیده داده ها
ذخیره سازی و پردازش امن داده ها

نیازهای پایگاه داده:

ساختار NoSQL برای انعطاف پذیری.
تأخیر کم برای کاربران جهانی.
سطوح سازگاری برای عملیات تراکنش.

پشته فناوری

Frontend: React.js با TypeScript (اختیاری)، Redux برای مدیریت حالت.

Backend: جاوا با Spring Boot.

پایگاه داده: Azure Cosmos DB.

ارتباط: API های RESTful.

استقرار: Docker + Kubernetes.

2. طراحی معماری

معماری سطح بالا

Frontend: برنامه React برای رندر سمت کلاینت، مصرف API و UI پویا.

Backend: Java Spring Boot برای توسعه API RESTful.

پایگاه داده: Cosmos DB برای ذخیره سازی داده های بسیار در دسترس و پارتیشن بندی شده.

ارتباط: API های REST مبتنی بر JSON برای تعامل بین ظاهر و باطن.

3. توسعه Frontend

ساختار پوشه

سازماندهی پروژه React برای مقیاس پذیری و نگهداری:

src/
├── components/ # Reusable UI components
├── pages/ # Page-level components
├── hooks/ # Custom React hooks
├── context/ # Global state management using Context API
├── services/ # API calls
├── styles/ # CSS/SCSS files
├── App.js # Root component
└── index.js # Entry point

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مسیریابی

استفاده کنید react-router-dom برای ناوبری:

import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;

function App() {
return (
<Router>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/users” element={<UserList />} />
</Routes>
</Router>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مدیریت دولتی

بین را انتخاب کنید Redux یا Context API:

از Redux برای برنامه های بزرگی که نیاز به مدیریت متمرکز حالت دارند استفاده کنید.
از Context API برای سناریوهای اشتراک‌گذاری حالت ساده‌تر استفاده کنید.

4. توسعه Backend

راه اندازی بوت بهار

با Maven یا Gradle یک برنامه Spring Boot راه اندازی کنید. وابستگی های زیر را شامل شود:

com.azure.spring
spring-cloud-azure-starter-data-cosmos

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ساختار پروژه

باطن خود را برای مقیاس پذیری سازماندهی کنید:

src/main/java/com/example/
├── controller/ # REST Controllers
├── service/ # Business logic
├── repository/ # Cosmos DB integration
├── model/ # Data models
└── application/ # Main application class

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پیکربندی Cosmos DB

پیکربندی لازم را به آن اضافه کنید application.properties:

spring.cloud.azure.cosmos.endpoint=
spring.cloud.azure.cosmos.key=
spring.cloud.azure.cosmos.database=
spring.cloud.azure.cosmos.consistency-level=Session

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مدل ها را تعریف کنید

از حاشیه نویسی برای نگاشت کلاس های جاوا به Cosmos DB استفاده کنید:

@Container(containerName = “users”)
public class User {
@Id
private String id;
private String name;
private String email;

// Getters and setters
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مخزن

ایجاد یک رابط مخزن برای عملیات پایگاه داده:

@Repository
public interface UserRepository extends CosmosRepository<User, String> {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خدمات

پیاده سازی منطق کسب و کار در کلاس خدمات:

@Service
public class UserService {
@Autowired
private UserRepository userRepository;

public List<User> getAllUsers() {
return userRepository.findAll();
}

public User createUser(User user) {
return userRepository.save(user);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کنترل کننده

API ها را برای تعامل با پایگاه داده قرار دهید:

@RestController
@RequestMapping(“/api/users”)
public class UserController {
@Autowired
private UserService userService;

@GetMapping
public List<User> getUsers() {
return userService.getAllUsers();
}

@PostMapping
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. طراحی پایگاه داده

ویژگی های Cosmos DB

پارتیشن بندی: از یک فیلد منحصر به فرد مانند استفاده کنید userId برای بهینه سازی مقیاس پذیری

سطوح سازگاری:

استفاده کنید جلسه سازگاری برای اکثر سناریوها
تغییر به قوی سازگاری برای عملیات حیاتی

نمایه سازی: از نمایه سازی خودکار Cosmos DB برای بهینه سازی پرس و جو استفاده کنید.

6. یکپارچه سازی

اتصال Frontend با Backend

از Axios یا Fetch در برنامه React استفاده کنید:

import axios from “axios”;

const API_URL = “http://localhost:8080/api/users”;

export const fetchUsers = async () => {
const response = await axios.get(API_URL);
return response.data;
};

export const createUser = async (user) => {
const response = await axios.post(API_URL, user);
return response.data;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمایش داده ها در React

import React, { useState, useEffect } from “react”;
import { fetchUsers, createUser } from “./services/userService”;

function UserList() {
const [users, setUsers] = useState([]);

useEffect(() => {
fetchUsers().then(setUsers);
}, []);

return (
<div>
<h1>User List</h1>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}

export default UserList;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. آزمایش

تست Frontend

استفاده کنید است و کتابخانه تست واکنش برای تست های واحد
تست های ادغام را برای تماس های API بنویسید.

تست Backend

استفاده کنید JUnit و موکیتو برای تست های واحد
آزمایش عملیات پایگاه داده با Cosmos DB تعبیه شده:

com.azure
cosmosdb-emulator

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

8. استقرار

Containerization با Docker

Dockerfiles را هم برای frontend و هم برای backend ایجاد کنید:

FROM node:16
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [“npm”, “start”]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

FROM openjdk:17
WORKDIR /app
COPY target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT [“java”, “-jar”, “app.jar”]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ارکستراسیون با Kubernetes

استقرار خدمات با استفاده از نمایشگرهای Kubernetes:

تعریف کنید استقرار و خدمات برای فرانت اند و بک اند
از ConfigMaps و Secrets برای ذخیره اعتبار Cosmos DB استفاده کنید.

9. قابلیت مشاهده

ورود به سیستم

استفاده کنید ورود به سیستم برای ثبت باطن
از ابزارهای توسعه دهنده مرورگر برای اشکال زدایی ظاهری استفاده کنید.

نظارت

راه اندازی کنید پرومتئوس و گرافانا برای مانیتورینگ باطن
استفاده کنید مانیتور لاجوردی برای بینش Cosmos DB.

10. بهترین شیوه ها

از متغیرهای محیطی برای ذخیره اطلاعات حساس استفاده کنید.
بهینه سازی تماس های API با صفحه بندی و فیلتر کردن.
شیوه های صحیح رسیدگی به خطا را دنبال کنید.

این راهنما طراحی قوی و مقیاس پذیر را برای برنامه React + Java + Cosmos DB تضمین می کند. شما می توانید این معماری را با موارد استفاده خاص تطبیق دهید و از قابلیت نگهداری و عملکرد پروژه خود اطمینان حاصل کنید.

src/
├── components/   # Reusable UI components
├── pages/        # Page-level components
├── hooks/        # Custom React hooks
├── context/      # Global state management using Context API
├── services/     # API calls
├── styles/       # CSS/SCSS files
├── App.js        # Root component
└── index.js      # Entry point

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<UserList />} />
      </Routes>
    </Router>
  );
}

export default App;

    com.azure.spring
    spring-cloud-azure-starter-data-cosmos

src/main/java/com/example/
├── controller/    # REST Controllers
├── service/       # Business logic
├── repository/    # Cosmos DB integration
├── model/         # Data models
└── application/   # Main application class

spring.cloud.azure.cosmos.endpoint=
spring.cloud.azure.cosmos.key=
spring.cloud.azure.cosmos.database=
spring.cloud.azure.cosmos.consistency-level=Session

@Container(containerName = "users")
public class User {
    @Id
    private String id;
    private String name;
    private String email;

    // Getters and setters
}

@Repository
public interface UserRepository extends CosmosRepository<User, String> {}

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    public User createUser(User user) {
        return userRepository.save(user);
    }
}

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> getUsers() {
        return userService.getAllUsers();
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userService.createUser(user);
    }
}

import axios from "axios";

const API_URL = "http://localhost:8080/api/users";

export const fetchUsers = async () => {
  const response = await axios.get(API_URL);
  return response.data;
};

export const createUser = async (user) => {
  const response = await axios.post(API_URL, user);
  return response.data;
};

import React, { useState, useEffect } from "react";
import { fetchUsers, createUser } from "./services/userService";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

  
      com.azure
      cosmosdb-emulator
  

  FROM node:16
  WORKDIR /app
  COPY . .
  RUN npm install
  RUN npm run build
  EXPOSE 3000
  CMD ["npm", "start"]

  FROM openjdk:17
  WORKDIR /app
  COPY target/*.jar app.jar
  EXPOSE 8080
  ENTRYPOINT ["java", "-jar", "app.jar"]