Xây dựng ứng dụng hỗ trợ tìm kiếm thợ sửa khóa

React Native and Fhebase technologies are used to develop the application, and research focuses on exploring new technologies to improveperformance and increasecustomer dust indie servic

Hội nghị Khoa học trẻ ỉần 5 năm 2023(YSC2023)-ỈUH

YSC5.F024

XÂY DựNG ỨNG DỤNG HÕ TRỢ TÌM KIỂM THỢ SỬA KHÓA

NGUYỄNVĂNTHẮNG1’, NGUYỄNMINH VUƠNG2, NGUYỄNVĂNTRINH1

Khoa Công nghệ Thông tin, Trường Đại học Công nghiệp Thành phổ Hồ Chỉ Minh

\guyenvanthang@iuh edu vn

trongcác hoạt động tìm kiếm dịchvụ Tuy nhiên, việctìmkiếm một thợ khóa đáng tin cậylàmột thách thức đối vớikhách hàng Vì vậy, nghiên cứutập trung vào pháthiển một ứng dụng di động giúp khách hàng tìmkiếm và kết nốicácthợ khóa chuyênnghiệp trong khu vực của họ ứng dụng cung cấp cáctính năng hiển thị vị trí của các thợ khóa gần đóvà xếp hạng của họđể giúp kháchhàng tìmthợ khóa phù hợp ứng dụngcũng tích hợp Google Maps API để thợ khóa có thể cập nhậtvị trí hiện tạivà tiếp cận vị tríkhách hàng nhanh chóng Sửdụng công nghệReactNativevà Fhebase để phát triển ứng dụngvà tập trung vào việc nghiên cứucác côngnghệmớiđể cải thiện hiệunăng và tăng sự tin tưởng của khách hàng đốivới dịch vụ

Từ khóa Google Maps API,React Native, Fhebase

Abstract Currently, mobile applications are not justa tool for entertainment but also assist US in finding services However, finding a reliable locksmith is a challenge for customers Therefore,theresearch focuses

on developing a mobile application that helps customers search for and connect with professional locksmiths in their area The application provides features to display die location and ratings ofnearby locksmiths, helping customers findthe right locksmith The application also integrates Google Maps API, allowing locksmiths to quickly update theữ current location and access die customer's location React Native and Fhebase technologies are used to develop the application, and research focuses on exploring new technologies to improveperformance and increasecustomer dust indie service

1 LÝ DO CHO Sự XUẤT HIỆN CỦA ỨNG DỤNG HÕ TRỢ TÌM THỢ SỬA KHÓA?

Trong cuộc sống hiện đại, ứng dụngdi động hở thànhmột phần không thể thiếucủa conngười, vì nó cung cấp cho chúng ta tiện ích và tiện lợi dong mọi lĩnh vực Trong lĩnhvực tìm kiếm dịch vụ, việc tìm kiếm một thợ sửa khóa đáng tin cậy là mộtthách thức đối vớikháchhàng.Việctìmthợsửa khóa huyềnthống

có thể làmkháchhàng mất nhiềuthời gian và công sức để tìm một thợ sửakhóa chuyênnghiệp, đáng tin cậyvàgiá cả hợplý Do đó sự xuất hiện của ứng dụng di động hỗ trợtìm thợsửa khóa đã giúp giải quyết vấn đề này vàtạo ra sự tiện lợi cho người sử dụng

2.1 Lọi ích của khách hàng khi sử dụng úng dụng

• Tiết kiệm thời gianvà côngsức: Khách hàng không cần phảitốnnhiều thời gianvàcông sức để tìm kiếm thợ sửakhóaphùhợp Thay vào đó, họcó thểsửdụngứngdụng để tìm kiếm các thợ sửa khóa dong khuvực của mình và chọn thợ sửakhóaphù hợp

