TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN 1: XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ô TÔ

ĐẠ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 HUỲNH QUANG TRUNG PHAN NGỌC QUANG ĐỒ ÁN 1 XÂY DỰNG ỨNG DỤNG TÌM KIẾM BÃI ĐỖ XE Ô TÔ (Car parking finder) TP H.

TỔNG QUAN

Khảo sát hiện trạng

1.1.1 Nhu cầu thực tế đề tài

Hiện nay, quá trình đô thị hóa, hiện đại hóa diễn ra dẫn đến việc sử dụng các phương tiện cá nhân tăng cao Từ đó nhu cầu về tìm kiếm bãi đỗ xe khi đi ra ngoài là điều cần thiết của mọi người Các thành phố lớn phát triển hạ tầng chưa đồng đều, chưa xem trong hạ tầng bãi đỗ Từ đó, ta thấy cơ sở hạ tầng và nhu cầu không thỏa mãn, dẫn đến việc khó khăn khi tìm kiếm bãi đỗ xe Do đó, nhóm quyết định xây dựng phần mềm Tìm kiếm bãi đỗ xe

1.1.2 Khảo sát một số ứng dụng hiện có

1.1.2.1 Parking Map - Bản đồ Offline bãi đỗ xe

Parking Map là một bản đồ về vị trí các bãi đỗ xe Ô tô tại địa bàn Thành phố Hồ Chí Minh và Thủ đô Hà Nội Đặc biệt Parking Map có thể sử dung Offline mà không cần kết nối internet Parking Map khởi động nhanh và gọn nhẹ rất thích hợp để các lái xe sử dụng để tra cứu bãi đỗ xe xung quanh khi cần thiết một cách nhanh chóng nhất

Xem bản đồ về vị trí các bãi đỗ xe

My Parking là dịch vụ được Viettel phát triển nhằm mục đích cung cấp cho người dùng thông tin về hiện trạng của các bãi đỗ xe theo thời gian thực; đồng thời cho phép người dùng dễ dàng đặt chỗ và thanh toán phí đỗ xe cho bãi đỗ xe mong muốn a Chức năng chính

- Cung cấp thông tin thời gian thực về hiện trạng các bãi đỗ xe

- Cho phép người dùng dễ dàng tìm kiếm và thực hiện đặt chỗ

- Hỗ trợ thanh toán với nhiều phương thức như Viettel Pay, SMS

- Giúp người dùng dễ dàng xem lịch sử đặt chỗ

- Tìm đường đi ngắn nhất đến bãi đỗ mong muốn một cách dễ dàng

Mục tiêu

- Giúp chủ xe dễ dàng tìm kiếm và đặt chỗ giữ xe nhanh nhất, thuận tiện nhất

- Chủ xe có thể dễ dàng thay đổi các thông tin về xe, cá nhân

- Chủ xe có thể theo dõi được lịch sử đặt chỗ cũng như những chỗ đã được đặt trước

- Chủ bãi đỗ xe dễ dàng kiểm soát được tình trạng đặt chỗ của bãi đỗ xe

- Giúp chủ bãi đỗ xe quản lý các bãi đỗ xe một cách thuận tiện nhất

• Đối với chủ xe o Quản lý tài khoản (đăng nhập, đăng ký, xác thực số điện thoại bằng OTP, khôi phục mật khẩu, đổi mật khẩu) o Tìm kiếm bãi đỗ xe o Chỉ đường đi đến bãi đỗ o Đặt chỗ o Quản lý danh sách xe o Kiểm tra lịch sử đặt chỗ o Thêm bãi đỗ xe yêu thích

• Đối với chủ bãi đỗ o Quản lý bãi đỗ xe o Quản lý đặt chỗ o Quản lý tài khoản (đăng nhập, đăng ký, đổi mật khẩu, khôi phục mật khẩu)

• Đối với nhân viên bãi đỗ o Quét mã QR kiểm tra thông tin o Kiểm tra lịch sử đặt xe

1.2.2.2 Yêu cầu phi chức năng

• Yêu cầu về giao diện:

- Giao diện thân thiện, bố cục hợp lý, dễ sử dụng

- Giao diện thống nhất, đồng bộ, không gây bất ngờ cho người sử dụng

- Màu sắc, vị trí, hiển thị của các component có tính đồng bộ

• Yêu cầu về độ tin cậy, bảo mật:

- Có sử dụng phân quyền cho từng loại người dùng

- Dữ liệu tài khoản người dùng được bảo mật

- Dữ liệu không bị xóa hoàn toàn, có thể khôi phục lại

• Yêu cầu về độ tương thích: o Đối với web

- Electron: 2 version gần nhất o Đối với Mobile

- Tương thích cả trên IOS và Android

• Yêu cầu về khả năng phát triển:

- Dễ dàng nâng cấp tính năng đã có nhờ vào sự hệ thống hóa trong khâu xử lý

- Dễ dàng mở rộng khi có nhu cầu phát triển

• Yêu cầu về tính hiệu quả:

- Hệ thống quản lý dữ liệu một cách logic

- Hiệu năng ổn định tránh gây khó chịu cho người dùng

CƠ SỞ LÝ THUYẾT, TỔNG QUAN CÔNG NGHỆ

Thuật toán sử dụng

2.1.1 Thuật toán Bcrypt Để mật khẩu được an toàn ngay cả khi cơ sở dữ liệu của hệ thống bị rò rỉ, chúng ta cần băm mật khẩu trước khi sử dụng Vì tính chất của hàm băm là cùng 1 đầu vào thì kết quả sẽ luôn cho ra 1 giá trị không đổi, việc sử dụng các thuật toán băm thông thường dễ bị kẻ tấn công suy ra bằng các phương pháp như Dictionary Attack, Rainbrow Table Attack, …

Bcrypt là một thuật toán mã hoá mật khẩu đã được tạo ra bởi Niels Provos và David Mazières vào năm 1999, nó hoạt động dựa trên các thuật toán mã hóa Blowfish Nhằm tạo ra sự khó khăn, giảm tốc độ khi giải mã để tìm ra mật khẩu của các cuộc tấn công, Bcrypt sẽ tạo ra các chuỗi mã hoá ngẫu nhiên sau mỗi lần tạo ra

Bcrypt là sự kết hợp của cơ chế băm, yếu tố salt và stretching, cụ thể như sau:

- Giá trị băm không thể dịch ngược lại giá trị ban đầu

