KHÓA LUẬN tốt NGHIỆP tìm HIỂU và xây DỰNG ỨNG DỤNG CHIA sẻ và CẢNH báo THÔNG TIN GIAO THÔNG

CƠ SỞ LÝ THUYẾT

REACT NATIVE

Hiện nay, sự phát triển của xã hội đã dẫn đến nhu cầu ngày càng cao về việc tạo ra các ứng dụng di động và web đồng nhất và nhanh chóng Tuy nhiên, vẫn còn tồn tại những rào cản về nền tảng khiến cho mong muốn này chưa thể được thực hiện.

Gần đây, nhiều framework như PhoneGap, Ionic và Cordova đã xuất hiện, cho phép phát triển ứng dụng di động theo phương thức cross-platform Tuy nhiên, các ứng dụng này thường chỉ đạt mức hybrid-app, sử dụng Webviews để hiển thị giao diện thay vì thực sự là ứng dụng native.

Việc sử dụng các ứng dụng hybrid làm giảm hiệu năng và không tối ưu trong việc xử lý

Google đã giới thiệu một phương pháp mới bằng cách thay thế ứng dụng gốc (native app) bằng Progressive Web App (PWA) Mặc dù PWA có hiệu suất tốt, nhưng vẫn không thể so sánh với ứng dụng gốc khi quy mô ứng dụng tăng lên Hơn nữa, PWA được cho là khó khăn hơn trong việc giữ chân người dùng so với ứng dụng gốc.

Hình 7 Mobile App Technology Stacks

React Native cung cấp cho bạn một thứ hoàn toàn khác biệt, ứng dụng được tạo ra sẽ hoàn toàn native với hiệu năng cao, chứ không phải là

"Mobile web app", "HTML5 app" hay "hybrid app" là những thuật ngữ phổ biến trong phát triển ứng dụng di động Bạn có thể xây dựng một ứng dụng di động mà khó có thể phân biệt với các ứng dụng native được phát triển hoàn toàn bằng Java hoặc Swift/Objective-C React Native cho phép phát triển ứng dụng với trải nghiệm người dùng tương tự như ứng dụng gốc.

UI hoàn toàn giống với iOS hay Android app thông thường, điều đặc biệt là nó được xây dựng dễ dàng hơn thông qua Javascript và React.

- React Native là framework xây dựng ứng dụng di động native sử dụng

Javascript do Facebook phát hành.

- Sử dụng React Native để xây dựng ứng dụng iOS và AndroidAndroid chỉ cần 1 ngôn ngữ javascript duy nhất.

- Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.

Chương trình phần mềm này là ứng dụng di động được phát triển dựa trên nền tảng web như HTML5, CSS3 và JavaScript Mặc dù bản chất của nó là ứng dụng web, nhưng nó tích hợp thêm các tính năng tương tác với hệ điều hành, cho phép truy cập vào tập tin, máy ảnh, GPS và các cảm biến như con quay hồi chuyển và gia tốc kế Tất cả những tính năng này được bao bọc bởi lớp ứng dụng Native, chủ yếu thông qua Phonegap/Cordova.

- Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API Ứng dụng gọi hàm bằng

Javascript thông qua API thì chương trình Phonegap/Cordova bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành.

Ứng dụng web giờ đây có thể tích hợp các tính năng cao cấp giống như ứng dụng Native, nhờ vào việc sử dụng mã nguồn sẵn Điều này giúp tăng tốc độ hoạt động của ứng dụng hybrid, nhanh hơn so với ứng dụng web truyền thống.

Ứng dụng gốc được phát triển bằng ngôn ngữ của hệ điều hành, như Objective-C và Swift cho iOS, Java cho Android, và C++ hoặc C# cho Windows Phone Những ứng dụng này được biên dịch trực tiếp sang ngôn ngữ máy, tận dụng toàn bộ tính năng mà hệ điều hành cung cấp Nhờ vào việc sử dụng ngôn ngữ trực tiếp mà không cần qua trung gian, tốc độ hoạt động của ứng dụng gốc là nhanh nhất.

Tốc độ của ứng dụng bao gồm cả độ mượt khi hiển thị và tốc độ xử lý Khi quan sát kỹ, bạn sẽ nhận thấy rằng các thao tác trong ứng dụng native như chuyển trang, điều hướng và cuộn trang diễn ra rất mượt mà.

React Native là một framework cho phép lập trình viên phát triển ứng dụng Native chỉ với Javascript Điều này có nghĩa là bạn có thể tạo ra ứng dụng Native mà không cần phải sử dụng nhiều ngôn ngữ lập trình khác, làm thay đổi cách hiểu về ứng dụng Native truyền thống.

React Native cho phép lập trình viên web phát triển ứng dụng native, khắc phục những hạn chế của ứng dụng web và hybrid Với kỹ năng thành thạo JavaScript, lập trình viên có thể dễ dàng làm việc trên nhiều nền tảng khác nhau.

Sự phát triển từ web, desktop, server đến mobile mang lại lợi ích không chỉ cho lập trình viên web mà còn giúp các doanh nghiệp tối ưu hóa quy trình phát triển sản phẩm đầu cuối với đội ngũ nhân lực ít hơn.

- Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload – tương tự tính năng Hot Replacement Module trong

Webpack cung cấp tính năng Live Reload, cho phép chỉ tải lại các chức năng hoặc tệp tin đã thay đổi, trong khi tính năng Reload sẽ tải lại toàn bộ mã nguồn Bên cạnh đó, việc gỡ lỗi JavaScript trở nên dễ dàng hơn trong Chrome và Safari, mặc dù các lỗi liên quan đến Native vẫn cần được xử lý một cách riêng biệt.

XCode cho iOS hoặc Android Studio cho Android

2.1.4 Ưu nhược điểm Ưu điểm:

• Ứng dụng tin cậy và ổn định

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

• Trải nghiệm người dùng tốt hơn là hybrid app

• Vẫn đòi hỏi native code

• Hiệu năng sẽ thấp hơn với app thuần native code

• Bảo mật không cao do dựa trên JS

• Khả năng tùy biến cũng không thực sự tốt đối với một vài module

AUTHENTICATION

Với Firebase Authentication, người dùng có thể đăng nhập vào ứng dụng thông qua các hệ thống mà họ đã tin cậy Điều này cho phép ứng dụng lưu trữ dữ liệu một cách an toàn trên "đám mây" và cung cấp trải nghiệm cá nhân hóa nhất quán trên mọi thiết bị của họ.

Xác thực Firebase cung cấp dịch vụ phụ trợ và SDK dễ sử dụng, cùng với thư viện giao diện người dùng sẵn có, giúp cải thiện trải nghiệm xác thực trên nhiều nền tảng và ứng dụng khác nhau Tính năng này hỗ trợ xác thực bằng mật khẩu và các nhà cung cấp danh tiếng như Google, Facebook, và Twitter, cho phép người dùng truy cập nội dung một cách nhanh chóng và an toàn.

• Tích hợp chặt chẽ với các tính năng khác của Firebase

• Sử dụng các tiêu chuẩn như Oauth 2.0 và OpenID Connect, vì vậy có thể dễ dàng tích hợp với các ứng dụng

Cung cấp xác thực an toàn cho phép người dùng đăng nhập dễ dàng bằng tài khoản Google, bao gồm Gmail, Google Play, Google+ và các dịch vụ khác Tính năng này cũng hỗ trợ xác thực qua mật khẩu và các nhà cung cấp nổi tiếng như Twitter.

Cung cấp trải nghiệm ứng dụng liền mạch trên mọi thiết bị và trang web, đảm bảo an toàn từ lần xác thực đầu tiên Điều này giúp người dùng duy trì sự tương tác liên tục, bất kể họ đang sử dụng thiết bị nào.

FIREBASE

Firebase là dịch vụ backend do Google cung cấp, giúp rút ngắn thời gian phát triển và triển khai ứng dụng di động Hỗ trợ cả Android và iOS, Firebase mang lại sức mạnh, tính đa năng và bảo mật, trở thành lựa chọn cần thiết cho việc xây dựng ứng dụng phục vụ hàng triệu người dùng.

2.3.2 Ưu nhược điểm Ưu điểm:

Firebase giúp triển khai ứng dụng nhanh chóng nhờ vào nhiều API đa nền tảng, tiết kiệm thời gian quản lý và đồng bộ dữ liệu Với các tính năng như hosting và xác thực người dùng, quá trình phát triển ứng dụng được rút ngắn đáng kể.

Để nâng cao độ bảo mật cho ứng dụng của bạn, việc sử dụng kết nối qua giao thức SSL trên nền tảng cloud là rất quan trọng Ngoài ra, việc phân quyền người dùng database bằng cú pháp JavaScript cũng góp phần tăng cường bảo mật hiệu quả hơn.

Firebase, được hỗ trợ bởi Google, đảm bảo sự ổn định và uy tín chất lượng nhờ vào nền tảng phần cứng rộng khắp toàn cầu Nhiều tập đoàn lớn và ứng dụng với hàng triệu người dùng tin tưởng sử dụng Đặc biệt, hoạt động trên nền tảng Cloud giúp việc nâng cấp và bảo trì server diễn ra dễ dàng mà không cần phải dừng hoạt động của server.

Quản lý cấu hình và trải nghiệm ứng dụng Firebase được tối ưu hóa qua một giao diện web đơn giản, cho phép các ứng dụng hoạt động độc lập nhưng vẫn duy trì sự liên kết chặt chẽ trong việc phân tích dữ liệu.

Điểm yếu lớn nhất của Firebase nằm ở phần Realtime Database, cụ thể là cơ sở dữ liệu của họ được tổ chức theo cấu trúc cây (parent-children) thay vì dạng bảng như SQL Điều này có thể gây khó khăn cho những người đã quen thuộc với SQL, từ mức độ nhẹ đến khá nghiêm trọng.

NODEJS

Node.js là nền tảng phát triển độc lập, được xây dựng trên Javascript Runtime của Chrome, cho phép tạo ra các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

• Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ

• Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao

• Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực

Node.js là lựa chọn lý tưởng cho các sản phẩm có lượng truy cập lớn, yêu cầu khả năng mở rộng nhanh chóng và đổi mới công nghệ Nó cũng rất phù hợp để phát triển các dự án Startup một cách nhanh nhất có thể.

2.4.2 Lí do nên sử dụng Nodejs:

Các ứng dụng Node.js được phát triển bằng ngôn ngữ JavaScript, một ngôn ngữ phổ biến trong lập trình Theo Ryan Dahl, người sáng tạo JavaScript, ngôn ngữ này nổi bật với đặc điểm không có khái niệm đa luồng, mà chỉ hoạt động trên nền tảng đơn luồng và hướng sự kiện.

• Nodejs chạy đa nền tảng phía Server, sử dụng kiến trúc hướng sự kiện Event- driven, cơ chế non-blocking I/O làm cho nó nhẹ và hiệu quả

Node.js applications can be run on any platform, including Mac, Windows, and Linux The Node.js community is extensive and completely free, providing a wealth of resources and packages that are also available at no cost You can explore the vast array of free packages offered by the Node.js community at [npmjs.com](https://www.npmjs.com/).

• Các ứng dụng NodeJS đáp ứng tốt thời gian thực và chạy đa nền tảng, đa thiết bị

• Những công ty lớn nào đang sử dụng Nodejs:

Amazon, Ebay, Linkedin, Microsoft, Paypal, Trello, và Uber là những tên tuổi nổi bật trong lĩnh vực công nghệ Theo thông tin từ Paypal, việc sử dụng Node.js đã giúp giảm thời gian phản hồi lên đến 35% Bạn có thể tìm hiểu thêm chi tiết trong bài báo tại đây: [Node.js v8.0](https://medium.com/@Jessicawlm/node-js-v-8-0-57c8a6449762).

LinkedIn đã chuyển từ Ruby sang Node.js để xử lý các truy cập từ di động, giúp giảm số lượng máy chủ từ 30 xuống chỉ còn 3, tương đương với mức giảm gần 90%.

FACEBOOK SDK

Tính năng đăng nhập bằng tài khoản Facebook mang lại cho người dùng sự tiện lợi và an toàn, cho phép họ truy cập ứng dụng mà không cần đăng ký tài khoản trước Việc tích hợp Facebook SDK cho Android giúp cài đặt tính năng này nhanh chóng, chỉ mất vài phút Ngoài ra, Facebook SDK còn cho phép ứng dụng cung cấp các tính năng như chia sẻ trạng thái và hình ảnh mà không cần cài đặt ứng dụng Facebook trên thiết bị.

NGÔN NGỮ JAVASCRIPT

JavaScript là một ngôn ngữ kịch bản do Netscape phát triển, tương tự như Visual Basic của Microsoft, Tcl của Sun, Perl của UNIX và REXX của IBM Ngôn ngữ này dễ dàng và nhanh chóng hơn để lập trình so với các ngôn ngữ biên dịch như C và C++ Mặc dù ngôn ngữ kịch bản thường mất nhiều thời gian hơn trong quá trình biên soạn, nhưng chúng rất hữu ích cho việc phát triển các chương trình ngắn gọn.

JavaScript được sử dụng trong phát triển trang web để làm những việc như:

• Tự động thay đổi ngày định dạng trên một trang Web

• Nguyên nhân trang được liên kết đến xuất hiện trong cửa sổ bật lên

• Nguyên nhân văn bản hoặc một hình ảnh đồ họa để thay đổi trong một con chuột

JavaScript chia sẻ nhiều ý tưởng với Java, một ngôn ngữ lập trình hướng đối tượng được biên dịch từ C++ Mã JavaScript có thể được nhúng trong các trang HTML và được trình duyệt web giải thích Ngoài ra, JavaScript cũng có thể chạy trên máy chủ, như trong Active Server Pages của Microsoft, trước khi trang được gửi đến người dùng Cả trình duyệt của Microsoft và Netscape đều hỗ trợ JavaScript, mặc dù có một số khác biệt trong cách thực hiện.

JavaScript được thực hiện ở phía khách hàng, có nghĩa là mã chạy trên bộ vi xử lý của người dùng thay vì trên máy chủ web Điều này giúp tiết kiệm băng thông và giảm tải cho máy chủ web.

JavaScript là một ngôn ngữ lập trình dễ học, với cú pháp gần gũi với tiếng Anh Nó sử dụng mô hình DOM, cung cấp nhiều tính năng sẵn có cho các đối tượng trên trang web, giúp lập trình viên dễ dàng phát triển các kịch bản tùy chỉnh cho nhiều mục đích khác nhau.

JavaScript mang lại tốc độ nhanh cho người dùng cuối, vì mã được thực thi trực tiếp trên máy tính của họ Kết quả và quá trình xử lý diễn ra gần như ngay lập tức, tùy thuộc vào độ phức tạp của nhiệm vụ Các tác vụ trong JavaScript trên trang web thường được thiết kế đơn giản để tránh tiêu tốn quá nhiều bộ nhớ, do đó không cần phải xử lý trên máy chủ web.

28 của trang web và gửi lại cho người dùng tiêu tốn băng thông của địa phương cũng như máy chủ

Các tính năng bổ sung cho các trang web được hỗ trợ bởi các trình bổ sung của bên thứ ba như Greasemonkey, cho phép các nhà phát triển viết mã Javascript tùy chỉnh Điều này giúp mở rộng tính năng của trang web theo nhu cầu của người dùng Nếu bạn cần một tính năng cụ thể trên một trang web, bạn có thể tự viết mã và sử dụng Greasemonkey để thực hiện nó một cách dễ dàng.

Các vấn đề về bảo mật liên quan đến mã Javascript có thể nghiêm trọng, khi các đoạn mã này được tích hợp vào các trang web trên máy chủ của khách hàng, tạo cơ hội cho việc khai thác hệ thống người dùng Mặc dù các tiêu chuẩn web hiện đại đã thiết lập một số hạn chế trên trình duyệt, nhưng mã độc hại vẫn có khả năng thực thi trong khuôn khổ các quy định này.

GOOGLE MAP API

2.7.1 Google Map API là gì?

Google Map là dịch vụ bản đồ trực tuyến miễn phí do Google cung cấp, hỗ trợ nhiều tính năng như dò đường, chỉ đường và hiển thị bản đồ đường sá Nó cung cấp các tuyến đường tối ưu cho từng loại phương tiện, hướng dẫn cách bắt xe và chuyển tuyến cho phương tiện công cộng như xe bus và xe khách Ngoài ra, Google Map còn giúp người dùng tìm kiếm các địa điểm như cửa hàng, trường học, bệnh viện và cây ATM trên toàn cầu.

Map API là một công nghệ cho phép các website (site B) tích hợp dịch vụ bản đồ từ một nguồn khác (site A), chẳng hạn như Google Maps Điều này cho phép các trang web cá nhân hoặc tổ chức sử dụng các tính năng như di chuột, zoom và đánh dấu trên bản đồ mà không cần phát triển hệ thống bản đồ riêng.

• Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng

Google Map API đã được nâng cấp lên phiên bản v3, mang lại khả năng hỗ trợ cho cả máy tính để bàn và thiết bị di động, giúp các ứng dụng trở nên nhanh hơn và phong phú hơn.

Các dịch vụ hoàn toàn miễn phí cho việc xây dựng một ứng dụng nhỏ, nhưng sẽ tính phí nếu được sử dụng cho mục đích kinh doanh hoặc doanh nghiệp.

2.7.2 Một số ứng dụng của Google Map API

Đánh dấu các địa điểm trên bản đồ với thông tin chi tiết về khu vui chơi giải trí, nhà hàng, khách sạn, cây ATM, bệnh viện, trường học và nhiều địa điểm khác mà bạn mong muốn.

Chúng tôi cung cấp chỉ dẫn đường đến các địa điểm bạn cần tìm, bao gồm đường tối ưu và nhiều lựa chọn khác Bên cạnh đó, chúng tôi cũng hướng dẫn bạn về các phương tiện giao thông công cộng Tất cả thông tin này được hỗ trợ bởi các dịch vụ của Google để đảm bảo bạn có trải nghiệm di chuyển thuận lợi nhất.

• Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm…

• Tình trạng giao thông các khu vực… từ đó đưa ra các giải pháp…

EXPO

• Expo là một framework dùng để phát triển nhanh các ứng dụng React Native

Expo là một công cụ mạnh mẽ tương tự như Laravel cho PHP hoặc Ruby on Rails cho Ruby, giúp các nhà phát triển React Native dễ dàng hơn trong việc sử dụng và quản lý API Nó cung cấp một lớp giao diện thân thiện, nâng cao trải nghiệm phát triển ứng dụng.

30 công cụ hữu ích giúp bạn dễ dàng khởi tạo và kiểm thử ứng dụng React Native Cuối cùng, Expo SDK cung cấp các thành phần UI và dịch vụ thường chỉ có từ các thư viện React Native bên thứ ba.

2.8.2 Những hạn chế của expo

Expo không hỗ trợ việc thực thi mã trong nền, điều này có nghĩa là bạn không thể chạy mã để theo dõi những thay đổi vị trí khi ứng dụng đã bị đóng.

Các ứng dụng Expo chỉ có thể sử dụng các API gốc được hỗ trợ bởi Expo SDK Điều này có nghĩa là nếu ứng dụng của bạn cần tính năng đặc trưng như giao tiếp với thiết bị ngoại vi qua Bluetooth, bạn sẽ phải sử dụng React Native thuần túy hoặc viết mã bằng thư viện ExpoKit để tích hợp chức năng đó.

Expo giới hạn bạn trong việc sử dụng bộ công cụ của họ, khiến bạn không thể dễ dàng cài đặt và sử dụng nhiều công cụ phát triển React Native như công cụ dòng lệnh, scaffolders và các framework UI Tuy nhiên, một điểm tích cực là Expo SDK tương thích với các ứng dụng React Native thuần túy, vì vậy bạn sẽ không gặp khó khăn khi gỡ ứng dụng khỏi Expo.

Mã nhị phân độc lập của ứng dụng Expo chỉ có thể được xây dựng trực tuyến thông qua công cụ dòng lệnh Exp Công cụ này hỗ trợ các nhà phát triển khởi động quá trình xây dựng trên máy chủ của Expo Sau khi hoàn tất, người dùng sẽ nhận được một URL để tải xuống tệp apk hoặc ipa.

Expo là một framework mạnh mẽ với hỗ trợ đa dạng cho các API phổ biến trên Android và iOS, cung cấp hầu hết các chức năng cần thiết cho ứng dụng Do đó, người dùng thường không cần tìm kiếm bên ngoài Expo để tích hợp các tính năng gốc.

THỰC HIỆN

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

Các đối tượng giao tiếp với hệ thống bao gồm:

Người dùng có thể dễ dàng đăng nhập vào hệ thống On My Way bằng cách sử dụng số điện thoại hoặc liên kết với tài khoản Facebook của mình.

2 Server Server cung cấp dịch vụ và xử lý các request từ người dùng Bảng 1 Danh sách Actor

Sơ đồ Usecase tổng quát

Đặc tả một số use-case chính

3.3.1 Đặc tả use-case “Đăng ký”

Tên chức năng Đăng ký

Trước khi sử dụng hệ thống, người dùng cần thực hiện đăng ký bằng số điện thoại hoặc tài khoản Facebook để đăng nhập.

Dòng sử kiện chính Nhập đầy đủ thông tin

Liên kết với tài khoản facebook

Dòng sự kiện khác Không thể đăng kí tài khoản

Nguyên nhân : không thể kết nối đến server

Trạng thái hệ thống trước khi thực hiện usecase

Actor: người dùng Điều kiện: không có

Trạng thái hệ thống sau khi thực hiện use case Đăng ký thành công và quay về trang chủ

Các yêu câu đặc biệt Không có

Bảng 2 Đặc tả use case Đăng ký

3.3.2 Đặc tả use-case “Đăng nhập”

Tên chức năng Đăng nhập

Tóm tắt Đăng nhập vào hệ thống để giao tiếp với hệ thống không ràng buộc

Dòng sử kiện chính Người dùng đăng nhập vào On My Way

Người dùng nhấn đăng nhập để tiến hành đăng nhập vào hệ thống

Dòng sự kiện khác Không thể đăng nhập

• Không thể kết nối đến server

• Người dùng chưa đăng ký tài khoản

• Sai mật khẩu hoặc tài khoản,số điện thoại

Actor: tất cả actor Điều kiện: không có

Trạng thái hệ thống sau khi thực hiện use case

Người dùng đăng nhập thành công, chuyển qua màn hình trang chủ

Người dùng đăng nhập thất bại sẽ nhận thông báo đăng nhập thất bại

Bảng 3 Đặc tả use case đăng nhập

3.3.3 Đặc tả use-case “Xem bài đăng”

Tên chức năng Xem bài đăng

Tóm tắt Người dung sau khi đăng nhập có quyền xem tất cả bài đăng

Dòng sử kiện chính Người dùng đăng nhập

Sau khi đăng thành công người có thể xem các bài đăng về tình trang giao thông của người dùng khác trên trang bài đăng

Dòng sự kiện khác Không thể xem bài viết

Không thể cập nhập danh sách các bài đăng Nguyên nhân :

Sau khi cập nhập các bài đăng thành công, tất cả bài đăng sẽ được hiển thị trên trang bài đăng

Bảng 4 Đặc tả use case Xem bài đăng

3.3.4 Đặc tả use-case “Bình luận bài đăng”

Tên chức năng Bình luận bài đăng

Tóm tắt Người dùng sau khi đăng nhập có quyền bình luận các bài đăng

Dòng sử kiện chính Truy cập vào trang bài đăng

Dòng sự kiện khác Không thể bình luận được bài đăng

Bình luận của người dùng sẽ hiện kèm trên bài đăng của người khác

Bảng 5 Đặc tả use case Bình luận bài đăng

3.3.5 Đặc tả use-case “Xem bản đồ”

Tên chức năng Xem bản đồ

Tóm tắt Xem bản đồ vị trí chi tiết và tình trạng giao thông

Dòng sử kiện chính Người dùng đăng nhập bằng số điện thoại hoặc thông qua facebook

Sau khi click vào icon location trên bất kì bài đăng nào sẽ được chuyển qua màn hình bản đồ chi tiết vị trí

Dòng sự kiện khác Không thể xem bản đồ

Xem được vị trí chi tiết trên bản đồ

Bảng 6 Đặc tả use case Xem bản đồ

3.3.6 Đặc tả use-case “Tạo bài đăng”

Tên chức năng Tạo bài đăng

Tóm tắt Tạo bài đăng mới lên trag bài đăng

Dòng sử kiện chính Chọn icon tạo bài đăng mới

Chuyển sang màn hình tạo bài đăng bao gồm thông tin , tình trạng giao thông kèm vị trí và hình ảnh

Dòng sự kiện khác Không thể tạo bài đăng

Không thể chọn vị trí Nguyên nhân: Chưa mở location trên máy

Tạo bài đăng thành công Bài đăng xuất hiện trên trang bài đăng

Bảng 7 Đặc tả use case Tạo bài đăng

3.3.7 Đặc tả use-case “Xem hồ sơ”

Tên chức năng Xem hồ sơ

Tóm tắt Hiển thị hồ sơ lịch sử các bài đăng của người dùng

Chọn hồ sơ người dùng từ menu drawer hoặc nhấn vào avatar để hiển thị thông tin cơ bản của họ.

• Tất cả bài đăng đã được đăng thành công , vị trí , bình luận

Dòng sự kiện khác Không thể truy xuất

Hiển thị đầy đủ hồ sơ bài đăng của người dùng

Bảng 8 Đặc tả use case Xem hồ sơ

3.3.8 Đặc tả use-case “Xem tin tức”

Tên chức năng Xem tin tức giao thông

Tóm tắt Xem các bài đăng tin tức được cập nhật liên tục từ trang VOV giao thông

Dòng sử kiện chính Chọn trang tin tức sau đó màn hình sẽ chuyển qua trang tin tức cho người dùng

Hiển thị đầy đủ tin tức từ trang VOV giao thông

Bảng 9 Đặc tả use case Xem tin tức

3.3.9 Đặc tả use-case “Đánh giá người dùng ”

Tên chức năng Đánh giá user

Tóm tắt Đánh giá user qua comment và sao

Dòng sử kiện chính Chọn bình luận một bài viết và tiến hành comment sau đó đánh giá bài viết, tối đa 5 sao

Hệ thống cập nhật lại Rating cho bài viết và người dùng vừa được đánh giá

Bảng 10 Đặc tả use case Đánh giá người dùng

3.3.10 Đặc tả use-case “Quét tình trạng và tuyến đường xung quanh”

Tên chức năng Quét tình trạng và tuyến đường xunh quanh

Tóm tắt Quét tình trạng giao thông kèm theo các tuyến đường tương ứng trong bán kính được user cài đặt

Dòng sử kiện chính Sau khi người dùng chọn chức năng, hệ thống sẽ quét và đưa ra giao diện map view, khoanh vùng khu vực theo bán kính

39 người dùng cài đặt kèm theo mức độ của tình trạng giao thông và khung thời gian cũng do người dùng tùy chỉnh

Actor: người dùng Điều kiện: Người dùng đã tùy chỉnh bán kính quét, mức độ tình trạng giao thông và khung thời gian

Hệ thống hiển thị các vị trí giao thông thu thập được, cho phép người dùng tùy chỉnh và lựa chọn tuyến đường đến đó Các tuyến đường được phân loại theo màu sắc, tương ứng với mức độ giao thông khác nhau.

Bảng 11 Đặc tả use case Quét trình trạng và tuyến đường xung quanh

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Thiết kế dữ liệu

4.1.1 Mô tả các thành phần có trong cơ sở dữ liệu

STT Tên thuộc tính Kiểu dữ liệu Ghi chú

1 KeyID String ID của mỗi bài viết Là unique trong hệ thống và là cha của các thuộc tính trong UsersList

1 CommentList String Là thuộc tính cha chứa các thuộc tính con của một comment

2 Date String Ngày giờ tháng năm của bài viết được đăng

3 Image String Avatar của người đăng bài viết

4 Name String Tên của người đăng bài viết

5 Latitude String Vĩ độ của vị trí

6 Longtitude String Kinh độ của vị trí

7 Level String Các cấp độ đại diện cho tình trạng giao thông

8 key String Lưu key của UserList nhằm có thể định vị được path cho các thuộc tính sau

9 Content String Nội dung của bài viết

10 TotalRating String Rating của bài viết

11 ID String ID của user đăng bài viết

1 keyComment String ID của mỗi comment Là unique và là thuộc tính cha chứa các thuộc tính con của một comment

1 Comment String Nội dung của comment

2 Date String Ngày giờ tháng năm đăng comment

3 Image String Avatar của người đăng comment

4 Name String Tên của người đăng comment

5 RateNumber String Đánh giá của người dùng cho bài viết Bảng 15 Key Comment

1 KeyID String ID của mỗi setting được lưu theo ID user Là unique và là thuộc tính cha chứa các thuộc tính con của một setting

1 Distance String Bán kính user cài đặt

2 TimeStamp String Mốc thời gian user cài đặt

3 UserRating String Rating tổng của user đó

4 WarningLevel String Mức độ cảnh báo user cài đặt Bảng 17 Key Distance

Thiết kế kiến trúc

Hình 11 Sơ đồ thiết kế kiến trúc

Hệ thống bao gồm các thành phần và tương giác giữa chúng như sau:

• Người dùng sử dụng ứng dụng trên android cài ứng dụng On My Way, khi người dùng cần request data thì gọi tới API và các action tương ứng

• Server sẽ xử lý request từ người dùng và kết hợp với database để trả về kết quả xử lý cho người dùng

• Realtime Database Firebase chịu trách nhiệm lưu trữ dữ liệu cho ứng dụng

Hình 12 Hình Sơ đồ cấu trúc thư mục

Là nơi chứa các thư viện được cài đặt trong project, có đến gần 800 thư viện được cài đặt và sử dụng

Hình 13 Hình danh sách một số thư viện được sử dụng trong project

Hình 4.3 – Hình danh sách một số thư viện được sử dụng trong project

1 React-native-maps Hiển thị map

Vẽ các tuyến đường trên map

3 React-native-ratings Đánh giá sao

4 React navigation Hỗ trợ chuyển các màn hình

5 moment Hỗ trợ chuyển đổi thời gian

6 Expo vector-icons Các icon của expo cung cấp

7 Expo-facebook Tạo các kết nối đến facebook

8 Expo-location Lấy thông tin vị trí

Bảng 18 Một số thư viện chính

Tập hợp các hình ảnh và hiệu ứng dùng trong ứng dụng

Hình 14 Hình Danh sách assets

1 Diamond_user Khung user kim cương

2 Golden_user Khung user vàng

3 Platinum_user Khung user bạch kim

5 Victory Khung user cơ bản

6 Loadinganimation.json Hiệu ứng load

Giao diện và nghiệp vụ tương tác với dữ liệu trong hệ quản trị cơ sở dữ liệu Firebase bao gồm các chức năng xử lý như kết nối cơ sở dữ liệu, truy vấn dữ liệu, cũng như thực hiện các thao tác thêm, xóa, sửa dữ liệu và áp dụng các thuật toán xử lý khác nhau.

Hình 15 Hình Danh sách screen

STT Phương thức Tên Mô tả

1 Login Screen Chứa các phương thức signup và login

2 Main Screen Vẽ lên list bài viết dựa theo listitem, chứa các button đi đến các chức năng khác

3 List Items Là các khung bài viết đơn lẻ, chứa các phương thức thêm, xóa, sửa, thả tim, rating bài viết

4 Menu Drawer Thanh tác vụ bên cạnh chứa các setting của người dùng

Giao diện viết bài, chứa các tiện ích như chọn vị trí, chụp ảnh, thêm ảnh, chọn mức độ cảnh bảo

Giao diện hiển thị từ list comment, có phương thức rating

7 List Comment Load từng item comment, chứa phương thức delete

Profile của người dùng, hiển thị các bài post của họ và chứa các phương thức tính rating và phân hạng cho người dùng

9 View Map Hiển thị map và địa điểm đính kèm theo bài viết, chứa phương thức chọn địa điểm tùy biến

Giao diện bản đồ hiển thị khi người dùng chọn tính năng quét khu vực, tích hợp các thuật toán tìm đường và khoanh vùng, đồng thời hiển thị các địa điểm phù hợp với cài đặt của người dùng.

11 News Screen Giao diện đọc tin tức, được fetch từ trang VOV giao thông

Bảng 20 Danh sách phương thức trong các screen

Thiết kế giao diện

4.3.1 Sơ đồ chi tiết giao diện

Hình 16 Sơ đồ giao diện

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

STT Tên màn hình Ghi chú

1 Đăng ký Người dùng thực hiện đăng ký theo form hướng dẩn của màn hình

2 Đăng nhập Màn hình hiện nơi đăng nhập cho người dùng

3 Trang chủ Màn hình hiển thị tìm danh sách các bài viết, 2 tab màn hình danh sách bài đăng và tin tức mới

Có những chức năng chính như:

• Vào trang hiển danh sách các bài đăng

• Vào trang hồ sơ cá nhân

• Vào trang tạo bài viết mới

• Xem bản đồ chi tiết

Hiển thị thông tin cơ bản của hệ thống

4 Trang hồ sơ cá nhân Màn hình hiển thị thông tin các bài viết cuủ người dụng khác bao gồm

5 Trang đăng bài mới Màn hình đăng bài tình trạng giao thông bao gồm

6 Bản đồ Màn hình bản đồ chi tiết bao gồm

7 Tin tức Màn hình hiển thị đầy đủ thông tin giao thông được cập nhật từ trang VOV giao thông Việt Nam

8 Trang bình luận, đánh giá bài viết

Màn hình trang comment, đánh giá bài viết bao gồm

9 Quét tình trạng giao thông trong khu vực

Màn hình quét tình trạng giao thông trong khu vực bao gồm

• Đường biên giới hạn bán kính

• Các tuyến đường phân biệt theo màu tương ứng với mức độ của tình trạng giao thông

• Các địa điểm được đánh dấu

• Filter tuyến đường theo 3 hình thức di chuyển: Ô tô, đi bộ, xe đạp

Bảng 21 Danh sách màn hình

4.3.3 Mô tả chi tiết giao diện

Nội dung: Đăng ký thông tin người dùng trước khi thao tác với hệ thống

Hình 17 Giao diện đăng nhập bằng sdt

STT Tên đối tượng Kiểu Nội dung xử lý

1 Edt Phone EditText Nhập số điện thoại

2 Btn Signup Button Click để đăng ký tài khoản

Bảng 22 Giao diện đăng nhập bằng sdt

1 Edt Phone EditText Nhập vào số điện thoại

2 Edt Password EditText Nhập vào mật khẩu

3 Đăng nhập Button Click vào sẽ đăng nhập vào hệ thống và chuyển sang trang chủ

4 Đăng kí Button Click vào sẽ chuyển sang trang đăng kí Bảng 23 Giao diện đăng nhập, đăng kýHình 18 Giao diện đăng nhập, đăng ký

4.3.3.3 Màn hình trang chủ Home

Nội dung: Dùng để hiển thị trang chủ, hiển thị bài viết

Hình 19 Giao diện trang chủ

62 Hình 20 Giao diện trang chủ

1 Image Avatar Image Hiển thị hình ảnh của người dùng

2 Button News Post Button Click vào sẽ chuyển sang trang tạo bài đăng mới

3 Button Comment Button Click vào sẽ chuyển sang trang bình luận cho bài đăng

4 Button Edit Text Click vào nội dung sẽ chuyển sang trang edit bài viết

5 Button Delete Button Click vào sẽ xóa bài viết của chính mình

6 Button Like Button Click vào sẽ like bài đăng của người dùng khác

7 Button Location Button Click vào sẽ chuyển sang trang bản đồ chi tiết của bài đăng

8 Button Quét Button Click vào sẽ tiển hánh quét trình trạng giao thông trong khu vực và chuyển sang trang bản đồ mới

Bảng 24 Giao diện trang chủ

4.3.3.4 Màn hình tạo bài viết mới

Nội dung: người dùng tạo bài viết mới lên danh sách bài đăng

Hình 21 Giao diện đăng bài viết

Button Click vào sẽ chuyển sang màn hình chụp hình

Button Click vào sẽ chuyển sang trang chọn hình ảnh từ thư viện máy

ListItem Click vào sẽ lựa chọn tình trạng giao thông

6 Tab Home Tab Click vào sẽ hiển thị trang các bài đăng

7 Tab News Tab Click vào sẽ chuyển sang trang tin tức giao thông

8 DrawerMenu Button Chuyển vào trang hồ sơ của người dùng

9 Log Out Button Chuyển ra trang đăng nhập

10 Post Button Click vào sẽ đăng bài

Bảng 25 Giao diện tạo bài viết

Hình 22 Giao diện map view

3 Save Button Lưu vị trí giao thông lên bản đồ

4 Back Button Chuyển ra trang chủ

Bảng 26 Giao diện map view

Hình 23 Giao diện thông tin cá nhân – hạng Kim cương

69 Hình 24 Giao diện thông tin cá nhân – hạng Bạch kim

70 Hình 25 Giao diện thông tin cá nhân – hạng Vàng

71 Hình 26 Giao diện thông tin cá nhân – hạng Newbie (tân binh)

3 Button Comment Button Click vào sẽ chuyển sang trang bình luận cho bài đăng

4 Button Like Button Click vào sẽ like bài đăng của người dùng khác

9 Log Out Button Chuyển ra trang đăng nhập

10 Delete Button Delete bài viết của người dùng hiện tại Bảng 27 Giao diện hồ sơ

4.3.3.7 Màn hình xem tin tức

Hình 28 Giao diện tin tức VOV

4.3.3.8 Màn hình bình luận, đánh giá

Hình 27 Giao diện tin tức VOV

74 Hình 29 Giao diện bình luận - đánh giá

3 Button Post Comment Button Click vào sẽ chuyển sang trang bình luận cho bài đăng

7 Delete Button Delete bài viết của người dùng hiện tại

8 Rating Button Click vào sẽ hiển thị số sao đang chọn

Bảng 28 Giao diện bình luận – đánh giá

4.3.3.9 Màn hình quét tình trạng giao thông trong khu vực

76 Hình 30 Giao diện bản đồ hiển thị tình trạng giao thông kèm tuyến đường

Thay đổi các lựa chọn tuyến đường theo phương tiện

2 Marker Marker Click vào sẽ hiện lên trạng thái tuyến đường

5 Direction Line Hiển thị các tuyến đường theo màu sắc ứng với các tình trạng hiện tại như kẹt xe, ngập lụt,…

Bảng 29 Giao diện bản đồ hiển thị tình trạng giao thông kèm tuyến đường

Tiêu đề	Khóa Luận Tốt Nghiệp Tìm Hiểu Và Xây Dựng Ứng Dụng Chia Sẻ Và Cảnh Báo Thông Tin Giao Thông
Tác giả	Tạ Ngọc Hoàng Lâm
Người hướng dẫn	ThS. Lê Thanh Trọng, ThS. Thái Thụy Hàn Uyển
Trường học	Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Kỹ Sư Ngành Công Nghệ Phần Mềm
Thể loại	khóa luận tốt nghiệp
Năm xuất bản	2020
Thành phố	TP. Hồ Chí Minh

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