• Tăng tính chínhxác:ứng dụng hỗ trợ tìmthợ sửa khóagiúp khách hàng tìmkiếm và kết nốivới các thợ sửa khóa chuyên nghiệp trong khu vực của họ Điềunàyđảmbảo tính chính xácvàđộtin

2.3 Vai trò của ứng dụng hỗ trợ tìm thợ sửa khóa

• Tự động hóatấtcả quỵ hình:Kếtnốivới khách hàngvà thợ sửa khóa,cập nhậttrạng thái đơn hàng, thống kê đượcsố lượng đơn yêu cầu trong ngày

• Thợ sửa khóa được hỗ trợ tối đanhờ hệ thống định vị GPS, giúp tìmra địa điểm nhanh chóng, chính xác

• Bảo mật thông tin khách hàng,thông tinđơn hàngvà cả thông tin của thợ sửa khóa

Tóm lại, ưng dụng hỗ trợ tìm thợ sửa khỏa đỏng vai trò quan trọng trong việc khách hàng và thợ sửa khỏa, đồng thời mang lại lợi ích cho cả hai bên trong việc tìm kiếm và cung cấp dịch vụ sửa khỏa chất lượng.

3 CÁC CÔNG NGHẸ LIÊN QUAN

3.1 NodeJS

• NodeJS là một nền tảng (platform) phía Server side được xây dựng, vận hành hênV8 JavaScript runtime của Chrome giúp xâydựngvà phát hiển các ứngdụngmạngmột cách nhanhchóng và có khảnăng mở rộng dễdàng

• Node.js ra mắtvào năm2009,bởi RyanDahlvànhận sựbảo trợtừcông tỵ Joyent (Hoa Kỳ)

• Phan corebên dưới củaNode.js hầu hết đượcviếtbằng C++ Chính vì thếmà tốc độ xửlývà hiệu năngkhá cao

• Bên cạnh đó, Node.js còntạo ra ứngdụng có tốc độ xửlý nhanh vớithời gian thực (real-time)

• Node.js cũng được áp dụng để tạo cácsản phẩm cólượng truycập lớn,mở rộng nhanh và đổi mới công nghệ hoặc tạodựán startup tiết kiệm thời gian nhất

Nodejs có nhiều đặc điểm nổi bật, vượttrội Nắm được các đặc điểm này sẽ giúp bạn hiểu sâuhơn về Nodejs, đồngthời đưaraquyết địnhsử dụng nền tảng này chính xác

• Bấtđồng bộ vàphát sinh sự kiện(Non-blocking and Event Driven): Tất cáccác APIs của thưviện Node.js đều bấtđồng bộ (non-blocking), NodeJS không cần đợi một API trả về dữ liệu Server chuyển sang mộtAPI khácsau khigọi nó và có cơ chế riêng đểgửi thông báovànhậnphảnhồivề các hoạt động của Node.js và API đãgọi

• Tốc độ nhanh: Phan core phía dưới được viết gần như toàn bộ bằng C++ kếthợp Chrome V8 Enginenên tốc độ xử lýcông việc củaNode.js cực nhanh, nhưngvẫnđảm bảo được tính chuẩn xác

• Đơn giản- Hiệu năng cao: Node.js sử dụng một mô hình luồng đơn luồng (single thread) và các

sự kiện lặp (event-loop) Cơ chế sự kiện chophép phía Servertrả về phản hồitheonon-blocking, đồng thời tăng hiệu quả sửdụng Cácluồng đơn cung cấpdịch vụ cho nhiềurequest hơn han Server huyền thống

• Khônglưu bộ nhớ đệm (non buffer):NentảngNode.jskhôngcó vùng nhớ đệm, tứckhông cung cấp khả năng lưu hữ dữ liệu buffer

Hội nghị Khoa học trẻ lần 5 nám 2023(YSC2023)-ỈUH

Ảnhminh họaNodeJ s

3.2 React Native

React Native là gì?

Được phát triển bởiFacebook, React Native là mộtframework hướng đến phát triển ứng dụng di động đa nền tảng

