PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sự phát triển vượt bậc và nhanh chóng của khoa học và công nghệ. Một thời đại mà ứng dụng của công nghệ thông tin được tìm thấy ở khắp mọi nơi và chỉ cần có mạng internet đã có thể thực hiện được hầu như mọi thứ. Vì thế chúng em đã quyết định thực hiện đề tài “Xây dựng Website học tiếng Anh sử dụng Spring Framework và ReactJS” bởi vì các động lực sau.
Ta có thể thấy, ở thời điểm hiện tại tình hình dịch Covid – 19 ở nước ta đang ở đã giảm bớt phần nào nhưng việc tập trung vẫn có thể đem lại nhiều rủi ro. Bên cạnh đó, xã hội ngày nay phát triển một cách nhanh chóng, mọi người luôn bận rộn các công việc cá nhân của bản thân. Vì vậy, mọi người luôn phải tranh thủ từng phút từng giây để nâng cao bản thân. Do đó, nhóm chúng em đưa ra ý tưởng này để giúp cho mọi người có thể bắt đầu việc học mọi lúc, mọi nơi mà phù hợp với bản thân và không mất chi phí và thời 13 gian đi lại.
Và đồng thời website này cũng là nơi để cho người dùng có thể tìm kiếm các khóa học đúng như mong muốn một cách dễ dàng. MỤC TIÊU ĐỀ TÀI ● Xây dựng website cho học viên có thể học online, giáo viên có thể xây dựng khóa học và dạy học online và dành cho quản trị quản trị viên quản trị cơ sở dữ liệu. ● Vận dụng thành các công công nghệ mới, ngôn ngữ lập trình hiện đại vào để xây dựng website của đề tài. PHƯƠNG PHÁP THỰC HIỆN Tìm hiểu các kiến thức cần thiết để thực hiện đề tài: ● Các kỹ thuật phân tích thiết kế hệ thống ● Tìm hiểu các thư viện hỗ trợ cho đề tài ở ReactJS ● Tìm hiểu về framework, ở đây là Spring Framework Tham khảo các ứng dụng đang được sử dụng trên thị trường 14 PHẦN NỘI DUNG CHƯƠNG 1.
Giới thiệu về Spring Framework Hình 1. Logo Spring Framework [1] Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code… [2] Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB; trong suốt: hoạt động một cách trong suốt với lập trình viên).Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn. Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web.
Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (Plain Old Java Object) 1. Ưu điểm ● Tạo ứng dụng một cách độc lập, có thể chạy trên cả nền tảng Java Web ● Cho phép nhúng trực tiếp các web server như Jetty, Tomcat,… mà không cần phải triển khai các file WAR. ● Cung cấp nhiều plugin ● Tối ưu hóa công đoạn cấu hình cho ứng dụng, không sinh ra code cấu hình và nó cũng không yêu cầu người dùng phải cấu hình lại bằng XML. Từ đó, giúp tiết kiệm thời gian viết code và tăng năng suất lao động.
15 ● Có thể đóng gói ứng dụng Spring dưới dạng là file JAR và có thể dễ dàng khởi động ứng dụng chỉ với một câu lệnh ngắn gọn, quen thuộc: java – jar,… ● Giảm thiểu thời gian phát triển code, tăng hiệu suất phát triển chung của cả dự án. ● Dễ dàng tích hợp các mô-đun liên quan như Spring-MVC, Spring Data, Spring Security, Spring Cloud,v.v… ● Ngoài ra còn có nhiều plugins để phát triển nhanh chóng bằng các công cụ như Build như Maven hoặc Gradle. Giới thiệu về ReactJS Hình 1.2 Logo ReactJS [3] ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở tầng Client nữa.
[4] React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM. Ưu điểm của ReactJS Sau đây là các ưu điểm của ReactJS: ● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì bạn không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường hợp. ● Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible để có thể thỏa các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian 16 xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.
● Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó. Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dụng lại các Business Logic trong ứng dụng. ● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google. Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé! ● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng.
Điều đó giúp tăng tốc quá trình release sản phẩm cung như quá trình coding của bạn. ● Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào. Giới thiệu về MySQL Hình 1.3 Logo MySQL [5] 17 MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở viết tắt RDBMS (Relational database management system) phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Hoạt động theo mô hình Client – Server.
MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu và mỗi cơ sở dữ liệu có nhiều bảng quan hệ chứa dữ liệu. MySQL là một trong số các phần mềm RDBMS (Relational database management system). RDBMS (Relational database management system) và MySQL thường được cho là một vì độ phổ biến quá lớn của MySQL. Các ứng dụng web lớn nhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưu trữ dữ liệu.
Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tương thích với nhiều hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows, và Ubuntu. Ưu điểm ● An toàn: Vì MySQL sở hữu nhiều tính năng bảo mật cấp cao, mã hóa thông tin đăng nhập và chứng thực từ host đều khả dụng. ● Dễ sử dụng: MySQL ổn định và dễ sử dụng trên nhiều hệ điều hành và cung cấp một hệ thống các hàm tiện ích lớn. ● Khả năng mở rộng: Với MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa có thể mở rộng khi cần thiết.
● Hiệu năng cao: Hỗ trợ nhiều chức năng SQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ. KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 2. Phân tích hiện trạng Ngày nay, việc học ngày càng trở nên quan trọng, mọi người dù lớn dù nhỏ luôn phải bổ sung kiến thức cho mình. Đặc biệt là trong thời đại hội nhập ngày nay thì kiến thức về tiếng Anh là vô cùng quan trọng.
Nhưng việc học của chúng ta gặp khá nhiều khó khăn. Đầu tiên, có thể nói đến đó là thời gian, nếu ta còn là một học sinh thì thời gian chúng ta đã dành hết trên trường, lớp, còn nếu ta là một người đã đi làm thì thời gian của chúng ta dành khá nhiều cho công việc. Đồng thời một khó khăn nữa đó là địa điểm học, có những người ở khá xa những trung tâm dạy tiếng Anh. Vì vậy chúng ta cần một 18 khóa học linh hoạt về thời gian và địa điểm.
Cho nên việc một trang web học tiếng Anh là cần thiết trong hoàn cảnh ngày nay, đặc biệt là trong thời kỳ dịch bệnh này. Mọi người có thể dễ dàng truy cập trang web mọi lúc, mọi nơi. Trên trang web của chúng tôi, có rất nhiều sự lựa chọn cho người dùng từ các khóa học miễn phí cho đến các khóa học trả phí. Với những thao tác đơn giản người dùng có thể học tập theo một lộ trình được định sẵn, với những bài học dễ hiểu và dễ làm theo.
Và sau mỗi bài học đều sẽ có những bài tập để cho người dùng thực hành lại những gì đã học. Quá trình học của người dùng luôn được lưu lại, mỗi lần người dùng vào lại thì có thể tiếp tục bài học mà mình đang học. Trang web cũng giúp người dùng quản lý được những khóa học mình mà họ đang tham gia. Với dự án “Website học tiếng Anh” có thể đáp ứng được phần nào nhu cầu học tiếng Anh của con người hiện nay.
Khảo sát một số phần mềm 2. TiengAnhMoiNgay Các màn hình chính Hình 2.1 Trang đăng nhập 19 Hình 2.2 Trang chủ 20 Hình 2.3 Trang bài học 21 Hình 2.4 Trang bài luyện tập Hình 2.5 Trang quản lý tài khoản Nhận xét Bảng 2.1 Chức năng và hạn chế của FoodHub Các chức năng Hạn chế - Đa dạng về các bài học - Chỉ dành cho việc học TOEIC - Tốc độ phản hồi nhanh - Chỉ có 1 khóa học duy nhất - Có hướng dẫn lộ trình cụ thể 22 2.