Bước 1:
Tạo một Folder tên Demo ở ngoài Desktop. Tạo thêm 2 Folder con là FrontEnd và BackEnd.
Hình 4. 1: Tạo 2 folder con là BackEnd và FrontEnd Bước 2:
Khởi tạo project Backend (Server phía Nodejs) :
- Trong Folder BackEnd tạo Folder con có tên là “resale-api” đây chính là tên project ở phía backend mà chúng ta sẽ xây dựng api.
Hình 4. 2: Tạo mới một project backend
Mở Folder resale-api bằng visual studio code:
- Thực hiện câu lệnh “git init” để khởi tạo git .
53 Hình 4. 3: Khởi tạo git
Bước 3: Thực hiện câu lệnh “npm install express” nó là 1 framework giành cho nodejs:
Hình 4. 4: Thực hiện cài đặt express Bước 4:
Tạo File server.js trong Folder resale-api:
Hình 4. 5: Cài đặt express thành công
54 Bước 5:
Cài đặt “nodemon” (có tác dụng tự động lưu lại tiến trình code để mình không cần phải bấm Ctrl + S mỗi khi sửa code):
Hình 4. 6: Cài đặt nodemon
Ngắt toàn bộ server đang chạy và mở Visual Studio Code lên => trỏ vào thư mục
“Demo” => vào backend => vào package.json=> sửa “ "start": "node ./bin/www"
” thành “ "start": "nodemon ./bin/www" ”.
Bước 6:
Chạy câu lện “npm run debug” để kiểm tra backend đã khởi tạo thành công hay chưa nếu thành công hiện “server running on port: 5000”
Hình 4. 7: Cài đặt thành công Bước 7:
Trong Folder FrontEnd chạy câu lện “ng new resale-layout” khởi tạo project angular có tên là resale-layout:
55 Hình 4. 8: Khởi tạo FrontEnd
Khi quá trình cài đặt hoàn tất.
Hình 4. 9: Thực hiện lệnh để chạy project
Vào trình duyệt mở 2 tab gõ “http://localhost:4000/”
Hình 4. 10: Giao diện Frontend Bước 9:
Khởi động ứng dụng MongoDB ở Windows lên.
Mở Visual Studio Code, cài đặt module mongooes ở phía backend:
56 Hình 4. 11: Cài đặt mongoose
Cấu trúc thư mục backend:
Mô tả ngắn gọn cấu trúc:
Tạo file “config.js” và “.env”: env viết tắt của environment chứa tất cả các biết môi trường project của bạn. File “config.js” là sẽ xử lý việc bạn đang chạy trên môi trường nào :
Ví dụ: Khi bạn đang chạy dự án trên máy tính của bạn thì đó chính là “local”.Còn khi bạn đã deploy dự án bạn lên cloud thì đó chính là “staging”.
Hình 4. 12:File cấu hình môi trường
Tạo file “server.js” :Đây là file chính của project có nhiện vụ kết nối với database.Quyết định port của project sẽ chạy.
57 Hình 4. 13: Cấu hình file server.js
Tạo 1 folder uploads chứ 2 folder avatar và products chứa tệp hình ảnh:
+ Folder avatar : chứ hình ảnh đại diện của user.
+ Folder product : chứa tất cả hình ảnh của sản phẩm.
Hình 4. 14: Folder chứa hình ảnh
Tạo một folder có tên là service chứa file “register-user.js” và “register- user.hjs” :
+ File “register-user.js” chứa code xử lý gửi email.
+ File “register-user.hjs” chứa code html giao diện tin nhắn của email.
58 Hình 4. 15: Code xử lý gửi email
Tạo một folder có tên là models : chứa các mô hình ORM (object relational mapping” được gọi là schemas.Trong folder models tạo các file:
+ “User.js” model người dùng . +“Product.js” model sản phẩm.
+ “Comment.js” “CommentChildren.js” model bình luận.
+“CategoriesLevel.js”, “CategoriesLevel2.js” model danh mục sản phẩm.
59 Hình 4. 16: Tạo model
Tạo một folder có tên là middlewares chứa file “auth.js” và “aploadImage.js” : + File “auth.js” chứa code xác thực token của người dùng để cấp quyền cho người dùng thực hiện được một số chức năng.
+ File “aploadImage.js” chứa code xử lý tải ảnh lên.
60 Hình 4. 17: Xử lý tải hình ảnh và xác thực token
Bước 15: Sử dụng postman để kiểm tra api.
• Api trả kết quả truy vấn
200 OK: Request đã được tiếp nhận và xử lý thành công. Các Response thực tế trả về sẽ phụ thuộc vào phương thức HTTP của Request. Trong một GET Request, Response sẽ chứa một thực thể tương ứng với các tài nguyên yêu cầu, trong một POST Request, Response sẽ chứa.
404 Not Found: Các tài nguyên hiện tại không được tìm thấy nhưng có thể có trong tương lai. Các request tiếp theo của Client được chấp nhận.ột thực thể mô tả hoặc chứa các kết quả của các action.
500 Internal Server Error: Một thông báo chung chung, được đưa ra khi Server gặp phải một trường hợp bất ngờ, Message cụ thể là không phù hợp
• Api đăng nhập
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/users/login”
Chuyển tới tab Body
61 Hình 4. 18: Thiết lập request đăng nhập xuống server
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 19: Api đăng nhập thành công
• Api tạo mới người dùng.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link “http://localhost:6789/api/users”
Chuyển tới tab Body
62 Hình 4. 20: Thiết lập request đăng ký người dùng
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 21: Đăng ký người dùng thành công
• Api lấy danh sách người dùng.
Thiết lập request HTTP của bạn là GET
Trong trường hợp nhập url yêu cầu nhập link “http://localhost:6789/api/users”
Đăng nhập tài khoản api sẽ trả về một token dùng để gửi request xuống server.
Chuyển tới Headers key name là token và value chuỗi token.
63 Hình 4. 22: Thiết lập request lấy danh sách người dùng
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 23: Lấy danh sách người dùng thành công.
• Api lấy thông tin người dùng theo ID.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/users/getUserById/(id người dùng)”
Đăng nhập tài khoản api sẽ trả về một token dùng để gửi request xuống server.
Chuyển tới Headers key name là token và value chuỗi token.
64 Hình 4. 24: Gán token request lây thông tin người dùng.
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 25: Lấy thông tin người dùng theo ID thành công.
• Api upload hình đại diện.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/users/avatarNewUser/(id người dùng)”
Chuyển tới Tab Body.
65 Hình 4. 26: Thiết lập request upload hình ảnh
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 27: Api upload hình ảnh thành công.
• Api tìm kiếm người dùng theo email.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/users/search”
Chuyển tới Tab Body.
66 Hình 4. 28: Thiết lập request tìm người dùng theo email
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 29: Tìm kiếm người dùng theo email thành công. .
• Api thay đổi mật khẩu
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/users/changePassword”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 30: Gán token cho request đổi mật khẩu
Chuyển tới Tab Body cập nhật mật khẩu mới.
67 Hình 4. 31: Thiết lập request cập nhật mật khẩu mới
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 32: Thay đổi mật khẩu thành công.
• Api tạo mới một sản phẩm.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/products”
Chuyển tới Headers key name là token và value chuỗi token.
68 Hình 4. 33: Gián token cho request tạo sản phẩm mới
Chuyển tới Tab Body tạo thông tin sản phẩm.
Hình 4. 34: Thiết lập request tạo sản phẩm mới
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 35: Tạo mới một sản phẩm thành công.
• Api lấy danh sách sản phẩm.
Thiết lập request HTTP của bạn là GET
69
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/products/all”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 36: Gián token cho request lấy danh sách sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 37: Lấy tất cả danh sách sản phẩm thành công.
• Api lấy chi tiết một sản phẩm theo ID.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/products”
Chuyển tới Headers key name là token và value chuỗi token.
70 Hình 4. 38: Gián token cho request lấy chi tiết sản phẩm
Chuyển tới Tab Body truyền tham số “product_id”.
Hình 4. 39: Thiết lập request lấy chi tiết sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 40: Lấy chi tiết một sản phẩm theo ID
• Api xóa một sản phẩm.
Thiết lập request HTTP của bạn là POST
71
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/products/delete”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 41: Gián token cho request xóa một sản phẩm
Chuyển tới Tab Body truyền tham số “product_id”.
Hình 4. 42: Thiết lập request xóa một sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 43: Xóa một sản phẩm thành công.
• Api upload ảnh đại diện sản phẩm.
72
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/product/images/(id sản phẩm)”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 44: Gián token cho request upload ảnh đại diện sản phẩm
Chuyển tới Tab Body.
Hình 4. 45: Thiết lập request upload ảnh đại diện
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
73 Hình 4. 46: Api upload hình ảnh sản phẩm thành công
• Api upload danh sách hình ảnh.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/product/uploadImagesArr/(id sản phẩm)”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 47: Gián token cho request upload danh sách hình ảnh sản phẩm
Chuyển tới Tab Body.
Hình 4. 48: Thiết lập request upload danh sách hình ảnh sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
74 Hình 4. 49 : Api upload niều hình ảnh sản phẩm thành công
• Api tìm kiếm một sản phẩm.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/product/uploadImagesArr/(id sản phẩm)”
Chuyển tới Tab Body nhập keyword.
Hình 4. 50 : Thiết lập request tìm kiếm một sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
75 Hình 4. 51: Api tìm kiếm một sản phẩm thành công.
• Api tạo một bình luận mới.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/product/uploadImagesArr/(id sản phẩm)”
Chuyển tới Headers key name là token và value chuỗi token.
Hình 4. 52: Gián token cho request tạo một bình luận
Chuyển tới Tab Body nhập nội dung bình luận.
Hình 4. 53:Thiết lập request tạo một bình luận.
76
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 54: Tạo một bình luận mới thành công .
• Api lấy danh sách bình luận.
Thiết lập request HTTP của bạn là GET
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/comments
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
77 Hình 4. 55: Lấy danh sách tất cả bình luận thành công.
• Api lấy danh sách danh mục sản phẩm.
Thiết lập request HTTP của bạn là GET
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/categoryC1
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
78 Hình 4. 56: Lấy danh sách danh mục sản phẩm thành công.
• Api lấy chi tiết danh mục sản phẩm theo ID.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/categoryC1/getCategoryLevel1ById
Chuyển đến Tab Body truyền Id danh mục bạn cẩn .
79 Hình 4. 57:Thiết lập request lấy danh mục sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
Hình 4. 58: Lấy chi tiết danh mục sản phẩm thành công.
• Api lấy chi tiết danh mục sản phẩm theo ID.
Thiết lập request HTTP của bạn là POST
Trong trường hợp nhập url yêu cầu nhập link
“http://localhost:6789/api/categoryC1/getCategoryLevel2ByLevel1Id
Chuyển đến Tab Body truyền Id danh mục .
80 Hình 4. 59: Thiết lập request lấy chi tiết danh mục sản phẩm
Kích nút Send.
Nếu thành công status 200 được hiện thị thất bại 404 hoặc 500
81 Hình 4. 60: Lấy danh sách chi tiết danh mục con.
Bước 16:
Cấu trúc thư mục frontend:
Hình 4. 61: Cấu trúc thư muc frontend
+state: Folder chứa các file Action,Effect,Reducer đây gọi chung là ngrx là một framework được xây dựng để phát triển “Reactive Application” trong 1 ứng dụng angular.
82 Hình 4. 62: Diagram NgRx trong Angular
Module + authentication:. là một module quản lý các component tạo form login.
+ Trong module authentication tạo folder +state và component login + Folder +state chứa các file .ts dùng để xử lý ngrx
+ Component login chứa các file có đuôi là “.css” dùng để tạo kiểu cho form login.
File “.html” chứa code dùng để render giao diện login.
File “.ts” chứa code Typescript xử lý các logic trong form login.
83 Hình 4. 63: Cấu trúc thư mục tạo form login
+ Xử lý form login sử dụng FormGroup angular.
Hình 4. 64: Xử lý form login
Tạo module core chứa:
+ component dialog-message dùng lại nhiều lần ,đây là component hiện thì modal thông báo khi người dùng có một hành động nào đó ,ví dụ:đăng nhập ,đăng xuất.
84 Hình 4. 65: Tạo service
Folder guards chứa file “auth.guard.ts” : Trong một ứng dụng web, chúng ta đối mặt với một số trang cho phép tất cả người dùng truy cập, tuy nhiên một số khác chỉ cho phép khi người dùng đã đăng nhập vào hệ thống.Và guard sẽ giải quyết vấn đề này.
Hình 4. 66: Code file auth.guard.ts
Folder interceptors chứa file “token.interceptor.ts” dùng để gán token người dùng vào header sau khi đăng nhập.Và chỉ gán một lần duy nhất sau khi người dùng đã đăng nhập.
85 Hình 4. 67: Danh sách danh mục sản phẩm
Hình 4. 68: Gán token khi người dùng tạo một request xuống server
+ server : Giúp kết nối người dùng và database.
86 Hình 4. 69: Code server
Cấu trúc module Home: chứa file các component con.
Hình 4. 70: Cấu trúc Module home Bước 17: Chạy project FrontEnd:
87
• Danh mục sản phẩm.
Hiện thị tất cả danh mục sản phẩm. Đây là giao diện khi người dùng lần đầu tiên đăng nhập .
Người dùng không cần đăng nhập.
Hình 4. 71: Giao diện danh mục sản phẩm
Để xem chi tiết một sản phẩm bất kì hoặc xem danh sách sản phẩm người dùng phải click chọn vào một danh mục.
Từ danh mục sản phẩm người dùng chọn một danh mục bất kì và sẽ điều hướng đến danh sách sản phẩm.
• Danh sách sản phẩm.
88 Hình 4. 72: Giao diện danh sách sản phẩm
Danh sách sản phẩm sẽ chứa những thông tin cần thiết ( ngày đăng,địa chỉ,tên sản phẩm ,giá ,hình ảnh) để khi người dùng nhìn vào có thể hiểu và nắm bắt thông tin về sản phẩm.
Từ danh sách sản phẩm .Chọn một sản phẩm sẽ điều hướng đến xem chi tiết sản phẩm đó.Và xem bình luận của sản phẩm.
• Lọc sản phẩm theo giá bán.
Lọc sản phẩm có giá từ thấp đến cao.
Hình 4. 73: Lọc sản phẩm có giá từ thấp đến cao
89
Lọc sản phẩm có giá từ cao xuốngthấp.
Hình 4. 74: Lọc sản phẩm có giá từ cao xuống thấp
• Lấy thông tin chi tiết sản phẩm.
Chi tiết sản phẩm là chứa đầy đủ thông tin về sản phẩm địa chỉ ,ngày đăng,hình ảnh chi tiết giúp người dùng tiếp cận thực tế hơn với sản phẩm .Từ đây người dùng có thể tìm thống thông tin người đăng bài để liên hệ trực tiếp trao đổi về sản phẩm.
Người dùng cũng có thể xem bình luận sản phẩm để có thể đưa ra quyết định mua sản phẩm hay không.
90 Hình 4. 75: Giao chi tiết sản phẩm
• Xem bình luận về sản phẩm.
Hình 4. 76: Xem danh sách bình luận.
Sau khi bạn đăng nhập bạn có thể tham gia bình luận về sản phẩm.
91 Hình 4. 77: Đăng bình luận về sản phẩm.
• Xem hồ sơ người đăng.
Đăng nhập để xem thông tin người đăng.
Hình 4.78: Thông báo đăng nhập để có thể truy cập.
Thông tin người đăng gồm, thông tin liên hệ, danh sách sản phẩm đã đăng.
92 Hình 4. 79: Thông tin người đăng.
• Đăng nhập.
Bạn đã tạo tài khoản đăng nhập để thực hiện các thao tác như đăng bài bình luận.
93 Hình 4. 80: Form đăng nhập người dùng.
94 Hình 4. 81: Người dùng đăng nhập thành công.
• Tạo một tài khoản mới.
Điền đầy đủ thông tin của bạn vào form đăng ký.
95 Hình 4. 82: Nhập thông tin vào form đăng ký.
Tải lên ảnh đại diện của bạn.
96
Bạn nhận được một thông báo sau khi đăng ký thành công.
Hình 4. 83: Thông báo đăng ký thành công
• Thông báo về địa chỉ email.
Sau khi bạn đăng ký thành công địa chỉ email bạn dùng để đăng ký sẽ nhận được một email thông báo.
97 Hình 4. 84: Thông báo về email sau khi đăng ký thành công.
Sau khi người dùng xác nhận tài khoản bạn sẽ nhận được email thông báo.
Hình 4. 85: Thông báo về email sau khi tài khoản được xác nhận.
• Đăng mới một sản phẩm.
Bạn điều đầy đủ thông tin về sản phẩm bạn muốn đăng.
Người dùng có thể đăng nhập để tạo mới một sản phẩm.