Chương 1: Giới thiệu. Chương 2: Cơ sở lý thuyết. Chương 3: Phân tích và thiết kế hệ thống. Chương 4: Kết quả xây dựng Web-Application Pacifitness.
Chương 5: Kết luận và hướng phát triển. Tống quan về hệ thống kết nối học viên va Coach (Huan luyện viên) Hệ thống kết nối giữa Coach và học viên là một hệ thống trung gian giúp người có nhu tập luyện (học viên) có thể tìm được một huấn luyện viên (Coach) phù hợp về thời gian tập luyện, giá tiền cũng như phương pháp tập tốt nhất. Một số đặc điểm nối bật của hệ thống là cả học viên lẫn Coach đều không cần phải tiếp xúc trực tiếp với nhau nên không cần thiết phải biết nhau. Tuy nhiên việc huấn luyện vẫn diễn ra khá dễ dàng thông qua các video của Coach hoặc cả hai có thể liên lạc thông qua meeting.
Tai thời budi dịch bệnh Covid-19 rất phức tạp thì để bảo vệ sức khỏe thi nhiều người đã lựa chọn việc tập luyện tại nhà. Tuy nhiên nếu không biết phương pháp cũng như chế độ dinh dưỡng phù hợp thì người tập luyện rất khó đạt được mục tiêu. Vì thế hệ thống sẽ giúp người tập giải quyết vấn đề đó một cách dễ dàng. Hệ thống bao gồm nhiều huấn luyện viên (Coach) có kinh nghiệm và đa dạng mọi bộ môn, điều này sẽ giúp ích rất lớn cho người tập có thế đạt được mục tiêu đề ra nhanh và hoàn hảo nhất.
Hệ thống giúp Coach và học viên có thể tháo gỡ khoảng cách địa lý, Coach sẽ dễ dàng trao đổi cũng như chia sẻ các kiến thức cũng như khóa học của mình đến với học viên. Coach có thể hướng dẫn, truyền tải phương pháp đến nhiều học viên hơn so với việc hướng dẫn truyền thống trước đây. Học viên có thể đăng ký được các huấn luyện viên có tiếng, tập luyện bất cứ lúc nào thông qua các video của khóa học. Khi có thắc mắc thì họ cũng có thể dễ dàng trao đối với nhau bang cách nhắn tin hoặc gọi video.
Hệ thống này hiện tại còn khá mới mẻ và chưa được thương mại hóa rộng rãi. Mới đây nhất Apple có cho ra một ứng dụng có ý tưởng khá giống đó chính là: Apple Eitness+. Tuy nhiên để sử dụng được dịch vụ thì người dùng phải có Apple Watch và ứng dung này có thé đo được lượng calories tiêu thụ để kiểm soát buổi tập của học viên. Nhưng ứng dụng chỉ cung cấp video hướng dẫn mà người tập không thể nhận được hướng dẫn trực tiếp từ người huấn luyện.
Ngoài ra có khá nhiều app hỗ trợ người tập trong việc tập luyện, tuy nhiên những ứng dụng đó chỉ có một số chức năng nhất định. Tim hiểu công nghệ ReactJS 2. Tìm hiểu ngôn ngữ Javascript Tổng quan về ngôn ngữ Javascript: JavaScript? là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web: HTML5: Để thiết kế và cấu trúc website.
CSS3: phiên bản mới nhất của CSS có thể định dạng thiết kế, bố cục, phong cách, canh lề của trang web. JavaScript: Ghi nhận các sự kiện của người dùng như: di chuyển chuột, nhấp chuột. Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thực hiện công việc được lập trình tương ứng. JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web.
Lịch sử phát triển của JavaScript JavaScript được tạo trong mười ngày bởi Brendan Eich, một nhân viên của Netscape, vào thang 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được đối thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ. Trong năm 1996, JavaScript được chính thức đặt tên la ECMAScript. ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999.
Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn. JavaScript 4 https://vi.org/wiki/JavaScript , truy cập vào ngày 20/02/2022 liên tục phát triển kể từ đó, có lúc đạt đến 92% website đang sử dụng JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web.Giới thiệu thư viện ReactJS React [3] (Hay React JS, ReactJS) là một thư viện Javascript mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tai Facebook.
Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng. Nó đang được bảo trì (maintain) bởi Facebook và Instagram, cũng với sự đóng góp của cộng đồng các lập trình viên giỏi trên Thế giới. React sinh ra để dành cho các ứng dụng lớn dễ dàng quản lý và mở rộng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng.
React sử dụng luồng dữ liệu 1 chiều giúp kiểm soát dữ liệu dễ dàng hơn.Ngoài ra ta sẽ luôn luôn biết được component sẽ sinh ra mã HTML như thế nào khi nhìn vào 1 file source, giúp dễ dàng nâng cấp, bảo trì sau này. Tích hợp giữa JavaScript và HTML vào trong JSX làm cho các component dễ hiểu hơn. [] Tại sao chọn React? @ Giúp viết mã Javascript dé dang hơn với JSX: JSX° chính là cú pháp là một cú pháp mở rộng cho JavaScript. JSX với React để mô tả giao diện (UI).
JSX có thể trông giống Ngôn ngữ Khuôn mẫu (Template language), nhưng JSX đi kèm với toàn bộ tính năng của JavaScript. Code không sử dụng JSX: ° https://vi.org/docs/introducing-JSx.html, truy cập ngày 01/06/2022. 10 className: Code sử dung JSX: const element = Khi nhìn vào cấu trúc trên ta cũng dễ dang đọc hiểu được ý nghĩa của các component. Code JSX nhanh hơn, dễ hiểu hơn code JS.
JSX không làm thay đổi ngữ nghĩa của JavaScript. @ "Thanh phần hóa" giao diện: React cho phép lập trình viên tạo ra các Component (Thành phần) tương ứng với các phần của giao diện. Các component này có thể tái sử dụng, hoặc kết hợp với các Component khác để tạo ra một giao diện hoàn chỉnh. Component thực sự là tương lai của lập trình ứng dụng web, và nó cũng là tính năng quan trọng nhất mà React đem lại [1 ].
@ Tăng hiệu năng với Virtual-DOM Khi dữ liệu của Component thay đổi. React cần phải render lại giao diện. Thay vì tạo ra thay đối trực tiếp vào mô hình DOM của trình duyệt, nó tạo ra thay đổi trên một mô hình DOM ảo (Virtual DOM). Sau đó nó tính toán sự khác biệt giữa 2 mô hình DOM, và chỉ cập nhập các khác biệt cho DOM của trình duyệt.
Cách tiếp cận này mang lại hiệu năng cho ứng dụng. 11 Virtual DOM DOM Hình 2.1: Hình minh họa mô hình DOM ảo và mô hình DOM thật. @ Thân thiện với SEO React có thể chạy tại phía Client, nhưng nó cũng có thể chạy tại phía Server, vì vậy dữ liệu trả về cho trình duyệt là văn bản HTML, nó không gây ra khó khăn gì cho các Search Engine, vì vậy nó thân thiện với SEO. LÍ Tinh năng mới trong ES6 ° Block-Scoped Constructs Let and Const Đây là một trong những tính năng được định nghĩa với các từ khóa Let và Const.
Theo cách định nghĩa này thì biến chỉ tồn tại trong một phạm vi khối của Block Scope. Những khối lệnh này sẽ được thực hiện định nghĩa thông qua các cặp ngoặc nhọn. Trong phiên ban ES5 thường thì các khối này sẽ không được giới hạn phạm vi của các biến còn đối với ES6 thì nó lại được sử dụng LET để có thé giới hạn được phạm vi của các biến nằm trong khối lệnh khi thực hiện. 6 http://es6-features.org, truy cập ngày 01/06/2022.
12 Với từ khóa Const do ES6 giới thiệu thì mọi thứ sẽ trở nên dễ dàng bởi nó là một biến không thay đổi và nó thường bị giới hạn trong một phạm vị các khối giới tương tự như Let. Arrow Function Việc sử dụng Arrow functions giúp viết code ngắn gọn hơn trong việc khai báo một biểu thức hàm. Nhưng hãy chú ý, vì khi sử dụng Arrow functions thì ở đó this không hoạt động, không có prototypes, không thể sử dung constructors. Destructuring Là một trong những tính năng có phần khá giống với hàm List được sử dụng trong PHP.
Destructuring Assignment trong ES6 sẽ thực hiện phân các giá trị trong mảng vào các biến dựa theo một thứ tự nhất định. Có thể nói theo một cách khác là Destructuring Assignment sẽ tách ra các phần từ Object hoặc Array chỉ bằng một đoạn code nhất định để chia thành nhiều biến nhỏ. 13 Ngoài ra còn rất nhiều ưu điểm của ES6 được xem là bước tiến lớn so với ES5. Một số tinh năng khác của ES6 là classes, enhanced object literals, destructuring, default + rest + spread, promises, øenerators,.
[] React Hooks Hooks’ mới được thêm ở phiên bản React 16. Với Hooks, có thé sử dung state và các chức năng khác của một React class component mà không cần phải viết một class. Để có thể thay thế được Class thì React Hook cung cấp một bộ các built-in Hook, giúp sử dụng được các thành phần tạo nên React, có 2 loại built-in đó là: Basic Hook và Additional Hook. UseState: Hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để cập nhật state (giống như ham setState cũ).org/docs/Hook-overview.html truy cập ngày 01/06/2022 14 (props) { super(props) ; this.state = { isLoading: false } const [isLoading, setLoading] = Ot (true) Hinh 2.4: UseState trong React Hooks.
15 UseEffect: Vì sự phức tạp trong các hàm LifeCycle thì để thay thế nó sẽ có hàm useEffect. Nó giúp xử lý các side effects, useEffect sẽ tương đương với các hàm componentDidMount, componentDidUpdate và componentWillUnMount trong LifeCycle. function const [count, (9); // Tương tự như componentDidMount va componentDidUpdate: (=> { | ap nhập document title sử dung browser API document.title = count h lập return ( <div> <p>You clicked {count} times</p> <button =) Se count + 1)}> Click me </button> </div> Hinh 2.5: UseEffect trong React Hooks UseEffect được kích hoạt sau khi quá trình render cua React component hoàn tất. Nó sẽ được gọi và thực hiện tính toán các hành động bên trong nó trong một callback.
UseEffect chấp nhận 2 đối số: useEffect(callback, dependencies). Callback: sẽ được gọi trong useEffect sau khi return thực thi nhiệm vụ kết xuất giao diện của nó. 16 Dependencies: Là một mảng chứa các đối số mà useEffect sẽ phụ thuộc vào đó để thực thi.