Khóa luận tốt nghiệp Hệ thống thông tin: Xây dựng ứng dụng gửi xe và đặt món canteen, tích hợp thanh toán qua ứng dụng di động

Xây dựng ứng dụng quản lý bãi xe và đặt món canteen, tích hợp thanh toán qua ứng dụng di động, có các chức năng cụ thể sau: Gửi xe, thanh toán nhanh chóng bằng thẻ sinh viên.. Một số côn

ĐẠI HỌC QUOC GIA THÀNH PHO HO CHÍ MINH

TRUONG DAI HOC CONG NGHE THONG TIN

KHOA HE THONG THONG TIN

LE PHAM HUY CƯỜNG - 17520306

LÊ NGỌC LONG - 17520710

KHÓA LUẬN TÓT NGHIỆP

XÂY DUNG UNG DUNG GUI XE VÀ DAT MON CANTEEN, TÍCH HỢP THANH

TOAN QUA UNG DUNG DI DONG

BUILDING PARKING APPLICATION AND PRE-ORDER FOOD IN CANTEEN,

INTEGRATE WITH MOBILE PAYMENT

KY SU HE THONG THONG TIN

GIANG VIEN HUONG DAN

TS CAO THI NHAN

TP HO CHi MINH, 2021

THONG TIN HỘI DONG CHAM KHÓA LUẬN TOT NGHIỆPHội đồng cham khóa luận tốt nghiệp, thành lập theo Quyết định sé: 243 /QĐ-ĐHCNTT-ĐTDH

ngày 08 thang 11 năm 2013 của Hiệu trưởng Trường Dai học Công nghệ Thông tin

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn quý Thây, Cô trong khoa Hệ Thong Thông Tin

Trường Dai học Công Nghệ Thong Tin đã trang bị cho chúng em kiến thức nên tảng dé có thé hoàn thành tốt luận văn này.

Cảm ơn các ban trong lớp đã chia sẻ các kinh nghiệm và đã hỗ trợ trong lúc làmluận văn.

Đặc biệt chúng em xin chân thành cảm ơn giảng viên hướng dan TS Cao Thị Nhan

đã hô trợ chung em trong luc thực hiện luận văn nay.

Mac dù đã có gắng hết khả năng nhưng không thé nào tránh khỏi những thiếu sót.Rat mong nhận được sự góp ý quỷ bau của quý Thay, Cô dé dé tài có thê hoàn chỉnh hơn.

Sinh viên

LÊ PHẠM HUY CƯỜNG LÊ NGỌC LONG

MỤC LỤCCHUONG 1 GIỚI THIEU DE TÀIIL 2-2 SE SE£2EEE£+EE2EE2EE2EESEESEEEEEeExerxerkerxee 9

1.1 Lí do chọn đề tài -2¿5< 2< E12 E2 E1 71 21 2171211211211 211211211011 11 1 1e 9

1.2 Muc tiêu vào phương pháp thực hiện 5 SĂ 5S SSsseeerrerresrrsee 10

1.2.1 Mục tiêu SẶ TS TH TH HH HH HH Hit 10

1.2.2 Phuong pháp thực hiện - - - SĂ cS2 S2 St ty rrg 10

1.3 Cơ sở lý thuyẾt 5- 5c SE 1121121121121121121111 1111111111111 11111 Erre 10

CHƯƠNG 2 CÁC CÔNG NGHỆ SỬ DỤNG VÀ CÁC GIAI ĐOẠN THỰC HIỆN

"¬-: o o- Ả , 11

2.2 Mô tả chỉ tiết về các công nghệ dang sử dụng - 2-5 5z+cz+cz+c<e- 13

2.2.1, Reacljs 5⁄22 HN ÔĂÔQÔÔÔỎÔỎĂEB BS E313 Y 33 s3 13 2.2.2 — Tomic ÍramewOk Qui nh 13

2.3 Các giai đoạn thực hiện - - G191 HH HH TH ng TH nh ng nh 21

2.3.1 Giai đoạn 1: Tim hiểu công nghệ và nghiên cứu thị trường 21

2.3.2 Giai đoạn 2: Phân tích chan dung người dùng - «++<<++ 22

2.3.3 Giai đoạn 3: Lập trình ứng dụng và hoàn thiện báo cáo - 24

CHUONG 3 PHAN TÍCH THIẾT KE HỆ THONG 2- 22 z2£++c+cet 26

3.1 Hệ thống xử lý xe ra VÀO 2 s2 2k2 EE1221127121127121111 211.11 ee 26

3.1.1 So đồ use case hệ thống xử lý xe ra Vào 2-©5ccccccccccrrcrreces 263.1.2 So đồ hoạt động xử lý xe vào bãi - ¿2+ 5ccccecserkerrrerkerrree 29

3.1.3 Sơ đồ hoạt động xử ly xe ra khỏi bãi - 2-52 2ScEerxereered 30

3.1.4 So đồ tuần tự xử lý xe vào bãi 2 22s 31

3.1.5 So đồ tuần tự xử lý xe ra khỏi bãi 2-©5c©csccccerxerreerxerreee 32

3.1.6 So đồ lớp hệ thống quản lý bãi xe 2-5255 SEccEccxccrrrxcrs 333.2 Hệ thống đặt món canfeen 2-2 %+Ss+SE+EE£EESEEEEEEEEEEEEEEEEE121121111 E1 cxeE 34

3.2.1 So đồ use case hệ thống đặt món canfeen 2-2 2+ s+zx+rxred 34

3.2.2 Sơ đồ hoạt động của hệ thống đặt món canteen 2-5 s 353.2.3 Sơ đồ tuần tự của hệ thống đặt món canteen - 2-2 + 36

3.2.4 So đồ lớp hệ thống đặt món canteen 2- 2 z+x+zxz+zxezseee 37

3.3 Sơ đồ tuần tự công thanh toán Momo -2- 2 sc22<+x+2zxtzxevrxrrxeees 38

3.4 Thiết kế cơ sở dữ liệu - 2 22222 ESESEE9EEEEEEEEE7E 2121121111211 1xETxtxeE 40