- Với cùng giá trị đầu vào, hàm băm luôn cho 1 kết quả đầu ra

- Đầu vào khác nhau sẽ cho các giá trị đầu ra khác nhau

Yếu tố salt: Giá trị đầu vào được thêm bởi 1 chuỗi ngẫu nhiên, giúp giảm bớt khả năng kẻ tấn công có dữ liệu được tính toán từ trước hoặc tốn nhiều thời gian để tìm ra hơn

Stretching: Các máy tính hiện nay có tốc độ xử lý rất nhanh, vì thế cơ chế này sẽ giúp làm chậm quá trình băm dữ liệu hay còn gọi là tăng tải, khiến kẻ tấn công tốn nhiều thời gian để có được dữ liệu băm

Hình 2.1 Tốc độ băm của 1 số thuật toán phổ biến 1

Bcrypt được chạy trên 2 pha:

- Pha 1: Hàm EksBlowfishSetup được gọi để chuẩn bị cho quá trình băm với chi phí mong muốn, salt và mật khẩu dùng cho khởi tạo trạng thái của eksblowfish Trong trường hợp mật khẩu không đủ tốt hoặc quá ngắn, nó sẽ được xử lý và tạo ra mật khẩu có độ dài lớn hơn Mục đích chính của bước này là tăng cường sức mạnh của key để làm chậm tốc độ tính toán từ đó giảm tốc độ của kẻ tấn công

Hình 2.2 Mã giải thuật toán băm Bcrypt 2

- Pha 2: Giá trị 192 bits OrpheanBeholderScryDoubt được mã hoá 64 lần sử dụng eksblowfish với chế độ ECB 3 Đầu ra của pha này là giá trị cost và 128 bits salt được ghéo với kết quả vòng lặp mã hoá

1 Nguồn: https://asecuritysite.com/encryption/bcrypt

3 ECB là viết tắt của: Block cipher mode of operation

Hình 2.3 Kết qủa cuối cùng của quá trình băm 4

Công nghệ sử dụng

Hình 2-4 Logo thư viện React 5

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 ở dưới Client

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít

9 thay đổi nhất trên DOM Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản:

- Virtual DOM: công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý React

JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/)

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render

Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

Hình 2-5 Logo thư viện React Redux 6

Redux là một predictable state management tool cho các ứng dụng Javascript Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậy Redux thường dùng kết hợp với React

6 Nguồn: https://react-redux.js.org/

Các thành phần trong Redux:

- Actions đơn giản là các events Chúng là cách mà chúng ta send data từ app đến Redux store Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission

Reducers là các hàm thuần túy nhận trạng thái hiện tại của ứng dụng, thực thi một action và trả về trạng thái mới Các trạng thái này được lưu trữ dưới dạng các đối tượng và xác định cách trạng thái của ứng dụng thay đổi khi một action được gửi đến store.

- Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods

Hình 2.6 Các thành phần của Redux 7

Hình 2-7 Logo thư viện Ant Design 8

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicker, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng

Ant Design hiện đang có hơn 76k star trên GitHub và hiện là thư viện UI lớn thứ 2 trên thế giới

Có thể coi Ant Design cho React là tập hợp của hầu hết các thư viện về React Dưới đây là danh sách các component mà nó cung cấp:

- Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps

- Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form,

InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select,

- Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table

- Feedback: Alert, Drawer, Modal, Message, Notification, Progress,

- Other: Anchor, BackTop, Divider, LocaleProvider

Ngoài ra, trong hệ sinh thái của Ant Design, còn có các thư viện như Ant Design Pro, Ant Design Chart, Ant Design Mobile, …

Tailwind css là một utility-first CSS framework nó hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, nó cũng có điểm chung giống như Bootstrap & điểm làm nó nổi bật hơn cả đó là chúng ta có thể tùy biến phát triển css theo cách mà chúng ta định nghĩa ra

Hình 2-9 Ví dụ về việc sử dụng tailwindcss

Hình 2-10 Giao diện của đoạn code bên trên

Express.js là một framework ứng dụng web có mã nguồn mở và miễn phí được xây dựng trên nền tảng Node.js xExpressJS được sử dụng để thiết kế và phát triển các ứng dụng web một cách nhanh chóng Để hiểu ExpressJS, người dùng chỉ cần phải biết JavaScript, do đó nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn đối với các lập trình viên và nhà phát triển đã thành thạo JavaScript trước đó

Vì ExpressJS là một framework của Node.js nên hầu hết các mã đã được viết sẵn cho các lập trình viên làm việc Bạn có thể tạo các ứng dụng web cho một trang, nhiều trang hoặc kết hợp lại bằng cách sử dụng ExpressJS framework này khá nhẹ, giúp tổ chức các ứng dụng web ở phía máy chủ thành một kiến trúc MVC hoàn hảo hơn

PHÂN TÍCH THIẾT KẾ ỨNG DỤNG

Use case

Hình 3.1 Sơ đồ use case

1 Chủ xe Người sử dụng chính của app

2 Chủ bãi đỗ Người quản lý các bãi đỗ xe

3 Nhân viên bãi đỗ Có các chức năng phục vụ công việc check in, check out

Bảng 3.1 Bảng danh sách các actors

3.1.3 Danh sách các Use case

Usecase chính Phân rã Use-case Ý nghĩa/Ghi chú

Quản lý tài khoản Đăng nhập Người dùng đăng nhập vào hệ thống bằng tài khoản Đăng ký Người dùng đăng ký một tài khoản mới

Khôi phục mật khẩu Cho phép lấy lại mật khẩu thông qua email

Cập nhật thông tin Cập nhật thông tin cá nhân, thay đổi mật khẩu Lưu bãi đỗ yêu thích Thêm bãi đỗ vào danh sách yêu thích Quản lý danh sách xe Thiết lập danh sách xe của cá nhân

Tìm kiếm và đặt chỗ

Tìm kiếm bãi đỗ Tìm kiếm các bãi đỗ xe được hiển thị trên map

Chỉ đường đến bãi đỗ Chỉ đường từ vị trí người dùng đến bãi đỗ Đặt chỗ Đặt chỗ đậu xe

Xem lịch sử đặt chỗ

Xem những vé đã được đặt, đã hoàn thành, đã hủy bỏ

Quản lý bãi đỗ Thêm bãi đỗ Tạo một bãi đỗ mới

