Hệ thống tra cứu luật giao thông (đồ án 2)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRÙNG DƯƠNG ĐỒ ÁN HỆ THỐNG TRA CỨU LUẬT GIAO THÔNG Traffic laws searching system SINH VIÊN NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRÙNG DƯƠNG – 18520030 KHÓA LUẬN TỐT NGHIỆP HỆ THỐNG TRA CỨU LUẬT GIAO THÔNG Traffic laws searching system SINH VIÊN NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN THs HUỲNH TUẤN ANH TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Lời em xin chân thành gửi lời cảm ơn đến thầy Huỳnh Tuấn Anh nhiệt tình giảng dạy lớp, hỗ trợ thơng tin cần thiết giải đáp thắc mắc cho em suốt trình thực đề tài Đồng thời nhóm em muốn gửi lời cảm ơn đến anh chị khóa trên, đặc biệt thầy khoa chia sẻ kinh nghiệm quý báu môn học kiến thức liên quan Cũng xin cảm ơn bạn bè tạo điều kiện thuận, người đưa nhận xét góp ý chân thành, vô quý giá Những người động viên, hỗ trợ nhóm hồn thành đề tài Nguyễn Trùng Dương Thủ Đức, Tháng 12 Năm 2021 MỤC LỤC Chương MỞ ĐẦU 1.1 Lý chọn đề tài _ 1.2 Tác nhân hệ thống 1.3 Phạm vi hệ thống _ Chương ĐỊNH HƯỚNG PHÁT TRIỂN _ 2.1 Xác định yêu cầu chức _ 2.2 Xác định công nghệ sử dụng 2.2.1 Front-end 2.2.1.1 Định hướng 2.2.1.2 Kiến trúc JAM Stack _ 2.2.1.3 Cách hoạt động _ 2.2.1.4 Ưu điểm JAMstack _ 2.2.1.5 Nhược điểm JAMstack 2.2.1.6 Các JAMstack Framworks 2.2.1.6.1 GatsbyJS 2.2.1.6.2 NextJS 2.2.1.6.3 So sánh GatbyJS NextJS 2.2.1.7 Chương Kết luận _ XÂY DỰNG HỆ THỐNG 10 3.1 Thiết kế giao diện 10 3.1.1 Trang chủ 10 3.1.2 Tra cứu nâng cao _ 11 3.1.3 Thay đổi chế độ xem 12 3.1.4 Xem chi tiết tài liệu _ 13 3.1.5 Thay đổi chế độ xem chi tiết 14 DANH MỤC HÌNH Hình 2-1: Ảnh minh họa Single Page App Hình 2-2: So sánh Website theo LAMPstack JAMstack Hình 3-1: Giao diện trang chủ 10 Hình 3-2: Giao diện tra cứu nâng cao 11 Hình 3-3: Giao diện thay đôi chế độ xem gợi ý 12 Hình 3-4: Giao diện xem chi tiết tài liệu dạng pdf 13 Hình 3-5: Giao diện xem chi tiết tài liệu dạng văn 14 DANH MỤC BẢNG Bảng 2-1: Bảng so sánh GatbyJS NextJS Bảng 3-1: Bảng thích giao diện trang chủ 11 Bảng 3-2: Bảng thích giao diện tìm kiếm nâng cao 11 Bảng 3-3: Bảng thích giao diện thay đổi chế độ xem 12 Bảng 3-4: Bảng thích giao diện xem chi tiết tài liệu 13 Bảng 3-5: Bảng thích giao diện thay đổi chế độ xem chi tiết 14 DANH MỤC TỪ VIẾT TẮT Từ viết tắt Định nghĩa SEO Search Engine Optimaztion PDF Portable Document Format API Application Programming Interface JAM JavaScript, API, Markup HTML Hypertext Markup Language CSS Cascading Style Sheet CDN Content Delivery Network LAMP Linux, Apache, MySQL SPA Single Page App SSR Server-side rendering SSG Static Site Generation CI/CD Continuous Integration / Continuous Deployment Chương MỞ ĐẦU 1.1 Lý chọn đề tài Trong xã hội ngày nay, ứng dụng tin học ngày phát triển ứng dụng nhiều lĩnh vực đời sống từ kinh tế đến khoa học xã hội, trị Và mà tài liệu pháp luật tìm kiếm minh bạch công khai nơi mạng internet Về phương diện luật giao thông phần luật người tìm kiếm nhiều nhất, để xem quy định, lỗi vi phạm, quy tắc tham gia giao thông hay số tiền phải nộp phạt Tuy nhiên đa phần website hỗ trợ việc tra cứu cho người dùng cịn chưa tốt Có thể nói đến khả tìm kiếm chi tiết chưa đem đến độ xác cao, kết trả tương đối tổng quát khiến người dùng khó xác định thơng tin cần xem Từ điểm hạn chế đưa em tới định chọn thực phát triển đề tài “Hệ thống tra cứu luật giao thông” 1.2 Tác nhân hệ thống Người dùng hệ thống toàn người có khả sử dụng thiết bị có kết nối internet có nhu cầu tìm kiếm thông tin liên quan tới luật giao thông 1.3 Phạm vi hệ thống Hệ thống xây dựng phải đạt yêu cầu có chức giống với ứng dụng tồn tại, từ tiếp cải thiện phát triển tính hỗ trợ chức tra cứu Chương ĐỊNH HƯỚNG PHÁT TRIỂN 2.1 Xác định yêu cầu chức Từ kết trình tìm hiểu hệ thống tra cứu luật tại, em xác định yêu cầu mà hệ thống cần phải đáp ứng yêu cầu sau:  Lưu trữ liệu: tài liệu luật, thông tin tài liệu luật  Xem liệu: xem tài liệu dạng pdf, dạng văn  Tra cứu : hỗ trợ người dùng tìm kiếm tài liệu luật  Tra cứu nâng cao: đưa lựa chọn giúp người dùng phân loại tìm kiếm rõ ràng  Chatbot hỗ trợ: hỗ trợ tra cứu nhanh ngôn ngữ tự nhiên  Gợi ý: hiển thị liệu có lượt xem cao cho người dùng 2.2 Xác định công nghệ sử dụng 2.2.1 Front-end 2.2.1.1 Định hướng Để đáp ứng nhu cầu tiếp cận đến nhiều lại người dùng, tối ưu tài nguyên phần lớn mong muốn tiếp cận xu hướng công nghệ em chọn xây dựng hệ thống theo kiến trúc JAM Stack 2.2.1.2 Kiến trúc JAM Stack JAMstack kiến trúc phát triển web đại Nó khơng phải ngơn ngữ lập trình hay dạng cơng cụ Nó giống phương pháp phát triển web nhằm mục đích thực thi hiệu suất tốt hơn, bảo mật cao hơn, chi phí mở rộng thấp trải nghiệm nhà phát triển tốt Các dự án JAMstack khơng dựa vào mã phía máy chủ – chúng phân phối thay dựa vào máy chủ Được cung cấp trực tiếp từ CDN, ứng dụng JAMstack mở khóa tốc độ, hiệu suất trải nghiệm người dùng tốt Kiến trúc cho phép lập trình viên tạo website động, nội dung thực tệp tĩnh xây dựng HTML, JavaScript CSS; chúng tệp văn bản, chúng cung cấp nhanh chóng mà khơng u cầu chi phí kiến trúc biên dịch thông dịch truyền thống Một điểm bật JAMstack tính liên kết với máy chủ thông qua API để tạo website với tốc độ tải ban đầu nhanh lưu trữ số lượng liệu khổng lồ Cách ứng dụng website gọi SPA Hình 2-1: Ảnh minh họa Single Page App Với phát triển không ngừng JAMstack, nhiều ông lớn ý tới kiến trúc phát triển website đại Nổi bật kiện Microsoft cho mắt Azure Static Web Apps để hỗ trợ lập trình viên thiết kế website nhanh chóng với tảng JAMstack Đồng thời, thương hiệu thương mại phổ biến PayPal, Nike, Braun, Shopify,… áp dụng kiến trúc vào website họ 2.2.1.3 Cách hoạt động Kiến trúc phát triển website LAMP stack bắt nguồn từ bốn thành phần mã nguồn mở: hệ điều hành Linux, máy chủ Apache HTTP, sở liệu MySQL ngôn ngữ PHP Đối với website truyền thống với LAMP stack, lập trình viên viết chương trình lưu trữ máy chủ Khi người dùng gửi u cầu từ phía máy khách, trình duyệt truy vấn máy chủ trả lại kết máy khách Hình 2-2: So sánh Website theo LAMPstack JAMstack Đối với website truyền thống với LAMP stack, lập trình viên viết chương trình lưu trữ máy chủ Khi người dùng gửi yêu cầu từ phía máy khách, trình duyệt truy vấn máy chủ trả lại kết máy khách Trong đó, quy trình làm việc website tĩnh diễn sau: lập trình viên viết mã code lưu trữ liệu CDN Khi người dùng truy cập vào website, liệu tải từ lần đầu vào trang giúp tốc độ truy cập website dễ dàng nhanh chóng Nói tóm lại, quy trình làm việc JAMstack giảm đáng kể nhờ kiến trúc website nhỏ gọn, giúp giảm thời gian tải trang thân thiện với SEO 2.2.1.4 Ưu điểm JAMstack  JAMstack nhanh Khi nói đến việc giảm thiểu thời gian tải, khơng đánh bại tệp tạo sẵn phân phối qua CDN Các trang web JAMstack siêu nhanh HTML tạo thời gian triển khai phân phối qua CDN mà khơng có can thiệp chậm trễ phụ trợ  JAMstack bảo mật cao Mọi thứ hoạt động thông qua API khơng có sở liệu vi phạm bảo mật Với quy trình phía máy chủ tóm tắt thành API dịch vụ vi mơ, diện tích bề mặt cho cơng giảm bớt trang web bạn bảo mật cao  JAMstack rẻ dễ mở rộng Các trang web JAMstack chứa số tệp với kích thước tối thiểu phân phát nơi Chia tỷ lệ vấn đề phân phát tệp nơi khác thông qua CDN  Các phương pháp hay với JAMstack  Sử dụng CDN để phân phối tệp bạn thay máy chủ  Việc cài đặt đóng góp vào dự án bạn phải dễ dàng phức tạp Sử dụng công cụ npm Git để đảm bảo thiết lập chuẩn nhanh  Sử dụng công cụ xây dựng làm cho dự án bạn tương thích với tất trình duyệt (ví dụ: Babel, Browserify, Webpack, v.v.)  Đảm bảo dự án bạn đạt tiêu chuẩn web khả truy cập cao  Đảm bảo trình xây dựng bạn tự động hóa để giảm bớt căng thẳng  Làm cho trình triển khai bạn tự động, bạn sử dụng tảng Netlify để thực việc 2.2.1.5 Nhược điểm JAMstack  JAMstack không thân thiện với người bắt đầu Bạn cần biết chút thư viện mã nguồn mở Javascript React.js Vue.js, v.v để làm việc với kiến trúc phát triển website Khi đó, bạn xây dựng sản phẩm hoàn chỉnh, trang web ứng dụng mà người dễ dàng sử dụng nhờ công cụ hệ sinh thái JAMstack  Khả lưu trữ liệu thấp Một số mục đích lớn JAMstack tối ưu hiệu suất tải trang Để làm điều này, liệu lưu trữ phía máy khách với số lượng liệu giới hạn Bởi lẽ, đưa khối lượng lớn thông tin, tốc độ truy cập ban đầu chậm hệ thống tải tồn liệu lần Tuy nhiên, nhược điểm lại trở thành ưu điểm kết hợp với máy chủ để tạo cấu trúc với nhiều đặc điểm ưu việt  Độ phức tạp API Độ phức tạp API thường nhắc đến nhược điểm lẽ, việc xây dựng phát triển API chất lượng yêu cầu lập trình viên có kiến thức chuyên sâu Nếu bạn sử dụng API bên thứ ba, chi phí bỏ số cần phải cân nhắc  Xử lý phần động (chức đám mây) Như đề cập trên, website JAMstack khơng có nghĩa website tĩnh đơn mà chứa phần động xử lý Javascript Mặc dù ngơn ngữ lập trình dễ sử dụng nay, khiến lập trình viên cao cấp đau đầu đa dạng cách xử lý công việc 2.2.1.6 Các JAMstack Framworks 2.2.1.6.1 GatsbyJS GastbyJS tảng dùng để xây dựng website web app để hoạt động hiệu suất cao GatsbyJS sử dụng React Graphql thành phần chính, trái tim tảng Trang website tạo Gatsby khơng hoạt động nhanh chóng mà cịn có tính bảo mật ngầm khơng có sở liệu máy chủ không giống ứng dụng React khác, chúng giúp SEO dễ dàng nhiều web crawlers tìm thấy nội dung - Ưu điểm  Triển khai với chi phí thấp dễ dàng, việc tách biệt sở liệu phục vụ hoàn toàn liệu tĩnh giúp việc triển khai dễ dàng, dùng máy chủ với chi phí thấp  Tốc độ cao - Là framework để tạo web tĩnh, tối ưu tốc độ bảo mật cho website Việc chuyển qua lại trang website nhanh tất style, html javascript tải lần tải đầu tiên, người dùng ấn vào viết trang web, nội dung tải dạng JSON hiển thị lên, khơng cần tải lại tồn trang Việc cấu hình plugin cho phép tối ưu việc tải ảnh (progressive) preload (tải trước nội dung liên kết người dùng ghé qua) cho trang web có tốc độ cực cao  Hỗ trợ Progressive Web Apps, thêm website vào hình home di động người dùng dùng app di động ln  Đơn giản, thực bắt đầu Gatsby đơn giản dành cho quen với React, Graphql, Markdown… Gatsby thừa hưởng tính hay React Graphql - Nhược điểm  Gatsby chuyên dùng để tạo website tĩnh, nên việc triển khai hệ thống bình luận tìm kiếm thường phải dựa vào dịch vụ bên thứ như: Disqus, Algolia, Facebook  Khó khăn để sử dụng người chưa quen React, Graphql  Thời gian build lâu cho trang website phải build lại tồn website có cập nhật 2.2.1.6.2 NextJS NextJs Javescript framework giúp xây dựng ứng dụng SPA – SSR với ReactJs cách dễ dàng Nhờ Tối ưu hóa tĩnh tự động, nhà phát triển xây dựng ứng dụng kết hợp chứa trang hiển thị máy chủ trang hiển thị tĩnh Nói cách khác, không cần phải chọn “tĩnh” “động” - Ưu điểm  Kết hợp SSR SSG, trang hiển thị trước thời điểm xây dựng thời gian yêu cầu dự án  Tạo tĩnh tăng dần cho phép nhà phát triển cập nhật trang có cách hiển thị lại chúng có lưu lượng truy cập Bằng cách này, nội dung tĩnh trở nên động  Phương pháp Zero Config, tập trung vào logic nghiệp vụ ứng dụng NextJS thay logic ứng dụng Và để giúp người dùng, cung cấp tính biên dịch đóng gói tự động Nói cách khác, Next tối ưu hóa cho trình sản xuất từ đầu - Nhược điểm  Thiếu giao diện có sẵn, người dùng phải xây dựng toàn giao diện ứng dụng từ đầu  Tốn phát triển quản lí vận hành  Các plugins hỗ trợ cịn so với GatsbyJS 2.2.1.6.3 So sánh GatbyJS NextJS GatsbyJS NextJS Hỗ trợ tốt SEO X X Tốt cho trải nghiệm người dùng X X Tốt cho hiệu xuất website X X Dễ sử dụng với người bắt đầu X Hệ sinh thái plugins đa dạng X Tốt cho tương tác người dùng X Tốt cho websites có lượng thông tin lớn X Tốn cho websites nhỏ X Bảng 2-1: Bảng so sánh GatbyJS NextJS 2.2.1.7 Kết luận Xem xét hệ thống tra cứu pháp luật quy mơ liệu khơng lớn, q trình cập nhật khơng diễn thường xuyên hướng sử dụng website để lưu trữ, xem tài liệu luật cịn tương tác người dùng tra cứu xử lí bên phía server Do phương diện phù hợp tính đảm bảo tiết kiệm công sức phát triển chi phí trì, em chọn phát triển hệ thống framework GatsbyJS lưu trữ Netlify, dịch vu lưu trữ đám mây hỗ trợ thiết lập triển khai tự động website tĩnh cách tối ưu nhanh chóng phương pháp CI/CD Chương XÂY DỰNG HỆ THỐNG 3.1 Thiết kế giao diện 3.1.1 Trang chủ Hình 3-1: Giao diện trang chủ STT Loại Chú thích Input Cho người dùng nhập vào thơng tin mà muốn tìm kiếm Button Bấm để mở chế độ tìm kiếm nâng cao Button Bấm để bắt đầu tìm kiếm Button Bấm để bắt đầu chatbot Button Bấm để thay đổi sang chế độ xem gợi ý dạng văn Component Bấm để mở chế độ xem tài liệu chi tiết 19 Image Hình ảnh mơ tả cho tài liệu tương ứng 13 Text Tên luật tài liệu 14 Text Mô tả ngắn gọn tài liệu 15 Text Ngày tài liệu ban hành Swiper Lướt ngang qua bấm vào trịn để chuyển sang nhiều tài 10 liệu Sẽ có tối đa tài liệu thị gợi ý Bảng 3-1: Bảng thích giao diện trang chủ 3.1.2 Tra cứu nâng cao Hình 3-2: Giao diện tra cứu nâng cao STT Loại Chú thích 23 Text Tên thuộc tính tìm kiếm nâng cao Select box Hiện thị dropdown với lựa chọn cung cấp ứng với thuộc tính Bảng 3-2: Bảng thích giao diện tìm kiếm nâng cao 11 3.1.3 Thay đổi chế độ xem Hình 3-3: Giao diện thay đơi chế độ xem gợi ý STT Loại Chú thích 21 Text Tên dạng thông tin luật gợi ý 17 Component Thành phần để phân vùng dạng với nhau, giúp cho việc xem hay tìm kiếm dễ nhận biết 18 Component Chứa điều luật thuộc dạng tương ứng với văn ghi vị trí nội dung 22 Link Đường dẫn đến tài liệu gốc điều luật chọn Bảng 3-3: Bảng thích giao diện thay đổi chế độ xem 12 3.1.4 Xem chi tiết tài liệu Hình 3-4: Giao diện xem chi tiết tài liệu dạng pdf Loại Chú thích 20 Button Chọn để thay đổi sang chế độ xem văn 10 Button Phóng to chế độ xem 11 Button Thu bé chế để xem 12 Button Chọn để đóng chế độ xem chi tiết Pdf view Chế độ xem tài liệu chọn dạng file pdf STT Bảng 3-4: Bảng thích giao diện xem chi tiết tài liệu 13 Thay đổi chế độ xem chi tiết 3.1.5 Hình 3-5: Giao diện xem chi tiết tài liệu dạng văn STT 16 Loại Chú thích Component Các chương mục tài liệu chia thành thành phần riêng biệt chứa điều khoản bên Bảng 3-5: Bảng thích giao diện thay đổi chế độ xem chi tiết 14 TÀI LIỆU KHAM THẢO [1] Tiem Vu, “JAMstack gì? Kiến trúc phát triển website JAMstack” 2021 [Trực tuyến] Địa chỉ: #1 JAMstack gì? Kiến trúc phát triển website JAMstack (seothongminh.net) [Truy cập 18/12/2021] [2] Nguyễn Nhân, “GATSBY JS LÀ GÌ” 2020 [Trực tuyến] Địa chỉ: Gatsby Js - Fullstack Station [Truy cập 20/12/2021] [3] Đào Thái Sơn, “Tự động website JAM Stack lên Netlify” 2020 [Trực tuyến] Địa chỉ: Tự động website JAM Stack lên Netlify (viblo.asia) [Truy cập 20/12/2021] [4] Luke Joliat, “GatsbyJS: A complete tutorial with examples” 2021 [Trực tuyến] Địa chỉ: Is Gatsby really that great? - LogRocket Blog [Truy cập 20/12/2021] [5] Tomasz Grabski, “TOP JAMSTACK FRAMEWORKS TO CHOOSE IN 2021” 2021 [Trực tuyến] Địa chỉ: Top Jamstack Frameworks to Choose in 2021 - Pagepro [Truy cập 24/12/2021] 15 ... tài ? ?Hệ thống tra cứu luật giao thông? ?? 1.2 Tác nhân hệ thống Người dùng hệ thống tồn người có khả sử dụng thiết bị có kết nối internet có nhu cầu tìm kiếm thông tin liên quan tới luật giao thông. .. TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN TRÙNG DƯƠNG – 18520030 KHÓA LUẬN TỐT NGHIỆP HỆ THỐNG TRA CỨU LUẬT GIAO THÔNG Traffic laws searching system SINH... hệ thống tra cứu luật tại, em xác định yêu cầu mà hệ thống cần phải đáp ứng yêu cầu sau:  Lưu trữ liệu: tài liệu luật, thông tin tài liệu luật  Xem liệu: xem tài liệu dạng pdf, dạng văn  Tra