3.5 Mô tả CAC S€TVÏCS HH HH HH HH HT ng TT TH HH TH ng 45

3.5.2 Parking S€TVĨCC - Gà HH nh HH TH TH HH HT HT HH TH 46

3.5.3 MOMO S€TVĨC€ HH TH TH TT HH HH HT ngưng 47

CHƯƠNG 4 UNG DỤNG TRIEN KHAI - 2-52 2SE£2EE££E£2EE£EEzeEkerrerrxrres 48

4.1 Quam lý chung cece S< 1221112112 11H TT TH HH HH như 48

4.1.1 Chức năng đăng nhập - - Ăn HH ng re 48

4.1.2 Chức năng nạp tiền bằng vi Mom0 2-2-5255 £E£E2E£2£zzczz 50

4.2 Gởi Và CHA X€ TS H HH HH HH TT TH TH TH TH TH TT TH giết 53

4.2.1 So đồ luồng của bãi giữ XO cccccccessessesssessesssesssessesssessesssesseesees 534.2.2 Phần mềm thực nghiệm 2 ¿2+ £EEEE£EE£EE+EEEErEerrrrerrrcrs 54

Án), 5n ắU 60

CHƯƠNG 5 KET LUẬN VÀ HƯỚNG PHAT TRIỂN 2-52 s2cz+cxccez 66

5.1 Kết quả dat được - 52 2+2 2 1E 1 E3E71271 2211111121211 11 1 xe 665.2 Hạn chế va hướng phát triễn - 2 2£ 2+E+2EE£EEt£EEEEEEEkerkrrrkrrrrere 66

DANH MỤC CÁC HÌNHHình 2.1 Minh họa các công nghệ được sửdụy an L2

Hình 2.2 Kiến trúc microservices CỐ độ

Hình 2.3 Mô hình hoạt độngJnkis << —= —=—-—=@ -—Đ- ịẹẽẼỀềỒỘẽỘằ55m5ẽẬẽẽẽm 18

Hình 2.4 Thông báo Jenkins khi xây dựng xong một tính năng

Hình 2.5 Danh sách các tài khoản test do momo cung cấp

Hình 2.6 Các buổi hop trong giai đoạn | cuanhom_ - 21

Hình 2.7 Công cu bang Kanban của Trị, 25

Hình 3.1 Use case xử lý xeravào CC 26

Hình 3.2 Sơ đồ hoạt động xử lý xe vào bãi 22222222e 2Ø Hình 3.3 Sơ đồ hoạt động xử lý xe ra bãi 2222 r 30

Hình 3.4 Sơ đồ tuần tự xử lý xe vào bãi 31 Hình 3.5 Sơ đồ tuần tự xử lý xerabãi 32 Hình 3.6: Sơ đồ lớp hệ thống quản lý bãixc 33

Hình 3.7 Use case hệ thống đặt mnănp —— 34 Hình 3.8 Sơ đồ hoạt động hệ thống đặtmóncanen 7 35

Hình 3.9 Sơ đồ tuần tự hệ thống đặt món canteen 36

Hình 3.10 Sơ đồ lớp hệ thong đặt món canteen 47 Hình 3.11 Sơ đồ tuần tự công thanh toán mm 38

Hình 4.1 Giao diện đăng nhập tg dung _== - Ö ÖÐb_rrrre 48

Hình 4.2 Giao diện nhập mã xác nhận, Ö ÖÖGĐOĐBỖVỬỶ݇7Unsrrrerrrre 49

Hình 4.5 Giao diện thanh toán mmo "" a1

Hình 4.6 Giao diện thong bao ._ 32

Hình 4.7 Sơ đồ luồng khi xe và bãi 33 Hình 4.8 Sơ đồ luồng khi xe ra khỏi bài ằễằẳỖŠhỪỖ] Ÿ.Ÿ 54

Hình 4.9 Đầu đọc thé từ RFID -22222222222222111212rrrrrrrii2 Hình 4.10 Thẻ RFID được sử dụng trong thucnghiém 56 Hình 4.11 Màn hình giám sát khi xe vào bãi 37

Hình 4.12 Màn hình giám sát xe ra khỏi bãi 58

Hình 4.13 Sinh viên quẹt thẻ khi ra khỏi baixe 29

Hình 4.14 Giao điện menu cuacantin 60

Hình 4.15 Giao diện món ăn cantin 61

Hình 4.16 Giao diện thêm mnănp Ð= ——= ĐẸP - 2

Hình 4.17 Giao diện giỏ hàng căn 63 Hình 4.18 Giao diện thanhtoán 64

Hình 4.19 Giao diện nhận xét món ăn 65

DANH MỤC BẢNG

Bảng 3.1 Mô tả bang user 4I

Bảng 3.2 Mô tả bảng payment 42 Bang 3.3 Mô tả bang parking 42

Bảng 3.4 Mô tả bảng role 43 Bảng 3.5 Mô tả bang vehicle 43

Bảng 3.6.M6tabangcard -<— —=— Šš 43 Bảng 3.7 Mô tả bang userparking 44

Bảng 3.8 Mô tả bảng foodcategory 44 Bang 3.9.Mô ta bang food ag Bang 3.10 Mô ta API cua payment service 45 Bang 3.11 Mô ta API của parking service 46

Bảng 3.12 Mô ta API của momo service 47

DANH MỤC CÁC TU VIET TAT

API: Application Programming Interface

CI-CD: Continuos: continuous integration and continuous delivery/continuous deployment

CHƯƠNG 1 GIỚI THIỆU DE TÀI

1.1 Lí do chọn đề tài

Hiện nay, vào các giờ cao điểm như đầu giờ học hay các ngày thi học kì, tình

hình ùn tắc xe máy tại bãi xe diễn ra khá thường xuyên Bên cạnh đó, khi sinh viên

vô tình làm mất thẻ xe thì thủ tục lấy xe ra bãi khá phức tạp vì cần chứng minhgiấy tờ xe, kiểm tra camera bãi xe Vào các giờ ăn trưa tại canteen, sinh viên vàcán bộ nhân viên phải xếp hàng chờ đợi khá lâu vào những lúc đông người Với