Xóa bãi đỗ Xóa bãi đỗ không còn hoạt động Cập nhập thông tin bãi đỗ Thay đổi thông tin bãi đỗ Xem và tra cứu thông tin bãi đỗ Tìm kiến và xem danh sách bãi đỗ

Quản lý đặt chỗ Xem thông tin đặt chỗ

Quét mã QR Quét mã QR để checkin, checkout

Bảng 3.2 Danh sách các use case

3.1.4.1 Đặc tả Use case Quản lý tài khoản a Đặc tả Use case Đăng nhập Use case: Đăng nhập

Tác nhân chính: Chủ xe, chủ bãi đỗ, nhân viên bãi đỗ

− Người dùng muốn vào hệ thống để thực hiện các tính năng thì phải thông qua đăng nhập Điều kiện tiên quyết:

− Hệ thống đang ở trạng thái hoạt động

Sự kiện kích hoạt: Không có Điều kiện thực hiện: Không có

− Hiển thị màn hình đăng nhập

− Nhập username, password sau đó bấm “Login” Hoặc chọn “Sign in with Google” (đối với chủ xe người dùng app) thì chuyển sang luồng A1

− Nếu thông tin chính xác thì chuyển sang màn hình chính

− Nếu đăng nhập thất bại thì sẽ thông báo thất bại và phải nhập lại thông tin để tiếp tục đăng nhập

− Chuyển sang màn hình chính

Bảng 3.3 Đặc tả Use case Đăng nhập b Đặc tả Usecase Đăng ký tài khoản Use case: Đăng ký tài khoản

Tác nhân chính: Chủ xe, chủ bãi đỗ

Để có thể đăng nhập vào hệ thống, người dùng cần đăng ký tài khoản Ngoài ra, có thể đăng nhập mà không cần đăng ký bằng cách sử dụng tài khoản Google, đây là phương thức đăng nhập nhanh chóng và tiện lợi Điều kiện tiên quyết cho việc đăng nhập bằng Google là người dùng phải có một tài khoản Google hợp lệ và đồng ý cho ứng dụng truy cập thông tin cần thiết.

Sự kiện kích hoạt: Bấm nút “Sign up ” ở màn hình đăng nhập Điều kiện thực hiện: Không có

− Hiển thị màn hình đăng ký

− Nhập đầy đủ thông tin cấn thiết, sau đó bấm “Sign up”

− Đối với “Chủ xe” thì cần xác thực số điện thoại thông qua mã OTP trong sms được gửi qua số điện thoại đăng ký

− Nếu thành công chuyển sang màn hình chính

− Nếu không thành công hiển thị thông báo

Bảng 3.4 Đặc tả Usecase Đăng ký tài khoản c Đặc tả Use case Khôi phục mật khẩu Use case: Khôi phục mật khẩu

Tác nhân chính: Chủ xe

− Khi quên mật khẩu và muốn lấy lại mật khẩu mới thì người dùng thực hiện use case này Điều kiện tiên quyết:

− Phải có tài khoản đã được đăng ký

Sự kiện kích hoạt: Bấm “Forgot password” ở màn hình đăng nhập Điều kiện thực hiện: Không có

− Hệ thống màn hình quên mật khẩu

− Nhập số điện thoại sau đó bấm “Continue”

− Hiển thị màn hình xác thực số điện thoại

− Người dùng nhập mã OTP trong sms được gửi qua số điện thoại được nhập Sau đó bấm “Continue”

− Nếu thành công thì chuyển sang luồng phụ A1

− Nếu thất bại thì hệ thống thông báo kết quả

− Hệ thống hiển thị màn hình thay đổi mật khẩu

− Người dùng nhập mật khẩu mới

− Hệ thống thông báo kết quả

Bảng 3.5 Đặc tả Use case Khôi phục mật khẩu d Đặc tả Use case Cập nhật thông tin Use case: Cập nhật thông tin

Tác nhân chính: Chủ xe, chủ bãi đỗ

− Người dùng muốn thay đổi thông tin cá nhân hoặc mật khẩu thì sử dụng use case này Điều kiện tiên quyết:

− Người dùng phải đăng nhập vào hệ thống

Sự kiện kích hoạt: Người dùng chọn vào “Profile” ở menu Điều kiện thực hiện: Không có

− Hiển thị menu để chọn các chức năng

− Chọn “Profile” trên menu Chuyển sang luồng sự kiện A1

− Chọn “Change password” trên menu Chuyển sang luồng sự kiện A2

− Hiển thị màn hình thay đổi thông tin cá nhân

− Hiển thị màn hình thay đổi mật khẩu

Bảng 3.6 Đặc tả Use case Cập nhật thông tin e Đặc tả Use case Lưu bãi đỗ yêu thích Use case: Lưu bãi đỗ yêu thích

− Khi người dùng yêu thích một bãi đỗ xe nào đó thì có thể thêm vào danh sách yêu thích của mình Điều kiện tiên quyết:

− Phải đăng nhập với tài khoản

Sự kiện kích hoạt: Chọn một bãi đỗ Điều kiện thực hiện: Bãi đỗ chưa được lưu trước đó

− Hệ thống hiển thị thông tin về bãi đỗ

− Người dùng bấm vào icon “Trái tim” để thêm bãi đỗ đó vào danh sách yêu thích

− Bấm vào “Profile”, chọn “Favorite” để xem danh sách các bãi đỗ yêu thích

Bảng 3.7 Đặc tả Use case lưu bãi đỗ xe yêu thích f Đặc tả Use case Quản lý danh sách xe Use case: Quản lý danh sách xe

− Người dùng muốn quản lý xe của mình Điều kiện tiên quyết:

− Phải đăng nhập vào hệ thống

Sự kiện kích hoạt: Bấm vào “Profile” sau đó chọn “Vehicle”

30 Điều kiện thực hiện: Không có

− Hệ thống hiển thị danh sách các xe

− Người dùng chọn vào 1 xe nào đó, chuyển sang luồng A1

− Người dùng chọn “Add a vehicle” chuyển sang luồng A2

− Hiển thị thông tin xe

− Hiển thị màn hình thêm xe

− Nhập các thông tin cần thiết

Bảng 3.8 Đặc tả Use case quản lý danh sách xe

3.1.4.2 Đặc tả Use case Tìm kiếm và đặt chỗ a Đặc tả Use case Tìm kiếm bãi đỗ Use case: Tìm kiếm bãi đỗ

