dwngh / saphira Goto Github PK

Hình dung theo tính năng để thiết kế.
Sử dụng figma!

Background

• Dự án cần một khung frontend trước để có thể thêm dần các tính năng sau này cũng như kiểm tra tương thích với backend.
• Các công nghệ đã Frontend đã thống nhất.

Mô tả

• Khởi tạo một dự án react cơ bản có tích hợp Typescript, Nextjs và có thể sử dụng Scss.
• Ban đầu gồm có 2 trang: Home và Items.
  • Ở trang Home thì có text giới thiệu (viết gì cũng được).
  • Trang Items thì cố gắng show lên thông tin item (chỉ cần ở dạng raw cũng được, mục đích để thể hiện frontend đã có thể fetch được data từ backend).

Item {
   id: int, 
   name: string, 
   status: int,
   created_at: datetime,
}

Sắp tới cần một số hàm sau đây, nên cho vào /common/time.tsx cho dễ quản lý, xong function nào thì export function đấy ra.

function getAvailableDay(avail)

• Mục đích của hàm này là trả về các thứ mà bác sĩ có thể khám ( VD như "Thứ hai, thứ ba, chủ nhật")
• avail: xâu cộng dồn 7 ngày trong tuần, mỗi ngày 8 ca tương ứng 8 số 0 hoặc 1 (VD: "00000000000000001000100011000000110000000000000000000000")

function getShiftAvailable(avail, day)

• Tách ra 8 bit tương ứng 8 ca của ngày day (VD: 00101000)
• day: Từ thứ hai tới chủ nhật tương ứng 0 -> 6)
• avail: Như trên

function getCurrentShift(order_arr)

• Để lấy số order đã đặt trong từng ca (VD [0, 3, 4, 5, 1, 0, 4, 5])
• order_arr: Mảng gồm các order trong một hôm duy nhất. Mỗi phần tử là một object có trường shift là giá trị tương ứng với ca (8 ca trong ngày 0...7. VD 3)

Background

• Dự án cần một API backend tích hợp được với MySQL để truy xuất dữ liệu cơ bản.
• Một số công nghệ về Backend đã được thống nhất hôm nọ

Mô tả

• Cần thiết kế và khởi tạo một API cơ bản với truy xuất được những đối tượng "Item" đơn giản từ Database.

Item {
   id: int, 
   name: string, 
   status: int,
   created_at: datetime,
}

• Sử dụng Typescript thay vì JS truyền thống.
• Tích hợp các thư viện, công nghệ: "ExpressJS, cors, helmet, Sequelize".
• Cần đảm bảo những thao tác CRUD (Create, Read, Update, Delete) đối với Item có thể gọi được bằng http request từ ngoài.
• Có cấu trúc rõ ràng để dễ dàng scale.

Note

• Chính vì backend phải "scalable" nên mọi người nên tham khảo cấu trúc của các API viết bằng Typescript của các "tiền bối". Tránh đi tới "giữa đường" lại phải "đập đi xây lại"!
• Trong quá trình làm nếu thấy có công nghệ mới hay hoàn toàn có thể đề xuất.
• Thử nghiên cứu vấn đề sau: Do việc thiết kế Database chưa được thống nhất và có thể có những thay đổi lớn nhỏ trong quá trình phát triển ứng dụng. Vì thế rất có thể sau khi hoàn thành task này thì người khác sẽ không thể chạy được code vì lí do là Database vừa thay đổi cấu trúc. Hãy nghiên cứu cách để xử lý vấn đề này và nói qua vào buổi báo cáo kế tiếp.

Good luck!

Dựa vào một số nguồn sau:

• Doc của MUI (Cần gì thì kéo xuống phần Component xem cách dùng Component đó): https://mui.com/material-ui/getting-started/overview/
• Template có sẵn: https://mui.com/material-ui/getting-started/templates/
• Paperbase project:
  • Live preview: https://mui.com/store/previews/paperbase/?fbclid=IwAR27G8GQyyyFtTxEcEcsVgPSzad6xx-cCs1dEyDTSjU0K-HoehFYU5dQ6kA
  • Source: https://github.com/mui/material-ui/tree/master/docs/src/pages/premium-themes/paperbase

Triển khai trước mắt những màn hình đã có trong đây: Link Whiteboard
Lưu ý:

• Màn hình vẽ trong whiteboard chỉ là minh họa vị trí các Component tương đối, để triển khai thì phải dựa vào giao diện thực (Ở đây là tham khảo project Paperbase) và mục đích chức năng mình làm để triển khai màn hình sao cho hợp lý.
• Chú ý tên cụ thể các Component được note (nếu có) để chọn cho đúng, không biết thì tra doc. VD như Lanscape Oriented Calendar, Context Menu, ...

Task này có yêu cầu như sau:

• Dựa vào 2 page đăng ký và đăng nhập đã tạo, hoàn thiện chức năng đăng ký đăng nhập.
• Đăng ký xong thì yêu cầu đăng nhập.
• Đăng nhập xong sẽ chuyển tới page hôm nọ mới tạo. Tại page đó thêm một nút Log out để thử chức năng log out.
• Bấm logout xong sẽ chuyển ra bên ngoài trang đăng nhập.

Thông tin vê Backend hiện tại: Địa chỉ localhost:3333
Thông tin về request bên Backend:

• Đăng ký:
  • URL: BACKEND_SERVER/users/
  • POST request
  • Header không yêu cầu gì
  • Body chứa Object thông tin người dùng mới
• Đăng nhập:
  • URL: BACKEND_SERVER/auth/login/
  • POST request
  • Header không yêu cầu gì
  • Body chứa Object chứa username và password

{
  "username": "dat",
  "password":"1234"
}

Để ăn khớp được với Backend cũng như phân chia được hợp lý code thì tạm đề xuất những yêu cầu sau đây, có gì không hợp lý hãy trực tiếp liên hệ để bàn bạc thêm:

• Tạo ra một AuthService.ts trong thư mục service. Đây sẽ là code xử lý phần Authentication để các truy cập khác có thể dùng lại được. Hãy tự suy nghĩ để thiết kế nhưng cái tối thiểu cần export được để các chức năng khác có thể dựa vào là access token.
• Cài thêm dotenv để có thể sử dụng biến môi trường. (VD sau này sau khi deploy, backend có thể không phải ở localhost mà là một domain khác chẳng hạn. Vì vậy thay vì sửa từng đoạn code có localhost thì sẽ sử dụng địa chỉ backend như một biến môi trường)
• Quy trình Authentication sẽ là như sau:
  • Đăng nhập, gửi request POST tới BACKEND_SERVER/auth/login. Nếu match một user nào đó thì sẽ trả về một access token, nếu không thì sẽ trả về lỗi 401 access unauthorized.
  • Tất cả các chức năng cần đăng nhập sẽ đều phải đính kèm token trên để có kết quả. Cụ thể token sẽ chứa ở Header của Request dưới dạng Authorization: Bearer [access_token]. Nếu không có token hoặc token không hợp lệ hay đã hết hạn sẽ trả về lỗi 401.
• Đối với Log out, chỉ cần đơn giản xóa token trên đi ở frontend.

Background

• Dự án cần một khung frontend trước để có thể thêm dần các tính năng sau này cũng như kiểm tra tương thích với backend.
• Các công nghệ đã Frontend đã thống nhất.

Mô tả

• Khởi tạo một dự án react cơ bản có tích hợp Typescript, Nextjs và có thể sử dụng Scss.
• Ban đầu gồm có 2 trang: Home và Items.
  • Ở trang Home thì có text giới thiệu (viết gì cũng được).
  • Trang Items thì cố gắng show lên thông tin item (chỉ cần ở dạng raw cũng được, mục đích để thể hiện frontend đã có thể fetch được data từ backend).

Item {
   id: int, 
   name: string, 
   status: int,
   created_at: datetime,
}

• Hiện do backend cũng mới chỉ đang khởi tạo nên nếu cần backend để test tạm chạy api bên trong thư mục api của silver-doll.

Note

• Mục đích chủ yếu chỉ là để tạo cái khung cho code của frontend sau này và check sự tương thích với backend nên không cần quá cầu kỳ giao diện vội (nhưng phải dùng được với scss).
• Người có trách nhiệm design tuy không cần phải đi quá sâu vào việc khởi tạo nhưng nên nắm qua công việc của front để sau có thể rõ ràng hơn về việc thiết kế của mình sẽ giúp bên frontend như nào.

Good luck!

Hiện tại, API xử lý phần đăng ký cần hoàn thiện thêm để có thể thuận tiện cho phía Frontend. Cụ thể, nếu đăng ký thành công thì không trả về full user info nữa và cần validate lại user ở phía back trước khi thêm vào Database (VD như username bị trùng) tránh việc thêm bị lỗi gây ảnh hưởng tới DB và phía Frontend không biết báo lỗi ra ngoài ra sao.

Như vậy cần làm những việc như sau:

• Không trả về toàn bộ user khi đăng ký thành công
• Thêm validating user (trong user.serivce đã có hàm để làm việc đó rồi, chỉ cần viết logic cho hàm đó)

  async validateUser(user: User) {
    //validate user here
    return true;
  }

• Nếu có lỗi khi validate phải ném BadRequestException kèm theo mô tả lỗi như thế nào

Thống nhất

Ý tưởng

• Web đặt lịch khám bệnh
• Người dùng: Bệnh nhân, bác sĩ, người quản lý

Chức năng

• Bệnh nhân đặt lịch khám. Trong yêu cầu khám bao gồm
  • Tiêu đề
  • Mô tả bệnh
  • Ngày dự kiến muốn đến bệnh viện
  • (Yêu cầu bác sĩ)
• Bệnh nhân sau khi được chữa bệnh thì sẽ có thể để lại feedback (Chỉ quản lý được xem).
• Bác sĩ:
  • Xem được yêu cầu của bệnh nhân
  • (Bình luận trò chuyện)
  • Yêu cầu quản lý thay đổi bác sĩ, ngày giờ
  • Đặt tình trạng của yêu cầu sang hoàn tất
• Quản lý:
  • Cấp quyền bác sĩ cho tài khoản
  • Chấp nhận yêu cầu của bệnh nhân
  • Thay đổi ngày giờ, bác sĩ chữa bệnh tương ứng

Thiết kế

• Lên figma.com

Công nghệ

• Frontend: ReactJs
• Backend: Nodejs
• Database: MySQL
• THỐNG NHẤT MỌI NGƯỜI LÀM QUEN VỚI TYPESCRIPT VÀ HỌC NHỮNG CÔNG NGHỆ TRÊN

thêm thông tin cho readme