giải pháp cho phép sinh viên đặt trước phần ăn thì sẽ phần nào giải quyết được bài

toán trên.

Việc sử dụng thẻ từ ngày càng phổ biến, xuất hiện ở khắp nơi, từ trường họccho đến các chung cư, bãi giữ xe các trung tâm thương mại Xu hướng số hóa,thanh toán trực tuyến không dùng tiền mặt đang lên ngôi Bên cạnh đó, cùng với

sự phát triển nhanh chóng của công nghệ khiến việc tích hợp và xây dựng các giải

pháp mang tính học thuật cao như AI, Machine Learning, Object Detection ngày

càng dễ dàng hơn.

Hiện này có rất nhiều công ty phát trién phần mềm quản lý giữ xe và đều cónhững chức năng tương tự nhau như: nhận diện biển sé, lưu hình anh, đăng kí thẻgiữ xe, nhận diện xe qua thẻ Phần mềm triển khai trên 2 làn đường, 1 làn di vào

và | làn đi ra, có 2 camera ở mỗi làn.

Giải pháp thanh toán tích hợp vào hệ thống giữ xe thông minh đã được triểnkhai ở rất nhiều nơi Tuy nhiên, chi phi đầu tư ban đầu khá cao và không phù hợp

với đại đa số người dùng thuộc nhóm sinh viên, học sinh.

Mô hình quản lý bãi giữ xe được chúng em trién khai là mô hình chỉ có 1 làn

đường, có 2 camera, 1 máy quét thẻ Vi lí do kinh phí nên chỉ có 1 máy quẹt thẻ

nhưng vẫn đảm bảo được các tính năng mà bãi giữ xe phải có và tính an toàn.

Giải pháp phần mềm của nhóm tích hợp được cổng thanh toán momo — một

trong những ví điện tử được sử dụng rất phô biến hiện nay bởi đại đa số học sinh,sinh viên Ngoài ra, giải pháp còn tận dụng được những chiếc thẻ sinh viên dé thựchiện việc thanh toán tiền giữ xe một cách nhanh chóng mà không cần phải tốn quánhiều chỉ phí đầu tư ban đầu Từ đó tạo ra một hệ sinh thái mới cho trường học, làmột điểm lợi thế hơn các phần mềm khác

1.2 Mục tiêu vào phương pháp thực hiện

1.2.1 Mục tiêu

Tìm hiểu và thực hiện quy trình xây dựng hybird app với phương

châm “Move faster with a single code base”.

Tìm hiệu về cách tích hợp API xử lý ảnh của các thư viên mã nguôn

mở đê đưa vao ứng dụng nhận diện biên sô xe cho phân mêm.

Xây dựng ứng dụng quản lý bãi xe và đặt món canteen, tích hợp

thanh toán qua ứng dụng di động, có các chức năng cụ thể sau:

Gửi xe, thanh toán nhanh chóng bằng thẻ sinh viên

Nhận diện biển số xe thông minh bằng camera

Xem menu căn tin, đặt món và thanh toán qua app.

Nạp tiền vào app thông qua cổng thanh toán

1.2.2 Phương pháp thực hiện

Tìm hiểu tông quan và khảo sát bài toán

Tìm hiểu về các công nghệ hỗ trợ xử lý ảnh.

Tìm hiểu công nghệ lập trình hybrid app

Áp dụng các kiến thức và phương pháp phát triển hệ thống dé

dua vao phat trién san pham

1.3 Cơ sở lý thuyết

Sử dụng Reactjs để xây dựng web cho bãi giữ xe.

Xây dựng ứng dụng di động quản lý bãi xe và tích hợp căn tin

bằng framework Ionic và React Native

Sử dung framework loopback dé xây dung server.

Xây dựng theo kiến trúc microservices

Nhận diện biển số xe, loại xe: sử dụng API tích hợp doPlaterecognizer cung cấp [12]

10

CHƯƠNG 2 CÁC CÔNG NGHỆ SỬ DỤNG VÀ CÁC GIAI ĐOẠN THỰC

HIỆN

2.1 Giới thiệu chung

Các công nghệ sử dụng dé xây dựng ứng dụng bao gồm: reactjs, ionic framework,

react native, loopback framework, mongoDB, kiến trúc microservices, CI-CD

(Jenkins), vi điện tử momo [4,5,6,7,8].

Một số công nghệ được sử dung trong quá trình xây dựng hệ thống phần mềm có

thé được phân ra thành các nhóm như sau: công nghệ phía backend, công nghệ

phía frontend, công nghệ phục vụ triển khai và công cụ hỗ trợ lập trình

Các công nghệ phía backend

Công nghệ chính sử dụng dé phát triển các Services là Loopback framework của

NodeJS Với kha nang xử lý bat đông bộ các sự kiện một cách nhanh chóng cũng

như có nhiêu framework hồ trợ mạnh, NodeJS được nhóm lựa chọn làm công nghệ

phát triển Backend Về cơ sở đữ liệu, nhóm lựa chọn MongoDB vi tính chat dé

thay đôi các thuộc tính cua đữ liệu và tương thích tot với Loopback framework.

Các công nghệ phía frontend

ReactJS va React Native được sử dụng dé lập trình giao diện Web và phan lõi của

chức năng thanh toán trên mobile vì tinh chat linh hoạt, tiét kiệm được thời gian lập trình.

Tonic là công nghệ được sử dụng dé tích hợp chung với React Native, giúp đây

nhanh quá trình phát trién các màn hình di động không đòi hỏi hiệu suất cao.

Các công nghệ phục vụ triển khai

Docker được sử dụng để đóng gói các services, giúp cho các services của nhóm

chạy được trên nhiều môi trường khác nhau (MacOS, Window, Linux) mà không

cần phải bỏ nhiều thời gian dé thiết lập các cấu hình trên nhiều môi trường khác nhau.

Jenkins giúp tự động hoá quá trình deploy và tích hợp liên tục, tiết kiệm được rất

nhiều thời gian cho việc build mới mã nguồn mỗi khi có sự thay đồi code.

Các công cụ hỗ trợ lập trình

