Nhóm em s dử ụng Visual Studio Code để hoàn thiện dự án này.
Hình 3.1 Hình nh visual Studio Code ả
Visual Studio Code chính là ng d ng cho phép biên t p, so n thứ ụ ậ ạ ảo các đoạn code để hỗ trợ trong quá trình th c hi n xây d ng, thi t k website m t cách ự ệ ự ế ế ộ nhanh chóng. Visual Studio Code hay còn được viết tắt là VS Code. Trình soạn thảo này vận hành mượt mà trên các n n tề ảng như Windows, macOS, Linux.
Hơn thế nữa, VS Code còn cho kh ả năng tương thích với những thiết bị máy tính có c u hình t m trung v n có th s d ng d dàng. ấ ầ ẫ ể ử ụ ễ
Visual Studio Code h ỗtrợ đa dạng các chức năng Debug, đi kèm với Git, có Syntax Highlighting. Đặc biệt là tự hoàn thành mã thông minh, Snippets, và kh ả năng cải tiến mã ngu n. Nh ồ ờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọn khác.
M c dù trình so n thặ ạ ảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ.
Dù mới được phát hành nhưng VSCode là một trong nh ng Code Editor m nh ữ ạ m và ph ẽ ổbiến nh t dành cho l p trình viên. Nh h ấ ậ ờ ỗtrợ nhi u ngôn ng lề ữ ập trình ph ổbiến, tích hợp đầy đủ các tính năng và khả năng mở rộng, nên VSCode trở nên c c kì thân thu c v i b t kì l p trình viên nà ự ộ ớ ấ ậ
39 Môi Trường Thực Thi Code:
Hình 3.2 Hình nh node JS ả
• Node.js là m t platform (n n tộ ề ảng) độ ập được l c xây dựng trên môi trường Javascript Runtime - trình thông d ch ngôn ng Javascript c c nhanh trên ị ữ ự trình duy t Chrome. D a trên Node.js, chúng ta có th xây d ng các ệ ự ể ự ứng dụng m ng mạ ột cách nhanh chóng và d dàng mễ ở r ng. ộ
• Node.js được thi t k b i Ryan Lienhart Dahl - m t k ế ế ở ộ ỹ sư phần mềm người M ỹ vào năm 2009 và phát triển dưới sự bảo trợ của Joyent.
• Phần Core bên dướ ủa Nodejs đượi c c viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.
• Các ng dứ ụng được t o ra b i Node.js có tạ ở ốc độ ử x lý nhanh, realtime thời gian thực.
• Node.js s thích h p cho các s n phẽ ợ ả ẩm có lưu lượng truy c p l n, c n s ậ ớ ầ ự thay đổi về công nghệ và cần được mở rộng hoặc tạo ra các dự án Startup m t cách nhanh nh t có th . ộ ấ ể
40 Ngôn ng l p trình Javascript. ữ ậ
Hình 3.3 Hình nh Javascript ả
JavaScript: là ngôn ng lữ ập trình được nhà phát tri n s dể ử ụng để ạ t o trang web tương tác. Từ làm m i b ng tin trên trang m ng xã hớ ả ạ ội đến hi n th hình ể ị ảnh động và bản đồ tương tác, các chức năng của JavaScript có th c i thi n tr i nghiể ả ệ ả ệm người dùng c a trang web. Là ngôn ng k ch b n phía máy khách, JavaScript là ủ ữ ị ả m t trong nh ng công ngh c t lõi c a World Wide Web. Ví d : khi duyộ ữ ệ ố ủ ụ ệt internet, b t c khi nào b n th y qu ng cáo quay vòng d ng hình nh, menu th ấ ứ ạ ấ ả ạ ả ả xuống nhấp để hi n thị ể hoặc màu s c ph n tắ ầ ử thay đổi động trên trang web cũng chính là lúc b n th y các hiạ ấ ệu ứng của JavaScript.
41 H ệQuản Tr ị Cơ Sở Dữ Liệu MongoDB.
Hình 3.2 Hình nh MongoDB ả
• MongoDB lần đầu ra đời bởi MongoDB Inc., t i thạ ời điểm đó là thế hệ 10, vào tháng Mười năm 2007, nó là một ph n c a s n ph m PaaS ầ ủ ả ẩ (Platform as a Service) tương tự như Windows Azure và Google App Engine. Sau đó nó đã được chuyển thành ngu n m t ồ ở ừ năm 2009.
• MongoDB đã trở thành m t trong nh ng NoSQL database n i tr i nhộ ữ ổ ộ ất bấy giờ, được dùng làm backend cho r t nhiấ ều website như eBay, SourceForge và The New York Times.
• Các feature c a MongoDB g m có: ủ ồ
• Các ad hoc query: h ỗtrợ search bằng field, các phép search thông thường, regular expression searches, và range queries.
• Indexing: bất kì field nào trong BSON document cũng có thể được index.
• Replication: có ý nghĩa là “nhân bản”, là có một phiên b n gi ng hả ố ệt phiên bản đang tồ ại, đang sửn t dụng. Với cơ sở ữ d liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn v n, không b mẹ ị ất mát trước nh ng s c ữ ự ố ngoài d ự đoán là rất cao. Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo m t phiên bộ ản cơ sở ữ d liệu gi ng hố ệt cơ sở ữ d liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có s c . ự ố
• Aggregation: Các Aggregation operation x lý các b n ghi d u và tr ử ả ữliệ ả về k t qu ế ả đã được tính toán. Các phép toán t p h p nhóm các giá tr t ậ ợ ị ừ nhi u Document l i v i nhau, và có th ề ạ ớ ểthực hi n nhiệ ều phép toán đa dạng trên d ữliệu đã được nhóm đó đểtrả ề v m t k t qu duy nh t. Trong ộ ế ả ấ SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB.
42
• Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân ph i qua sharding.ố Ưu điểm của MongoDB là gì?
• Dữliệu lưu trữ phi cấu trúc, không có tính ràng bu c, toàn v n nên tính ộ ẹ sẵn sàng cao, hi u su t l n và d dàng m rệ ấ ớ ễ ở ộng lưu trữ.
• Dữ liệu được caching (ghi đệm) lên RAM, h n ch truy c p vào c ng ạ ế ậ ổ ứ nên tốc độ đọc và ghi cao.
Nhược điểm của MongoDB.
• Không ng dứ ụng được cho các mô hình giao d ch nào có yêu cị ầu độ chính xác cao do không có ràng buộc.
• Không có cơ chế transaction (giao dịch) đểphục v các ng d ng ngân ụ ứ ụ hàng.
• Dữ liệu l y RAM làm tr ng tâm hoấ ọ ạt động vì v y khi hoậ ạt động yêu cầu m t b ộ ộnhớ RAM lớn.
• Mọi thay đổ ề ữi v d liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập t c vì v y kh ứ ậ ả năng bị ấ m t d u t nguyên nhân mữliệ ừ ất điện đột xuất là r t cao. ấ
43 Công c h ụ ộtrợ “ ViteJS”
Để hộ trợ xây dựng build Fontend nhóm em sử dụng Vitejs version 4 để tối ưu nhất.
Bản thân từ "vite" có nghĩa là "nhanh". Nó là một công cụ xây dựng và máy chủ phát triển front end được thiết kế để cung cấp trải nghiệm phát triển nhanh hơn, - nhẹ hơn và đơn giản hơn. Nó phục vụ mã của bạn trong quá trình phát triển, đóng gói các tệp của bạn để sản xuất và cho phép tích hợp dễ dàng với các khung và thư viện JavaScript khác nhau, chẳng hạn như Vue, React, Preact và Svelte.
Vite đã trải qua nhiều cải tiến trong hai năm qua và Vite 4 mang đến một số tính năng mới và cải tiến. Chúng bao gồm nhiều phím tắt giao diện dòng lệnh hơn (nhấn h trong Vite 4 để xem danh sách tất cả các phím tắt). Phần mềm hỗ trợ Safari 14 để có khả năng tương thích ES2020 rộng hơn và có hỗ trợ gói vá khi đóng gói trước các phần phụ thuộc, cùng với các thông báo lỗi được cải thiện trong SSR.
Cách cài dặt Vitejs:
- Để cài đặt được Vitejs chúng ta c n b t bu c ph i cài dầ ắ ộ ả ặt Node.js (16+) và NPM
- Khi đã cài đặt xong Node.js (16+) và NPM ta m windowpowershell ở trong thư mục lavarel nhập
- “Npm install” để cài đặt Vitejs
44 Công c h ụ ộtrợ React Developer Tool “ ”
Vậy React Developer Tool là gì
React Developer Tools là m t công c m nh m giúp b n ki m tra, ch nh s a các ộ ụ ạ ẽ ạ ể ỉ ử thành phần React, quản lý props và state, cũng như xác định vấn đề ề hiệ v u suất của ứng dụng React c a b n. Trong bài vi t này, chúng ta s ủ ạ ế ẽ hướng d n b n cách ẫ ạ cài đặt React Developer Tools để sử dụng dễ dàng trong quá trình phát triển ứng dụng React của bạn.
Cách cài dặt React Developer Tool:
- Để cài đặt React Developer Tool ta vào cửa hàng extension Chrome và tìm extension React Developer Tool “ ”
- Sau khi tìm được ta ấn “thêm vào Chrome” để add được extension vào google
- Khi đó React Developer Tool đã được cài đặt thành công
45 Công c h ụ ộtrợ Redux DevTool “ ”
- Đây là một extension để phục vụ việc develope react. Nó cho phép b n có ạ thể xem được các c u trúc cấ ủa các component.
- Sau khi cài đặt extension này, b n s ạ ẽthấy m t tab m i có tên là React ộ ớ trên Chrome DevTools, nó s show ra Root Component cẽ ủa React đã được render trên trang, cũng như những component con đã được render xong.
- Khi select m t trong các component trên tree, b n có th xem và s a các ộ ạ ể ử props cũng như state hiện tại của nó trên thanh điều khiển bên ph i. ả
Ngoài ra, bạn cũng có thể inspect các components y như các bạn inspect để xem CSS của các th HTML vẻ ậy.
Cách cài dặt “ Redux DevTool : ”
- Để cài đặt Redux DevTool ta vào c a hàng extension Chrome và tìm ử extension “Redux DevTool Tool ”
- Sau khi tìm được ta ấn “thêm vào Chrome” để add được extension vào google
- Khi đó Redux DevTool đã được cài đặt thành công
46 Công c h ụ ộtrợ React Router “
React Router là m t API cho các ộ ứng d ng React. React router s dụ ử ụng định tuyến động phía máy khách cho phép xây d ng SPA (Single Page Application) vự ới điều hướng mà không c n làm mầ ới trang. Đây là một cách ngày càng ph ổbiến để mang lại tr i nghi m tả ệ ốt hơn cho người dùng.
Cách cài dặt “ React Router”:
- Tạo 1 Project m i b t kì ớ ấ
- M terminal trong visual studio code ở
- Ta thêm dòng lệnh “npm install react-router-dom”để cài đặt