− Người dùng muốn tìm kiếm bãi đỗ phù hợp Điều kiện tiên quyết:

− Đăng nhập vào hệ thống

Sự kiện kích hoạt: Không có Điều kiện thực hiện: Không có

− Hiển thị bản đồ có các vị trí bãi đỗ xe

− Chọn một bãi đỗ để xem chi tiết

− Có thể nhập tên bãi đỗ để tìm kiếm bãi đỗ đó

Bảng 3.9 Đặc tả Use case tìm kiếm bãi đỗ b Đặc tả Use case chỉ đường đến bãi đỗ Use case: Chỉ đường đến bãi đỗ

− Người dùng muốn đến bãi đỗ nhưng không biết đường đi, có thể chọn chỉ đường để được chỉ Điều kiện tiên quyết:

− Người dùng đã đăng nhập vào hệ thống

Sự kiện kích hoạt: Người dùng bấm vào nút “Direction” ở trang chi tiết bãi đỗ Điều kiện thực hiện: Không có

− Hiển thị bản đồ có chỉ dẫn đường đi đến bãi đỗ

Bảng 3.10 Đặc tả Use case chỉ đường bãi đỗ c Đặc tả Use case Đặt chỗ Use case: Đặt chỗ

− Người dùng muốn đặt chỗ để gửi xe Điều kiện tiên quyết:

− Phải đăng nhập vào hệ thống

Sự kiện kích hoạt: Bấm vào “Book now” ở màn hình chi tiết bãi đỗ Điều kiện thực hiện: Không có

− Hiển thị màn hình chọn phương tiện

− Chọn phương tiện và bấm “Continue” Nếu không có phương tiện thì có thể bấm “Add new vehicle” để thêm phương tiện

− Chọn thời gian và khoảng thời gian muốn gửi Sau đó bấm “Continue”

− Chọn vị trí muốn gửi Sau đó bấm “Continue”

− Chọn phương thức thanh toán Sau đó bấm “Coutinue”

− Hệ thống hiển thị thông tin cho khách hàng xác thực

− Bấm “Confirm payment” để đặt chỗ

− Hệ thống thông báo kết quả Nếu thành công thì sẽ hiển thị mã QR cho khách hàng

Bảng 3.11 Đặc tả Use case đặt chỗ

3.1.4.3 Đặc tả Use case Xem lịch sử đặt chỗ

Use case: Xem lịch sử đặt chỗ

− Người dùng muốn xe lại các chỗ đã đặt Điều kiện tiên quyết:

Sự kiện kích hoạt: Người dùng nhấp vào “History” ở menu Điều kiện thực hiện: Người dùng đã đặt chỗ

− Hệ thống hiển thị màn hình xem các chỗ đã đặt

− Người dùng chọn “Scheduled parkings” để xem các chỗ đã được lên lịch

− Người dùng chọn “Parking History” để xem các chỗ đã hoàn tất gửi và các chỗ đã bị hủy

Bảng 3.12 Đặc tả Use case Xem lịch sử đặt chỗ

3.1.4.4 Đặc tả Use case Quản lý bãi đỗ xe a Đặc tả Use case Thêm bãi đỗ Use case: Thêm bãi đỗ

Tác nhân chính: Chủ bãi đỗ

− Chủ bãi đỗ muốn tạo mới một bãi đỗ xe

− Người dùng phải đăng nhập vào hệ thống

Sự kiện kích hoạt: Chọn “Add” Điều kiện thực hiện: Không có

− Hệ thống hiển thị giao diện thêm bãi đỗ

− Người dùng nhập thông tin bãi đỗ sau đó bấm “Next”

− Hiển thị màn hình để thiết lập block Người dùng thiết lập sau đó bấm

− Hiển thị màn hình thiết lập khung giờ Người dùng thiết lập sau đó bấm

− Bấm “Submit” để thêm mới bãi đỗ

Bảng 3.13 Đặc tả Use case Thêm bãi đỗ b Đặc tả Use case Cập nhật thông tin bãi đỗ Use case: Cập nhật thông tin bãi đỗ

− Chủ bãi đỗ muốn cập nhật thông tin một bãi đỗ nào đó Điều kiện tiên quyết:

− Người dùng đăng nhập hệ thống

Sự kiện kích hoạt: Bấm vào icon “edit” ở bãi đỗ cần thay đổi Điều kiện thực hiện: Không có

− Hệ thống hiển thị màn hình thay đ

− Người dùng thay đổi thông tin theo mong muốn

− Hệ thống xác thực thông tin và cập nhật thông tin

− Hệ thống thông báo kết quả tới người dùng

Bảng 3.14 Đặc tả Use case Cập nhật thông tin bãi đỗ c Đặc tả Use case Xóa bãi đỗ Use case: Xóa bãi đỗ

− Chủ xe muốn xóa một bãi đỗ không còn hoạt động Điều kiện tiên quyết:

− Người dùng đã đăng nhập

Sự kiện kích hoạt: Bấm vào icon “Deleted” ở bãi đỗ muốn xóa Điều kiện thực hiện: Không có

− Hệ thống hiển thị yêu cầu xác nhận

− Người dùng chọn xác nhận để xóa

Bảng 3.15 Đặc tả Use case Xóa bãi đỗ\ d Đặt tả Use case Xem và tra cứu thông tin bãi đỗ Use case: Xem và tra cứu thông tin bãi đỗ

− Chủ xe muốn xem danh sách bãi đỗ và có thể tìm kiếm Điều kiện tiên quyết:

Sự kiện kích hoạt: Bấm vào “Parking lots” ở menu Điều kiện thực hiện: Không có

− Hệ thống hiển thị danh sách các bãi đỗ

− Người dùng có thể tìm kiếm theo tên bãi đỗ ở thanh tìm kiếm

Bảng 3.16 Đặc tả Use case xem và tra cứu thông tin bãi đỗ xe

3.1.4.5 Đặc tả Use case Quản lý đặt chỗ

Use case: Quản lý đặt chỗ

− Chủ bãi đỗ muốn xem các booking của các bãi đỗ xe

Sự kiện kích hoạt: Chọn “Bookings” ở menu Điều kiện thực hiện: Không có

− Hệ thống màn hình xem thông tin đặt chỗ

− Người dùng chọn bãi đỗ xe muốn xem

− Hệ thống hiển thị danh sách các booking kèm theo thông tin từng booking

− Người dùng có thể lọc theo trạng thái của booking