Gitlab là kho lưu trữ mã nguồn phô biến, được tích hợp sẵn nhiều tiện ích nên

nhóm quyết định lựa chọn dé lưu trữ và phát triển mã nguôn.

Visual studio code là một công cụ lập trình với kho extension phong phú được sử

dụng rộng rãi khi phát triển ứng phần mềm open source.

11

Technologies Behaviors

Frontend (Web + Mobile) Backend

React - Build SPA

(Singple page application) nede Node.js - API System

8) Build on top express.js

Redux - Store |

a ` Store management

4 ) MongoDB - Database

lonic Scability & Fast

Build Mobile App

@

Deplopyment Tools

wi,» Docker Gitlab

œ> Containerized applications Version control

Jenkins s4 Visual Studio Code

deployment, scaling, IDE for development

management of docker

Hình 2.1 Minh họa các công nghệ được sử dung

12

2.2. Mô tả chỉ tiết về các công nghệ đang sử dụng

2.2.1 Reactjs

Reactjs là một thư viện viết bằng javascript, dùng để xây dựng giaodiện người dùng do facebook phát triển và được ra mắt vào năm 2013

[4].

Reactjs được xây dựng bằng các component nhỏ mà không phải dùng

các template như các framework khác Mỗi component trong React đều

có một trạng thái riêng, có thể thay đổi, nếu ta thay đôi trạng thái trong

component thì Reactjs sẽ cập nhật component dựa trên những trạng thái

thay đối.

Trong reactjs ta sử dung props dé gửi dữ liệu đến component và state dé

lưu dữ liệu cho các component.

2.2.2 Ionic framewok

Tonic dùng dé lập trình giao diện người dùng cho mobile Là một

framework hỗ trợ việc xây dựng các ứng dụng di động hybird một cách

nhanh chóng, Ionic hỗ trợ và tương thích với nhiều công nghệ lập trìnhweb như React, Angular, Vue nên rất dễ tiếp cận cho các lập trình viên

làm web.

Tonic framework được viết như một ứng dụng web và có thể debug trựctiếp trên trình duyệt nên tiết kiệm rất nhiều thời gian phát triển Ionic hỗ

trợ rất mạnh mẽ về khả năng điều khién các phan cứng native của

mobile như TouchID, Camera, định vi [6].

Hybird app là ứng dụng được viết băng ngôn ngữ lập trình web và được

đặt trong một native container Native container có nhiệm vụ tương tac

với ngôn ngữ lập trình web và các đoạn mã native.

Ưu điểm:

Ung dụng hybird đem lại nhiều lợi ích như khả năng hiển thị nội dụngtrên tat cả thiết bi di động, tận dụng tối đa các tính năng các tính năngcủa thiết bị di động như GPS, camera,

Thời gian và chi phí dùng để tạo một ứng dụng hybird cũng thấp hơn

so với các ứng dụng di động khác.

Có thê hoạt động trên cả hai nền tảng, không cân xây dựng hai code

riêng cho Android và IOS.

13

Ionic còn hô trợ một sô component thiệt kê san dé các lập trình viên sử dụng.

2.2.3 React native

Cũng giống như reactjs thi react native là framework viết bangjavascript để xây dựng giao diện người ding cho mobile [5]

React native được xây dựng bằng các component nhỏ mà không phải

dùng các template như các framework khác Mỗi component trong

React đều có một trạng thái riêng, có thể thay đổi, nếu ta thay đổi trạng

thái trong component thì ReactJs sẽ cập nhật component dựa trên những

trạng thái thay đổi

Sử dụng react native để tương tác với ứng dụng momo Do ứng dụng

momo chỉ hỗ trợ phần thanh toán cho người phát triển trên nền tảngnative app Nên ta sử dụng react native để tương tác với momo và sử

dụng một container trong react native có tên là webview đê liên kêt với giao diện đã xây dung bang framework ionic.

2.2.4 Loopback framework

Loopback là một khung công tac của node.js ma nguồn mã có khả năng

mở rộng cao, cho phép xây dựng các api va các microservices một cách

dễ đàng [3]

Loopback được viết bằng typescript.

Loopback framework còn hỗ trợ QraphQL, tạo giao điện cho bất kỳAPI rest nào, bao gom các đặc điểm nổi bat sau:

- Su dụng các lược đồ dé tạo các định nghĩa dữ liệu QraphQL và các

cấu trúc lồng nhau cho phép truy vấn lòng nhau.

- _ Các tham số hoặc định nghĩa dữ liệu có các kí tự không được hỗ trợ

bởi QraphQL sẽ được tự động xóa.

- OpenAPI-to-QraphQL cung cấp cho người dùng chuyên khóa api

hoặc xác thức thông tin cơ ban.

2.2.5 MongoDB

MongoDB là dang cơ sở đữ liệu phân tán sử dụng mã nguồn mở NoSql

[8] MongoDB có hỗ trợ trên nhiều nền tảng khác nhau và được thiết kế

theo kiểu hướng đối tượng

14

Là một ngôn ngữ truy vấn mạnh mẽ Do MongoDB hỗ trợ các trườnghợp như: tìm kiếm dựa trên địa lí, tìm kiếm đồ thị và tìm kiếm văn bản.

Ưu điểm:

- Linh hoạt trong lưu trữ các kích cỡ dữ liệu khác nhau do chúng

được lưu dưới dạng JSON.

- Cấu trúc của một đối tượng được biểu diễn rõ ràng dưới dạng

JSON.

- MongoDB không có sự ràng buộc trong một khuôn khô hay quy tắc

nhất định, nên tiết kiệm thời gian trong việc kiểm tra về cấu trúc khi

thêm, xóa hoặc cập nhật dữ liệu.

Hạn chê:

- MongoDB không có các tính chất ràng buộc mạnh mẽ như trong

SQL nên khi thao tác với MongoDB cần hết sức can thận Ngoài ra,

MongoDB không hỗ trợ transaction.

2.2.6 Kiên trúc microservices

Kiên trúc microservices gôm các thành phân API Gareway, các

serviceces của hệ thông va broker, được trình bày ngăn gọn như sau:

API Gateway: Đóng vai trò như công giao tiếp trung gian, nhận yêucầu từ phía client (Web, mobile) và điều phối yêu cầu đến service nội

bộ tương ứng API Gateway giúp che dấu kiến trúc phía sau của hệ

thống backend, tăng độ bảo mật cho hệ thống.

Các services của hệ thông:

Là các thành phần nhỏ cấu thành của cả hệ thống, mỗi services sẽ đảm

nhiệm xử lý, tính toán các nhiệm vụ riêng biệt Việc chia nhỏ hệ thống

lớn thành các services nhỏ hon dam bảo được tính mở rộng va én định

của hệ thống Khi một service nhỏ bị chết thì các services khác vẫn

hoạt động bình thường.

Thông thường ở các hệ thống Microservices, mỗi services sẽ kết nối

đến 1 cơ sở dữ liệu riêng, giúp cho quá trình cô lập van đề khi debug

diễn ra nhanh chóng và đảm bảo tích tách biệt của các services.

Các services của hệ thống có thể giao tiếp với các API, các hệ thốngbên ngoài như hệ thống thanh toán, hệ thống xử lý ảnh, để tăng tính

mở rộng cho phần mềm

15

Broker: Broker hay còn gọi là message broker đóng vai trò vừa là

kênh giao tiếp giữa các service nội bộ, vừa là Message Queue Khi yêucầu được gửi quá nhiều mà hệ thống chưa xử lý kịp thị các yêu cầu sẽ

tạm thời được lưu trữ trong Broker, giúp hệ thống không bị quá tải khi

Hình 2.2 Kiên trúc mô hình microservice

Các ưu điêm khi áp dụng kiên trúc microservices vảo xây dựng ứng dụng:

- Linh động hơn trong việc lựa chọn ngôn ngữ, công cụ và nên tang

đê phát triên và triên khai các microservices.

- Mi microservices có kích thước nhỏ, giúp chúng ta dễ tiếp cận và

quản lý hơn.

- Dé dàng thực hiện tự động tích hợp - tự động triển khai (CI-CD)

16

- Cac microservices khởi động nhanh giúp quá trình phát triển, kiếm

thử cũng nhanh hơn Dễ dàng mở rộng và tích hợp với các dịch vụ

bên thứ ba.

- Kién trúc microservices có tính độc lập, khi một microservice bị lỗi

và ngừng hoạt động thì các microservice khác vẫn hoạt động bình

thường Đây là sự khác biệt với mô hình nguyên khối Monolithic.

2.2.7 CI-CD: Jenkins

Tích hợp liên tục (Continuous Integration) là phương pháp phat triểnphần mềm đòi hỏi các thành viên trong nhóm tích hợp công việc thườngxuyên Mỗi ngày, các thành viên đều phải theo dõi và phát triển côngviệc của họ ít nhất một lần Việc này sẽ được một nhóm khác kiểm tra tựđộng, nhóm này sẽ tiền hành kiểm thử truy hồi dé phát hiện lỗi nhanh

nhất có thể.

Các điểm thực tiễn của CI là: tự động build và test, mỗi khi có code thay

đổi sé build lại thông qua build server, báo lỗi cho lập trình viên và quản

lý dự án, có thé nhìn thấy những gì xảy ra (lỗi, các thay đôi ) dé xemxét và giải quyết

Jenkins là một mã nguồn mở dùng đề thực hiện chức năng tích hợp liên

tục và xây dựng các tác vụ tự động hóa [9].

Jenkins tích hợp các source code của các thành viên trong nhóm lại

nhanh chóng một cách liên tục, theo dõi sự thực thi và trạng thái thông

qua các bước kiểm thử

Jenkins được viết bằng Java nên Jenkins có thể kết hợp được với hầu

hết các công cụ khác của hệ thống tích hợp liên tục với nhiều nền tảng

khác nhau.

17

<a ae

z8 —+z—Ệ

Ẻ

Hình 2.3 Mô hình hoạt động của Jenkins

Tiền thân là Hudson được viết bởi Kosuke Kawaguchi tại Sun, ké tir

khi Sun được mualai bởi Oracle vào năm 2010, một bộ phan phat triển

Hudson đã tách ra phát triển riêngvà được đặt tên là Jenkins

Đạt nhiều giải thưởng: Giải thưởng InfoWorld Bossies, 2011 O'Reilly

Open-Source Award, 2011ALM & SCM, SDTimes 100, 2010, 2011,

GlassFish Community Innovation Award 2008, Duke'sChoice Award

2008.

Đặc điểm của jenkins là dé sử dụng, đa nền tảng, hỗ trợ cho nhiều công

nghệ phát trién phan mềm, dé dàng liên kết với các công cụ khác của hệ

thống tích hợp liên tục thông qua các plugin và hoàn toàn miễn phí

18

& Jenkins Hôm qua 12:20

Notification from uit-parking-app-ionic

Latest status of build #16

Status Build Success

Remarks Started by an SCM change.

Committers Huy Cuong Developers admin

View Build

€7 Trả lời

Hình 2.4 Thông báo jenkins khi xây dựng xong một tính năng

Jenkins sẽ nhắn thông báo vào group MS Team dé thông báo về trạngthái trong suốt quá trình xây đựng như hình 2.4

2.2.8 Ví điện tử momo

Với sự phát triển nhanh chóng về công nghệ hiện nay, hình thức thanhtoán bằng ví điện tử đang được nhiều người sử dụng để phục vụ chonhu cầu mua sắm, chuyền tiền, Trong đó ví điện tử momo đượcngười dùng ưa thích sử dụng nhiều

Do đó ứng dụng quản lý bãi xe và tích hợp canteen được chúng em tích

hợp thanh toán qua thẻ sử dụng ví điện tử momo Nếu không có tíchhợp momo thì hình thức thanh toán bằng tiền mặt khi giữ xe và đặt món

ăn ở canteen sẽ làm thời gian chờ lâu hơn.

Momo payment platform api là giải pháp thanh toán cho các đơn vi

kinh doanh, cho phép khách hàng sử dụng tài khoản ví momo đề thanhtoán các dịch vụ trên nhiều nền tảng khác nhau: desktop website,

mobile website, mobile application, pay in bill, web in app momo [7].

Momo có các phương thức thanh toán như sau:

- Công thanh toán MoMo (All-In-One): Áp dụng cho đối tác có

thanh toán trên nền tảng Website, Mobile, Smart TV

- Thanh toán App-In-App: Ap dụng cho đối tác có ứng dung di

động (Android/iOS) muốn mở trực tiếp ứng dụng MoMo dé thanh

toán.

19

- Thanh toán POS: Áp dụng cho đối tác có hệ thống bán hang bang

máy POSS Thu ngân dùng máy scan đẻ quét mã thanh toán trên

app MoMo dé thanh toán

- Thanh toán QR code: Đối tác tạo QR code dé theo định dạng

MoMo cung cấp, khách hàng chi cần dùng app MoMo dé quét mã

và thanh toán.

Momo có cung cấp hai môi trường cho người phát triển là: môi trường

test và môi trường production.

Phương thức thanh toán của ví điện tử Momo được chúng em tích hợp

vào ứng dụng là App-In-App và môi trường test được Momo cung cấp

hoàn toàn miễn phí

Đôi với từng loại môi trường, momo sẽ cung câp cho chúng ta các

thông tin dé câu hình momo api như:

- Partner code: Thông tin dé định danh tài khoản doanh nghiệp

- Access key: Cấp quyền truy cập vào hệ thống momo

- Secret key: Dùng dé tạo chữ ký điện tử.

- Public key: Sử dụng dé tạo mã hóa dữ liệu

Khi sử dụng môi trường test, ta có thê tải xuống app momo test và thực

hiện thanh toán hoặc sử dụng các tài khoản test do momo cung cấp sẵn

2.3 Các giai đoạn thực hiện

Để hoàn thành được đề tài, nhóm đã tiến hành phân tích, lên kế hoạch thực thi các

đâu mục công việc, gôm ba giai đoạn chính

2.3.1 Giai đoạn 1: Tìm hiểu công nghệ và nghiên cứu thị trường

Ở giai đoạn này, nhóm sử dụng công cụ Notion để ghi chú nội dung các buổihọp và các thông tin quan trọng về hướng tiếp cận triển khai của đề tài Tronggiai đoạn 1, nhóm đã tổ chức tổng cộng ba buổi họp mặt dé trao đổi về các

nội dung sau:

- Budi 1: Trao đôi vê lộ trình đê tìm hiệu các công nghệ mới va thông nhât

cách làm việc, tương tác

- Budi 2: Nhóm cùng nhau tìm hiệu và phân tích vê các sản phâm tương tự

đã có trên thị trường, dua ra các so sánh vê diém mạnh, điêm yêu của các sản

phâm đó cũng như tìm ra điêm khác biệt của đê tài so với các sản phâm đã có

- Buổi 3: Chia sẻ kiến thức về Docker, kĩ năng tìm kiếm thông tin và giải

quyết van dé

Meeting note

Add a view

Name

lỀ Frontend roadmap, git commands

3 market research & comparison

Training docker, research methodology

Hình 2.6 Các buỗi hop trong giai đoạn 1 của nhóm

Tag:

git frontend roadmap October 27, 2020

research market November 5, 2020

analytic pros cons

docker _ training November 22, 2020 google

21

2.3.2 Giai đoạn 2: Phân tích chân dung người dùng

Ở giai đoạn này, nhóm đã cùng nhau phân tích chân dung các đối tượngngười dùng dự kiến của sản phẩm Qua phân tích, sản phẩm có ba nhóm

người dùng chính

Sinh viên/học sinh

Công việc/các hoạt động hằng ngày

- Thực hiện gửi và lấy xe ra khỏi bãi xe

- Nghỉ trưa sau các tiết học budi sáng tại trường

- Thực hiện điểm danh tiết học

Cảm xúc khi thực hiện công việc

- Trong lúc gửi xe đầu giờ học: Sinh viên sẽ có tâm lý vội vã, nôn nóng vìsắp trễ giờ vào lớp

- Luc điểm danh: Kết nối dit liệu có thé bị chậm, điện thoại bi do gây matthời gian khi điểm danh

- Lúc ăn trưa: Sinh viên sẽ thắc mắc không biết trưa nay canteen sẽ cómón gì, mệt mỏi vì phải xếp hang dai sau các tiết học căng thăng budisáng

Hạn chế

- Quá trình gửi và lây xe thường mat nhiêu thời gian chờ đợi vào các gid

cao diém

- Đôi với các bãi giữ xe có diện tích lớn thì sinh viên phải mat khá nhiêu

thời gian đê tìm được chỗ đậu cho mình

- Vào giờ ăn trưa, hau hét các sinh viên cân nghỉ ngơi dé bô sung lại nang lượng dé tiép tục các tiệt học buôi chiêu Do đó, việc xếp hàng dai mua phiêu ăn rat dé gây mệt mỏi và tôn nhân viên phục vụ.

Giải pháp dự kiến

- Dé giải quyết được van đề nhức nhối về tình trang kẹt xe ở công ra vàotại các khung giờ cao điểm, giải pháp thanh toán tự động bằng cách quẹt

22

thẻ giúp tiết kiệm được thời gian của cả sinh viên và nhân viên bảo vệkhi lay xe ra khỏi bãi

- Vân đề xếp hàng dài vào giờ ăn trưa cũng được giải quyết với giải pháp

đặt món và thanh toán trực tiếp trên ứng dụng di động Thông qua chứcnăng xem trước và đặt món trên ứng dụng, sinh viên có thể biết được

chính xác thực đơn của hôm nay và nhanh chóng thanh toán mà không

cần mua phiếu ăn hay trực tiếp dùng tiền mặt

Nhân viên bảo vệ

Công việc/các hoạt động hằng ngày

- Nhân viên bảo vệ cân phải trực liên tục tại công ra vào bãi xe đê giám sat

các phương tiện ra vào, đảm bảo tránh được mât mát tải sản

- Nhân viên bảo vệ cũng có vai trò tham gia xử lý các sự cô liên quan đên

bãi giữ xe như tình trạng mât mát, sinh viên báo không tìm thây xe,

Cảm xúc khi thực hiện công việc:

- _ Với tính chất công việc yêu cầu tập trung cao độ trong quá trình thực

thi, chỉ một sơ suất nhỏ có thể gây thiệt hại nghiêm trọng về tài sản,

nhân viên bảo vệ luôn luôn phải trong trạng thái sẵn sàng túc trực.

Hạn chê

- Vao Các gid cao điểm như đầu giờ học, lúc tan ca hoặc vao các kì thi,

lưu lượng sinh viên tập trung cùng lúc rất đông Lúc này, khối lượng

công việc của nhân viên bảo vệ tăng lên đáng kẻ, dé dẫn đến quá tải va

sai sot trong công việc

- Nhan viên bảo vệ còn phải quan sát liên tục vào màn hình dé đối chiéu

thông tin xe mỗi khi có xe ra vào bãi.

- Khi bãi xe có sự cỗ như mat mát, hỏng hóc thi rất khó dé thực hiện truy

vết điều tra nguyên nhân

- Khi mất điện hoặc hệ thống máy tính gặp sự cố thì quá trình gửi xe phải

thực hiện ghi chép thủ công bằng số sách, ảnh hưởng nghiêm trọng đếnhiệu suất công việc

23

Giải pháp dự kiến

- Giải pháp giữ xe sử dụng mã QR sẽ giúp giảm bớt sự phụ thuộc của hệ

thống giữ xe vào các yêu tố bất khả kháng như mất điện, hỏng hóc máy

móc

- Chức năng quan ly và truy vết sự cô giúp quan lý, nhân viên bảo vệ

nhanh chóng dò tìm được nguyên nhân

2.3.3 Giai đoạn 3: Lập trình ứng dụng và hoàn thiện báo cáo

Dựa vào các phân tích đã hoàn thiện ở giai đoạn 2, nhóm tiếp tục tiến

hành thực hiện phân rã các đầu mục công việc và lên kế hoạch hoàn

thiện các tính năng theo từng giai đoạn nhỏ.

Do quy mô của nhóm nhỏ (hai thành viên) nên nhóm quyết định chọnmốc thời gian 2 tuần làm cột mốc phát hành nội bộ Cứ mỗi 2 tuần thìnhóm sẽ tô chức một budi xem xét lại toàn bộ các tính năng đã phát triển,các cải thiện đã thực hiện trong thời gian 2 tuần Qua buổi đó, nhóm sẽthảo luận về các khó khăn gặp phải trong quá trình làm việc và cùng đưa

ra phương án giải quyết dé các công việc trong 2 tuần kế tiếp được thựchiện suôn sẻ hơn, tránh được các lỗi mà 2 tuần trước đã gặp phải

Nhóm lựa chọn Trello làm công cụ quản lý tiễn độ công việc vì tính đơngiản va dé sử dụng Trello là công cụ giúp quan lý dự án miễn phí, linh

hoạt và khá trực quan Các đầu mục công việc cần quản lý được tô chức

ở dạng bảng Kanban, chia thành nhiều cột và có thể được tùy chọn linhhoạt theo nhu cầu người dùng

Ở đây, nhóm chia bảng Kanban thành 4 cột tương ứng với 4 trạng thái

của công việc:

- TODO: Các đầu mục công việc cần được thực hiện ở 2 tuần hiện

tại

- DOING: Các đầu mục công việc đang được thực hiện

- DONE: Các công việc đã được giải quyết xong

- BACKLOG: Các công việc, các tính năng nam trong kế hoạch

thực hiện của nhóm nhưng tạm thời chưa được thực hiện ở 2 tuần

24

hiện tại Cuối mỗi mốc thời gian 2 tuần, trong buổi xem xét và cập

nhật tiến độ, tình hình chung của đề tài, nhóm sẽ cùng nhau đánh

giá lại độ ưu tiên và khả năng thực thi của các tính năng Sau đó,

nhóm tiến hành cập nhật lại cột BACKLOG và TODO tương ứngvới kế hoạch mới

0) Board Khoaluan w Không gian làm việc Trello ‘Free’ © Public mm ¥ Automation Show menu

TODO abe DOING ave DONE ave BACKLOG

[Mobile] Đặt món canteen API [Mobile] - Xem lịch sử giao dịch [Admin] - Nạp tiền cho tài khoản [Mobile] - Đăng nhập bằng QR code.

= M12 © = Bop

[Bãi xe] - Kiểm soát ra vào Phase 3:

re =_ QR Code

[Bãi xe] - Kiểm soát ra vào Phase 1

Đ ©1 k¿ 5 [Mobile] Đặt món canteen [Mobile] - Xem tổng số dư tài khoản

[Doc] Mô tả các công nghệ sử dung

[Doc] Khảo sát các phần mềm liên

quan, lý do khác biệt, lợi thế so với các phần mềm khác

=>

[Doc] Phân tích các mô hình triển

khai

+ Add a card > 8

| Quay video demo

Hình 2.7 Công cụ bang Kanban của Trello

25

CHƯƠNG 3 PHAN TÍCH THIẾT KE HE THONG

Hệ thống do nhóm xây dựng gồm hai nhóm tính năng chính là Phần mềm quản lý bãi xe và Ứng

dụng di động cho phép đặt món canteen Cả hai nhóm tính năng đều được tích hợp với chức năng

nạp tiền và thanh toán Thông tin về số dư tài khoản và lịch sử giao dịch có thé được truy vân

trên ứng dụng di động Các nội dung dưới đây sẽ đặc tả chỉ tiết từng thành phần của hệ thống.

3.1 Hé thống xử lý xe ra vào

3.1.1 Sơ đồ use case hệ thống xử lý xe ra vào

Hệ thống xử lý xe ra vào

Quet thẻ đưa xe ra khỏi bãi

Đặc tả use case: Quẹt thẻ đưa xe vào bãi

Tên use case: Quẹt thẻ đưa xe vào bãi.

Mã use case: UC-1.1.

Mô tả: Sinh viên muốn quet thé dé gửi xe vào bãi

Actor: Sinh viên

Độ ưu tiên: Phải có

Trigger: Sinh viên muốn gửi xe

Pre-Condition: Sinh viên phải có phương tiện và thẻ

26

Post-Condition: Nhân viên bảo vệ sẽ xác nhận xe đã vào bãi.

Luông sự kiện cơ bản

1 Sinh viên tiên vào công vào bãi giữ xe, tiên hành quet thẻ vào

máy

2 Hệ thông trích xuât hình ảnh từ camera và gửi lên dịch vụ phan

tách biên sô xe

3 Hệ thống ghi nhận hoạt động gửi xe thành công của sinh viên

Đặc tả use case: Quẹt thẻ đưa xe ra khỏi bãi

Tên use case: Quẹt thẻ đưa xe ra khỏi bãi.

Mã use case: UC-1.2.

Mô tả: Sinh viên muốn quet thẻ dé dua xe ra khỏi bãi

Actor: Sinh viên

Độ ưu tiên: Phải có

Trigger: Sinh viên muốn lấy xe ra khỏi bãi

Pre-Condition: Kiểm tra phải đúng phương tiện và quá trình thanh

toán phải thành công

Post-Condition: Sinh viên được lấy xe ra khỏi bãi

Luông sự kiện co bản

1 Sinh viên tiến ra công giữ xe, tiến hành quẹt thẻ vào máy

2 Hệ thống trích xuất hình anh từ camera và gửi lên dich vụ phân

tách biên số xe

3 Hệ thông tiệp tục so sánh thông tin biên sô hiện tại so với lúc

xe vào

4 Thông tin biển số hợp lệ, hệ thống thực hiện trừ tiền vào tài

khoản sinh viên

5 Hệ thống ghi nhận xe đã ra khỏi bãi, kết thúc quá trình gửi xeLuông ngoại lệ

4a Thông tin biển số không đúng so với lúc vào, hệ thống từ chối

xera

27

Đặc tả use case: Thanh toán tiền gửi xe

Tên use case: Thanh toán tiền gửi xe.

Mã use case: UC- 1.3.

Mô tả: Sinh viên muốn thanh toán tiền để lấy xe ra khỏi bãi

Actor: Hệ thống thanh toán, Sinh viên

Độ ưu tiên: Phải có

Trigger: Quet thẻ dé ra bãi giữ xe

Pre-Condition: Trong thẻ sinh viên liên kết với ứng dụng phải có đủtiền thanh toán

Post-Condition: Số dư trong thé sinh viên liên kết với ứng dụng sẽ bịtrừ và xe được lấy ra khỏi bãi

Đặc tả use case: Xác nhận cho xe vào bãi

Tên use case: Xác nhận cho xe vào bãi.

Mã use case: UC-1.4.

Mô tả: Nhân viên bãi xe xác nhận có phương tiện vao bãi.

Actor: Nhân viên bảo vệ

Độ ưu tiên: Phải có Trigger: Quẹt thẻ đưa xe vào bãi

Pre-Condition: Phương tiện đã được camera chụp lưu dữ liệu lại.

Post-Condition: Xe được vào bãi giữ xe, hệ thống ghi nhận thông tin

xe vào bãi g1ữ.

Đặc tả use case: Xác nhận cho xe ra khỏi bãi

Tên use case: Xác nhận cho xe ra khỏi bãi.

Mã use case: UC-1.5.

Mô ta: Nhân viên bãi xe xác nhận có phương tiện rời bãi xe

Actor: Nhân viên bảo vệ Priority: Phải có

28

Trigger: Quẹt thẻ đưa xe rời bãi giữ xe

Pre-Condition: Kiểm tra đúng phương tiệnvà phải thanh toán qua thẻ

Post-Condition: Phương tiện được ra khỏi bãi xe

3.1.2 Sơ đồ hoạt động xử lý xe vào bãi

Hiển thị thông báo sso hông bảo

từ chối cho xe vào sso

29

3.1.3 Sơ đồ hoạt động xử lý xe ra khỏi bãi

44] _ Sosdnh thong tin if Thông tin khóp _

lúc vào và lúc ra

Kiếm tra thông tin

biển số có khốp * Thông tin khớp

không Tài khoản.

`" \ ' J

