TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 180
XÂY DỰNG ỨNG DỤNG HỖ TRỢ CÔNG TÁC QUẢN LÝ TẠI KHOA ĐIỆN TỬ
BUILDING AN APPLICATION TO SUPPORT MANAGEMENT
WORK AT FACULTY OF ELECTRONIC ENGINEERING
Nguyễn Văn Thơ1,*, Phạm Văn Dũng2, Nguyễn Phương Nam3,
Lê Ngọc Bắc4, Vũ Thành Đạt5, Bồ Quốc Bảo6
1Lớp TTMT 02 - K16, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
2Lớp TTMT 01 - K16, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
3Lớp TTMT 01 - K17, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
4Lớp KTMT 01 - K17, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
5Lớp DTTT 07 - K15, Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
6Khoa Điện tử, Trường Đại học Công nghiệp Hà Nội
*Email: nguyenvanthohaui@gmail.com
TÓM TẮT
Ứng dụng di động đa nền tảng phát triển trên 2 nền tảng phổ biến hiện tại là Android và IOS để hỗ trợ cho công tác
quản lý, điều hành tại khoa Điện tử. Ứng dụng này được phát triển dựa trên framework ReactNative, một công cụ do
Facebook phát triển, kết hợp với Django, một công cụ backend mạnh mẽ cho ứng dụng web, và cơ sở dữ liệu MySQL,
cung cấp những tính năng mới như đăng ký phòng thực hành, cập nhật thông báo lịch thực hành,.... giúp tiết kiệm thời
gian, nâng cao hiệu quả trong công việc, trong học tập và giảng dạy.
Từ khóa: ReactNative, Django, MySQL.
ABSTRACT
The multi-platform mobile application is developed on two popular platforms today, Android and IOS, to support
management and operations at the Faculty of Electronics. This application is developed based on the ReactNative
framework, a development tool of Facebook, combined with Django, a powerful backend tool for web applications and
MySQL database, providing new features such as registering for practice rooms, updating practice schedule information,
etc. to help save time, improve efficiency in work, study and teaching.
Keywords: ReactNative, Django, MySQL.
1. GIỚI THIỆU
Các trường đại học, cao đẳng hiện nay đang gặp phải
nhiều thách thức trong việc quản lý thông tin sinh viên, lịch
học, tài liệu học tập, và các hoạt động ngoại khóa. Hệ thống
quản lý truyền thống, dựa trên các phương pháp thủ công
và giấy tờ, thường gây ra nhiều bất tiện và thiếu hiệu quả.
Nghiên cứu ứng dụng di động đa nền tảng hỗ trợ quản lý tại
Khoa Điện tử sử dụng React Native, Django và MySQL
nhằm giải quyết những vấn đề này bằng cách xây dựng một
hệ thống quản lý hiện đại, tiện lợi và hiệu quả.
Lợi ích của hệ thống
Hiệu quả quản lý: Ứng dụng giúp tự động hóa nhiều
quy trình quản lý, từ việc lưu trữ và truy xuất thông tin sinh
viên, lịch học, đến việc quản lý tài liệu học tập và các hoạt
động ngoại khóa. Điều này giúp giảm thiểu sai sót và tăng
cường hiệu quả công việc của cán bộ khoa.
Truy cập thông tin dễ dàng: Sinh viên và giảng viên
có thể dễ dàng truy cập vào thông tin cần thiết mọi lúc, mọi
nơi thông qua ứng dụng di động. Điều này tạo ra một môi
trường học tập và làm việc linh hoạt hơn.
Tăng cường tương tác: Ứng dụng cung cấp các tính
năng như thông báo, lịch trình, và diễn đàn trao đổi, giúp
tăng cường sự tương tác giữa sinh viên và giảng viên, cũng
như giữa sinh viên với nhau.
Theo nghiên cứu từ "International Journal of Computer
Applications" (IJCA), việc sử dụng các ứng dụng di động
trong quản lý giáo dục đã chứng minh được hiệu quả rõ rệt,
với các lợi ích như tăng cường tính chính xác trong quản lý
dữ liệu, cải thiện khả năng giao tiếp và tương tác giữa các
bên liên quan. Ngoài ra, báo cáo của "Journal of
Educational Technology Development and Exchange"
(JETDE) cũng nhấn mạnh rằng ứng dụng di động có khả
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 181năng nâng cao trải nghiệm học tập của sinh viên thông qua
việc cung cấp tài nguyên học tập và thông tin một cách
thuận tiện và nhanh chóng .
2. CƠ SỞ LÝ THUYẾT VÀ PHƯƠNG PHÁP NGHIÊN
CỨU
Công nghệ sử dụng
React Native: Đây là một framework mã nguồn mở do
Facebook phát triển, cho phép xây dựng các ứng dụng di
động có hiệu năng cao, chạy trên cả iOS và Android từ một
mã nguồn chung. Việc sử dụng React Native giúp giảm
thiểu công sức và chi phí phát triển, đồng thời đảm bảo tính
nhất quán và dễ dàng bảo trì của ứng dụng.
Django: Là một web framework Python mạnh mẽ và
linh hoạt, Django giúp phát triển các ứng dụng web nhanh
chóng và an toàn. Với các tính năng như ORM (Object-
Relational Mapping), authentication, và admin interface,
Django là lựa chọn lý tưởng để xây dựng backend của ứng
dụng.
MySQL: Là một hệ quản trị cơ sở dữ liệu quan hệ phổ
biến và mạnh mẽ, MySQL cung cấp khả năng lưu trữ và
quản lý dữ liệu hiệu quả. Việc sử dụng MySQL đảm bảo
rằng ứng dụng có thể xử lý lượng lớn dữ liệu và truy vấn
phức tạp một cách nhanh chóng.
Mô hình hoạt động của hệ thống
Hình 1. Sơ đồ hoạt động mô hình MVC
MVC (Model-View-Controller) là một mô hình thiết kế
phần mềm phổ biến, được sử dụng rộng rãi trong việc phát
triển các ứng dụng web và di động. Mô hình này chia ứng
dụng thành ba thành phần chính:
Model: Quản lý dữ liệu và logic của ứng dụng. Model
tương tác trực tiếp với cơ sở dữ liệu và xử lý các yêu cầu từ
Controller.
View: Quản lý giao diện người dùng. View chịu trách
nhiệm hiển thị dữ liệu từ Model và gửi các tương tác của
người dùng tới Controller.
Controller: Điều khiển luồng dữ liệu giữa Model và
View. Controller nhận các yêu cầu từ người dùng thông qua
View, xử lý chúng và cập nhật Model, sau đó cập nhật lại
View.
3. KẾT QUẢ NGHIÊN CỨU
Hình 2. Sơ đồ Usecase
Trong nghiên cứu này, các công nghệ React Native,
Django và MySQL được sử dụng để xây dựng một ứng
dụng di động đa nền tảng. Dưới đây là cách triển khai mô
hình MVC cho ứng dụng:
Model
MySQL: Là hệ quản trị cơ sở dữ liệu quan hệ, MySQL
sẽ được sử dụng để lưu trữ tất cả dữ liệu của ứng dụng, bao
gồm thông tin sinh viên, lịch học, tài liệu học tập, và các
hoạt động ngoại khóa.
Django ORM: Django sử dụng ORM (Object-Relational
Mapping) để tương tác với cơ sở dữ liệu MySQL. ORM
giúp ánh xạ các đối tượng Python thành các bảng trong cơ
sở dữ liệu, tạo điều kiện thuận lợi cho việc truy vấn và thao
tác dữ liệu một cách trực quan và dễ dàng.
View
React Native: Là framework để xây dựng giao diện
người dùng của ứng dụng di động. React Native cho phép
phát triển giao diện nhất quán trên cả hai nền tảng iOS và
Android từ một mã nguồn chung.
Components: Trong React Native, View được chia
thành các thành phần (components) nhỏ, mỗi thành phần
đảm nhận một nhiệm vụ cụ thể và có thể tái sử dụng. Các
components này sẽ hiển thị dữ liệu nhận được từ Controller
và gửi các sự kiện của người dùng trở lại cho Controller
xử lý.
Controller
Django: Django sẽ đóng vai trò là backend server, xử lý
các yêu cầu từ ứng dụng di động. Django nhận các yêu cầu
từ React Native (thông qua API), xử lý logic nghiệp vụ,
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 182tương tác với Model (MySQL) để lấy hoặc cập nhật dữ liệu,
và trả kết quả về cho React Native.
RESTful API: Django REST Framework sẽ được sử
dụng để xây dựng các API RESTful, cho phép ứng dụng di
động gửi các yêu cầu HTTP (GET, POST, PUT, DELETE)
để thực hiện các thao tác CRUD (Create, Read, Update,
Delete) với dữ liệu.
Luồng hoạt động của MVC trong ứng dụng cho chức
năng đăng nhập
Người dùng: Thực hiện chọn chức năng đăng nhập.
Hình 3. Màn hình chức năng “đăng nhập”
View (React Native): Gửi yêu cầu của người dùng đến
Controller (Django) thông qua API.
Hình 4. Gửi yêu cầu ‘đăng nhập’ đến controller
Controller (Django): Nhận yêu cầu, xử lý logic nghiệp
vụ cần thiết và tương tác với Model (MySQL) để truy xuất
hoặc cập nhật dữ liệu.
Hình 5. Xử lý request từ ‘Người dùng(View)’ và thao tác với cơ
sở dữ liệu
Model (MySQL): Lưu trữ và quản lý dữ liệu của ứng
dụng. Dữ liệu sẽ được truy xuất hoặc cập nhật theo yêu cầu
từ Controller.
Hình 6. Dữ liệu người dùng được lưu trong cơ sở dữ liệu
Controller (Django): Nhận kết quả từ Model, xử lý tiếp
nếu cần thiết và gửi dữ liệu phản hồi lại cho View (React
Native).
Hình 7. Mô phỏng quá trình xử lý yêu cầu và phản hồi lại
View (React Native): Cập nhật giao diện người dùng
dựa trên dữ liệu nhận được từ Controller.
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI HANOI UNIVERSITY OF INDUSTRY Tập san SINH VIÊN NGHIÊN CỨU KHOA HỌC Số 14 ● 2024 183
Hình 8. Màn hình chức năng chính sau khi đăng nhập thành công
4. KẾT LUẬN VÀ KHUYẾN NGHỊ
Đánh giá kết quả
Công việc đã hoàn thành
Cơ sở dữ liệu sinh viên
Kết nối với cơ sở dữ liệu
Chức năng đăng nhập
Chức năng quên mật khẩu
Chức năng xem thông tin học phần
Thời khóa biểu hiện lên theo từng ngày trong tuần
Truy suất được thông tin của từng sinh viên
Truy suất thông tin từng môn học theo từng ngành,
kỳ, theo đăng ký
Công việc chưa hoàn thành
Cơ sở dữ liệu giảng viên
Chức năng đối tượng người dùng giảng viên
Chức năng đối tượng người dùng Admin
Các phần chức năng còn lại của sinh viên
Xử lý hoạt động giữa các thiết bị khác mạng
Kết luận và hướng phát triển
Trong quá trình thực hiện nghiên cứu, dù đã dành nhiều
thời gian nhưng vẫn chưa thể đạt được kết quả như mong
đợi là một ứng dụng giúp đáp ứng công tác quản lý tại khoa
Điện tử.
Để tiếp tục hoàn thiện ứng dụng, trong thời gian tới
nhóm tác giả sẽ giành nhiều thời gian hơn nghiên cứu một
mô hình cụ thể ví dụ như microservice,.... và áp dụng một
số thuật toán như tô màu đồ thị, tìm đường đi ngắn nhất,...
để hoàn thiện các công việc còn lại:
Cơ sở dữ liệu giảng viên
Các chức năng còn lại của ứng dụng
Tiếp tục hoàn thiện và nâng cấp những chức năng đã
làm được
Áp dụng thuật toán tô màu đồ thị để phát triển chức
xếp lịch học thực hành
Phát triển ứng dụng theo mô hình microservice
TÀI LIỆU THAM KHẢO
[1]. Learning-React-Native 2016. Building native app with Javascripts, Bonnie Eisenmen, United State of America.
[2]. Learning JavaScripts, 2016. Add sparkle and life to your web pages, Ethan Brown, United State of America
[3]. Giáo trình hệ quản trị cơ sở dữ liệu SQL, Đại học Công nghiệp Hà Nội, Tổ HTTT Đại học Công nghiệp Hà Nội.
[4]. https://reactnative.dev/docs/components-and-apis
[5]. https://www.w3schools.com/MySQL/default.asp
[6]. https://docs.djangoproject.com/en/5.0/
[7]. https://developer.android.com/docs
[8]. https://nodejs.org/docs/latest/api/
[9]. https://viblo.asia/p/xay-dung-api-voi-django-rest-framework-Do754PXJ5M6
[10]. https://viblo.asia/p/authentication-voi-django-rest-framework-924lJ3x65PM
[11]. https://www.javascript.com/
[12]. https://reactnavigation.org/docs/elements/
[13]. https://docs.expo.dev/
[14]. https://docs.djangoproject.com/en/5.0/
[15]. https://docs.python.org/3/