Bảng 3.17 Đặc tả Use case Quản lý đặt chỗ

3.1.4.6 Đặc tả Use case Quét mã QR

Use case: Quản lý dữ liệu ngành nghề

Tác nhân chính:Nhân viên bãi đỗ, Chủ bãi đỗ

− Để kiểm soát ra vào bãi đỗ thì bảo vệ phải quét QR để kiểm tra Điều kiện tiên quyết:

− Người dùng đăng nhập vào hệ thống

Sự kiện kích hoạt: Bấm vào “Quét QR” Điều kiện thực hiện: Không có

− Người dùng tiến hành quét mã QR

− Nếu hợp lệ thì sẽ hiển thị thông tin của vé

− Nhân viên tiến hành check in, check out

Bảng 3.18 Đặc tả Use case Quét mã QR

Activity diagram

3.2.1 Lược đồ hoạt động đăng nhập

Hình 3.2 Lược đồ hoạt động đăng nhập

3.2.2 Lượt đồ hoạt động đăng ký

Hình 3.3 Lược đồ hoạt động đăng ký

3.2.3 Lược đồ hoạt động khôi phục mật khẩu

Hình 3.4 Lược đồ hoạt động khôi phục mật khẩu

3.2.4 Lược đồ hoạt động cập nhật thông tin

Hình 3.5 Lược đồ hoạt động cập nhật thông tin

3.2.5 Lược đồ hoạt động lưu bãi đỗ yêu thích

Hình 3.6 Lược đồ hoạt động lưu bãi đỗ xe yêu thích

3.2.6 Lược đồ hoạt động quản lý danh sách xe

Hình 3.7 Lược đồ hoạt động quản lý danh sách xe

3.2.7 Lược đồ hoạt động tìm bãi đỗ

Hình 3.8 Lược đồ hoạt động tìm bãi đỗ

3.2.8 Lược đồ hoạt động chỉ đường đến bãi đỗ

Hình 3.9 Lược đồ hoạt động chỉ đường đến bãi đỗ

3.2.9 Lược đồ hoạt động đặt chỗ

Hình 3.10 Lược đồ hoạt động đặt chỗ

3.2.10 Lược đồ hoạt động quản lý bãi đỗ

Hình 3.11 Lược đồ hoạt động quản lý bãi đỗ

3.2.11 Lược đồ hoạt động check in, check out

Hình 3.12 Lược đồ hoạt động check in, check out

Thiết kế cơ sở dữ liệu

Hình 3.13 Lược đồ quan hệ ERD

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 idUser UUID PK Mã bãi đỗ

2 idSocial text Mã tài khoản khi đăng nhập bằng Google

3 displayName text Tên người dùng

4 phoneNumber text Số điện thoại

5 imageUrl text Ảnh đại diện (Lưu URL)

6 email text Email người dùng

7 password text Mật khẩu người dùng

8 isActivated boolean Trạng thái hoạt động của tài khoản

Bảng 3.19 Mô tả chi tiết bảng User

1 idCompany UUID PK Mã công ty (chủ bãi đỗ)

2 companyName text Tên công ty

3 phoneNumber text Số điện thoại

6 isActivated boolean Trạng thái hoạt động của công ty

1 idParkingLot UUID PK Mã bãi đỗ

2 idCompany UUID FK Mã công ty (chủ bãi đỗ)

3 name text Tên bãi đỗ

4 description text Mô tả vể bãi đỗ

5 address text Địa chỉ bãi đỗ

6 lat text Vĩ độ của bãi đỗ

7 long text Kinh độ của bãi đỗ

Bảng 3.20 Mô tả chi tiết bảng ParkingLot

1 idBlock UUID PK Mã khối

2 idParkingLot UUID FK Mã bãi đỗ

4 description text Mô tả khối

5 isFull boolean Trạng thái chỗ đặt của khối

6 numOfSlot interger Số lượng vị trí trong khối

Bảng 3.21 Mô tả chi tiết bảng Block

1 idParkingSlot UUID PK Mã chỗ đỗ xe

2 idBlock UUID FK Mã khối

3 slotNumber interger Số của chỗ đỗ xe

Bảng 3.22 Mô tả chi tiết bảng ParkingSlot

1 idParkingReservation UUID PK Mã đặt chỗ đậu xe

2 idVehicle UUID FK Mã xe

3 idUser UUID FK Mã người dùng

4 idParkingSlot UUID FK Mã chỗ đã đặt

5 idTimeFrame UUID FK Mã khung giờ

6 startTime time Giờ bắt đầu

7 endTime time Giờ kết thúc

8 bookingDate date Ngày đỗ xe

9 total integer Tổng tiền phải trả

