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à
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) độc lập đượ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ưới của Nodejs đượ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ể.
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.
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ồn tại, đang sử 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ữ liệu và trả 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
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ữ liệu từ nguyên nhân mất điện đột xuất là rất cao.
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
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 đề về hiệ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
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
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