Hình 3.3 Sơ đồ hoạt động xử lý xe ra bãi

30

3.1.4 Sơ đồ tuần tự xử lý xe vào bãi

Sinh viên Máy trạm Server parking Server xử lý ảnh

Quẹt thẻ vào

máy quét Chụp ảnh biển số

Yêu cầu tách biển số từ ảnh

lext

Yêu cầu kiểm tra biển số

đã có trong bãi chưa

Biến số đã tôn tại

[Biển số đã có trong bãi]

H D4945522.55/4S0055818420505008n5 5S MMMM Lao nen nena acanasusensnnaannness MMMM Guesnasennennensudewsnndanecnvensessanieasnenawenss

[Biển số chưa có trong bãi]

Biển số chưa tồn tại

_ Hiển thị thông báo

cho phép/từ chối xe

vào

Hình 3.4 Sơ đồ tuần tự xe vào bãi

31

3.1.5 Sơ đồ tuần tự xử lý xe ra khỏi bãi

Tai khoản không đủ

[Thanh toán thất bại]

[Thanh toán thành công]

Thanh toán thành công

Thanh toán thành công,

3.1.6 Sơ đồ lớp hệ thống quản lý bãi xe

<<entlty>>

USER

email | PaddngControl

password verifyLicensePlate() 1 1 outs Sorami

fullName 1_ capture() -_——_ showMessageAllowVehical()

phone addNewTicket() showMessageRejectVehical()

-<<entty>> <entitys> “<enRys> <<enys>

GUARD_STAFF | _ STUDENT vice PARKING_SLOT

timeStartShift checkin() 14 0.4 name occupiedSlots

allowVehicalln() checkout() | description | lat

rejectVehicalln() brand long

allowVehicalOut() | image status

rejectVehicalOut() []

Hình 3.6 Sơ đồ lớp hệ thống quản lý bãi xe

33