CHƯƠNG 1. GIỚI THIỆU DE TÀI 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 minh giấ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ọc cho đế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ển khai ở 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ực hiệ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. Mục tiêu vào phương pháp thực hiện 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. 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. 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 do Platerecognizer cung cấp [12]. CÁC CÔNG NGHỆ SỬ DỤNG VÀ CÁC GIAI ĐOẠN THỰC HIỆN 2. 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. ` Store management Redux - Store | 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. Mô tả chỉ tiết về các công nghệ đang sử dụng 2. Reactjs Reactjs là một thư viện viết bằng javascript, dùng để xây dựng giao diệ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. 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ình web 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ực tiế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ụng trê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ăng củ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.
React native Cũng giống như reactjs thi react native là framework viết bang javascript để 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ảng native 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. 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. 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ường hợ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.