Dự án Social Network với mô hình client - server: - Frontend: Reactjs - Backend: RESTful API Spring Boot - Database: MySql

<div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> 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</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp;</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> Dự án Social Network với mô hình Client - Server:</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Frontend: Reactjs</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Backend: RESTful API Spring Boot</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Database: MySql</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Sử dụng Spring Verison mới nhất với Maven</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Xác thực và phân quyền bằng Spring Security, JWT (Json Web Token)</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Sử dụng Websocket cho các chức năng tương tác giữa các người dùng</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Tích hợp đăng ký/đăng nhập bằng Google</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - Các chức năng chính:</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Đăng nhập/đăng ký (google hoặc thủ công bằng gmail) dùng jwt để xác thực</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Đăng bài viết (realtime) kèm ảnh hoặc video</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Tương tác bài viết(realtime): like/unlike, đăng lại, comments</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ 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</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Kết bạn, nhắn tin với bạn bè</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Thay đổi thông tin cá nhân</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> 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 👌💋</div>

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

<div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> Khi các bạn tải source trong source sẽ có 2 thư mục</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - fe (frontend):&nbsp;</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 1: Mở bằng vscode</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ 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"</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 3: Gõ lệnh "npm install"</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp; 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
&nbsp; &nbsp; 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)</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ 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</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> - social (backend):&nbsp;</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 1: Bật Xampp lên start: apache, mysql lên</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp; Vào localhost/phpmyadmin tạo database mới</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 2: Mở dự án bằng Intelij hoặc vscode cũng được</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 3: Vào file pom.xml chuột phải chọn reload Maven</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp;+ Bước 4: Vào "src/main/resources/appication.properies" thay đổi các dòng sau:</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp; &nbsp; spring.datasource.url Chổ cuối là tên database mà các bạn tạo lúc nãy</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> + 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&nbsp;</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> ** Lưu ý: phải chạy server trước nha mấy ní</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> &nbsp;</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> ** Link bài hướng dẫn lấy google ClientId:</div> <div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; background: transparent; outline: 0px; vertical-align: top; color: rgb(126, 89, 42); font-family: Tahoma, Arial, sans-serif;"> https://docs.cohota.com/dang-nhap/huong-dan-cau-hinh-dang-nhap-bang-google</div>

Nguồn: Topcode.vn