CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Giới thiệu về MERN Stack 1. MERN Stack là gì? MERN stack là sự kết hợp của các công nghệ phổ biến nhất hiện nay và các công nghệ này đều liên quan đến JavaScript như MongoDB, ExpressJS, ReactJS, NodeJS. Lập trình viên thường dùng MERN stack để xây dựng ứng dụng React Universal.
Giới thiệu NodeJS NodeJS là một mã nguồn mở, một môi trường được thiết kế để viết các ứng dụng mạng có khả năng mở rộng, đặc biệt là máy chủ web. NodeJS được viết bằng ngôn ngữ JavaScript và có thể chạy trên các hệ điều hành như Mac OS X, Windows, Linux, FreeBSD và IBM i. Lịch sử ra đời Năm 2009, NodeJS được viết bởi lập trình viên Ryan Dahl. Ban đầu chỉ có hệ điều hành Linux và MacOS X mới được hỗ trợ.
Ngoài ra, Ryan Dahl cũng là người phát triển và bảo trì NodeJS (được tài trợ bởi Joyent). Tháng 1 năm 2010, trình quản lí gói npm cho NodeJS được ra mắt. Tháng 6 năm 2011, phiên bản Windows gốc của NodeJS được triển khai bởi Microsoft và Joyent. Tháng 12 năm 2014, do sung đột nội bộ nên NodeJS bị chia rẽ, IO.js được hình thành.
Tháng 6 năm 2015, cộng đồng IO.js và cộng đồng NodeJS đã thống nhất bỏ phiếu để hợp tác với nhau dưới dạng NodeJS Foundation. Ưu và nhược điểm Ưu điểm: Tất cả đều viết bằng JavaScript: với NodeJS thì JavaScript có thể viết trên server. Khả năng mở rộng: NodeJS có khả năng mở rộng cao và tốc độ xây dựng ứng dụng nhanh, đó là nhờ vào kiến trúc Event Loop. 7 Công nghệ Web thời gian thực: Các công nghệ thời gian hiện nay rất phổ biến.
Chẳng hạn như công nghệ WebSocket đã làm cho các ứng dụng web gần như không có độ trễ. Chính những công nghệ này đã giúp cho NodeJS có thể xử lý một lượng kết nối khổng lồ. Hiệu năng: NodeJS sử dụng engine V8 của Google cùng với non-blocking IO thì việc tạo một trang web với tốc độ xử lí nhanh là điều vô cùng dễ dàng. Nhược điểm: NodeJS gây tiêu tốn cả về thời gian lẫn tài nguyên CPU.
Nodejs được viết bằng JavaScript và C++ đo đó cần phải trải qua một quá trình biên dịch khi xử lí. Lập trình viên không nên sử dụng NodeJS cho những ứng dụng tiêu tốn tài nguyên CPU. NodeJS không khác nhiều so với các ngôn ngữ khác như Python, Ruby hay PHP. Lập trình viên có thể chọn NodeJS cho việc phát triển các ứng dụng mới.
Tuy nhiên, NodeJS không phải là một lựa chọn sáng suốt khi xây dựng, triển khai các dự án quan trọng. Ứng dụng trong đề tài Hệ thống Notification: thông báo cho người dùng tương tự các mạng xã hội hiện hành như Facebook hay Instagram. WebSocket server: cung cấp giao thức giao tiếp hai chiều mạnh mẽ do có độ trễ thấp và dễ dàng xử lý khi xảy ra lỗi. WebSocket được sử dụng cho những trường hợp yêu cầu thời gian như trong trò chuyện.
Ứng dụng truy vấn tới cơ sở dữ liệu NoSQL: với cơ sở dữ liệu MongoDB thì NodeJS là sự lựa chọn hoàn hảo vì nó có nhiều thư viện hỗ trợ mạnh. Fast File Upload Client: dùng để upload file tốc độ cao. Cài đặt NodeJS Download NodeJS: Vào trang chủ của NodeJS: https://nodejs.org/en/download/ 8 Hình 1. Tải về NodeJS Sau khi download thành công ta có 1 file như hình dưới: Hình 2.
Chạy file cài đặt NodeJS Cài đặt NodeJS: Chấp nhận các tùy chọn mặc định, nhấn tiếp theo cho tới bước cuối cùng và nhấn hoàn thành. Cấu hình NodeJS Hình 4. Chấp nhận điều khoản cài đặt NodeJS 10 Hình 5. Chọn thư mục cài đặt NodeJS Phần mềm quản lý các thư viện JavaScript cũng được cài đặt theo mặc định.
Cài đặt npm 11 Hình 7. Hoàn thành cài đặt NodeJS Kiểm tra và cấu hình: Nhập lần lượt các lệnh như bên dưới trong CMD để kiểm tra phiên bản của NodeJS và npm package: Hình 8. Kiểm tra việc cài đặt NodeJS Như vậy là đã cài đặt thành công NodeJS trên window. Giới thiệu ExpressJS ExpressJS là một framework mã nguồn mở miễn phí dành cho NodeJS.
ExpressJS được sử dụng trong thiết kế và xây dựng các ứng dụng web một cách đơn giản và nhanh chóng. 12 Do ExpressJS chỉ yêu cầu ngôn ngữ lập trình JavaScript nên góp phần giúp các lập trình viên và nhà phát triển xây dựng các ứng dụng web và API dễ dàng hơn. Lịch sử phát triển ExpressJS là một framework mã nguồn mở, miễn phí dành cho NodeJS vì vậy hầu hết các đoạn code đã được viết sẵn cho các lập trình viên có thể làm việc. ExpressJS giúp các nhà phát triển dễ dàng tạo các ứng dụng đơn web, đa web hoặc kết hợp.
ExpressJS tương đối nhẹ, giúp cho việc tổ chức các ứng dụng web theo kiến trúc MVC có tổ chức hơn. Lập trình viên cần phải biết về JavaScript và HTML để sử dụng được ExpressJS. ExpressJS cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách dễ dàng hơn hay còn được gọi là MEAN stack. Nhờ có ExpressJS, các nhà lập trình có thể xây dựng nên các ứng dụng web hiệu quả và nhanh chóng hơn.
Trên thực tế, lập trình viên sẽ phải thực hiện rất nhiều bước lập trình phức tạp để có thể tạo ra một API hiệu quả nếu như không có ExpressJS. ExpressJS đã đơn giản hóa việc lập trình trong NodeJS và bổ sung thêm nhiều tính năng mới. Ưu và nhược điểm Ưu điểm Mức độ phổ biến của JavaScript: ngày nay, JavaScript là một ngôn ngữ lập trình được sử dụng rộng rãi, dễ đọc và có một cộng đồng người dùng lớn. Việc sử dụng ExpressJS sẽ trở nên vô cùng đơn giản nếu đã biết JavaScript từ trước do ExpressJS hỗ trợ JavaScript.
Phát triển trang web nhanh hơn: Do Express có nhiều tính năng hỗ trợ khác nhau giúp giảm một nửa thời gian viết mã và giảm những áp lực cần thiết khi xây dựng mà vẫn giữ tính hiệu quả của ứng dụng web. Hỗ trợ định tuyến: ExpressJS giúp việc xây dựng các thành phần định tuyến ít tốn thời gian nhưng lại hiệu quả và đơn giản hơn. Nhược điểm: ExpressJS phù hợp với các dự án có quy mô nhỏ: với ExpressJS ta có thể xây đựng website một cách nhanh chóng nhưng để xây dựng những dự án lớn có độ phức tạp cao thì đây không là lựa chọn phù hợp. Ứng dụng trong đề tài 13 Các chức năng của ExpressJS được sử dụng trong đề tài: - Cấu hình các lớp trung gian để trả về các HTTP request.
- Cho phép sử dụng với các hành động khác nhau dựa trên các phương thức HTTP và URL bằng define router. - Trả về các trang HTML dựa vào các tham số. Cài đặt ExpressJS Lưu ý: cần phải có NodeJS trước để có thể cài đặt và sử dụng ExpressJS Mở CMD ở thư mục cần tạo ứng dụng ExpressJS: Hình 9. Tạo thư mục cần cài đặt ExpressJS Sử dụng lệnh như hình dưới để khởi tạo các tệp ban đầu cho ứng dụng: Hình 10.
Khởi tạo các tệp ban đầu cho ứng dụng ExpressJS Cuối cùng là cài đặt ExpressJS bằng câu lệnh như hình dưới.Cài đặt ExpressJS bằng lệnh 14 1. Giới thiệu ReactJS React là một trong những thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). React sử dụng phương pháp mới để render trang web nên cung cấp khả năng phản hồi tốt hơn khi có input từ người dùng. Components của react là một công cụ JavaScript mã nguồn mở được phát triển bởi Facebook và được ra mắt vào năm 2014.
React hiện tại thì vượt trội so với các đối thủ cạnh tranh lớn như Angular và Bootstrap (hai thư viện JavaScript bán chạy nhất vào thời điểm đó). Lịch sử phát triển ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở. Mục đích của việc tạo ReactJS là tạo ra các ứng dụng web nhanh, hiệu quả và viết ít code. Hiện tại, Facebook và toàn bộ nhóm phát triển ReactJS vẫn đang làm việc để cải thiện hiệu quả của ReactJS.
Đây là một trong những yêu cầu để cho thấy tốc độ phát triển đáp ứng nhanh như thế nào và vượt trội so với các framework khác như Vue. React được sử dụng bởi hàng trăm công ty hàng đầu trên thế giới, bao gồm Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, Instagram. Ưu và nhược điểm Ưu điểm Dễ sử dụng: Thư viện react chỉ tập trung vào việc tạo ra UI hiệu quả và được phân loại thành kiểu “V” trong mô hình MVC (Model-View-Controller). Hỗ trợ tái sử dụng Component: Người dùng có thể tái sử dụng các component có cùng chức năng.
Viết component dễ dàng hơn: React sử dụng JSX là sự kết hợp giữa HTML và JavaScript. Hiệu suất tốt hơn với DOM ảo: React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng tài liệu). Thân thiện với SEO: React cho phép tạo giao diện người dùng có thể được truy cập trên các công cụ tìm kiếm khác nhau. 15 Nhược điểm ReactJS chỉ phục vụ cho tầng View do chỉ là View Library (không phải MVC framework).
Đo dó React sẽ không có phần Model và Controller, 2-way binding hay là Ajax. Yêu cầu cần phải cấu hình lại khi tích hợp vào các framework MVC truyền thống. Có dung lượng nặng so với cái thư viện khác. Khó tiếp cận cho người mới học.
Ứng dụng trong đề tài ReactJS kết hợp với Redux để tạo nên front end. Redux: Là một thành phần quan trọng trong react, được dùng để quản lí các state. Cài đặt ReactJS Lưu ý: cần phải có NodeJS trước để có thể cài đặt và sử dụng React Tạo thư mục cần chứa ứng dụng react và mở CMD: Hình 12. Tạo thư mục chứa ứng dụng ReactJS Gõ câu lệnh như hình để tạo ứng dụng react 16 Hình 13.
Cài đặt ReactJS bằng lệnh Npm sẽ tạo một ứng dụng react tên là my-app và mặc định cài đặt các package cần thiết. NoSQL là gì? NoSQL (None-Relational SQL hay Not-Only SQL) là 1 dạng cơ sở dữ liệu mã nguồn mở. NoSQL có kiểu dữ liệu JSON, dạng dữ liệu theo kiểu key và value và được phát triển trên JavaScript Framework. NoSQL ra đời để khắc phục những hạn chế của cơ sở dữ liệu quan hệ về tốc độ, tính năng, khả năng mở rộng,.
NoSQL cho phép tạo cơ sở dữ liệu mà không cần quan tâm đến khoá chính, khoá ngoại hay ràng buộc. NoSQL chọn hiệu suất nhanh và khả năng mở rộng thay vì tính toàn vẹn của dữ liệu hay transaction. NoSQL được sử dụng ở rất nhiều công ty, tập đoàn lớn chẳng hạn như Facebook phát triển và sử dụng Cassandra, Google phát triển và sử dụng BigTable,. MongoDB: MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở, được nhiều người dùng.