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[.]
Trang 1TRƯỜ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
Trang 2LỜ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ôngTin và Truyền Thông Việt Hàn đã tạo điều kiện thuận lợi cho phép em hoànthành đồ án chuyên ngành 1 này
Em xin chân thành cảm ơn sự giúp đỡ và đóng góp ý kiến nhiệt tình củathầy Lê Tân Đã nhiệt tình giúp đỡ em trong suốt quá trình học tập và nghiêncứu
Trang 3CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 4
1.1 K HÁI NIỆM WEBSERVER 4
1.2 G IỚI THIỆU VỀ N ODE JS 6
1.3 E XPRESS JS 7
1.4 K HÁI NIỆM JWT 8
1.5 K HÁI NIỆM P OSTGRE SQL 8
1.6 G IỚI THIỆU VỀ R EACT -N ATIVE 9
CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11
2.1 P HÂN TÍCH CÁC CHỨC NĂNG CHÍNH CỦA ỨNG DỤNG 11
2.1.1 Hiển thị danh các bãi đỗ xe gần bạn 11
2.1.2 Chức năng tìm kiếm bãi đỗ xe 11
2.1.3 Chức năng đăng ký tài khoản 11
2.1.4 Chức năng ra vào bãi đỗ xe bằng mã QR 11
2.1.5 Các chức năng của admin 11
2.2 P HÂ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 P HÂN TÍCH CHỨC NĂNG HỆ THỐNG VÀ BIỂU ĐỒ U SE CASE 13
2.3.1 Đặc tả Use case 15
2.4 C Ơ SỞ DỮ LIỆU 18
CHƯƠNG 3 XÂY DỰNG VÀ TRIỂN KHAI CHƯƠNG TRÌNH 19
3.1 G IAO DIỆN CHÍNH CỦA HỆ THỐNG 19
3.1.1 Giao diện đăng nhập và đăng ký 19
3.1.2 Giao diện chính của app 20
3.1.3 Giao diện thêm bãi đỗ và kiểm tra thông tin bãi đỗ của 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 và lựa chọn bãi đỗ 23
3.1.6 Giao diện web của hệ thống 24
DANH MỤC CÁC TỪ VIẾT TẮT
Trang 4TẮT NỘI DUNG
5E Engagement, Exploration, Explanation, Elaboration,
Evaluation STEM Science Technology Engineering Mathematics
Trang 5MỞ ĐẦU
1 Giới thiệu
Trải qua nhiều thập kỷ oto đã trở thành một phương tiện gắn bó mật thiếtđối với đời sống của con người Và cho tới nay nền công nghiệp oto ngàycàng phát triển và số lượng oto tăng chóng mặt từng ngày Sự gia tăng ngàycàng nhiều về số lượng xe oto điều này cũng phản ánh sự phát triển của mộtquốc gia Song song với sự phát triển đó người ta đặt ra là vấn đề xay dựngnhững bãi đỗ xe phục vụ cho người dân trong việc đi lại thuận tiện Nhưngvới đời sống công nghiệp như hiện nay thì việc xây dựng các bãi giữ xe códiện tích lớn là một vấn đề nan giải trên, hiện nay cần phải xây dựng bãi đỗ
xe theo kiểu tiết kiệm diện tích mặt bằng càng nhỏ càng tốt
Chính vì vậy các nước công nghiệp trên thế giới đã ứng dụng công nghệkhoa học – điều khiển tự động vào để giải quyết bài toán này Đó là xây dựngmột bãi đỗ xe tự động
Nắm bắt được xu hướng đó nên chúng em quyết định chọn đề tài “Xâydựng app tìm kiếm bãi đỗ xe TP Đà Nẵng” này để thực hiện đồ án chuyênngành 2 của mình Qua đó app được thực hiện sẽ có giao diện thân thiện vớingười dùng và dễ dàng sử dụng với mọi đối tượng
2 Mục tiêu của đề tài
Khách hàng có thể chọn bãi đỗ để quét mã QR Sau khi khách hàng quét
mã, thông tin sẽ được chuyển về lưu vào cơ sở dữ liệu thông qua cơ sở dữliệu
Xây dựng thành công ứng dụng đỗ xe trên 2 nền 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 hiện được các yêu cầu đề ra của đề tài
Ứng dụng bãi đỗ xe đã phần nào xây dựng và đáp ứng được một số chứcnăng chính:
Trang 6Checkin, checkout bãi đỗ thông qua mã QR.
Xử lý trạng thái của bãi đỗ xe
Cho phép tìm kiếm các bãi đỗ xe trong thành phố
Giao diện thân thiện, dễ sử dụng
3 Nội dung và kế hoạch thực hiện
Ứng dụng bãi đỗ xe chạy đa nền tảng được thực hiện dựa trên hai mụcđích chính sau :
Thứ nhất là nghiên cứu các công nghệ lập trình như : lập trình ứng dụngReact Native, lập trình cơ sở dữ liệu bằng NodeJS, PostgreSQL, JWT
Thứ hai là phát triển ứng dụng có tính thực tiễn cao, có khả năng triểnkhai ứng dụng vào thực tế, giúp những người có nhu cầu tìm kiễm bãi đỗ xetrong thành phố có thể thao tác dễ dàng và tiện lợi
4 Bố cục báo cáo
Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như
sau:
Chương 1 Cơ sở lý thuyết Trong chương này, chúng ta sẽ tìm hiểu các
khái niệm, đặc điểm, công nghệ phát triển
Chương 2 Phân tích thiết kế hệ thống Qua chương này ta có thể hiểu rõ
hơn về các chức năng chính của ứng dụng, phân tích đặc tả các yêu cầu vàphân tích các chức n của hệ thống
Chương 3 Xây dựng và triển khai chương trình Qua đây ta có thể thấy
cách xây dựng và triển khai một chương trình bãi đỗ xe
Cuối cùng là Kết luận, Tài liệu tham khảo liên quan đến đề tài.
Trang 7Chương 1. CƠ SỞ LÝ THUYẾT
1.1 Khái niệm webserver
Webserver là một dịch vụ công nghệ thông tin xử lý các yêu cầu thôngqua HTTP, các giao thức mạng cơ bản khác để phân phối thông tin trên worldwide web Các chức năng chính của web server là để lưu trữ, xử lý và cungcấp các trang web cho người dùng Những dạng dữ liệu thường xuyên truyềntải giữa một web server với một ứng dụng client là các trang tài liệu HTML
có thể bao gồm hình ảnh, kịch bản, file khác ứng dụng client có thể là mộttrình duyệt web, một ứng dụng có thể đọc và truy xuất đến web server ứngdụng client truy cập đến web server bằng cách thực hiện một yêu cầu một tàinguyên nào đó trên server bằng các sử dụng HTTP, khi server nhận được yêucầu sẽ thực hiện xử lý yêu cầu và đáp ứng nội dung tài nguyên cần yêu cầu(nếu có) cho client
Hiện nay có nhiều các để xây dựng và chạy một web server được phânbằng ngôn ngữ sử dụng, xử lý trên web server bao gồm:
Web server PHP sử dụng ngôn ngữ lập trình PHP để xử lý các yêu cầu từclient và MySQL để lưu trữ cơ sở dữ liệu ưu điểm của web server PHP là: Sửdụng ngôn ngữ lập trình PHP là một ngôn ngữ mã nguồn mở, rất phổ biến và
dễ dàng viết mã Bên cạnh đó là sử dụng hệ quản trị cơ sở dữ liệu MySQL làmột cơ sở dữ liệu dễ quản lý, tốc độ xử lý cao và dễ dàng sử dụng tuy nhiêncòn một số những nhược điểm của web server PHP như: PHP là một ngônngữ dạng chủ yếu và chỉ chạy được trên ứng dụng web Hệ quản trị cơ sở dữliệu MySQL bảo mật chưa cao, quá trình phục hồi chậm chạp, không hỗ trợtruy vấn con và các thủ tục lưu trữ, bẫy lỗi…
Trang 8Web server Java sử dụng ngôn ngữ java để xử lý các yêu cầu từ client vàOracle Database để lưu trữ cơ sở dữ liệu Ưu điểm của web server Java là: sửdụng ngôn ngữ lập trình Java là một ngôn ngữ mã nguồn mở, rõ rang và táchbiệ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ị cơ sở dữ liệu sử dụng là Orcale Database là một hệquản trị cơ sở dữ liệu lớn, được tích hợp các công cụ quản trị, tính bảo mậtcao và thời gian đáp ứng nhanh Ngoài những ưu điểm trên thì Web serverJava cũ có những 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 để có thể chạy tốt, hệ quản trị cơ sở dữ liệu Orcalechưa được phổ biến, phí bản quyền tương đối cao, không tương thích với cáccông nghệ của Miccrosoft.
Web server Net sử dụng ngôn ngữ lập trình C# để xử lý các yêu cầu từclient và SQLServer để lưu trữ cơ sở dữ lieu Ưu điểm của web server Net là:
sử dụng ngôn ngữ lập trình C# là ngôn ngữ lập trình đơn giản hướng đốitượ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ậptrình Hệ quản trị cơ sở dữ liệu hay được sử dụng là SQLServer là một hệquản trị cơ sở dữ liệu lớn, mạnh mẽ, cấu trúc chặt chẽ, duy nhất, tính bảo mậtcao, dễ dàng sử dụng Web server Net còn có một số nhược điểm như: ngônngữ C# chỉ hỗ trợ trên môi trường windown, SQLServer bảo mật cao nên phảicấu hình chính xác mới có thể sử dụng
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ởtrên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được cácứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng Là Javascriptnhưng nó có một số tiến hóa đáng kể Trong một thời gian dài Javascript đượcxem như là một cái gì đó nhỏ bé và thỉnh thoảng được dùng làm một chúthiệu ứng cho trang web Tuy nhiên giờ đây Javascript trở thành một ngôn ngữchính và được sử dụng nhiều như C, Ruby, PHP, và như nhiều ngôn ngữ khácnữa
Tuy nhiên, Node.js cung cấp một môi trường phía máy chủ nữa mà từtrước tới nay Javascript không làm được điều này ngoài ra cho phép chúng tacũng sử dụng ngôn ngữ JavaScript để tạo các trang web Nói chung nó thaythế các ngôn ngữ máy chủ như PHP, Java EE, v.v…
JavaScript là ngôn ngữ dựa trên các sự kiện, do đó Node.js cũng vậy.Chính vì vậy toàn bộ cách viết các ứng dụng đã thay đổi Dẫn tới việc Node.js
sẽ tận dụng toàn bộ sức mạnh và tốc độ của nó có được
Từ những ưu điểm và nhược điểm kể trên của bốn cách xây dựng webserver em chọn các xây dựng web trên trên nền NodeJS sử dụng ngôn ngữ lậptrình JavaScrip và hệ quản trị PostgreSQL để lưu trữ dữ liệu
Trang 91.2 Giới thiệu về NodeJS
NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine –trình thông dịch thực thi mã JavaScript, giúp xây dựng các ứng dụng web mộtcách đơn giản và dễ dàng mở rộng
NodeJS được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trênnhiều hệ điều hành khác nhau: OS X, Microsoft Windows, Linux
NodeJS được viết bằng JavaScript với cộng đồng người dùng lớn mạnh.Nếu bạn cần hỗ trợ gì về NodeJS, sẽ nhanh chóng có người hỗ trợ bạn
Tốc độ xử lý nhanh Nhờ cơ chế xử lý bất đồng độ (non-blocking), NodeJS
có thể xử lý hàng ngàn kết nối cùng lúc mà không gặp bất cứ khó khănnào
Dễ dàng mở rộng Nếu bạn có nhu cầu phát triển website thì tính năng dễdàng mở rộng của NodeJS là một lợi thế cực kỳ quan trọng
I/O là Input/Output Nó có thể là bất cứ thứ gì từ đọc/viết các file nội bộcho đến tạo HTTP đến API
I/O tốn thời gian và do đó nó sẽ chặn các chức năng khác
Blocking I/O (trái) và Non-Blocking I/O (phải)
Đó là lý do non-blocking xuất hiện
Non-blocking I/O
Mặt khác, sử dụng request non-blocking, bạn có thể request dữ liệu chouser2 mà không phải đợi phản hồi request từ user1 Bạn có thể bắt đầu cả 2request song song
Trang 10Non-blocking I/O loại bỏ nhu cầu đa luồng vì server có thể xử lý nhiềurequest cùng một lúc.
1.3 ExpressJS
Expressjs là một framework được xây dựng trên nền tảng của Nodejs
Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặcmobile. Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùngmạnh mẽ và dễ sử dụng
Tổng hợp một số chức năng chính của Expressjs như sau:
Thiết lập các lớp trung gian để trả về các HTTP request
Define router cho phép sử dụng với các hành động khác nhau dựa trênphương thức HTTP và URL
Cho phép trả về các trang HTML dựa vào các tham số
Trang 111.4 Khái niệm JWT
JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa haibên Client – Server, các thông tin trong chuỗi JWT được định dạngbằng JSON Trong đó chuỗi Token phải có 3 phần là header, phần payload vàphần signature được ngăn bằng dấu “.”
Khi nào nên dùng JSON Web Token?
Authentication: Đây là trường hợp phổ biến nhất thường sử dụng JWT.
Khi người dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phíangười dùng sẽ chứa thêm mã JWT Điều này cho phép người dùng được cấpquyền truy cập vào các url, service, và resource mà mã Token đó cho phép.Phương pháp này không bị ảnh hưởng bởi Cross-Origin Resource Sharing(CORS) do nó không sử dụng cookie
Trao đổi thông tin: JSON Web Token là 1 cách thức khá hay để truyền
thông tin an toàn giữa các thành viên với nhau, nhờ vào phần signature của
nó Phía người nhận có thể biết được người gửi là ai thông qua
phần signature Và chữ ký được tạo ra bằng việc kết hợp cả phần header,
payload lại nên thông qua đó ta có thể xác nhận được chữ ký có bị giả mạohay không
1.5 Khái niệm PostgreSQL
PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng(object-relational database management system) có mục đích chung, hệ thống
cơ sở dữ liệu mã nguồn mở tiên tiến nhất hiện nay
PostgreSQL được phát triển dựa trên POSTGRES 4.2 tại phòng khoa họcmáy tính Berkeley, Đại học California
Trang 12PostgreSQL được thiết kế để chạy trên các nền tảng tương tự UNIX Tuynhiên, PostgreSQL sau đó cũng được điều chỉnh linh động để có thể chạyđược trên nhiều nền tảng khác nhau như Mac OS X, Solaris và Windows.PostgreSQL là một phần mềm mã nguồn mở miễn phí Mã nguồn củaphần mềm khả dụng theo license của PostgreSQL, một license nguồn mở tự
do Theo đó, bạn sẽ được tự do sử dụng, sửa đổi và phân phối PostgreSQLdưới mọi hình thức
PostgreSQL không yêu cầu quá nhiều công tác bảo trì bởi có tính ổnđịnh cao Do đó, nếu bạn phát triển các ứng dụng dựa trên PostgreSQL, chiphí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác
PostgreSQL sở hữu một hệ tính năng đa dạng giúp hỗ trợ các nhà pháttriển xây dựng app, các nhà quản trị bảo vệ toàn vẹn dữ liệu, và tạo ra mộtmôi trường chịu lỗi fault-tolerant giúp bạn quản lý dữ liệu bất kể tập dữ liệulớn hay nhỏ Bên cạnh hệ thống nguồn mở và miễn phí, PostgreSQL cũng cókhả năng mở rộng tuyệt vời Ví dụ, bạn có thể định nghĩa các kiểu dữ liệuriêng của bạn, xây dựng các hàm tùy chỉnh, hay viết mã từ các ngôn ngữ lậptrình khác nhau mà không cần biên dịch lại cơ sở dữ liệu!
PostgreSQL tuân theo tiêu chuẩn SQL nhưng không mâu thuẫn với cáctính năng truyền thống hay có thể dẫn đến các quyết định kiến trúc gây hại.Nhiều tính năng theo tiêu chuẩn SQL được hỗ trợ, tuy nhiên đôi khi có thể có
cú pháp hoặc hàm hơi khác một chút
1.6 Giới thiệu về React-Native
Ngày nay, lập trình React native đã trở nên phổ biến hơn bao giờ hết.Các ứng dụng mới được tạo ra có dính dáng tới React native ngày càng nhiềuhơn Thậm chí ngay cả các ứng dụng lớn như Facebook, Uber, AirBnB và rấtnhiều công ty khác cũng lựa chọn lập trình React native để xây dựng các ứngdụng của họ
React native là một framework được phát triển bởi Facebook với mụcđích giải quyết bài toán hiệu năng của Hybrid Cùng với đó, nó cũng giúp giảiquyết vấn đề chi phí khi phải viết nhiều loại ngôn ngữ native cho các nền tảng
di động
Ứng dụng được viết bằng React native được chia thành 2 phần khácnhau là phần xử lý và phần hiển thị Trong đó, phần hiển thị sẽ được biên dịchbởi javascript và map với các component từ hệ thống Ví dụ như touch, tab,chuyển hướng, Chúng được lấy cảm hứng bởi Virtual DOM của React JS,tất cả view sẽ được hiển thị trên một cây DOM ảo, sau đó sẽ được Reactnative render lại thông qua native view
Trang 13Theo đó, phần xử lý vẫn sẽ được thực hiện trực tiếp bởi ngôn ngữjavascript, các biểu thức sẽ được xử lý dưới bộ core thực thi Javascript màkhông cần phải thông dịch qua Java hay Objective – C/ Swift.
Expo:
Expo là một framework dùng để phát triển nhanh các ứng dụng ReactNative Nó giống như Laravel hay Symphony cho các nhà phát triển PHP,hoặc Ruby on Rails cho các nhà phát triển Ruby Expo cung cấp một lớp nằmtrên cùng của React Native API để giúp chúng dễ sử dụng và quản lý Nó còncung cấp các công cụ giúp bạn dễ dàng khởi tạo và kiểm thử các ứng dụngReact Native Sau cùng, nó cung cấp các thành phần UI và các dịch vụthường chỉ có sẵn khi bạn cài đặt một thành phần React Native của bên thứ
ba Tất cả đều được cung cấp thông qua Expo SDK
Expo là một framework đầy đủ chức năng với rất nhiều hỗ trợ cho cácAPI thông dụng trên Android hoặc iOS Điều này có nghĩa là nó đã bao quátcho bạn hầu hết các chức năng mà các ứng dụng thường cần Vì vậy, thườngkhông cần phải tìm bên ngoài Expo để cài đặt các tính năng gốc
Trang 14Chương 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG
2.1 Phân tích các chức năng chính của ứng dụng
Một số chức năng chính của ứng dụng:
2.1.1 Hiển thị danh các bãi đỗ xe gần bạn.
Chức năng này sẽ hiển thị danh sách thông tin của bãi đỗ xe xung quangbạn khi chạy ứng dụng
Bãi đỗ xe sẽ được liệt kê trong một bản đồ bằng các địa điểm chỉ dẫnbạn đến đó
Người dùng có thể lọc danh sách bãi đỗ xe
2.1.2 Chức năng tìm kiếm bãi đỗ xe.
Chức năng này cho phép người dùng có thể tìm ra những bãi đỗ xe cónội dung đúng với từ khóa
2.1.3 Chức năng đăng ký tài khoản.
Chức năng này cho phép người sử dụng đăng ký một tài khoản để sửdụng đặt hàng cần mua trên ứng dụng
Thông tin đăng ký bao gồm email, tên đầy đủ, mật khẩu, tạo tài khoảnbãi đỗ
2.1.4 Chức năng ra vào bãi đỗ xe bằng mã QR.
Chức năng này cho phép người dùng sử dụng đã đăng ký tài khoản.Người dùng sử dụng mã QR để ra vào bãi giữ xe để thông qua vào bãi giữ xe, và dùng nó để mang ra xe ra khỏi bãi đỗ xe Khi quét mã bạn có thể chọn vị trí để đậu xe mà mình mong muốn
2.1.5 Các chức năng của admin.
Cập nhập danh sách các bãi đỗ xe (Thêm, sửa, xóa)
Quản lý danh sách khách hàng đã đăng ký
Xem danh sách bãi đỗ của các khách hàng đã sử dụng
Thống kê lịch sử của bãi đỗ
2.2 Phân tích đặt tả các yêu cầu
Trang 15Luồng dữ liệu ra.
Hiển thị trong lịch sử bãi đỗ xe đã từng tìm
Luồng dữ liệu ra:
Thông báo kết quả
+ Thông báo chưa nhập đầy đủ các thông tin đăng ký
+ Thông báo tài khoản đã tồn tại
Thông báo đã đăng nhập thành công Và vào màn hình chính của chươngtrình
Về phía quản trị
2.2.3 Cập nhập thông tin bãi đỗ
Tác vụ này thực hiện khi người quản lý muốn đưa ra thông tin bãi đậu
xe, thêm, xóa, sửa khi cần thiết
Luồng dữ liệu vào:
Thông tin bãi đỗ xe: (Vị trí bãi đỗ, Mã bãi đỗ, Tên bãi đỗ, Giá đỗ, Mô tả)