Với sự trợgiúp của React Native, lập trình viên(developer) có thể sử dụng JavaScript để tạora mobile apps (ứng dụngdi động) hỗtrợ cho cảnền tảng Android và ÍOS

Instagram, Facebook, Skype, lànhững ứng dụng nổibậtsử dụng React Native

Ảnh minh họa React Native

React Native hoạt động như thế nào?

ReactNative hoạt động đượcnhờ tích họp 2 threadlà MainThread và JS Thread cho ứngdụng mobile Trongđó:

■ Main Thread: cập nhật giao diện người dùng (UI)và xử lýtươngtác ngườidùng

Ảnh minh họa React Native

o Cộng đồng người dùng lón

React Native được đánh giá là một trong những Framework được yêu thích nhất (khảo sát của stack overflow vào năm2019)

Nhờ cộng đồng ngưòi dùng rấtlớn trêntoàn thế giới, bạn có thể tim sự hỗ trợnếugặp phải bugs

o Tínhồn định và tối ưu

Được phát triển bởi Facebook, React Native có hiệu năng ốn định khácao

• Mã React Native giúp đơn giảnhóa quá trìnhxử lýdữ liệu

* Độingũ phát triển ứng dụng không quá lớn

• Xâydựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau

■ Trãinghiệmngười dùng tốt honkhi so sánh vóiứng dụngHybrids

Hội nghị Khoa học trẻ lần 5 nám 2023(YSC2023)-ỈUH

Ảnh minhhọa React Native

Nhược điểm

• Yêucầu Native code

■ Hiệu năng kém honsovới Native App

* Bảo mật chưathật sự tốt do dùng JavaScript Do sử dụng JavaScript, ngườiđùng cũng sẽbị ảnhhưởng bởinhũng đặc điểmcủa JavaScript: dễlàmdễ sai,dẫn đến khóduy trì về sau

■ Quản lýbộnhớ

■ Tùybiếnchưathật sự tốt ở một số module

■ Không thích hợp cho các app cần năng lực tính toáncao (hash, crypto, etc)

3.3 Firebase (NOSQL)

• Fire base làgi ?

- Fire base lànềntảng đám mây củaGoogle, cung cấpcác dịch vụ vàcôngcụđểxâydựng và phát triểnứng dụng di động và web Nó bao gồm các tínhnăngquản lý cơ sởdữliệurealtime, lưu trtt dữ liệu, xác thực ngườidùng,push notification,phân tích và thu thập dữ liệu và nhiều tính năng khác Fhebase được thiết kế

đểhỗtrợ các ứng dụng vớilượngngười dùng lớn và yêucầuthờigianthực

- Friebase cung cấpcho các nhà phát triển một cáchtiếp cậndễ dàng và nhanh chóng đểtạo ra ứng dụng chấtlượng caomà khôngcần quánhiều kiến thức về hạ tầng phía server Thay vì phải xâydụng các tính năng củaứng dụng như lưutrữdữliệu, phân tíchvà thuthậpdữ liệu, Fhebase cung cấp chocác nhà phát triển một cách để dễ dàng tích hợp các tính năng này vào ứng dụng của họbằng cáchsử dụng cácAPI và SDK được cung cấp bởi Fứebase

Ảnh minh họa Map4D

4 KFIX: ÚNG DỤNG HỔ TRỢ TÌM THỢ SỬA KHÓA

4.1 So’ lược công nghệ sử dụng

• Font-end:

- React!S: Tạo giao diện websitephụcrụi cho các chức năng quảnlý

- React Native: Tạo giao diệnapp, phục vụ các chức năngcủa người dùngvà thợkhóa

• Back-end:

-NodeJS (JavaScript): làframeworkhiệnđại và mớicủa ngôn ngữlập trinh java,nodejs chịư tráchnhiệm tạo ra các API, xử lýcác request, đồng thòi cũng chịu trách nhiệm xử lý và lưudữ liệuxuống database

