Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP I LỜI CẢM ƠN II LỜI MỞ ĐẦU III MỤC LỤC IV DANH MỤC CÁC CHỮ VIẾT TẮT VI DANH MỤC CÁC BẢNG BIỂU VII DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ VIII CHƯƠNG 1: TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu 1.3 Công nghệ sử dụng CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Angular Framework 2.2 ASP.NET Core 2.3 Microsoft SQL Server 2017 2.4 Swagger UI 2.5 Ionic Framework CHƯƠNG 3: NỘI DUNG 3.1 Chức sản phẩm 3.1.1 Khảo sát 3.1.4 Công việc thực báo cáo tiến độ: 3.2 Mơ hình hố u cầu 3.2.1 Thiết kế use case diagram 3.2.2 Đặc tả use case 3.3 Sơ đồ trình tự (Sequence diagram) 38 3.3.1 Tìm viết 38 3.3.2 Bình luận 39 iv 3.3.3 Đăng nhập 40 3.3.3 Tìm kiếm 41 3.3.4 Nhắn tin 42 3.4 Thiết kế sở liệu 43 3.4.1 Mơ hình liên kết thực thể 43 3.4.2 Mơ hình quan hệ bảng sở liệu 44 3.5 Thiết kế giao diện: 45 3.5.1 Giao diện tìm kiếm 45 3.5.2 Giao diện thông báo 45 3.5.3 Giao diện tin nhắn 46 CHƯƠNG 4: CÀI ĐẶT SẢN PHẨM 47 4.1 Front-end 47 4.1.1 Cấu trúc ứng dụng 47 4.1.2 Các đoạn xử lý front-end 50 4.1.3 Một số giao diện sản phẩm 53 4.2 Back-end 63 4.2.1 Cấu trúc project API 63 4.2.2 Một số Function 64 4.2.3 Giao diện Swagger UI 69 CHƯƠNG 5: TỔNG KẾT 75 5.1 Kết đạt 75 5.2 Ưu điểm 76 5.3 Nhược điểm 76 5.4 Khó khăn 76 5.5 Bài học kinh nghiệm 76 5.6 Hướng phát triển 77 TÀI LIỆU THAM KHẢO 78 PHỤ LỤC 79 v DANH MỤC CÁC CHỮ VIẾT TẮT HTML: Hypertext Markup Language CSS: Cascading Style Sheets JS: JavaScript ASP-NET: Active Server Pages - Network Enabled Technologies SQL: Structured Query Language MVC: Model-View-Controller SPA: Single Page Application DOM: Document Object Model API: Application Programming Interface UI: User Interface DI: Dependency Injection IIS: Internet Information Services OLTP: On-line Transactional Processing APIs: Application Programming Interfaces AI: Artificial Intelligence OTP: One Time Password CLI: Command Line Interface SDK: Software Development Kit vi DANH MỤC CÁC BẢNG BIỂU Bảng 3.3 Đặc tả usecase Tìm kiếm hình ảnh người dùng .10 Bảng 3.4 Đặc tả usecase Xem thông báo 11 Bảng 3.5 Đặc tả usecase Xem danh sách tin nhắn 12 Bảng 3.6 Đặc tả usecase Xem chi tiết khung chat 14 Bảng 3.7 Đặc tả usecase Gửi tin nhắn 15 Bảng 3.8 Đặc tả usecase Xem chi tiết viết 16 Bảng 3.9 Đặc tả usecase Bình luận viết .18 Bảng 3.10 Đặc tả usecase Thả tim viết 19 Bảng 3.11 Đặc tả usecase Báo cáo viết 21 Bảng 3.12 Đặc tả usecase Trả lời bình luận .23 Bảng 3.13 Đặc tả usecase Báo cáo bình luận 25 Bảng 3.14 Đặc tả usecase Xem trang cá nhân 27 Bảng 3.15 Đặc tả usecase Tạo viết 28 Bảng 3.16 Đặc tả usecase Xem trang cá nhân người dùng khác .30 Bảng 3.17 Đặc tả usecase Báo cáo người dùng .31 Bảng 3.18 Đặc tả usecase Theo dõi 33 Bảng 3.19 Đặc tả usecase Xem danh sách người theo dõi .34 Bảng 3.20 Đặc tả usecase Xem danh sách người theo dõi 36 vii DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ Hình 3.1 Usecase Diagram Hình 3.2 Usecase tổng quát Người dùng xác thực Hình 3.3 Usecase bình luận viết 18 Hình 3.4 Usecase Thả tim viết 19 Hình 3.5 Usecase Báo cáo viết 21 Hình 3.6 Usecase Trả lời bình luận 23 Hình 3.7 Usecase báo cáo bình luận 25 Hình 3.8 Usecase Xem danh sách người theo dõi 34 Hình 3.9 Usecase Xem danh sách người theo dõi 35 Hình 3.10 Sơ đồ trình tự - Tìm viết 38 Hình 3.11 Sơ đồ trình tự - Bình luận 39 Hình 3.12 Sơ đồ trình tự - Đăng nhập 40 Hình 3.13 Sơ đồ trình tự - Tìm kiếm 41 Hình 3.14 Sơ đồ trình tự - Nhắn tin 42 Hình 3.15 Mơ hình liên kết thực thể 43 Hình 3.16 Mơ hình quan hệ 44 Hình 3.17 Giao diện thiết kế - Tìm kiếm 45 Hình 3.18 Giao diện thiết kế - Thông báo 45 Hình 3.19 Giao diện thiết kế - Tin nhắn 46 Hình 3.20 Giao diện Swagger – Bài viết 70 Hình 3.21 Giao diện Swagger – Bình luận 71 Hình 3.22 Giao diện Swagger – Theo dõi 71 Hình 3.23 Giao diện Swagger – Thả tim 72 Hình 3.24 Giao diện Swagger – Báo cáo 72 Hình 3.25 Giao diện Swagger - Thông báo .73 Hình 3.26 Giao diện Swagger – Tin nhắn 73 Hình 3.27 Giao diện Swagger - Tìm kiếm .74 viii Hình 4.1 Cấu trúc tổng quát Angular Project 47 Hình 4.2 Cấu trúc thư mục src 48 Hình 4.3 Cấu trúc thư mục app 49 Hình 4.4 Cấu trúc tổng quát Ionic Angular Project 50 Hình 4.5 HTML – Input upload file 50 Hình 4.6 Xử lý file upload .51 Hình 4.8 Xử lý file trước gửi xuống server .51 Hình 4.9 Xử lý liệu tin nhắn trả từ hub 52 Hình 4.10 Xử lý liệu tin nhắn trả từ hub 52 Hình 4.11 Thay đổi đổi trang thái cho tin nhắn 53 Hình 4.12 Website - Giao diện Trang chủ 53 Hình 4.13 App Mobile - Giao diện Trang chủ 54 Hình 4.14 Website - Giao diện Chi tiết viết 54 Hình 4.15 App Mobile – Giao diện Chi tiết viết 55 Hình 4.16 Website - Giao diện Tìm kiếm 55 Hình 4.17 App Mobile – Giao diện Tìm kiếm 56 Hình 4.18 Website - Giao diện Thơng báo 56 Hình 4.19 App Mobile – Giao diện thông báo 57 Hình 4.20 Website - Giao diện Danh sách tin nhắn 57 Hình 4.21 App Mobile – Giao diện Danh sách tin nhắn 58 Hình 4.22 Website - Giao diện Trang cá nhân 58 Hình 4.23 App Mobile – Giao diện trang cá nhân .59 Hình 4.24 Website - Giao diện Thay đổi ảnh đại diện 59 Hình 4.25 App Mobile – Giao diện Thay đổi ảnh đại diện 60 Hình 4.26 Website - Giao diện Chỉnh sửa viết 60 Hình 4.27 App Mobile – Giao diện Sửa viết 61 Hình 4.28 Website - Giao diện Tạo viết 61 ix Hình 4.29 App Mobile – Giao diện Tạo viết 62 Hình 4.30 Website - Giao diện trang cá nhân người dùng khác 62 Hình 4.31 App Mobile – Giao diện Trang cá nhân người dùng khác 63 Hình 4.32 AutoMapperProfile.cs .64 Hình 4.33 Post.cs 65 Hình 4.34 PostReponse.cs 65 Hình 4.35 PostController.cs .65 Hình 4.36 PostService.cs 66 Hình 4.37 PostService.cs 67 Hình 4.38 CreateNotificationRequest.cs 67 Hình 4.39 PresenceHub.ts 68 Hình 4.40 PresenceTracker.ts 68 Hình 4.41 Giao diện Swagger – Tài khoản 69 x Chương 1: TỔNG QUAN 1.1 Lý chọn đề tài Cùng với q trình tồn cầu hóa phát triển công nghệ thông tin, mạng internet giới Việt Nam ngày phát triển mạnh mẽ Sự tham gia cá nhân mạng ngày tích cực nhu cầu chia sẻ thông tin, kết nối bạn bè nhu cầu thiết yếu thúc đẩy đời, phát triển website ứng dụng mobile Hiện nay, tình hình phát triển website ứng dụng mobile ngày trở nên mạnh mẽ Số lượng người truy cập đăng ký thành viên website ứng dụng mobile ngày tăng Điển số website mạng xã hội: facebook.com, cooky.vn, pinterest.com,…tương ứng ứng dụng mobile Facebook, Cooky, Pinterest,… Tuy nhiên, dù có nhiều website ứng dụng mobile thị trường nhu cầu người dùng cao nên nhóm nghiên cứu xây dựng website ứng dụng mobile chia sẻ hình ảnh nhằm chia sẻ nhu cầu tạo nhiều lựa chọn cho người dùng 1.2 Mục tiêu Thiết kế xây dựng website ứng dụng mobile Chia Sẻ Hình Ảnh với đầy đủ tính như: đăng tải hình ảnh, tìm kiếm xem hình ảnh nhiều người,… Thiết kế giao diện người dùng gần gũi, dễ sử dụng Với giao diện người quản trị đơn giản trực quan có chức để quản lí người dùng 1.3 Công nghệ sử dụng - Front-end: Angular có sử dụng HTML, CSS, JS, Boostrap 4.0 với ứng dụng mobile có sử dụng ionic - Back-end: ASP.NET Core - Database: SQL Server Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Angular Framework Angular JavaScript framework dùng để viết giao diện web (Front-end) google phát triển Hiểu đơn giản Angular khung làm việc JavaScript MVC phía máy khách (client) nhằm phát triển ứng dụng web động [1] Angular JavaScript framework mạnh Angular cung cấp tính tích hợp cho animation, http service có tính auto-complete, navigation, toolbar, menus,… Code viết TypeScript, biên dịch thành JavaScript hiển thị tương tự trình duyệt [2] Ưu điểm sử dụng Angular: [1]  Code HTML mạnh mẽ với đặc trưng IF, FOR, LOCAL VARIABLES,…  Xây dựng tái sử dụng nhờ vào khối module độc lập  Nhanh chóng giải tốn logic nhờ back-end service hỗ trợ giao tiếp 2.2 ASP.NET Core ASP.NET Core web framework mã nguồn tối ưu hóa cho cloud để phát triển ứng dụng web chạy nhiều tảng Windows, Linux Mac Hiện tại, bao gồm MVC framework kết hợp tính MVC Web API thành web framework [3] Ưu điểm sử dụng ASP.NET Core: [3]  ASP.NET Core phiên ASP.NET Nó tên xây dựng từ đầu Nó có thay đổi lớn kiến trúc kết gọn hơn, phân chia module tốt  ASP.NET Core khơng cịn dựa System.Web.dll Nó dựa tập hợp nhiều yếu tố Nuget packages Điều cho phép bạn tối ưu ứng dụng cần NuGet packages cần thiết  ASP.NET Core chạy NET Core full NET Framework  Xây dựng chạy ứng dụng ASP.NET Core nhiều  Có khả host IIS self-host 2.3 Microsoft SQL Server 2017 Microsoft SQL Server hệ quản trị sở liệu quan hệ phát triển Microsoft Là máy chủ sở liệu, sản phẩm phần mềm có chức lưu trữ truy xuất liệu theo yêu cầu ứng dụng phần mềm khác Có thể chạy máy tính máy tính khác mạng (bao gồm Internet) [4] Microsoft SQL Server có nhiều phiên khác nhau, phiên SQL Server 2017 có tính đột phá sau: [4]  Tăng cường hiệu suất mà không cần điều chỉnh: Tăng hiệu suất tốc độ truy vấn cách sử dụng Adaptive Query Processing, giao dịch nhanh với nhớ OLTP phân tích nhanh 100x với Columnstore nhớ  Bảo vệ liệu với Luôn Mã hóa  Truy vấn liệu có hỗ trợ đồ thị  Hỗ trợ tảng, đám mây 2.4 Swagger UI APIs (Application Programming Interfaces) ngày trở nên phổ biến, dịch vụ Internet hầu hết sử dụng chuẩn RESTfull APIs để cung cấp cho đối tác phần tài nguyên sử dụng Để cho đối tác biết cung cấp tài ngun sử dụng thơng tin để lấy tài nguyên đó, ta cần phải có cơng cụ hỗ trợ việc tạo document APIs giúp thuận tiện cho việc cung cấp cách sử dụng tài nguyên thông qua APIs cách hiệu Swagger đời nhằm phục vụ cho công việc [5] Swagger open source dùng để phát triển, thiết kế, xây dựng làm tài liệu cho hệ thống RESTfull Web Service Có số phần mềm swagger Swagger Editor, Swagger Codegen, Swagger Inspector, Swagger UI Trong swagger UI sử dụng nhiều [5] 2.5 Ionic Framework Ionic Framework công cụ giao diện người dùng mã nguồn mở để xây dựng ứng dụng dành cho thiết bị di động máy tính có chất lượng cao, hiệu sử dụng công nghệ web HTML CSS JavaScript – với tích hợp khung phổ biến Angular, React Vue [6] Ưu điểm: [6]  Đa tảng: Xây dựng triển khai ứng dụng hoạt động nhiều tảng IOS, Android, máy tính Progressive Web App - ứng dụng web tiến với sở mã  Thiết kế đẹp: Thiết kế đơn giản, đầy đủ chức năng, hoạt động hiển thị đẹp mắt tất tảng Các thành phần thiết kế trước với kiểu chữ, mơ hình tương tác chủ đề sở tuyệt đẹp Đại diện cho liệu lưu trữ database Entity Framework Core ánh xạ liệu quan hệ từ sở liệu đến phiên đối tượng thực thể C#  Migrations Database migration files dựa lớp Entities classes dùng để tự động tạo sở liệu MSSQLserver cho api tự đông cập nhật Entities có thay đổi Migrations tạo với Package Manament Console, the migrations in this example were generated with the command AddMigration InitialCreate  Middleware Các class Middleware dùng để tạo yêu cầu pipeline để xử lý tác vụ xử lí global error xác thực token  Helpers Một số class hỗ trợ cho việc ánh xạ liệu, xác thực,… 4.2.2 Một số Function Dùng AutoMapper để ánh xạ Entity sang Model, nhờ ta tự xử lý liệu mà không ảnh hưởng đến cấu trúc Entity quan hệ chúng Model phản ánh cấu trúc liệu trả phía client khơng thiết phải hồn tồn giống Entity, mà có thuộc tính nhiều Entity khác Hình 4.31 AutoMapperProfile.cs 64 Hình 4.32 Post.cs Hình 4.33 PostReponse.cs Sử dụng Class service để xử lý liệu trước gửi client thông qua HttpRequest Nhờ vào việc map thuộc tính entity vào model, ta đơn giản hố liệu trả đảm bảo đầy đủ thơng tin cần thiết cho request Hình 4.34 PostController.cs 65 Sử dụng service khác để hỗ trợ việc lấy thuộc tính entity khác sau map vào Response Model Hình 4.35 PostService.cs Ngồi ta cịn dùng service để xử lý liệu cách tự động cần mà khơng cần tạo request 66 Hình 4.36 PostService.cs Các Request model giúp định dạng liệu truyền vào cho hàm xử lí service nhằm đảm bảo tính đắn liệu, giảm tối đa việc xuất exception Hình 4.37 CreateNotificationRequest.cs Khi người dùng đăng nhập hub tạo tự động, liệu gửi đến Client thông qua hub theo thời gian thực trạng thái đăng nhập, thơng báo tin nhắn 67 Hình 4.38 PresenceHub.ts Thông tin người dùng thu thập phân tích để đưa đề xuất vài viết tìm kiếm phù hợp Hình 4.39 PresenceTracker.ts 68 4.2.3 Giao diện Swagger UI  Tài khoản Hình 4.40 Giao diện Swagger – Tài khoản 69  Bài viết Hình 3.20 Giao diện Swagger – Bài viết 70  Bình luận Hình 3.21 Giao diện Swagger – Bình luận  Theo dõi Hình 3.22 Giao diện Swagger – Theo dõi 71  Thả tim Hình 3.23 Giao diện Swagger – Thả tim  Báo cáo Hình 3.24 Giao diện Swagger – Báo cáo 72  Thông báo Hình 3.25 Giao diện Swagger - Thơng báo  Tin nhắn Hình 3.26 Giao diện Swagger – Tin nhắn 73  Tìm kiếm Hình 3.27 Giao diện Swagger - Tìm kiếm 74 Chương 5: TỔNG KẾT 5.1 Kết đạt Nhóm xây dựng trang website ứng dụng chia sẻ hình ảnh với chức mà nhóm đề lúc đầu như: Chức khách:  Đăng ký  Đăng nhập Chức người dùng xác thực:  Đăng xuất  Xem hình ảnh với nhiều chủ đề đa dạng  Đăng tải hình ảnh  Tìm kiếm người dùng hình ảnh theo chủ đề  Xem thông báo  Quản lý tin nhắn: - Xem danh sách tin nhắn - Xem chi tiết khung chat tin nhắn - Gửi tin nhắn  Tương tác với hình ảnh: - Xem chi tiết hình ảnh - Tải xuống hình ảnh - Thả tim, bình luận hình ảnh - Báo cáo hình ảnh - Thả tim, trả lời bình luận - Báo cáo bình luận  Tương tác với trang cá nhân: - Xem chi tiết trang cá nhân với hình ảnh đăng tải - Xem danh sách viết yêu thích - Thay đổi ảnh đại diện - Chỉnh sửa thông tin cá nhân - Xem danh sách người theo dõi theo dõi  Tương tác với trang cá nhân người dùng khác: - Xem chi tiết trang cá nhân người dùng khác - Theo dõi huỷ theo dõi người dùng - Báo cáo người dùng - Xem danh sách người theo dõi theo dõi 75 Chức người quản trị (website):  Đăng nhập  Đăng xuất  Quản lý tài khoản  Quản lý viết (hình ảnh)  Quản lý bình luận  Quản lý báo cáo 5.2 Ưu điểm Có áp dụng học máy để phân loại ảnh Sử dụng liệu hoạt động người dùng để đưa viết đề xuất tìm kiếm phù hợp Chức nhắn tin cài đặt thời gian thực, hai người dùng nhắn tin cho hai đăng nhập vào hệ thống Người dùng nhận tin nhắn thông báo đăng nhập vào hệ thống 5.3 Nhược điểm Chưa có xác thực hai lớp Người dùng phải đăng nhập sử dụng sản phẩm Còn thiếu chức thương mại Chưa có chức gửi tin nhắn hình ảnh Phân loại ảnh tốn thời gian dẫn đến đăng viết chưa nhanh chóng Chưa có số chức chia sẻ viết sang ứng dụng khác, lưu ảnh theo sưu tập, lọc hình ảnh đăng tải theo ngày tháng năm 5.4 Khó khăn Khơng có nhiều thời gian để website trở nên hồn hảo Không đủ kiến thức kĩ dẫn đến hồn thành cơng việc trễ dự kiến Thiếu thơng tin cài đặt môi trường dẫn đến việc chậm tiến độ phát triển số tính mobile Thiếu liệu người dùng mẫu Tình hình dịch bệnh dẫn đến việc trao đổi, điều tra nguyên nhân giải pháp xử lí lỗi phát sinh q trình phát triển gặp nhiều khó khăn 5.5 Bài học kinh nghiệm Nên phân chia thời gian thực công việc tốt 76 5.6 Hướng phát triển Trong tương lai gần nhóm phát triển:  Thêm số chức tiện ích khác như: chia sẻ viết sang ứng dụng khác, lưu ảnh theo sưu tập, lọc hình ảnh đăng tải theo ngày tháng năm  Thêm chế xác thực hai lớp cho hệ thống  Giới hạn chất lượng ảnh người dùng, người dùng tăng chất lượng cách trả phí định kì  Cho phép người dùng trải nghiệm sản phẩm mà không cần đăng nhập 77 TÀI LIỆU THAM KHẢO [1] [2] [3] [4] [5] [6] Hồng Nhi, “Angular gì? Giới thiệu tồn tập Angular” Truy cập tại: https://blog.tinohost.com /angular-la-gi/#Angular_la_gi “Angular gì? Tại nên sử dụng Angular?” Truy cập tại: https:// tuyendung.ominext.com/angular-la-gi-tai-sao-can-hoc-lap-trinh-angular/ Nguyễn Minh Tuấn, “Tổng quan ASP.NET Core” Truy cập tại: https://netcore.vn/bai-viet/tong-quan-ve-aspnet-core Microsoft SQL Server Truy cập tại: https://vi.wikipedia.org/wiki/Microsoft_SQL_ Server PACISOFT Help Master (2019), “SQL Server 2017 có mới? So sánh ấn bản, phiên SQL 2017” Truy cập tại: https://help.pacisoft.com/knowledgebase/sql-server-2017-co-gi-moi-so-sanhcac-phien-ban-sql-server/ Perrygovier, Manucorporat, Camwiegert (2020), “Ionic Framework” Truy cập tại: https://ionicframework.com/docs 78 ... sẻ hình ảnh nhằm chia sẻ nhu cầu tạo nhiều lựa chọn cho người dùng 1.2 Mục tiêu Thiết kế xây dựng website ứng dụng mobile Chia Sẻ Hình Ảnh với đầy đủ tính như: đăng tải hình ảnh, tìm kiếm xem hình. .. pinterest.com,…tương ứng ứng dụng mobile Facebook, Cooky, Pinterest,… Tuy nhiên, dù có nhiều website ứng dụng mobile thị trường nhu cầu người dùng cao nên nhóm nghiên cứu xây dựng website ứng dụng mobile chia sẻ. .. triển website ứng dụng mobile Hiện nay, tình hình phát triển website ứng dụng mobile ngày trở nên mạnh mẽ Số lượng người truy cập đăng ký thành viên website ứng dụng mobile ngày tăng Điển số website