Chương 1: TỔNG QUAN 1. Lý do chọn đề tài Hiện nay với một cuộc sống hiện đại, tất cả các ngành đều phát triển nhanh chóng. Đặc biệt là ngành công nghệ thông tin, mỗi ngày, mỗi tuần có biết bao nhiêu công nghệ mới, ứng dụng mới được nghiên cứu và phát triển để phục vụ con người. Một trong những ứng dụng mà ai trong chúng ta cũng đã sử dụng qua đó là trang web.
Cụ thể, trong đề tài này là trang web bán hàng. Với nhu cầu cập nhật tin tức ngày càng cao, ngày nay các doanh nghiệp lớn và nhỏ luôn có kế hoạch phát triển ra những website hỗ trợ những công cụ đăng tin tức giúp người dùng người đọc hiểu hơn về thị trường trong và ngoài nước hiện nay. Để xây dựng một trang web thì có rất nhiều ngôn ngữ có thể làm được như: java, php, C#. Và trong thời gian học tập tại trường, nhóm chúng em đã được các thầy, cô giới thiệu về các ngôn ngữ khác nhau và được thực hành về chúng.
Ở đề tài này nhóm em sẽ sử dụng NestJs và NextJs, là những công nghệ đang được các công ty sử dụng nhiều và đang dần bùng nổ trong giới lập trình web. Ứng dụng NestJs và NextJS vào để tài wedsite xem tin tức trực tuyến sẽ giúp cho việc xem tin tức trực tuyến một cách tiện lợi và nhanh chóng, người dùng sẽ cập nhật tin tức trong và ngoài nước mọi lúc mọi nơi chỉ với vài thao tác đơn giản trên website. Mục đích, nhiệm vụ của đề tài 1. Mục đích Đề tài tập trung nghiên cứu ứng dụng NestJs, NextJs và sự ảnh hưởng đến sự phát triển của ngành lập trình web hiện nay.
Hơn nữa việc nghiên cứu về nó sẽ giúp nhóm em hiểu rõ hơn về ngôn ngữ lập trình mà nhóm đã chọn. Nhiệm vụ Tìm hiểu NestJs và NextJS. 3 Tuân thủ nghiệp vụ của một lập trình viên: Giải quyết vấn đề, tiếp nhận ý kiến khách hàng, làm việc nhóm, code có chú thích. Phát triển ứng dụng web với các chức năng: Show tin tức, xem tin tức chi tiết từng bài viết, đăng nhập, đăng xuất và cho phép người dùng tạo bài viết mới.
Phương pháp nghiên cứu Trong quá trình thực hiện, nhóm em đã nghiên cứu nhiều tài liệu tiếng anh cũng như tiếng việt ở trên mạng về công nghệ nhóm đã chọn, tìm hiểu về cách thức hoạt động. Sau khi tìm hiểu và nghiên cứu về công nghệ trên, nhóm em tiến hành viết mã cho đề tài theo các bước, vận dụng vào thực tế để làm ra một sản phẩm website xem tin tức trực tuyến hoàn thiện 1. Kết quả đạt được Một trang web xem tin tức trực tuyến sử dụng NestJs và NextJs.1 Trang web xem tin tức trực tuyến 4 Front end: Sử dụng Framwork của ReactJS là NextJS. Các giao diện tương tác với người dùng như trang chủ, trang chi tiết bài viết, trang danh sách bài viết theo danh mục, trang đăng nhập đăng ký, trang thêm bài viết mới.
Back end: Sử dụng Framwork của NodeJS là NestJs. 5 Chương 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu về ReactJS 2. ReactJS là gì? - Reactjs được tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook.
React lần đầu tiên được triển khai trên newsfeed Facebook vào năm 2011 và trên Instagram. - Là một library Javascript để xây dựng giao diện người dùng (UI) giành riêng cho các trang Single Page Application (SPA). - React cho phép các nhà phát triển tạo ra các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang. Mục đích chính của React là nhanh, có thể mở rộng và đơn giản.
Nó chỉ hoạt động trên giao diện người dùng trong ứng dụng. Điều này tương ứng để xem trong mẫu MVC. Nó có thể được sử dụng với sự kết hợp của các thư viện hoặc khung công tác JavaScript khác, chẳng hạn như Angular JS trong MVC. Các tính năng của ReactJS - JSX: Trong React, thay vì sử dụng JavaScript thông thường để tạo khuôn mẫu, nó sử dụng JSX.
JSX là JavaScript đơn giản cho phép trích dẫn HTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phần con. Cú pháp HTML được xử lý thành các lệnh gọi JavaScript của React Framework. Cũng có thể viết bằng JavaScript cũ thuần túy. - React Native: React có các thư viện riêng được Facebook công bố vào năm 2015, cung cấp kiến trúc phản ứng cho các ứng dụng gốc như IOS, Android và UPD.
- Virtual Document Object Model: React tạo bộ đệm cấu trúc dữ liệu trong bộ nhớ để tính toán các thay đổi được thực hiện và sau đó cập nhật trình duyệt. Điều này cho phép một tính năng đặc biệt cho phép lập trình viên mã hóa như thể toàn bộ trang 6 được hiển thị trên mỗi thay đổi trong đó thư viện phản ứng chỉ hiển thị các thành phần thực sự thay đổi.1 Mô tả Virtual DOM trong ReactJs 2. Tại sao nên sử dụng ReactJS? - Render phía Server giúp cải thiện việc tải trang và tối ưu trong SEO. - Tính đơn giản: ReactJS chỉ đơn giản là nắm bắt ngay lập tức.
Cách tiếp cận dựa trên thành phần, vòng đời được xác định rõ và sử dụng JavaScript đơn giản giúp React rất đơn giản để tìm hiểu, xây dựng một web chuyên nghiệp (và các ứng dụng di động) và hỗ trợ nó. React sử dụng một cú pháp đặc biệt gọi là JSX cho phép trộn HTML với JavaScript. Đây không phải là một yêu cầu; Nhà phát triển vẫn có thể viết bằng JavaScript đơn giản nhưng JSX dễ sử dụng hơn nhiều. 7 - Dễ học: Bất cứ ai có kiến thức cơ bản trước đây về lập trình đều có thể dễ dàng hiểu React trong khi Angular và Ember được gọi là ’Ngôn ngữ cụ thể của miền, ngụ ý rằng rất khó để học chúng.
Để học Reactjs chỉ cần kiến thức cơ bản về CSS và HTML. - Ràng buộc dữ liệu (Data Binding): React kết hợp với Redux để kiểm soát luồng dữ liệu đến các thành phần thông qua một điểm kiểm soát - bộ điều phối. Việc gỡ lỗi các thành phần độc lập của các ứng dụng ReactJS lớn dễ dàng hơn. - Khả năng kiểm tra (Test ability): Các ứng dụng ReactJS là siêu dễ dàng để kiểm tra.
Các khung nhìn React có thể được coi là các hàm của trạng thái, vì vậy có thể thao tác với trạng thái chúng ta chuyển sang dạng xem ReactJS và xem đầu ra (output) và các hành động ( triggered actions), sự kiện (events), functions. Giới thiệu về NextJS 2. NextJS là gì? - Là một framework nhỏ gọn giúp xây dựng ứng dụng Single Page App - Server Side Rendering với ReactJs một cách dễ dàng. Tại sao sử dụng NextJS? - Server Rendering: Với Next.js, việc hiển thị máy chủ các ứng dụng React chưa bao giờ dễ dàng hơn, bất kể dữ liệu đến từ đâu.
- Static Exporting: Không cần phải học một framework mới. Xuất một trang web tĩnh với Next.js dễ dàng như một lệnh đơn. - CSS in JS: Next.js đi kèm với style-jsx đi kèm, nhưng nó cũng hoạt động với mọi giải pháp CSS-in-JS. - Zero setup: Tự động tách mã, định tuyến dựa trên hệ thống tập tin, tải lại mã nóng và kết xuất phổ quát.
- Fully extensible: Hoàn toàn kiểm soát Babel và Webpack. Máy chủ có thể tùy chỉnh, định tuyến và các plugin tiếp theo. 8 - Ready for production: Tối ưu hóa cho kích thước xây dựng nhỏ hơn, biên dịch dev nhanh hơn và hàng tá cải tiến khác. - Hot code reloading: Sẽ tự động tải trang khi phát hiện bất cứ thay đổi nào.
- Automatic Routing: Các file, URL được đưa vào hệ thống trong thư mục pages sẽ được tự động map với project mà không cần thêm bất kỳ config nào. - Ecosystem Compatibility: Hoạt động tốt với hệ sinh thái của Javascript , Nodejs, Reactjs. - Dynamic Components: Có thể import các modules và React Component một cách linh hoạt. Giới thiệu về NodeJS 2.
NodeJS là gì? - Node.js là một JavaScript runtime được build dựa trên Chrome’s V8 JavaScript engine.js sử dụng mô hình event-driven, non-blocking I/O khiến nó trở nên nhẹ và hiệu quả. - V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi. - Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ. - 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.
- Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. - Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể. Những ứng dụng viết bằng NodeJS - Websocket server: Các máy chủ web socket như là Online Chat, Game Server… - Fast File Upload Client: là các chương trình upload file tốc độ cao. 9 - Ad Server: Các máy chủ quảng cáo.
- Cloud Services: Các dịch vụ đám mây. - RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API. - Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau.
Nodejs có thể làm tốt điều này. Lý do chọn NodeJS? - Các ứng dụng Nodejs được viết bằng javascript, ngôn ngữ này là một ngôn ngữ khá thông dụng. Theo tác giả của ngôn ngữ Javascript, Ryan Dahl: “Javascript có những đặc tính mà làm cho nó rất khác biệt so với các ngôn ngữ lập trình động còn lại, cụ thể là nó không có khái niệm về đa luồng, tất cả là đơn luồng và hướng sự kiện.” - Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả. - Có thể chạy ứng dụng Nodejs ở bất kỳ đâu trên máy Mac – Window – Linux, hơn nữa cộng đồng Nodejs rất lớn và hoàn toàn miễn phí.
Các bạn có thể thấy cộng đồng Nodejs lớn như thế nào tại đây, các package đều hoàn toàn free: https://www.com/ - Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị. Giới thiệu về Framework NestJs: 2. NestJS là gì? - NestJS là một framework Node.js mã nguồn mở, có thể mở rộng, linh hoạt, tiến bộ để xây dựng ứng dụng phía server. - Về performance: NestJS cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn.
Chứ không làm giảm tốc độ của NestJS.