Mau viet luan van tot nghiep TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN ĐỒ ÁN CHUYÊN NGÀNH 2 XÂY DỰNG APP TÌM KIẾM BÃI ĐỖ XE TP ĐÀ NẴNG i LỜI CẢM ƠN Lời đầu tiên, em xin chân thành cảm[.]
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN ĐỒ ÁN CHUYÊN NGÀNH XÂY DỰNG APP TÌM KIẾM BÃI ĐỖ XE TP ĐÀ NẴNG i LỜI CẢM ƠN Lời đầu tiên, em xin chân thành cảm ơn trường Đại Học Công Nghệ Thông Tin Truyền Thông Việt Hàn tạo điều kiện thuận lợi cho phép em hoàn thành đồ án chuyên ngành Em xin chân thành cảm ơn giúp đỡ đóng góp ý kiến nhiệt tình thầy Lê Tân Đã nhiệt tình giúp đỡ em suốt trình học tập nghiên cứu Table of Contents ii CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 KHÁI NIỆM WEBSERVER .4 1.2 GIỚI THIỆU VỀ NODEJS 1.3 EXPRESSJS 1.4 KHÁI NIỆM JWT 1.5 KHÁI NIỆM POSTGRESQL .8 1.6 GIỚI THIỆU VỀ REACT-NATIVE CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG .11 2.1 PHÂN TÍCH CÁC CHỨC NĂNG CHÍNH CỦA ỨNG DỤNG 11 2.1.1 Hiển thị danh bãi đỗ xe gần bạn 11 2.1.2 Chức tìm kiếm bãi đỗ xe 11 2.1.3 Chức đăng ký tài khoản .11 2.1.4 Chức vào bãi đỗ xe mã QR .11 2.1.5 Các chức admin .11 2.2 PHÂN TÍCH ĐẶT TẢ CÁC YÊU CẦU 12 2.2.1 Chọn bãi đỗ xe 12 2.2.2 Đăng ký 12 2.2.3 Cập nhập thông tin bãi đỗ 13 2.3 PHÂN TÍCH CHỨC NĂNG HỆ THỐNG VÀ BIỂU ĐỒ USE CASE .13 2.3.1 Đặc tả Use case 15 2.4 CƠ SỞ DỮ LIỆU 18 CHƯƠNG XÂY DỰNG VÀ TRIỂN KHAI CHƯƠNG TRÌNH 19 3.1 GIAO DIỆN CHÍNH CỦA HỆ THỐNG 19 3.1.1 Giao diện đăng nhập đăng ký 19 3.1.2 Giao diện app .20 3.1.3 Giao diện thêm bãi đỗ kiểm tra thông tin bãi đỗ Provider 21 3.1.4 Giao diện thay đổ thông tin người dung .22 3.1.5 Giao diện quét mã QR lựa chọn bãi đỗ 23 3.1.6 Giao diện web hệ thống 24 DANH MỤC CÁC TỪ VIẾT TẮT iii TẮT VIẾT 5E STEM NỘI DUNG Engagement, Evaluation Exploration, Explanation, Science Technology Engineering Mathematics iv Elaboration, MỞ ĐẦU Giới thiệu Trải qua nhiều thập kỷ oto trở thành phương tiện gắn bó mật thiết đời sống người Và công nghiệp oto ngày phát triển số lượng oto tăng chóng mặt ngày Sự gia tăng ngày nhiều số lượng xe oto điều phản ánh phát triển quốc gia Song song với phát triển người ta đặt vấn đề xay dựng bãi đỗ xe phục vụ cho người dân việc lại thuận tiện Nhưng với đời sống cơng nghiệp việc xây dựng bãi giữ xe có diện tích lớn vấn đề nan giải trên, cần phải xây dựng bãi đỗ xe theo kiểu tiết kiệm diện tích mặt nhỏ tốt Chính nước công nghiệp giới ứng dụng công nghệ khoa học – điều khiển tự động vào để giải tốn Đó xây dựng bãi đỗ xe tự động Nắm bắt xu hướng nên chúng em định chọn đề tài “Xây dựng app tìm kiếm bãi đỗ xe TP Đà Nẵng” để thực đồ án chuyên ngành Qua app thực có giao diện thân thiện với người dùng dễ dàng sử dụng với đối tượng Mục tiêu đề tài Về lý thuyết Đề tài “Xây dựng app tìm kiếm bãi đỗ xe TP Đà Nẵng” ứng dụng chạy điện thoại sử dụng hệ điều hành Ứng dụng gồm: Phần ứng dụng chạy điện thoại phát triển đa tảng SDK Phần mềm quản lý cho phép người quản lý quản lý bãi đỗ xe, thêm bãi đỗ xe kiểm sốt thơng tin bãi đỗ Khách hàng chọn bãi đỗ để quét mã QR Sau khách hàng quét mã, thông tin chuyển lưu vào sở liệu thông qua sở liệu Xây dựng thành công ứng dụng đỗ xe tảng Xây dựng phần backend thông qua NodeJS Tìm hiểu cách thức checkin, checkout thơng qua mã QR Về chương trình Chương trình thực yêu cầu đề đề tài Ứng dụng bãi đỗ xe phần xây dựng đáp ứng số chức chính: Quản lý bãi đỗ xe Checkin, checkout bãi đỗ thông qua mã QR Xử lý trạng thái bãi đỗ xe Cho phép tìm kiếm bãi đỗ xe thành phố Giao diện thân thiện, dễ sử dụng Nội dung kế hoạch thực Ứng dụng bãi đỗ xe chạy đa tảng thực dựa hai mục đích sau : Thứ nghiên cứu công nghệ lập trình : lập trình ứng dụng React Native, lập trình sở liệu NodeJS, PostgreSQL, JWT Thứ hai phát triển ứng dụng có tính thực tiễn cao, có khả triển khai ứng dụng vào thực tế, giúp người có nhu cầu tìm kiễm bãi đỗ xe thành phố thao tác dễ dàng tiện lợi Bố cục báo cáo sau: Sau phần Mở đầu, báo cáo trình bày ba chương, cụ thể Chương Cơ sở lý thuyết Trong chương này, tìm hiểu khái niệm, đặc điểm, công nghệ phát triển Chương Phân tích thiết kế hệ thống Qua chương ta hiểu rõ chức ứng dụng, phân tích đặc tả yêu cầu phân tích chức n hệ thống Chương Xây dựng triển khai chương trình Qua ta thấy cách xây dựng triển khai chương trình bãi đỗ xe Cuối Kết luận, Tài liệu tham khảo liên quan đến đề tài Chương CƠ SỞ LÝ THUYẾT 1.1 Khái niệm webserver Webserver dịch vụ công nghệ thông tin xử lý yêu cầu thông qua HTTP, giao thức mạng khác để phân phối thông tin world wide web Các chức web server để lưu trữ, xử lý cung cấp trang web cho người dùng Những dạng liệu thường xuyên truyền tải web server với ứng dụng client trang tài liệu HTML bao gồm hình ảnh, kịch bản, file khác ứng dụng client trình duyệt web, ứng dụng đọc truy xuất đến web server ứng dụng client truy cập đến web server cách thực yêu cầu tài nguyên server sử dụng HTTP, server nhận yêu cầu thực xử lý yêu cầu đáp ứng nội dung tài nguyên cần yêu cầu (nếu có) cho client Hiện có nhiều để xây dựng chạy web server phân ngôn ngữ sử dụng, xử lý web server bao gồm: Web server PHP sử dụng ngôn ngữ lập trình PHP để xử lý yêu cầu từ client MySQL để lưu trữ sở liệu ưu điểm web server PHP là: Sử dụng ngôn ngữ lập trình PHP ngơn ngữ mã nguồn mở, phổ biến dễ dàng viết mã Bên cạnh sử dụng hệ quản trị sở liệu MySQL sở liệu dễ quản lý, tốc độ xử lý cao dễ dàng sử dụng nhiên số nhược điểm web server PHP như: PHP ngôn ngữ dạng chủ yếu chạy ứng dụng web Hệ quản trị sở liệu MySQL bảo mật chưa cao, q trình phục hồi chậm chạp, khơng hỗ trợ truy vấn thủ tục lưu trữ, bẫy lỗi… Web server Java sử dụng ngôn ngữ java để xử lý yêu cầu từ client Oracle Database để lưu trữ sở liệu Ưu điểm web server Java là: sử dụng ngôn ngữ lập trình Java ngơn ngữ mã nguồn mở, rõ rang tách biệt, dễ dàng viết mã, ngôn ngữ hướng đối tượng rõ rang, nhiều thư viện hỗ trợ lập trình Hệ quản trị sở liệu sử dụng Orcale Database hệ quản trị sở liệu lớn, tích hợp cơng cụ quản trị, tính bảo mật cao thời gian đáp ứng nhanh Ngồi ưu điểm Web server Java cũ có nhược điểm như: ngơn ngữ lập trình java cịn chậm chạp, cần phải cấu hình nhiều để chạy tốt, hệ quản trị sở liệu Orcale chưa phổ biến, phí quyền tương đối cao, khơng tương thích với công nghệ Miccrosoft Web server Net sử dụng ngôn ngữ lập trình C# để xử lý yêu cầu từ client SQLServer để lưu trữ sở lieu Ưu điểm web server Net là: sử dụng ngơn ngữ lập trình C# ngơn ngữ lập trình đơn giản hướng đối tượng, rõ ràng, tách biệt, mạnh mẹ, dễ dàng viết mã, nhiều thư viện hỗ trợ lập trình Hệ quản trị sở liệu hay sử dụng SQLServer hệ quản trị sở liệu lớn, mạnh mẽ, cấu trúc chặt chẽ, nhất, tính bảo mật cao, dễ dàng sử dụng Web server Net cịn có số nhược điểm như: ngôn ngữ C# hỗ trợ môi trường windown, SQLServer bảo mật cao nên phải cấu hình xác sử dụng Nodejs tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng Là Javascript có số tiến hóa đáng kể Trong thời gian dài Javascript xem nhỏ bé dùng làm chút hiệu ứng cho trang web Tuy nhiên Javascript trở thành ngơn ngữ sử dụng nhiều C, Ruby, PHP, nhiều ngôn ngữ khác Tuy nhiên, Node.js cung cấp môi trường phía máy chủ mà từ trước tới Javascript khơng làm điều ngồi cho phép sử dụng ngôn ngữ JavaScript để tạo trang web Nói chung thay ngơn ngữ máy chủ PHP, Java EE, v.v… JavaScript ngơn ngữ dựa kiện, Node.js Chính tồn cách viết ứng dụng thay đổi Dẫn tới việc Node.js tận dụng toàn sức mạnh tốc độ có Từ ưu điểm nhược điểm kể bốn cách xây dựng web server em chọn xây dựng web trên NodeJS sử dụng ngơn ngữ lập trình JavaScrip hệ quản trị PostgreSQL để lưu trữ liệu 1.2 Giới thiệu NodeJS NodeJS tảng xây dựng V8 JavaScript Engine – trình thơng dịch thực thi mã JavaScript, giúp xây dựng ứng dụng web cách đơn giản dễ dàng mở rộng NodeJS phát triển Ryan Dahl vào năm 2009 chạy nhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux NodeJS viết JavaScript với cộng đồng người dùng lớn mạnh Nếu bạn cần hỗ trợ NodeJS, nhanh chóng có người hỗ trợ bạn Tốc độ xử lý nhanh Nhờ chế xử lý bất đồng độ (non-blocking), NodeJS xử lý hàng ngàn kết nối lúc mà khơng gặp khó khăn Dễ dàng mở rộng Nếu bạn có nhu cầu phát triển website tính dễ dàng mở rộng NodeJS lợi quan trọng I/O Input/Output Nó thứ từ đọc/viết file nội tạo HTTP đến API I/O tốn thời gian chặn chức khác Blocking I/O (trái) Non-Blocking I/O (phải) Blocking I/O Trong phương thức blocking, liệu user2 không bắt đầu liệu user1 xuất hình Nếu server web, phải bắt đầu thread cho user Nhưng JavaScript đơn luồng (tính chất “xong đến khác”) Và điều làm JavaScript không phù hợp cho tác vụ đa luồng Đó lý non-blocking xuất Non-blocking I/O Mặt khác, sử dụng request non-blocking, bạn request liệu cho user2 mà đợi phản hồi request từ user1 Bạn bắt đầu request song song Non-blocking I/O loại bỏ nhu cầu đa luồng server xử lý nhiều request lúc 1.3 ExpressJS Expressjs là framework xây dựng tảng của Nodejs Nó cung cấp tính mạnh mẽ để phát triển web mobile. Expressjs hỗ trợ method HTTP midleware tạo API vô mạnh mẽ dễ sử dụng Tổng hợp số chức Expressjs sau: Thiết lập lớp trung gian để trả HTTP request Define router cho phép sử dụng với hành động khác dựa phương thức HTTP URL Cho phép trả trang HTML dựa vào tham số + Khi chọn vào thao tác với chức thêm hệ thơng hiển thị giao diện cho phép nhập thông tin bãi đỗ, sau nhập, hệ thống kiểm tra tính hợp lệ mã bãi đỗ nhập (không trùng với mã bãi đỗ tồn liệu) + Khi người quản lý chọn mục xóa hệ thống hiển thị bảng yêu cầu xác nhận quản lý, sau người quản lý xác nhận mật hệ thống kiểm tra mật liệu hệ thống có phải quản lý hay khơng? Nếu phải hệ thống hiển thị bảng u cầu xác nhận xóa thơng tin bãi đỗ xe Luồng liệu ra: Thông báo hộp thoại trình cập nhập thành cơng/ thất bại + Hiển thị giao diện cho chức sửa thông tin bãi đỗ + Hiển thị giao diện cho phép thêm bãi đỗ 2.3 Phân tích chức hệ thống biểu đồ Use case Người dùng: Đăng ký, đăng nhập Tìm kiếm bãi đỗ Xem mơ tả bãi đỗ Thiết lập hồ sơ người dùng Xem thơng tin nơi đỗ xe Thanh tốn Admin: Quản lý user Quản lý bãi đỗ xe Quản trị hệ thống Thống kê lịch sử 12 Biểu đồ Use case hệ thống chung Biểu đồ Use case người dùng 13 Biểu đồ Use case quản lý hệ thống 2.3.1 Đặc tả Use case Đặc tả use case đăng ký tài khoản: Tên Use Case Use Case Đăng ký tài khoản Actor Người dùng Tóm tắt Use Case mơ tả q trình actor đăng ký làm thành viên hệ thống Dòng kiện Use Case bắt đầu actor nhấp link “Login” nhấn nút “Tạo tài khoản mới” + Dòng kiện chính: Hệ thống hiển thị trang thơng tin cho actor đăng ký gồm phần: - Phần “Đăng nhập” gồm có trường “Tên tài khoản” “Password” - Phần “Các thơng tin khác” gồm có trường: “Email, nhập lại mật khẩu” Actor nhập thông tin theo yêu cầu nhấn nút “Đăng ký” Hệ thống kiểm tra thông tin actor nhập vào 14 Usercase kết thúc + Dòng kiện khác: Nếu dịng kiện số 3, hệ thống kiểm tra thơng tin actor nhập khơng xác, hệ thống hiển thị thông báo lỗi Use Case kết thúc Nếu dòng kiện số 2, actor nhấn nút “Hủy bỏ” Use Case kết thúc Đặc tả Use Case đăng nhập: Tên Use Case Use Case Đăng nhập Actor Người dùng, admin Tóm tắt Use Case mơ tả q trình actor đăng nhập vào hệ thống Dịng kiện Use Case bắt đầu actor nhấn vào link “Login” giao diện + Dịng kiện chính: Hệ thống hiển thị trang thông tin cho actor đăng nhập gồm có “tài khoản” “mật khẩu” Actor nhập tài khoản mật Actor nhấn nút “Đăng nhập” Hệ thống kiểm tra thông tin actor nhập vào Hệ thống hiển thị trang chủ Moodle Usercase kết thúc + Dòng kiện khác: Tại dòng kiện 4, hệ thống kiểm tra tài khoản mật actor nhập sai, hệ thống hiển thị thông báo lỗi Use Case kết thúc Đặc tả Use Case tìm kiếm bãi đỗ xe Tên Use Case Use Case tìm kiếm bãi đỗ xe 15 Actor Người dùng Admin Tóm tắt Use Case mơ tả q trình actor tìm kiếm bãi đỗ xe Dịng kiện Use Case bắt đầu actor muốn tìm kiếm tìm kiếm bãi đỗ xe + Dịng kiện chính: Actor nhập tên từ khóa cho khóa học cần tìm kiếm vào “Tìm kiếm bãi đỗ xe” nhấn nút “tìm kiếm” Hệ thống hiển thị trang “Kết tìm kiếm” với bãi đỗ xe tìm Usercase kết thúc + Dịng kiện khác: Khơng có Đặc tả Use Case thêm bãi đỗ xe Tên Use Case Use Case thêm bãi đỗ xe Actor Admin Tóm tắt Use Case mơ tả q trình quản trị viên thêm bãi đỗ xe Dịng kiện Use Case bắt đầu quản trị chọn: Admin-> Thêm bãi đỗ xe mới->nhấn nút “Thêm bãi đỗ xe mới” + Dịng kiện chính: Hệ thống hiển thị trang “thêm đỗ xe mới” bao gồm phần: - Phần tên bãi đỗ xe, vị trí, số lượng xe đỗ, mơ tả bãi đỗ, giá cho lần đỗ Actor nhập chọn thông tin theo yêu cầu Actor nhấn nút “Add park item” Hệ thống lưu thông tin actor nhập xuống sở liệu Điều kiện Actor phải đăng nhập 16