Dự án Social Network với mô hình client - server: - Frontend: Reactjs - Backend: RESTful API Spring Boot - Database: MySql - Sử dụng Spring Verison mới nhất với Maven
Dự án Social Network với mô hình Client - Server:
- Frontend: Reactjs
- Backend: RESTful API Spring Boot
- Database: MySql
- Sử dụng Spring Verison mới nhất với Maven
- Xác thực và phân quyền bằng Spring Security, JWT (Json Web Token)
- Sử dụng Websocket cho các chức năng tương tác giữa các người dùng
- Tích hợp đăng ký/đăng nhập bằng Google
- Các chức năng chính:
+ Đăng nhập/đăng ký (google hoặc thủ công bằng gmail) dùng jwt để xác thực
+ Đăng bài viết (realtime) kèm ảnh hoặc video
+ Tương tác bài viết(realtime): like/unlike, đăng lại, comments
+ Chỉnh sửa hoặc xoá bài viết (realtime) ở user khác sẽ tự động cập nhật không cần load trang
+ Kết bạn, nhắn tin với bạn bè
+ Thay đổi thông tin cá nhân
Ngoài ra các bạn muốn cấu hình để chạy public mình sẽ hướng dẫn tận tình luôn nha 👌💋
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Khi các bạn tải source trong source sẽ có 2 thư mục
- fe (frontend):
+ Bước 1: Mở bằng vscode
+ Bước 2: Mở mới 1 terminal kiểm tra đường dẫn xem có đang nằm trong thư mục fe không. Nếu không gõ cd "path dẫn đến thư mục fe"
+ Bước 3: Gõ lệnh "npm install"
Trong khi chờ đợi download các node modun các bạn vào thư mục "src/config/ipconfig" đổi ip thành localhost, cũng trong thư mục config vào file api.js và websocketService.js đổi port lại theo đúng port mà backend chạy thông thường thì springboot chạy port 8080 tomcat hoặc port mà server bạn chạy
Sau đó vào "src/index.js" thay chổ google clientId của các bạn vào (cách lấy clientId mình hướng dẫn dưới cùng)
+ Bước 4: Sau khi các modun đã cài xong và thay đổi các chổ mình nói ở Bước 3, các bạn gõ lệnh "npm start" để chạy frontend lên
- social (backend):
+ Bước 1: Bật Xampp lên start: apache, mysql lên
Vào localhost/phpmyadmin tạo database mới
+ Bước 2: Mở dự án bằng Intelij hoặc vscode cũng được
+ Bước 3: Vào file pom.xml chuột phải chọn reload Maven
+ Bước 4: Vào "src/main/resources/appication.properies" thay đổi các dòng sau:
spring.datasource.url Chổ cuối là tên database mà các bạn tạo lúc nãy
+ Bước 5: Chạy chương trình lên lombok sẽ tạo các bảng database cho các bạn
** Lưu ý: phải chạy server trước nha mấy ní
** Link bài hướng dẫn lấy google ClientId:
https://docs.cohota.com/dang-nhap/huong-dan-cau-hinh-dang-nhap-bang-google
Nguồn: Topcode.vn
