4.2. Phân tích thiết kế hệ thống 4.2.1. Thiết kế cơ sở dữ liệu 4.2.1. Thiết kế cơ sở dữ liệu
4.2.1.1. Lược đồ cơ sở dữ liệu
4.3. Thiết kế kiến trúc hệ thống 4.3.1. Kiến trúc tổng thể 4.3.1. Kiến trúc tổng thể
Hình 4-4: Kiến trúc tổng thể hệ thống
Server: Máy chủ của ứng dụng, sử dụng Express framework 4.0 được viết bằng ngơn ngữ
nodejs và có thể chạy được trên nhiều hệ điều hành khác nhau :OS X, Microsoft Windows, Linux.
Expo Server:
Hình 4-5: Kiến trúc hệ thống Expo Sử dụng để tạo thông báo đẩy khi người dùng nhận thông báo.
SMTP Server: Máy chủ giao tiếp với SMTP server thông qua giao thức SMTP mỗi khi cần
gửi mail đến người dùng.
MongoAtlas: MongoDB Atlas là cloud database của MongoDB được ra mắt vào năm 2016
chạy trên AWS, Microsoft Azure và Google Cloud Platform
Websocket: Dùng để chuyển nhận dự liệu thời gian thực khi người dùng chuyển tin nhắn,
nhận thông báo, video-call
4.3.2. Kiến trúc ứng dụng
Hình 4-6: Kiến trúc ứng dụng Ứng dụng web sử dụng Reactjs và di động sử dụng React Native
App routing: sử dụng React-Router, dùng để định hướng giao diện thông qua URL. View: là giao diện diện người dùng nhìn thấy thơng qua 1 URL nhất định.
Component: giúp phân chia các UI (giao diện người dùng) thành các phân nhỏ để dễ dàng
quản lý và tái sử dụng. 1 View có thể được cấu thành từ nhiều component, và 1 component cũng có thể được cấu thành từ nhiều component nhỏ hơn
Component có thể liên kết trực tiếp với back-end server thông qua Api hay WebSocket services.
4.3.3. Thiết kế giao diện
4.3.3.1. Giao diện một số màn hình của ứng dụng a) Website
Hình 4-8: Trang chủ
Hình 4-10: Chi tiết sự kiện
Hình 4-11: Theo dõi kịch bản
Hình 4-12: Chi tiết kịch bản
Hình 4-14: Chi tiết sự kiện - Ban tổ chức
Hình 4-16: Thêm sự kiện
Hình 4-18: Tạo cơng việc mới
Hình 4-22: Bản sao sự kiện - cơng việc
Hình 4-24: Bản sao sự kiện - thơng tin chung
Hình 4-26: Xuất kịch bản
Hình 4-28: Trang admin - quản lý người dùng
b) Mobile
Hình 4-30: Đăng nhập Hình 4-31: Quên mật khẩu
Hình 4-33: Trang chủ Hình 4-32: Danh sách sự kiện
Hình 4-35: Chi tiết sự kiện - thơng tin chung
Hình 4-34: Chi tiết sự kiện - ban tổ chức
Hình 4-39: Theo dõi kịch bản Hình 4-38: Lịch sử thay đổi
Hình 4-41: Chi tiết sự kiện - Hội
Hình 4-43: Báo cáo - thống kê Hình 4-42: Báo cáo - tài nguyên
Hình 4-46: Chi tiết cơng việc - Danh sách cần làm
Hình 4-47: Chi tiết cơng việc - Bình luận
Hình 4-59: Thơng tin người dùng Hình 4-50: Chỉnh sửa thơng tin
Chương 5: Triển khai hệ thống
5.1. Máy chủ và giao diện website của ứng dụng
Máy chủ và giao diện website của ứng dụng được triển khai trên hệ thống đám mây Heroku. Máy chủ là một RESTFUL API server phục vụ nhu cầu truy vấn, cập nhật dữ liệu. Cung cấp các API cần thiết khác để lắng nghe sự thay đổi dữ liệu thông qua WebSocket.
Ứng dụng được tạo và quản lý thông qua Heroku CLI, sử dụng trực tiếp trên terminal. Sử dụng gói triển khai miễn phí trên tài khoản đã xác thực, có thể hoạt động 1000 giờ mỗi tháng. Sau 30 phút khơng có truy cập hệ thống sẽ tự động chuyển về trạng thái ngủ và phải chờ một khoảng thời gian nhỏ đánh thức để sử dụng
Hình 5-2: Thơng tin hệ thống đã triển khai
5.2. Ứng dụng di động
Ứng dựng di động được phát triển dựa trên expo framework. Expo cung cấp một cơng cụ dịng lệnh có tên là Exp. Cơng cụ này cho phép các nhà phát triển bắt đầu quá trình build trên các máy chủ Expo. Khi đã hoàn tất, một URL sẽ được cung cấp để tải về tập tin .apk hoặc .ipa đáp ứng được đồng thời android và ios. Phiên bản tối thiểu expo hỗ trợ là Android 5+ and iOS 10+
Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1. Kết quả đạt được 6.1. Kết quả đạt được
Thơng qua việc nghiên cứu và tìm hiểu các cơng nghệ, đặc biệt là các cơng nghệ mới, khóa luận đã phát triển được ứng dụng quản lý và theo dõi sự kiện hoàn chỉnh. Do giới hạn về kinh phí đăng ký tài khoản nhà phát triển, ứng dụng đang dừng lại ở giai đoạn chạy thử, chưa thể đẩy lên chợ ứng dụng Appstore và CH Play. Tuy nhiên kết quả chạy thử cho thấy hệ thống hoạt động tốt, và có thể mở rộng, phát triển thêm trong tương lai.
Về mặt kỹ thuật, khóa luận đã đạt được các kết quả như sau:
- Tìm hiểu được ReactJS và React Native, một cơng nghệ để lập trình giao diện website và mobile được phát triển bới Facebook, có cộng động phát triển trên khắp thế giới - Tìm hiểu được NodeJS, nền tảng xây dựng giúp xây dựng các ứng dụng web một cách
đơn giản và dễ dàng mở rộng.
- Tìm hiểu hiểu được MongoDb, một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL, nó có hiệu suất cao cùng với tính khả dụng tốt và dễ dàng mở rộng.
- Hiểu và biết cách sử dụng WebSocket để xây dựng các tinh năng có thể cập nhật và theo dõi theo thời gian thực
- Áp dụng được kiến thức về lập trình mạng, SMTP, WebRTC... đã học vào xây dựng ứng dụng.
- Tìm hiểu và biết cách triển khai máy chủ lên nền tảng đám mây để có thể sử dụng khơng chỉ ở mạng cục bộ.
Về mặt thực tiễn khóa luận đã đạt được:
- Nâng cao khả năng tìm hiểu và nghiên cứu cơng nghệ, đặc biệt là các công nghệ mới. - Hiểu được quy trình phát triển ứng dụng hồn chỉnh.
- Cải thiện kỹ năng lên kế hoạch và điều phối công việc.
6.2. Thuận lợi và khó khăn 6.2.1. Thuận lợi 6.2.1. Thuận lợi
- Các cơng nghệ mới có cú pháp thân thiện, dễ dàng tiếp cận để hiểu ở mức độ cơ bản - Giảng viên hướng dẫn có nhiều kiến thức và kinh nghiệm đã giúp đỡ sinh viên rất nhiều
trong việc định hướng và giải đáp vướng mắc trong q trình thực hiện khố luận. - Được giảng viên tạo động lực tìm tịi, học hỏi vì thế ln có được tinh thần tốt nhất để
làm việc.
6.2.2. Khó khăn
- Khối lượng công việc cần thực hiện quá nhiều nên chịu áp lực về mặt thời gian - Tình hình dịch bệnh đơi khi làm việc online vẫn cịn nhiều khó khăn
- Các cơng nghệ mới cịn chưa hồn thiện và mới tiếp cận đôi khi tốn nhiều thời gian để đưa ra giải pháp cho vấn đề gặp phải.
6.3. Hướng phát triển
Đề tài cịn có thể mở rộng và phát triển thêm nhiều tính năng hữu ích cho người dùng như: - Phát triển thành một sản phẩm hồn thiện, có thể đáp ứng nhiều loại hình sự kiện khơng
áp dụng riêng tại UIT.
- Check in tham gia sự kiện thơng qua mobile
- Tính năng quản lí ngân sách sự kiện với các nhà tài trợ, vé tham gia sự kiện - Xây dựng các chuyển động của ứng dụng để tăng trải nghiệm người dùng.
TÀI LIỆU THAM KHẢO Tài liệu tiếng anh
[1] Z.Liew “Building a Simple.CRUD app with Node, Express, and MongoDB”. [Online]. Available: https://zellwk.com/blog/crud-express-mongodb/?fbclid=IwAR0Fm-
g7n5IJpv_40b2d6hMBxK4vZxEGTw4g6pj8XzjCHuAD3f1MKDvN05Q [Accessed 12 Mar
2021].
[2] M.Mạnunath,”An Introduction to MongoDB”. [Online]. Available:
https://www.sitepoint.com/an-introduction-to-
mongodb/?fbclid=IwAR3JPMnAyZW1qDCZQzkoqVDL4arv8c6dnX1fq6B5x61hmwVPO6pV5 MZKHCI[Accessed 01 Mar 2021].
[3] A.Meenakshi,” WebSocket tutorial: How to go real-time with Node and React”.[Online]. Available: https://blog.logrocket.com/websockets-tutorial-how-to-go-real-time-with-node-and- react-8e4693fbf843/?fbclid=IwAR0-
Rn9VsAl84tP0416k_7xgHGKJtKmwa6MbLQWCutG6oE_Y6eTADmwkCgY [Accessed 30 Mar
2021]
[4] Expo,”Sending Notifications with Expo’s Push Api”, [Online]. Available:
https://docs.expo.io/push-notifications/sending-
notifications/?fbclid=IwAR3W8Z9GWMv9ibt9QXhm8WgIQAFfIZcTqkdsgJU5vKw6zj4nAFg_- yJwzW0 [Accessed 20 May 2021]
[5] NodeJS, “NodeJS Documentation” [Online]. Available: https://nodejs.org/en/docs/ [Accessed
20 Feb 2021]
[6] ReactJs, “ReactJS Documentation” [Online] . Available: https://reactjs.org/docs/getting-
started.html [Accessed 20 Feb 2021]
[7] ReactNative,”React Native Documentation” [Online]. Available:
https://reactnative.dev/docs/getting-started [Accessed 20 Mar 2021].
[8] Youtube, “How to create a ReactJS VideoChat App with WebRTC and Socket.io”. [Online] . Available:
https://www.youtube.com/watch?v=gnM3Ld6_upE&t=779s&fbclid=IwAR3TqPJczcoj3R0Fc2v2 VeinlsTPFft9mDfOArIY_Bf43urgIt_1VorCSxk [Accessed 3 Apr 2021]
[9] J.Ward, “React Native: Adding Push Notifications to your App with Expo”. [Online]. Available:
https://levelup.gitconnected.com/react-native-adding-push-notifications-to-your-app-with-expo- 8e4b659ddbfb [Access 20 May 2021]
[10] Platypú, “React Native: React Navigation”. [Online]. Available:
https://levelup.gitconnected.com/react-native-react-navigation-e691873a5b6c [Access 10 Apr
2021]
[11] Vincent Le, “A simple messaging app with React Native and Socket.io”. [Online]. Available:
https://medium.com/hackernoon/a-simple-messaging-app-with-react-native-and-socket-io- e1cae3df7bda [Access 1 May 2021]
[12] J.Kuller, “How to create Token based Authentication in React Native”. [Online]. Available:
https://medium.com/@jonaskuiler/how-to-use-token-based-authentication-in-react-native- c5739b9d5e45 [Access 13 May 2021]
[13] R.Chenkie, “React Authentication: How to Store JWT in a Cookiee”. [Online]. Available:
https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie- 346519310e81 [ Accessed 28 Feb 2021]
[14] M.Agarwal, “React Routers for Web Apps”. [Online]. Available:
https://muskanagarwall.medium.com/react-routers-for-web-apps-ec71214b47ce [Access 20 Feb
2021]
[15] D.Hambeukers,”The New Double Diamond Design Process Is Here”. [Online]. Available:
https://medium.com/design-leadership-notebook/the-new-double-diamond-design-process- 7c8f12d7945e [Accessed 20 Feb 2021]
[1] Youtube, “Học lập trình ReactJS – Redux – NodeJS qua các dự án thực tế”. [Online]. Địa chỉ:
https://www.youtube.com/playlist?list=PLmbxe7ftoDqSNf5yGMhbDNjIZIM5mQ7Ow [Truy cập
20/02/2021
[2] N.H.Kim, “Tạo API server trên Node.js với Express và MongoDB”. [Online]. Địa chỉ:
https://viblo.asia/p/tao-api-server-tren-nodejs-voi-express-va-mongodb-
E375zw7JKGW?fbclid=IwAR0OKn6gmvUJcU8P9dYYu_r9QcaOoWMij75zc23PkrPchBa7DvN Aw_0rhJE [Truy cập 25/02/2021].