10 status string Trạng thái (“scheduled,

Bảng 3.23 Mô tả chi tiết bảng ParkingReservation

1 idParkingSlip UUID PK Mã phiếu đậu xe

2 idParkingReservation UUID FK Mã đặt chỗ đậu xe

5 total integer Tổng tiền phải trả

6 isPaid boolean Trạng thái thanh toán

Bảng 3.24 Mô tả chi tiết bảng ParkingSlip

1 idVehicle UUID PK Mã phương tiện

2 isUser UUID FK Mã người dùng

3 name text Tên phương tiện

Bảng 3.25 Mô tả chi tiết bảng Vehicle

1 idTimeFrame UUID PK Mã khung giờ

2 idParkingLot UUID FK Tên bãi đỗ

3 duration integer Khoảng thời gian

Bảng 3.26 Mô tả chi tiết bảng TimeFrame

1 idFavorite UUID PK Mã yêu thích

2 idUser UUID FK Mã người dùng

3 idParkingLot UUID FK Mã bãi đỗ

Bảng 3.27 Mô tả chi tiết bảng Favorite

Thiết kế giao diện

3.4.1 Sơ đồ liên kết màn hình

Hình 3.14 Sơ đồ liên kết màn hình dành cho chủ xe

3.4.1.2 Dành cho doanh nghiệp - chủ bãi đỗ xe

Hình 3.15 Sơ đồ liên kết màn hình dành cho doanh nghiệp - chủ bãi đỗ xe

3.4.1.3 Dành cho nhân viên bãi đỗ

Hình 3.16 Sơ đồ liên kết màn hình dành cho nhân viên bãi đỗ

3.4.2 Danh sách các màn hình

STT Tên màn hình Chức năng

1 Màn hình Splash Hiển thị khi tải ứng dụng

2 Màn hình Onboarding Hiển thị thông tin về ứng dụng

4 Màn hình đăng nhập Cho phép người dùng nhập thông tin đăng nhập

5 Màn hình đăng ký Cho phép người dùng đăng ký tài khoản

6 Màn hình chính Hiển thị bản đồ, cho phép tìm kiếm bãi đỗ

7 Màn hình chi tiết bãi đỗ Hiển thị thông tin chi tiết về bãi đỗ xe

8 Màn hình chọn xe Cho phép chọn xe để đặt vé

9 Màn hình chọn vị trí Cho phép chọn vị trí đỗ xe

10 Màn hình chọn thời gian Cho phép chọn thời gian đỗ

11 Màn hình kiểm tra thông tin Hiển thị lại các thông tin đã chọn

12 Màn hình vé đỗ xe Hiển thị vé đã đặt

13 Màn hình lịch sử đặt Hiển thị lịch sử, trạng thái các lần đặt xe

14 Màn hình cá nhân Hiển thị các mục cá nhân

15 Màn hình sửa thông tin cá nhân Cho phép xem, sửa thông tin cá nhân

16 Màn hình quản lý xe Hiển thị danh sách xe

17 Màn hình thêm xe Cho phép thêm xe

18 Màn hình danh sách bãi yêu thích Hiển thị danh sách bãi đỗ yêu thích

19 Màn hình đổi mật khẩu Cho phép đổi mật khẩu đăng nhập

Bảng 3.28 Danh sách các màn hình dành cho chủ xe

3.4.2.2 Dành cho doanh nghiệp - chủ bãi đỗ

1 Màn hình đăng nhập Cho phép người dùng nhập thông tin đăng nhập

2 Màn hình đăng ký Cho phép người dùng đăng ký tài khoản

4 Màn hình danh sách vé đặt chỗ Hiển thị danh sách các vé đặt chỗ theo từng bãi

5 Màn hình danh sách bãi đỗ Hiển thị danh sách bãi đỗ

6 Màn hình thêm bãi đỗ Cho phép thêm bãi đỗ

10 Màn hình xem chi tiết bãi đỗ Hiển thị thông tin chi tiết bãi đỗ

11 Màn hình cài đặt Cho phép sửa thông tin doanh nghiệp

12 Màn hình đổi mật khẩu Cho phép đổi mật khẩu đăng nhập

Bảng 3.29 Danh sách các màn hình dành cho doanh nghiệp

3.4.2.3 Dành cho nhân viên bãi đỗ

1 Màn hình đăng nhập Cho phép đăng nhập hệ thống

2 Màn hình chính Hiển thị thông tin chính

3 Màn hình scan mã QR Cho phép scan mã QR trên vé

4 Màn hình vé Hiển thị chi tiết vé

Bảng 3.30 Danh sách các màn hình dành cho nhân viên bãi đỗ

3.4.3 Mô tả chi tiết các màn hình

Hình 3.17 Màn hình splash

Hình 3.18 màn hình onboarding

Hình 3.19 Màn hinh đăng nhập

STT Kiểu Ràng buộc Ý nghĩa

1 Input Bắt buộc Ô nhập số điện thoại

2 Input Ô nhập password (mật khẩu)

3 Button Nút lưu mật khẩu

6 Button Nút đăng nhập bằng tài khoản Google

7 Button Nút đăng ký tài khảon

Bảng 3.31 Mô tả đối tượng trên màn hình đăng nhập

STT Biến cố Xử lý

1 Chọn Remember Lưu thông tin đăng nhập

2 Chọn Forgot Password Hiển thị màn hình quên mật khẩu

3 Chọn Sign in Đăng nhập, hiển thị màn hình chính

4 Chọn Sign in with Google Đăng nhập bằng tài khoản Google

5 Chọn Sign up Hiển thị màn hình đăng ký

Bảng 3.32 Biến cố và xử lý trên màn hình đăng nhập

Hình 3.20 Màn hình đăng ký

1 Input Nhập tên người dùng

3 Input Nhập số điện thoại

5 Input Nhập lại mật khẩu

Bảng 3.33 Mô tả đối tượng trên màn hình đăng ký

1 Chọn Next Gửi mã OTP xác nhận, tạo tài khoản mới

Bảng 3.34 Biến cố và xử lý trên màn hình đăng ký

Hình 3.21 Màn hình chính

1 Input Nhập bãi đỗ cần tìm kiếm

2 Button Chọn bãi đỗ để xem chi tiết

4 Button Gọi chủ bãi đỗ

6 Button Thêm bãi đỗ yêu thích

Bảng 3.35 Mô tả đối tượng trên màn hình chính

1 Chọn bãi đỗ Hiển thị bãi đỗ

2 Chọn View details Xem chi tiết bãi đỗ

3 Chọn Call Gọi đến chủ bãi đỗ

4 Chọn Direction Hiển thị đường đi đến bãi

5 Chọn Save Thêm vào danh sách yêu thích

Bảng 3.36 Biến cố và xử lý trên màn hình chính

3.4.3.6 Màn hình chi tiết bãi đỗ

Hình 3.22 Màn hình chi tiết bãi đỗ

1 Button Chọn tiếp tục đặt chỗ

Bảng 3.37 Mô tả đối tượng trên màn hình chi tiết bãi đỗ

1 Chọn Book now Hiển thị màn hình chọn xe

Bảng 3.38 Biến cố và xử lý trên màn hình chi tiết bãi đỗ

Hình 3.23 Màn hình chọn xe

2 Button Hiển thị màn hình thêm xe

3 Button Tiếp tục bước tiếp theo

Bảng 3.39 Mô tả đối tượng trên màn hình chọn xe

1 Chọn Add new vehicle Hiển thị màn hình thêm xe

2 Chọn Countinue Hiển thị màn hình chọn vị trí

Bảng 3.40 Biến cố và xử lý trên màn hình chọn xe

3.4.3.8 Màn hình chọn vị trí

Hình 3.24 Màn hình chọn vị trí

1 List Danh sách vị trí đỗ

2 Button Hiển thị màn hình chọn thời gian

Bảng 3.41 Mô tả đối tượng trên màn hình chọn vị trí

1 Chọn Countinue Hiển thị màn hình chọn thời gian

Bảng 3.42 Biến cố và xử lý trên màn hình chọn vị trí

3.4.3.9 Màn hình chọn thời gian

Hình 3.25 Màn hình chọn thời gian

1 Date picker Chọn ngày đặt

2 Time picker Chọn giờ bắt đầu

3 List Danh sách khung thời gian

Bảng 3.43 Mô tả đối tượng trên màn hình chọn thời gian

1 Chọn Date picker Lưu ngày cần đặt

2 Chọn time picker Lưu giờ bắt đầu

3 Chọn khung giờ Lưu lựa chọn khung giờ

4 Chọn Countinue Tiếp tục đến màn hình chọn phương thức thanh toán

Bảng 3.44 Biến cố và xử lý trên màn hình chọn thời gian

3.4.3.10 Màn hình chọn phương thức thanh toán

Hình 3.26 Màn hình chọn phương thức thanh toán

1 View Phương thức thanh toán

Bảng 3.45 Mô tả đối tượng trên màn hình phương thức thanh toán

1 Chọn phương thức Lưu phương thức thanh toán

2 Chọn Countinue Tiếp tục đến màn hình xem lại thông tin

Bảng 3.46 Biến cố và xử lý trên màn hình phương thức thanh toán

3.4.3.11 Màn hình xem lại thông tin đặt chỗ

Hình 3.27 Màn hình xem lại thông tin đặt chỗ

1 View Thông tin đặt chỗ

Bảng 3.47 Mô tả đối tượng trên màn hình xem lại thông tin đặt chỗ

1 Chọn Confirm Xác nhận đặt chỗ

Bảng 3.48 Biến cố và xử lý trên màn hình xem lại thông tin đặt chỗ

3.4.3.12 Màn hình chi tiết vé đặt

Hình 3.28 Màn hình chi tiết vé đặt

1 View Vé đặt bãi đỗ

2 Button Nút quay trở về

Bảng 3.49 Mô tả đối tượng trên màn hình chi tiết vé đặt

1 Chọn back to home Quay trở lại màn hình chính

Bảng 3.50 Biến cố và xử lý trên màn hình chi tiết vé đặt

3.4.3.13 Màn hình lịch sử đặt

Hình 3.29 Màn hình lịch sử đặt

1 List Danh sách vé đã đặt

Bảng 3.51 Mô tả đối tượng trên màn hình lịch sử đặt

1 Chọn xem vé Hiển thị chi tiết vé đặt

Bảng 3.52 Biến cố và xử lý trên màn hình lịch sử đặt

Hình 3.30 Màn hình cá nhân

1 Button Nút xem thông tin cá nhân

2 Button Nút xem phương thức thanh toán

3 Button Nút xem danh sách bãi đỗ yêu thích

4 Button Nút xem danh sách xe

5 Button Nút đổi mật khẩu

Bảng 3.53 Mô tả đối tượng trên màn hình cá nhân

1 Chọn Personal Information Hiển thị màn hình sửa thông tin

2 Chọn Payment Hiển thị phương thức thanh toán

3 Chọn Vehicles Hiển thị màn hình danh sách xe

4 Chọn Favorite Hiển thị danh sách yêu thích

5 Chọn Change Password Hiển thị màn hình đổi mật khẩu

6 Chọn Log out Đăng xuất, hiển thị màn hình đăng nhập

Bảng 3.54 Biến cố và xử lý trên màn hình cá nhân

3.4.3.15 Màn hình đổi thông tin cá nhân

Hình 3.31 Màn hình đổi thông tin cá nhân

1 Image picker Ảnh đại diện

2 Input Bắt buộc Ô nhập tên hiển thị

3 Input Bắt buộc Ô nhập email

Bảng 3.55 Mô tả đối tượng trên màn hình đổi thông tin cá nhân

1 Chọn Update profile Cập nhật thông tin cá nhân

Bảng 3.56 Biến cố và xử lý trên màn hình đổi thông tin cá nhân

3.4.3.16 Màn hình danh sách bãi xe yêu thích

Hình 3.32 Màn hình danh sách bãi xe yêu thích

1 List Danh sách bãi xe yêu thích

Bảng 3.57 Mô tả đối tượng trên màn hình danh sách bãi xe yêu thích

1 Swipe mục yêu thích Xóa khỏi danh sách yêu thích

Bảng 3.58 Biến cố và xử lý trên màn hình danh sách bãi xe yêu thích

3.4.3.17 Màn hình danh sách xe

Hình 3.33 Màn hình danh sách xe

Bảng 3.59 Mô tả đối tượng trên màn hình danh sách xe

1 Swipe mục xe Xóa xe khỏi danh sách

2 Chọn nút Add Hiển thị màn hình thêm xe

Bảng 3.60 Biến cố và xử lý trên màn hình danh sách xe

Hình 3.34 Màn hình thêm xe

1 Picker Bắt buộc Chọn loại xe

2 Input Bắt buộc Ô nhập biển số xe

3 Input Bắt buộc Ô nhập tên xe

4 Button Nút xác nhận thêm xe

Bảng 3.61 Mô tả đối tượng trên màn hình thêm xe

1 Chọn Add vehicle Lưu thông tin, thêm xe vào danh sách

Bảng 3.62 Biến cố và xử lý trên màn hình thêm xe

3.4.3.19 Màn hình đổi mật khẩu

Hình 3.35 Màn hình đổi mật khẩu

1 Input Bắt buộc Ô nhập mật khẩu

2 Input Bắt buộc Ô nhập lại mật khẩu

3 Button Nút xác nhận đổi mật khẩu

Bảng 3.63 Mô tả đối tượng trên màn hình đổi mật khẩu

1 Chọn Change password Đổi mật khẩu, quay về màn hình cá nhân

Bảng 3.64 Biến cố và xử lý trên màn hình đổi mật khẩu

3.4.3.20 Màn hình đăng nhập – doanh nghiệp

Hình 3.36 Màn hình đăng nhập - doanh nghiệp

3 Button Nút quên mật khẩu

5 Button Nút đăng ký tài khoản

Bảng 3.65 Mô tả đối tượng trên màn hình đăng nhập - doanh nghiệp

1 Chọn Forgot password Chuyển trang quên mật khẩu

2 Chọn Sign in Đăng nhập vào hệ thống

3 Chọn Sign up Chuyển trang đăng ký tài khoản

Bảng 3.66 Biến cố và xử lý trên màn hình đăng nhập - doanh nghiệp

3.4.3.21 Màn hình đăng ký – doanh nghiệp

Hình 3.37 Màn hình đăng ký - doanh nghiệp

2 Input Bắt buộc Ô nhập tên công ty

4 Button Nút xác nhận đăng ký

Bảng 3.67 Mô tả đối tượng trên màn hình đăng ký – doanh nghiệp

1 Chọn Sign up Đăng ký tài khoản và chuyển về trang đăng nhập

Bảng 3.68 Biến cố và xử lý trên màn hình đăng ký – doanh nghiệp

3.4.3.22 Màn hình danh sách bãi đỗ - doanh nghiệp

Hình 3.38 Màn hình danh sách bãi đỗ - doanh nghiệp

1 Table Danh sách bãi đỗ

2 Input Ô nhập bãi đỗ tìm kiếm

3 Button Nút tìm kiếm bãi đỗ

4 Button Nút thêm bãi đỗ

5 Button Nút xem chi tiết bãi đỗ

6 Button Nút sửa thông tin bãi đỗ

7 Button Nút xóa bãi đỗ

Bảng 3.69 Mô tả đối tượng trên màn hình danh sách bãi đỗ - doanh nghiệp

1 Chọn Tìm kiếm Tìm kiếm bãi đỗ dựa vào tên

2 Chọn Add Hiện modal thêm thông tin bãi đỗ

3 Chọn xem chi tiết Hiển thị chi tiết bãi đỗ

4 Chọn sửa Hiển thị modal để sửa thông tin

5 Chọn xóa Xóa bãi đỗ khỏi danh sách

Bảng 3.70 Biến cố và xử lý trên màn hình dánh sách bãi đỗ - doanh nghiệp

3.4.3.23 Màn hình danh sách vé bãi đỗ - doanh nghiệp

Hình 3.39 Màn hình dánh sách vé bãi đỗ - doanh nghiệp

1 Picker Chọn bãi đỗ cần xem

2 Checkbox Trạng thái của vé

3 List Danh sách vé bãi đỗ

Bảng 3.71 Mô tả đối tượng trên màn hình danh sách vé bãi đỗ - doanh nghiệp

1 Chọn Picker Hiển thị bãi đỗ và chọn, hiển thị danh sách vé

2 Chọn check box Lọc theo trạng thái vé

Bảng 3.72 Biến cố và xử lý trên màn hình danh sách vé bãi đỗ - doanh nghiệp

3.4.3.24 Màn hình chi tiết bãi đỗ - doanh nghiệp

Hình 3.40 Màn hình chi tiết bãi đỗ - doanh nghiệp

1 Card Thông tin cơ bản

2 Table Danh sách các block

3 Table Danh sách khung giờ

Bảng 3.73 Mô tả đối tượng trên màn hình chi tiết bãi đỗ - doanh nghiệp

3.4.3.25 Màn hình thêm bãi đỗ - doanh nghiệp

Hình 3.41 Màn hình thêm bãi đỗ - doanh nghiệp

1 Input Bắt buộc Ô nhập tên

2 Input Bắt buộc Ô nhập địa chỉ

3 Input Bắt buộc Ô nhập vị trí

4 Input Bắt buộc Ô nhập mô tả

5 Input Bắt buộc Ô nhập tên block

6 Input Bắt buộc Ô nhập số ô đỗ xe

7 Input Bắt buộc Ô nhập khung giờ

8 Input Bắt buộc Ô nhập đơn giá

Bảng 3.74 Mô tả đối tượng trên màn hình thêm bãi đỗ - doanh nghiệp

1 Chọn Next Chuyển tới phần tiếp theo

2 Chọn Previous Quay lại phần trước đó

3 Chọn Submit Xác nhận và lưu thông tin

Bảng 3.75 Biến cố và xử lý trên màn hình thêm bãi đỗ - doanh nghiệp

3.4.3.26 Màn hình thông tin - doanh nghiệp

Hình 3.42 Màn hình thông tin – doanh nghiệp

1 Input Bắt buộc Ô nhập tên doanh nghiệp

Bảng 3.76 Mô tả đối tượng trên màn hình thông tin – doanh nghiệp

1 Chọn Submit Lưu thay đổi thông tin

Bảng 3.77 Biến cố và xử lý trên màn hình thông tin – doanh nghiệp

3.4.3.27 Màn hình thay đổi mật khẩu - doanh nghiệp

Hình 3.43 Màn hình đổi mật khẩu – doanh nghiệp

1 Input Bắt buộc Ô nhập mật khẩu hiện tại

2 Input Bắt buộc Ô nhập mật khẩu mới

3 Input Bắt buộc Ô nhập lại mật khẩu

Bảng 3.78 Mô tả đối tượng trên màn hình đổi mật khẩu – doanh nghiệp

1 Chọn Submit Lưu thay đổi thông tin

Bảng 3.79 Biến cố và xử lý trên màn hình đổi mật khẩu - doanh nghiệp

3.4.3.28 Màn hình đăng nhập - nhân viên

Hình 3.44 Màn hình đăng nhập - nhân viên

3 Button Nút quên mật khẩu

Bảng 3.80 Mô tả đối tượng trên màn hình đăng nhập – nhân viên

1 Chọn Quên mật khẩu Hiển thị màn hình đổi mật khẩu

2 Chọn đăng nhập Đăng nhập vào hệ thống

Bảng 3.81 Biến cố và xử lý trên màn hình đăng nhập – nhân viên

3.4.3.29 Màn hình chính - nhân viên

Hình 3.45 Màn hình chính - nhân viên

1 Button Nút scan mã QR

Bảng 3.82 Mô tả đối tượng trên màn hình chính – nhân viên

1 Chọn Scan Chuyển màn hình scan mã QR

Bảng 3.83 Biến cố và xử lý trên màn hình chính – nhân viên

3.4.3.30 Màn hình scan QR - nhân viên

Hình 3.46 Màn hình scan QR - nhân viên

3.4.3.31 Màn hình xem vé - nhân viên

Hình 3.47 Màn hình xem vé - nhân viên

1 View Hiển thị thông tin vé, mã QR

2 Button Nút xác nhận check in

Bảng 3.84 Mô tả đối tượng trên màn hình xem vé – nhân viên

1 Chọn Xác nhận Check in xe vào bãi

Bảng 3.85 Biến cố và xử lý trên màn hình xem vé – nhân viên

CÀI ĐẶT VÀ THỬ NGHIỆM

Định dạng
Số trang	115
Dung lượng	3,67 MB