• Database:

- Ffrebase: Lànơi lưutrữ các dữ liệu của toàn hệ thống như dữ liệu người dùng, thợ khóa, đơn hàng Ngoài

ra hỗ trợ cho các chức năng realtime cho ứng dụng

4.2 Phân tích thiết kế hệ thống ửng dụng quản lý shipper

Sơ đồ use case

Hội nghị Khoa học trẻ lần 5 nám 2023(YSC2023)-ỈUH

4.2.2 Class diagram

Sơ đồ lớp

4.2.3 Giao diện đồ họa (Các màn hình đại diện)

<1^ 97 ■ 14:47 o 3 à

Chi tiết hóa đon 1683795980563

Lịch sử sửa khóa

Khách nanq

Nguyen Van Nam

EMđittiVuliìc w 1Ư.V2Ữ23

9 Thõng Nhát Phưànc 10 Gò vàp, Thảnh pl

Hò Chí Minh, Việt Nam

À Hỏng chìa khóa

ts 8ố.299m

Tinh intngMxK*

Thu liên cúa khách; 5000ỮVND

Sõ khoa sirs M ỉ hu nhop

4 ■ 375000

Dann s.ich sú a KơOa ĩ 4/3/2023 ^2^3

14/5/2023 11.47 Hỏng chia khóa

ọ 40 Thõng Nhàt Phường 10, Gò Vâp Thánh

•—• phữ Hữ Chí Minh, Việt Nam 50000

14/5/2023 12:03 Mất Chia khóa

ọ Thống Nhát Phướng 11, Gò Vấp Thảnh

*—* phố Hô Chí Minh Vièl Nam 25000

14/5/2023 12:17 Mất chín khó/t

Màn hình đại diện trên úng dụng dành cho thợ sửa khóa

GỬI yêu cảu

Màn hình đại diện trên ứng dụng dành cho khách hàng

5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Kếtluận

- Xây dựng thành công website, app mobile củaứng dụng

- Thợ sửa khóa cóthể đăngnhập, thay đồi trạngthái làmviệc, hiển thị vị tríhiện tại, chỉ đường trên bản đồ,xem lịch sử đơn hàng, xemthông tin cá nhân

- về phía khách hàng:Khách hàngcó thể đăngkývà sử dụngtàikhoảnđểđăng nhập,có thề tạo một đơnđểyêu cầu mộtdịch vụ sửa khóa Khách hàng cóthề chọnthợtheo mongmuốn Ngoàira khách hàng

cóthề đánh giá chất lượng của dịch vụ sửa khóa sau khi đơn hàng kết thúc

- về phầnquảnlý: Nhân viên cóthể quảnlý các danh sách thợ sửa khóa, đơn hàng, cóthể thêm và xóa thợ sửa khóa, cậpnhật thông tin thợ, đơn hàng, xem các thống kê doanh thu, lập báo cáo doanh thu

- Thợ sửakhóađược hỗ trợ tốiđanhờ hệ thống định vị GPS,giúptìmrađịa điềm nhanh chóng, chính xác

- Bảomật thông tin khách hàng, thôngtin đơn hàngvà cảthôngtinthợ sửa khóa

Hướngphát triểncho úng dụng:

- ứngdụng sẽ có thêm các chức năng như: Nhắntin -gọi điệntraođồigiữa thợ sửa khóa vàkhách hàng

- ứngdụng phải được bồ sung thêmchức năng quản lý các hình ảnh do khách hàng cung cấp

- Tọa độ - Vịtrí của thợ sửa khóa phải được cập nhật sau mỗi lần sửa khóa xong

- ứngdụng hỗ trợ việcthanh toán trực tuyến

TÀI LIỆU THAM KHẢO

[1] React native: https://reactnatiVe.dev/

[2] Firebase: https://fíreba se goog le com/

[3] ReactJS: https://react dev/