Chương 1. Lý do chọn đề tài Trong những năm vừa rồi tình hình dịch covid diễn biến phức tạp, người dân trong nước không thể tự do ra ngoài. Cũng vì vậy, những hình thức mua bán trực tuyến và thanh toán hàng online càng trở nên phổ biến và quen thuộc hơn. Vài tháng trở lại đây, tình hình dịch đã nằm trong tầm kiểm soát, mọi hoạt động được quay trở lại như bình thường.
Sau một thời gian không được thoải mái ra đường, nhu cầu được đi đây mai đó của mọi người cũng cao hơn. Hơn thế nữa, những thói quen mua hàng trực tuyến vẫn còn đó, vì vậy chúng em đã quyết định cho ra đời một website cung cấp các tour du lịch với hình thức thanh toán trực tuyến. Pham vi nghiên cứu o Tìm hiểu bài toán về cung cấp các tour du lịch đến khách hàng. o Xây dựng website với phần frond-end sử dụng React, backend sử dụng NodeJs và MySQL cho việc lưu trữ dữ liệu.
Đối tượng nghiên cứu - Các công nghệ: • Ngôn ngữ lập trình: Javascript, TypeScript • JWT, React, NodeJs • MySQL - Đối tượng: • Khách hàng (người mua tour du lịch) • Admin (Người cung cấp tour du lịch) Trang 1 Chương 2. React là gì React là một thư viện JavaScript được phát triển bởi Facebook, được sử dụng để phát triển giao diện người dùng (UI) có tính tương tác cao. React phát triển giao diện bằng cách chia giao diện thành các thành phần (components), nhờ đó các thành phần giao diện trùng lặp có thể tái sử dụng mà không cần phải code lại. React hiện được sử dụng bởi rất nhiều công ty lớn trên thế giới, bao gồm Neflix, Facebook, WhatsApp, Instagram… Hình 2.1: Logo của React 2.
Tại sao sử dụng React o React là một thư viện có mã nguồn mở, dễ sử dụng. o React cho phép sử dụng lại components (Reusable Component) đã được phát triển trước đó o Có nhiều thư viện được xây dựng phù hợp cho các nhu cầu khác nhau o Cộng động lớn 2. Một số khái niệm a. Virtual Dom Virtual Dom là một DOM ảo, hoạt động tốt và đáng kể hơn so với DOM thực.
Một ứng dụng React sẽ được xây dựng từ nhiều các component. Các component Trang 2 này sẽ chức hoặc không chứa những trạng thái (state). Khi trạng thái của một component bị thay đổi, React sẽ so sánh phiên bản sau khi bị thay đổi và phiên bản trước khi thay đổi và thực hiện cập nhật trên Virtual DOM. Quá trình này gọi là “Diffing”.
JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong JavaScript với nhiều tính năng hỗ trợ lập trình viên: • Tốc độ nhanh: JSX thực hiện tối ưu hóa trong khi biên dịch sang mã JavaScript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với việc viết một mã tương đương trực tiếp bằng JavaScript. • An toàn: JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch.
• Dễ dàng hơn: JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng c. Props và State Props là một từ viết ngắn gọn của properties. Trong React, props là một đối tượng lưu trữ giá trị được truyền từ bên ngoài vào bên trong component, thường là truyền từ componet cha đến component con. Khác với props, state được dùng để lưu trữ dữ liệu của chính component đó, giá trị của state có thể thay đổi và sẽ component sẽ được render lại ngay sau khi state thay đổi.
Component Lifecycle Trang 3 Hình 2.2 React component lifecycle Để lập trình một ứng dụng React, thì việc nắm rõ vòng đời của một component sẽ giúp lập trình viên lập trình quản lí dữ liệu tốt hơn. Vòng đời của một component sẽ bao gồm ba nhóm chính: • Mouting: là giai đoạn mà component được khởi tạo và mount on the DOM (chèn vào DOM) • Updating: giai đoạn các state của componet thay đổi, component sẽ render lại. • Unmouting: component được unmout DOM (xóa khỏi DOM) d. React Hook Những người mới tiếp xúc với React lần đầu, sẽ cảm thấy rất bối rối trong việc làm quen với lifecycle của component.
Hơn thế, việc sử dụng các component với các hàm trong lifecycle cũng khiến nhiều lập trình viên dù đã có kinh nghiệm những vẫn sẽ gặp nhiều khó khăn. Nhận thấy điều này, React đã cho ra đời React Hook. Với Hook, lập trình viên có thể dễ dàng quản lý state mà không cần sử dụng đến class. Một số React Hook phổ biến a.
UseState UseState là một hàm nhận vào một tham số là giá trị khởi tạo của state và trả về một mảng gồm hai phần tử. Phần tử thứ nhất là state hiện tại. phần tử thứ 2 là một hàm sử dụng để cập nhật state. UseEffect UseEffect là một hàm nhận vào hai tham số.
Tham số thứ nhất là một hàm, tạm gọi là callback. Tham số thứ hai sẽ là một mảng mảng hoặc không có gì cả. Callback sẽ được gọi mặc dịnh lần đầu tiên khi component được mout vào DOM, sau khi render xong component. Nếu như không truyền tham số thứ hai cho useEffect, callback sẽ được gọi mỗi khi component rerender.
Nếu như tham số thứ 2 là mảng, callback được gọi mỗi khi mảng đó thay đổi. UseContext UseContext được sinh ra để giải quyết việc chia sẻ các state giữa các component. UseContext có thể giúp lưu trữ các state ở toàn cục, giúp cho tất cả các component con bên trong context đều có thể lấy state ở bất kỳ đâu. React Router Dom React không tích hợp sẵn router, nhưng chúng ta có thể làm điều này bằng cách cài đặt thư viện React Router Dom.
Thư viên này cho phép thay đổi URL của trình duyệt và render ra giao diện tương ứng. NodeJs là gì? Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – một trình thông dịch thực thi mã JavaScript. NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Windows cho tới Linux, MacOs nên đó cũng là một lợi thế. NodeJs hỗ trợ nhiều thư viện giúp việc lập trình trở nên đơn giản hóa.3: Logo của NodeJs 2.
Tính năng vượt trội của NodeJs • Thực thi các sự kiện không đồng bộ, cho phép xử lí nhiều yều cầu đồng thời • Nodejs được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh 2. Khi nào nên sử dụng NodeJs • Xây dựng ứng dụng Restful API • Các ứng dụng cần về thời gian thực • Các chương trình upload file với tốc độ cao 2. ExpressJs là gì ExpressJs là một framework mã nguồn mở miễn phí 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.
Để hiểu và sử dụng ExpressJs, lập trình viên chỉ cần biết về JavaScript, do đó việc xây dựng website sẽ càng dễ dàng hơn đối với các lập trình viên đã biết về JavaScript trước đó. ExpressJs được sử dụng làm gì? ExpressJS sẽ giúp bạn tổ chức kiến trúc back-end của mình. ExpressJs có thể triển khai website với mô hình MVC – một mô hình web phổ biến, giúp cho việc bảo trì tương đối dễ dàng. Một số tính năng của ExpressJs: • Phát triển máy chủ nhanh hơn: cung cấp cho bạn nhiều tính năng phổ biến của Node.js dưới dạng hàm có thể dễ dàng sử dụng ở bất kỳ đâu trong chương trình.
Điều này sẽ giúp rút ngắn thời gian để viết code. • Định tuyến: cung cấp cơ chế định tuyến cao giúp duy trì trạng thái của trang web. • Khuôn mẫu: cung cấp các công cụ tạo khuôn mẫu cho phép các nhà phát triển tạo nội dung động trên các trang web bằng việc xây dựng các mẫu HTML ở phía máy chủ. • Gỡ lỗi: cung cấp một cơ chế có khả năng xác định chính xác phần ứng dụng web có lỗi.
MySQL là gì? MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server. Với RDBMS là viết tắt của Relational Database Management System. MySQL được đánh giá cao nhờ việc tích hợp với Apache và PHP. Không chỉ vậy, việc có tính tương thích với nhiều trình duyệt, với nhiều hệ điều hành tiêu biểu như Ubuntu, Linux, macOS, Windows càng giúp việc sử dụng MySQL được tin tưởng và ưa chuộng nhiều hơn.
Ưu điểm của MySQL MySQL được ưa chuộc trong các ứng dụng website nhờ một số ưu điểm sau: o MySQL là một cơ sở dữ liệu tốc độ cao, ổn định dễ sử dụng và có thể hoạt động được trên nhiều hệ điều hành khác nhau. o MySQL có độ bảo mật cao, thích hợp cho các ứng dụng truy cập CSDL trên internet. o Có khả năng xử lý rất nhiều dữ liệu và có thể mở rộng nếu cần thiết. o MySQL hoàn toàn miễn phí sử dụng 2.
Các phần mềm và công nghệ khác 2. Visual Studio Code Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug, đi kèm với Git, có chức năng nổi bật cú pháp (syntax highlighting), tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác.
Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MIT, mặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí. GitHub GitHub là một hệ thống quản lý dự án và phiên bản code, GitHub được coi giống như một mạng xã hội dành riêng cho các lập trình Trang 8 viên. Với GitHub, các lập trình viên có thể clone lại mã nguồn từ một repository. Nó cũng là một dịch vụ máy chủ repository giúp lưu trữ code và mỗi người có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để làm việc.
Github có đầy đủ tính năng của Git, ngoài ra nó còn bổ sung những tính năng về social giúp các developer có thể tương tác với nhau. GitHub giống như một trang mạng xã hội dành riêng cho lập trình viên cung cấp các chức năng social networking như feeds, follower và network graph để các lập trình viên học hỏi kinh nghiệm từ lịch sử commit. VietQR VietQR là nhận diện thương hiệu chung cho các dịch vụ thanh toán, chuyển khoản bằng mã QR được xử lý qua mạng lưới Napas, các Ngân hàng thành viên, Trung gian thanh toán, các đối tác thanh toán tại Việt Nam và quốc tế của Napas Mã QR sử dụng tuân thủ theo tiêu chuẩn thanh toán QR của EMV Co. và Tiêu chuẩn cơ sở cho mã QR do Ngân hàng Nhà nước Việt Nam ban hành.