Đang tải... (xem toàn văn)
(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh(Đồ án tốt nghiệp) Xây dựng website và ứng dụng mobile để chia sẻ hình ảnh
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE VÀ ỨNG DỤNG MOBILE ĐỂ CHIA SẺ HÌNH ẢNH SVTH MSSV NGÔ THỊ TRANG 17110241 LÊ HUY HIỆP 17110137 Khố 2017 - 2021 Ngành CƠNG NGHỆ THƠNG TIN GVHD ThS TRẦN CÔNG TÚ TP.HCM, tháng năm 2021 LỜI CẢM ƠN Lời đầu tiên, nhóm thực xin phép gửi lời cảm ơn chân thành đến khoa Đào tạo Chất Lượng Cao – Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tạo điều kiện thuận lợi cho nhóm thực có hội tự tiếp cận, tham khảo, mở rộng thêm kiến thức lĩnh vực Công nghệ thông tin nói chung mơn Đồ Án Tốt Nghiệp nói riêng! Lời cảm ơn trân trọng nhóm thực xin chân thành gửi đến Thầy Trần Công Tú – người dùng tâm huyết tri thức người Thầy, đồng hành trực tiếp giảng dạy, hướng dẫn tạo điều kiện thuận lợi giúp đỡ cho nhóm phát huy hết khả nâng cao kiến thức suốt trình đồ án! Cảm ơn nhiệt tình Thầy, động lực vơ to lớn giúp nhóm thực kiên trì suốt trình thực đề tài khám phá kiến thức đầy thú vị bổ ích liên quan đến đề tài mà cụ thể đề tài Xây dựng website app mobile để Chia Sẻ Hình Ảnh TPHCM, ngày 20 tháng năm 2021 Nhóm sinh viên thực ii LỜI MỞ ĐẦU Hiện internet trở nên thông dụng thiếu sống Và đời website đóng vai trị quan trọng việc đưa người đến với thông tin mà họ cần Website mang đến cho người dùng thông tin cần thiết, vấn đề khác sống tìm kiếm website, giải đáp thắc mắc với thời gian cực nhanh chóng hiệu Vào năm gần đây, website phát triển ngày đa dạng có website theo hướng mạng xã hội Có thể kể số website phổ biến Facebook, Youtube, Instagram, Pinterest,… Rất khó để người dùng cưỡng lại thu hút website này, dùng miễn phí Thậm chí Facebook, Gmail trở thành phần thiếu sống nhiều người Từ thấy website theo hướng mạng xã hội dần trở nên vô quan trọng sống Dựa điều nhóm định xây dựng website chia sẻ hình ảnh để tạo điều kiện cho người giao lưu, liên kết, chia sẻ sở thích, quan tâm, ý tưởng dễ dàng với Website kho ảnh lớn với vơ số hình ảnh đẹp, thú vị, độc đáo; người dùng thoải mái xem tải miễn phí hình ảnh nào; tìm kiếm ý tưởng thơng qua hình ảnh theo chủ đề mà họ muốn iii 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 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 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 PHỤ LỤC 79 S K L 0 ... 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... 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... 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