[123doc] - do-a-n-ung-dung-tro-chuyen-truc-tuyen.pdf
- 1. ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 2 ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN Đồ án 2 – SE122.L11.PMCL – VN Giảng viên hướng dẫn: Thầy NGUYỄN TUẤN ANH Sinh viên thực hiện: Phan Lê Trọng Nhân – 17520843 Nguyễn Tài Bồi – 17520284 TP HỒ CHÍ MINH, 22/01/2021
- 2. ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM PHAN LÊ TRỌNG NHÂN – 17520843 NGUYỄN TÀI BỒI – 17520284 ĐỒ ÁN 2 ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN CHAT ONLINE APPLICATION KỸ SƯ/ CỬ NHÂN NGÀNH KĨ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN Thầy NGUYỄN TUẤN ANH TP HỒ CHÍ MINH, 2021
- 3. LỜI CẢM ƠN Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Tuấn Anh – giảng viên hướng dẫn chúng em thực hiện Đồ án 2. Thầy đã cùng đồng hành và tận tình hướng dẫn cho chúng em qua từng giai đoạn của đồ án. Nhờ có sự giúp đỡ nhiệt tình của thầy mà chúng em có thể hoàn thành được được đồ án này một cách tốt nhất. Vì kiến thức của chúng em vẫn còn hạn hẹp nên không thể tránh khỏi những thiếu sót trong quá trình thực hiện đồ án. Tuy nhiên, chúng em đã cố gắng hoàn thành đúng hạn và hạn chế các lỗi nhiều nhất có thể. Nhóm chúng em luôn mong đợi nhận được những ý kiến đóng góp quý báu từ thầy và qua đó có thể rút kinh nghiệm, tự sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giác học hỏi. Trong quá trình làm đề tài báo cáo, sẽ không thể tránh khỏi các thiếu sót, rất mong nhận được phản hồi từ thầy và các bạn để góp phần làm cho bản báo cáo thêm hoàn thiện hơn. Chân thành cảm ơn thầy!
- 4. LỜI NHẬN XÉT CỦA GIẢNG VIÊN ….. ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… …………………………………………………………………………………
- 6. DANH MỤC HÌNH DANH MỤC BẢNG
- 7. MỞ ĐẦU Lí do chọn đề tài Hiện nay, trong thời đại công nghiệp hóa - hiện đại hóa, công nghệ 4.0 đang dần được đưa vào cuộc sống từng ngày. Bên cạnh đó, không phải bất cứ ai cũng có thể áp dụng công nghệ một cách thành thục và có khả năng tự tìm hiểu được, có thể sẽ gặp những khó khăn về sự cố công nghê, các trục trặc máy tính, hệ thống và hỏng hóc thiết bị. Hoặc khi đi làm xa, công tác không thể liên lạc bằng song điện thoại và ứng dụng trên máy tính của bạn để đảm bảo hiệu suất. Thay vì thực hiện các cuộc gọi phải tốn phí cao vì mã vùng và để đảm bảo năng suât làm việc mọi lúc mọi nơi, bọn em quyết định xây dựng. Ứng dụng trò chuyện trực tuyến để khắc phục những khiếm khuyết trên. Phương pháp nghiên cứu Nhận thấy nhóm đối tượng chủ yếu là các bạn trẻ, doanh nhân và một số doanh nghiệp. Nhóm chúng em sẽ thực hiện đề tài này bằng ngôn ngữ Dart, công nghệ ứng dụng là Flutter. Quá trình tìm hiểu nghiệp vụ nhóm chúng em có tham khảo các diễn đàn về trò chuyện trực tuyến (Messenger, Zalo,…) . Cùng với đó là tham khảo các ứng dụng có sẵn trên chợ ứng dụng để có cái nhìn tổng quát về đề tài đã chọn. Đối tượng hướng đến Ứng dụng của nhóm được định hướng đến những người có nhu cầu trò chuyện trực tuyến hay nói cách khác là thời gian thực, tiện lợi bằng song Internet, xem xét và khắc phục lỗi cho khách hàng từ xa hay đơn giản là chia sẽ thông tin. Đây là nhóm người thường xuyên sử dụng máy tính, laptop. Do đó họ có khả năng sẽ cần chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa. Ứng dụng này sẽ là trợ thủ đắc lực giúp họ luôn có thể nhận được trợ giúp từ xa thông qua việc trò chuyện trực tuyến không tính phí. Từ đó có thể nâng cao được năng suất làm việc cũng như chia sẽ tài liệu. 7
- 8. Chương 1 GIỚI THIỆU VỀ FLUTTER 1.1. Giới thiệu ngôn ngữ lập trình Dart Hình 1.1 Logo Dart 1.1.1. Ngôn ngữ lập trình Dart là gì? - Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã được chấp thuận bởi tổ chức Ecma (ECMA-408). Nó được sử dụng để xây dựng các loại ứng dụng: web, server, di động (IOS và Android). - Dart là ngôn ngữ lập trình hướng đối tượng, với cơ chế garbage collector, cú pháp kiểu C. Nó hỗ trợ những khái niệm lập trình hiện đại như interface, mixin, abstract, generic, và type-safe. Đây là ngôn ngữ lập trình mã nguồn mở, được công bố trên Github. 1.1.2.Ưu điểm của Dart Một số ưu điểm vượt trội của Dart so với các ngôn ngữ lập trình khác: - Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp lập trình viên có thể xác định sớm các lỗi. Bên cạnh đó Dart có hệ sinh thái rộng lớn lên đến hàng nghìn packages. - Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web. - Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Nếu bạn đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày. 8
- 9. - Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI, thông qua phân bổ đối tượng nhanh và garbage collector. Dart hỗ trợ lập trình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream. Từ ngôn ngữ lập trình Dart, Google giới thiệu Framework Futter sử dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng. 1.2. Giới thiệu framework Flutter Hình 2.2 Logo Flutter 1.2.1. Flutter là gì? - Flutter được phát triển nhằm giải quyết bài toán thường gặp trong việc phát triển ứng dụng là Fast Development (phát triển ứng dụng nhanh) và Native Performance (hiệu suất tối ưu cho từng nền tảng). Nếu như React Native chỉ đảm bảo Fast Development còn Native language chỉ đảm bảo Native Performance thì Flutter làm được cả 2 điều trên. - Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành Android. Nó được công bố tại hội nghị nhà phát triển Dart 2015, hỗ trợ các ứng dụng hoạt động ở mức 120 khung hình trên giây. - Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản lớn cuối cùng trước Flutter 1.0. - Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện Flutter Live, là phiên bản "ổn định" đầu tiên framework này. 9
- 10. 1.2.2. Kiến trúc của Flutter Hình 2.3 Kiến trúc Flutter Flutter được viết chia làm hai tầng: - Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên một ứng dụng Flutter. Các đoạn mã này cung cấp phương tiện để có thể thay đổi và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có thể được tùy chỉnh theo mong muốn. Tầng Framework này giúp lập trình viên thay đổi mã nguồn ứng dụng ở thời điểm compile time. - Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn ngữ C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong quá trình chạy. Ở tầng này còn có máy ảo Dart VM. Khái niệm máy ảo là khái niệm về một ứng dụng chạy song song với mã nguồn chính như một phần của ứng dụng. Máy ảo Dart VM có ba nhiệm vụ chính bao gồm: + Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết bị phần cứng (hoặc phần mềm nằm ngoài ứng dụng). + Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time) hoặc AOT (Ahead of Time). + Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như cung cấp các runtime system bao gồm garbage collector, và các thư viện cần có khác. 10
- 11. Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các runtime system, hỗ trợ debugging hoặc hot reload cho các ứng dụng viết bằng Flutter. 1.2.3. Ưu điểm của Flutter so với các framework khác - Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web. - Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực tiếp lên ứng dụng đang chạy. Ngoài ra Flutter còn bổ sung thêm tính năng stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang chạy mà không cần phải khởi động lại và giữ trạng thái đang có. Tính năng này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiết kiệm rất nhiều thời gian. - Ứng dụng được viết bằng Flutter hỗ trợ hiển thị lên đến 60FPS (hoặc 120FPS tuỳ thiết bị). Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải nghiệm người dùng. So sánh Flutter và React Native Flutter React Native Khả năng tái sử dụng Flutter cho phép overwriting code. Hỗ trợ tốt cho việc tái sử dụng về sau. React Native cho phép bạn sử dụng lại code, nhưng điều này lại bị giới hạn trong một vài components cơ bản. Cấu trúc mã nguồn Khi sử dụng Flutter, các Developer có thể thực hiện mọi thứ trên cùng một màn hình, trong đó đặc biệt không cần phải chuyển từ code sang chế độ thiết kế hoặc ngược lại, vì vậy các trải nghiệm trên Sử dụng React Native cần có thêm JSX hoặc XML để tạo giao diện hay các công cụ đặc biệt để tạo layout. 11
- 12. Flutter khá tiết kiệm thời gian. Cài đặt môi trường phát triển Việc cài đặt Flutter diễn ra nhanh chóng, tiện lợi với sự hỗ trợ của câu lệnh flutter doctor -v giúp chẩn đoán lỗi trong quá trình cài đặt. Cài đặt môi trường phát triển React Native trông khá loằng ngoằng và khó khăn đối với các lập trình viên mới. Các thư viện hỗ trợ Có nhiều các third-party packages đang được sử dụng và đang ngày càng được phát triển, và chúng thực sự rất hữu dụng. Từ khi React Native trở lên phổ biến, đã có rất nhiều các third- party packages được phát triển và được sử dụng rất nhiều trong ứng dụng. Độ phổ biến Số lượng người sử dụng Flutter đang ngày càng gia tăng. Đặc biệt nhờ sự hậu thuẫn tích cực từ phía Google. React Native có lượng developer sử dụng đang nhiều hơn bởi vì lượng developer sử dụng JavaScript rất dễ dàng để sử dụng với các thư viện của React. Tài liệu tham khảo Cách viết tài liệu của Google đơn giản, dễ hiểu nên việc tài liệu hóa cho Flutter cơ bản là hiệu quả. Việc tìm kiếm tài liệu có lúc khá khó khăn, phụ thuộc vào các công cụ dev bên ngoài, yêu cầu người dùng phải kiếm tài liệu cho từng bộ mặc dù Facebook đã khá nỗ lực để xây dựng một kho tài liệu trực quan nhất. Bảng 2-1 So sánh giữa Flutter và React Native 12
- 13. CHƯƠNG 2: CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER 2.1. Yêu cầu cấu hình phần cứng - Hệ điều hành: Windows 7, Windows 8.1, Windows 10 - Dung lượng ổ cứng: 1GB - Công cụ: Visual Studio Code, Android Studio, IntelliJ,… 2.2. Hướng dẫn cài đặt Flutter - Tải Flutter tại đường dẫn: https://flutter.dev/docs/get-started/install rồi giải nén. Tránh giải nén thư mục flutter vào ổ C:Program Files - Sau khi giải nén xong bạn nên thiết lập biến môi trường, vào Control Panel tìm kiếm từ khóa System và chọn vào mục Edit the system environment variables. Hình 2.4 Chỉnh sửa biến môi trường 13
- 14. + Chọn Environment Variables, tại mục System Variables bạn chọn PATH và nhấn tiếp chọn Edit. Trong cửa sổ Edit System Variable bạn chọn New và dán đường dẫn tới thư mục Flutter đã giải nén trước đó. + Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi chạy sau đó nhập lệnh flutter doctor -v Hình 2.5 Chẩn đoán Flutter với flutter doctor - Cài đặt extension/plugin hỗ trợ cho IDE. Ví dụ như extension Flutter (sẽ tự động cài thêm Dart) trên Visual Studio Code. Hình 2.6 Extension Flutter trên Visual Studio 14
- 15. 2.3. Tạo project Flutter Android Studio - Khởi tạo Android Studio - Mở Android Studio và lựa chọn File -> Setting -> Plugin - Bạn tìm với từ khóa Flutter sau đó bạn cài Flutter vào trong android studio. Hình 2.7 Cài đặt flutter - Click Yes và chờ cho plugin để download Hình 2.8 Xác nhận cài đặt Flutter 15
- 16. Hình 2.6 Tải flutter về - Click Restart Android Studio và click Restart để kích hoạt plugin vào trong Android Studio. Hình 2.9 Giao diện Android Studio khi kích hoạt Flutter - Bạn vào trang web của Flutter để tải SDK của Flutter về nhé - Sau khi khởi động lại Android Studio, Chúng ta sẽ cùng bắt đầu với "Start a new Flutter project" 16
- 17. Hình 2.7 Khởi tạo project Flutter 17
- 18. - Giải nén Sdk của bạn vừa tải về , sau đó trỏ đường dẫn tới file đó 18
- 19. Hình 2.8 Sau khi khởi tạo thành công 1 project Flutter CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN VỚI FLUTTER 3.1. Đặt vấn đề Hiện nay, giới trẻ, đặc biệt là các bạn học sinh sinh viên và một số các đối tượng doanh nghiệp, công nhân viên chức đang gặp khó khăn trong những lúc cần sửa các lỗi cơ bản cũng như gửi tệp đến người khác thông qua Internet. Dẫn đến không nâng cao được năng suất hoạt động cũng như công việc. Từ đó, gặp khó khăn trong việc sử dụng môi trường công nghệ để giao tiếp với nhau. Nhận thấy vấn đế này là vấn đề thực tế và thiết yếu, nhóm đã chọn đây là đề tài nghiên cứu và ứng dụng vào Đồ án 2. 3.2. Phạm vi ứng dụng Ứng dụng của nhóm được định hướng đến những người có nhu cầu trò chuyện trực tuyến hay nói cách khác là thời gian thực, tiện lợi bằng song Internet, xem xét và khắc phục lỗi cho khách hàng từ xa hay đơn giản là chia sẽ thông tin. Đây là 19
- 20. nhóm người thường xuyên sử dụng máy tính, laptop. Do đó họ có khả năng sẽ cần chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa. Ứng dụng này sẽ là trợ thủ đắc lực giúp họ luôn có thể nhận được trợ giúp từ xa thông qua việc trò chuyện trực tuyến không tính phí. Từ đó có thể nâng cao được năng suất làm việc cũng như chia sẽ tài liệu. 3.3. Các chức năng chính - Chức năng Đăng nhập bằng Google - Chức năng Chatbox - Thông báo tin nhắn 3.4. Phân tích thiết kế Lược đồ phân cấp chức năng Hình 3.10 Lược đồ phân cấp chức năng Sơ đồ use case và đặc tả use case 20
- 21. Hình 3.11 Use case tổng quát Hình 3.12 Use case Đăng nhập Hình 3.13 Use case Thông báo tin nhắn 21
- 22. Hình 3.14 Use case Chatbox 3.5. Các màn hình giao diện chính của ứng dụng Hình 3.1 Màn hình đăng nhập 22
- 23. Hình 3.2 Màn hình chính của ứng dụng 23
- 24. Hình 3.3 Giao diện chatbox 24
- 25. Hình 3.4 Cài đặt tên và viết tiểu sử 25
- 26. Hình 3.5 Giao diện chọn ảnh gửi cho bạn bè 26
- 27. Tên Mô tả Chi tiết Màn hình chính Màn hình bắt đầu khi mở ứng dụng, chứa các thông tin như danh sách bạn bè, tiểu sử về bạn bè - Chọn người mong muốn để tiến hành trò chuyện - Danh sách bạn bè được load từ databass (firebase) - Có thể cài đặt nickname cho bản thân và viết tiểu sử - Trong chatbox có thể tùy chọn gửi ảnh cho bạn bè - Nhận được thông báo tin nhắn từ thanh trạng thái - Đăng nhập bằng tài khoản của Google 27
- 28. CHƯƠNG 4: KẾT LUẬN 4.1. Kết quả thu được - Căn bản vận dụng Dart và Flutter vào việc phát triển ứng dụng di động. - Sử dụng được Firebase làm cơ sở dữ liệu. - Nắm được nhu cầu của đối tượng khách hàng chủ yếu là người trẻ và doanh nhân đối với ứng dụng 4.2. Khó khăn gặp phải - Gặp khó khăn trong việc kết nối Firebase với ứng dụng Flutter. - Khó khăn trong việc chuyển đổi các bảng trong CSDL thành các kiểu dữ liệu tương ứng trong Dart. - Bố cục code khó theo dõi, khó khăn trong việc quản lý code, bảo trì và phát triển. - Yêu cầu cấu hình cao để phát triển ứng dụng, chiếm nhiều tài nguyên khi Debug. 4.3. Hướng phát triển trong tương lai - Hoàn thiện hơn về mặt giao diện, cải thiện tốc độ phản hồi, cung cấp trải nghiệm chạm vuốt mượt mà. - Sắp xếp bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản và trực quan hơn - Tổ chức quản lý Cơ sở dữ liệu hợp lý và khoa học hơn. - Thêm tính năng Gọi điện trực tiếp trong tương lại - Vận dụng các công nghệ mới để mang lại nhiều chức năng thiết thực và hữu ích hơn. 28
- 29. TÀI LIỆU THAM KHẢO Nhóm có dùng các tài liệu tham khảo từ trang chủ Flutter cùng với đó là sự hỗ trợ tích cực của các lập trình viên trên Stackoverflow, Github,… https://pub.dev/ https://flutter.dev/docs https://stackoverflow.com/ https://github.com/NguyenTaiBoi/chat_box_app? fbclid=IwAR3YcE0Nzj1xXFoQfyQgkfsRo1ZGZwZr- SwEDQmm5kpfK8loB20bQTvCeM8 29