Xây dựng front end cho website framecraft mạng xã hội chia sẻ hình ảnh

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN XÂY DỰNG FRONT-END CHO WEBSITE FRAMECRAFT - MẠNG XÃ HỘI CHIA SẺ HÌNH ẢNH Đơn vị thực tập : TMA Solutions Bình Định Giảng viên hướng dẫn : Cao Thị Nhâm LỜI CẢM ƠN Đối với tập nghề nghiệp lần này, lần em bước vào mơi trường doanh nghiệp thực tế Ngồi kiến thức kỹ nghề nghiệp, em cịn học hỏi thêm văn hóa cơng ty, vị trí cơng việc thực tế, kỹ mềm khác Để hồn thành tốt tập nghề nghiệp lần này, thời gian em rèn luyện trường, em nhận nhiều hỗ trợ từ giảng viên khoa bạn Trước hết, em xin cảm ơn quý giảng viên khoa Thống kê - Tin học, trường Đại học kinh tế - ĐHĐN nhiệt huyết để truyền tải tri thức thời gian chúng em trường Đặc biệt, em xin cảm ơn cô Cao Thị Nhâm - giảng viên phụ trách hướng dẫn báo cáo nghề nghiệp lần này, em cảm ơn tận tình sẵn sàng giúp đỡ, giải vấn đề chúng em gặp khó khăn Em xin gửi lời cảm ơn đến công ty TMA Solutions Bình Định cho em hội để thực tập Cảm ơn anh chị phịng ban, cơng ty truyền đạt kỹ mềm giải trở ngại suốt khoảng thời gian thực tập Đặc biệt, em xin chân thành cảm ơn anh Khánh Phạm - Mentor hướng dẫn trực tiếp em TMA Bình Định, người theo sát, góp ý giúp đỡ em nhiều q trình thực tập cơng ty Bài báo cáo thực tập nghề nghiệp có nhiều thiếu sót thời gian, kinh nghiệm khả hạn chế sinh viên thực tập Em xin kính mong nhận lời góp ý chân thành từ phía giảng viên công ty nhằm cải thiện cho báo cáo tốt hơn, đồng thời tiền đề để em thể tốt bài cáo thực tập tốt nghiệp năm tới tương lai Em xin chân thành cảm ơn! LỜI CAM ĐOAN Em xin cam đoan, báo cáo thực tập nghề nghiệp này, với đề tài: “Xây dựng Front-end cho Website FrameCraft” cơng trình nghiên cứu độc lập em hướng dẫn trực tiếp giảng viên hướng dẫn (cô Cao Thị Nhâm) Mentor TMA Solutions (anh Phạm Quốc Khánh) Kết báo cáo thực thời gian thực tập cơng ty TMA Solutions Bình Định Ngồi ra, tham khảo dùng báo cáo trích nguồn thích rõ ràng Nếu có chép khơng hợp lệ, em xin chịu hồn tồn trách nhiệm trước môn, khoa nhà trường lời cam đoan MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN DOANH NGHIỆP VÀ VỊ TRÍ VIỆC LÀM 1.1 Giới thiệu chung 1.1.1 Giới thiệu chung TMA Solutions 1.1.2 Giới thiệu chung TMA Solutions Bình Định 1.2 Tổng quan về vị trí việc làm 1.2.1 Giới thiệu chung công việc Front-end Developer 1.2.2 Yêu cầu công việc 1.2.3 Trách nhiệm công việc 1.2.4 Mức lương 1.2.5 Con đường phát triển (Career Path) CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 10 2.1 HTML 10 2.2 CSS 10 2.3 Javascript 10 2.4 ReactJS 11 2.5 Các thư viện hỗ trợ khác 11 CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG 12 3.1 Tổng quan về hệ thống 12 3.1.1 Giới thiệu chung ứng dụng 12 3.1.2 Các module chức 12 3.1.3 Sơ đồ luồng hệ thống 13 3.2 Phân tích hệ thống 14 3.2.1 Sơ đồ Use-case tổng quát 14 3.2.2 Mô tả chi tiết Use-case 14 3.3 Yêu cầu phi chức 27 CHƯƠNG 4: THIẾT KẾ & ĐẶC TẢ GIAO DIỆN 27 4.1 Sơ đồ màn hình 27 4.2 Các giao diện màn hình Website 28 CHƯƠNG 5: XÂY DỰNG HỆ THỐNG 32 5.1 Công cụ hỗ trợ và phần mềm sử dụng 32 5.2 Kết 32 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 33 TÀI LIỆU THAM KHẢO 34 DANH MỤC HÌNH ẢNH Hình 1: Logo TMA Solutions Hình 2: TMA Solutions Bình Định Hình 3: Sơ đồ luồng hệ thống 13 Hình 4: Sơ đồ Use-case tổng quát 14 Hình 5: Use-case Xem hình Mainboard 19 Hình 6: Use-case Quản lý đăng 21 Hình 7: Use-case Quản lý bình luận 22 Hình 8: Use-case Quản lý thông tin cá nhân 25 Hình 9: Sơ đồ hình 28 Hình 10: Màn hình trang Landing page 28 Hình 11: Màn hình trang Log in 29 Hình 12: Màn hình trang Sign up 29 Hình 13: Màn hình trang Mainboard 30 Hình 14: Màn hình trang Create post 30 Hình 15: Màn hình trang View detail post 31 Hình 16: Popup Account information Change password 31 DANH MỤC BẢNG BIỂU Bảng 1: Chức hệ thống 13 Bảng 2: Chi tiết use-case Đăng ký 14 Bảng 3: Chi tiết use-case Đăng nhập 15 Bảng 4: Chi tiết use-case Đăng xuất 16 Bảng 5: Chi tiết use-case Đổi mật 17 Bảng 6: Chi tiết use-case Tìm kiếm 18 Bảng 7: Chi tiết use-case Xem thông báo 19 Bảng 8: Chi tiết use-case Xem hình Mainboard 20 Bảng 9: Chi tiết use-case Xem chi tiết đăng 20 Bảng 10: Chi tiết use-case Thêm đăng 21 Bảng 11: Chi tiết use-case Xem bình luận 22 Bảng 12: Chi tiết use-case Thêm bình luận 23 Bảng 13: Chi tiết use-case Chỉnh sửa bình luận 24 Bảng 14: Chi tiết use-case Xóa bình luận 24 Bảng 15: Chi tiết use-case Xem thông tin cá nhân 25 Bảng 16: Chi tiết use-case Chỉnh sửa thông tin cá nhân 26 LỜI MỞ ĐẦU Mục tiêu nghiên cứu đề tài Đề tài “Xây dựng front-end cho website FrameCraft - mạng xã hội chia sẻ hình ảnh” nhằm mục đích thể kiến thức mà thân có q trình thực tập TMA Solutions, vị trí Front-end Developer Nhiệm vụ đề tài Nhiệm vụ đề tài hướng đến việc xây dựng giao diện trang web đẹp mắt, tương tác dễ sử dụng, góp phần tạo nên cộng đồng trực tuyến động sáng tạo, nơi người chia sẻ khám phá khoảnh khắc đáng nhớ sống thơng qua hình ảnh Đối tượng và phạm vi nghiên cứu 3.1 Đối tượng nghiên cứu - Người dùng đăng ký: Đây người dùng đăng ký tài khoản FrameCraft, có quyền tải lên, quản lý chia sẻ hình ảnh cá nhân thực tính tương tác với viết thơng qua tính bình luận - Người dùng thăm quan: Đây người dùng không cần đăng ký tài khoản, xem hình ảnh nội dung công khai trang web 3.2 Phạm vi nghiên cứu Phạm vi nghiên cứu tập trung chủ yếu vào khía cạnh giao diện trải nghiệm người dùng trang web Và không sâu vào xây dựng sở liệu hay phần xử lý logic phía máy chủ (back-end) trang Web Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung, cuối phần kết luận hướng phát triển - Mở đầu - Chương 1: Tổng quan doanh nghiệp vị trí việc làm - Chương 2: Cơ sở lý thuyết - Chương 3: Phân tích hệ thống - Chương 4: Thiết kế & đặc tả giao diện - Chương 5: Xây dựng hệ thống kết đạt - Kết luận hướng phát triển CHƯƠNG TỔNG QUAN DOANH NGHIỆP VÀ VỊ TRÍ VIỆC LÀM 1.1 Giới thiệu chung 1.1.1 Giới thiệu chung TMA Solutions TMA Solutions (tên viết tắt tiếng Anh TMA, tên đầy đủ tiếng Việt Công ty Giải pháp Phầm mềm Tường Minh) cơng ty thuộc Tập đồn Công nghệ TMA (TMA Tech Group), kinh doanh dịch vụ liên quan đến phát triển phần mềm Là tập đồn cơng nghệ hàng đầu Việt Nam với 4000 kỹ sư (04/2023) - Loại hình: Doanh nghiệp Tư Nhân - Ngành nghề: Dịch vụ CNTT - Gia Công Xuất Phần Mềm - Lĩnh vực hoạt động: Gia Công Phần Mềm - Thành lập: Tháng năm 1997 - Người sáng lập: Bà Bùi Ngọc Anh, CEO; Ông Nguyễn Hữu Lệ, Chủ tịch - Trụ sở 111, Đường Nguyễn Đình Chính, Quận Phú Nhuận, Thành phố Hồ Chí Minh, Việt Nam TMA có chi nhánh Việt Nam (6 Tp.HCM Tp Quy Nhơn) chi nhánh nước (Mỹ, Úc, Canada, Đức, Nhật, Singapore) Các công ty thành viên: TMA Solutions (cơng ty Giải pháp phần mềm), TMA Solutions Bình Định (trung tâm Công nghệ hàng đầu miền Trung Việt Nam), TMA Innovation (công ty cung cấp sản phẩm giải pháp công nghệ sáng tạo) Với 25 năm kinh nghiệm phát triển triển khai giải pháp phần mềm cho khách hàng từ 30 quốc gia, TMA tích lũy nhiều cơng nghệ tiên tiến giải pháp phong phú cho nhiều lĩnh vực Với mục đích nhằm ứng công nghệ để xây dựng giải pháp sản phẩm sáng tạo đột phá lĩnh vực dồng thời giúp khách hàng ứng dụng cơng nghệ 4.0 với chi phí thấp hiệu cao Cơng nghệ tiên phong: Trí tuệ nhân tạo / máy học, liệu lớn / phân tích liệu, IOT thiết bị thơng minh, Cloud Chính sách đãi ngộ: - Được đào tạo kỹ thuật công nghệ trước tham gia dự án với khách hàng Bắc Mỹ, Châu Âu, Úc Bảng 8: Chi tiết use-case Xem hình Mainboard Actor: Người dùng khách Type: Business use-case Brief Description: Là người dùng, muốn xem hình ảnh hình Trigger: Người dùng muốn xem hình ảnh hình Pre-Condition: Người dùng truy cập vào trang web hệ thống Basic Flow: Người dùng nhập nội dung tìm kiếm vào ô tìm kiếm Hệ thống chuyển hướng người dùng đến hình Mainboard Người dùng xem đăng hình ảnh hình trang Mainboard Alternative Flow: 1a Người dùng đăng nhập vào tài khoản họ trang web Use-case tiếp tục bước Exception Flow Bảng 9: Chi tiết use-case Xem chi tiết bài đăng Actor: Người dùng khách Type: Business use-case Brief Description: Là người dùng khách, muốn xem chi tiết đăng hình ảnh để biết thêm thơng tin hình ảnh Trigger: Người dùng muốn xem chi tiết đăng Pre-Condition: Người dùng truy cập vào trang web hệ thống Basic Flow: Người dùng xem danh sách đăng hình Mainboard Người dùng click vào đăng danh sách đăng mà họ muốn xem chi tiết Hệ thống hiển thị thông tin chi tiết đăng chọn, bao gồm hình ảnh, tiêu đề, mơ tả, lượt thích, bình luận 20 Người dùng xem thơng tin chi tiết đăng Alternative Flow Exception Flow h Use-case Quản lý bài đăng Hình 6: Use-case Quản lý đăng Bảng 10: Chi tiết use-case Thêm mới bài đăng Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng, muốn tạo đăng Trigger: Người dùng muốn thêm đăng Pre-Condition: Người dùng đăng nhập vào trang web hệ thống Basic Flow: Người dùng nhấn vào nút “Create post” Header Hệ thống hiển thị hình trang tạo đăng Người dùng tải hình ảnh lên cách chọn tệp từ máy tính click vào khung upload ảnh Người dùng nhập thông tin đăng gồm title description Người dùng nhấn nút “Save” để tạo đăng Hệ thống kiểm tra tính hợp lệ nội dung đăng 21 Hệ thống lưu thông tin đăng vào sở liệu hiển thị lên giao diện người dùng Alternative Flow: 4a Người dùng không muốn nhập title description bỏ qua bước Use-case tiếp tục bước Exception Flow: 5a Người dùng nhấn “Cancel” để bỏ qua việc tạo đăng quay lại hình trang trước 6a Nếu khơng có hình ảnh tải lên hệ thống thông báo lỗi không thực hành động tạo đăng i Use-case Quản lý bình luận Hình 7: Use-case Quản lý bình luận Bảng 11: Chi tiết use-case Xem bình luận Actor: Người dùng khách, Type: Business use-case người dùng hệ thống Brief Description: Là người dùng, tơi muốn xem bình luận ảnh cụ thể Trigger: Người dùng muốn xem bình luận hình ảnh cụ thể 22 Pre-Condition: Người dùng truy cập vào hình trang Mainboard Basic Flow: Người dùng trang Mainboard Người dùng nhấn vào hình ảnh cụ thể muốn xem bình luận Hệ thống mở trang xem chi tiết đăng hiển thị thơng tin: hình ảnh, tiêu đề mơ tả, người đăng (name username), số lượt thích lượt bình luận Người dùng xem bình luận hiển thị trang chi tiết đăng Alternative Flow Exception Flow Bảng 12: Chi tiết use-case Thêm bình luận Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng, tơi muốn thêm bình luận ảnh cụ thể Trigger: Người dùng muốn bình luận vào hình ảnh Pre-Condition: Người dùng xem chi tiết đăng bình luận liên quan đến hình ảnh Basic Flow: Người dùng trang xem chi tiết đăng Người dùng nhập nội dung bình luận vào bình luận Người dùng nhấn "Enter" bàn phím để thêm bình luận Hệ thống thêm bình luận vào danh sách bình luận hiển thị bình luận bên bình luận gần Alternative Flow 23 Bảng 13: Chi tiết use-case Chỉnh sửa bình luận Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng, muốn chỉnh sửa bình luận tạo Trigger: Người dùng muốn chỉnh sửa bình luận Pre-Condition: Người dùng thêm bình luận vào đăng xem chi tiết đăng Basic Flow: Người dùng trang xem chi tiết đăng Người dùng xác định bình luận mà họ muốn chỉnh sửa Người dùng nhấn vào icon tùy chọn chọn "Edit" Hệ thống mở giao diện chỉnh sửa bình luận cho người dùng Người dùng tiến hành chỉnh sửa nội dung bình luận Người dùng nhấn nút "Save” để cập nhật nội dung chỉnh sửa Hệ thống cập nhật nội dung bình luận giao diện Alternative Flow Exception Flow Bảng 14: Chi tiết use-case Xóa bình luận Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng, tơi muốn xóa bình luận tạo Trigger: Người dùng muốn xóa bình luận Pre-Condition: Người dùng thêm bình luận vào đăng xem chi tiết đăng Basic Flow: 24 Người dùng trang xem chi tiết đăng Người dùng xác định bình luận mà họ muốn xóa Người dùng nhấn vào biểu tượng tùy chọn chọn "Delete" Hệ thống xóa bình luận khỏi danh sách bình luận cập nhật lại trang hiển thị Alternative Flow Exception Flow j Use-case Quản lý thông tin cá nhân Hình 8: Use-case Quản lý thơng tin cá nhân Bảng 15: Chi tiết use-case Xem thông tin cá nhân Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng hệ thống, muốn xem chi tiết thơng tin cá nhân tài khoản Trigger: Người dùng muốn xem thông tin cá nhân Pre-Condition: Người dùng đăng nhập vào tài khoản hệ thống Basic Flow: Người dùng di chuột vào avatar họ header Hệ thống hiển thị danh sách tùy chọn, người dùng chọn "Account information" Hệ thống mở popup hiển thị thông tin cá nhân cho người dùng 25 Người dùng xem thông tin cá nhân popup Alternative Flow Exception Flow Bảng 16: Chi tiết use-case Chỉnh sửa thông tin cá nhân Actor: Người dùng hệ thống Type: Business use-case Brief Description: Là người dùng hệ thống, muốn chỉnh sửa thông tin cá nhân tài khoản Trigger: Người dùng muốn chỉnh sửa thông tin cá nhân Pre-Condition: Người dùng đăng nhập vào tài khoản hệ thống Basic Flow: Người dùng di chuột vào avatar họ header Hệ thống hiển thị danh sách tùy chọn, người dùng chọn "Account information" Hệ thống mở popup hiển thị thông tin cá nhân cho người dùng Người dùng thực chỉnh sửa: - Edit avatar cách tải lên hình ảnh từ máy tính - Edit name, username, description, phone, email, birthday cách nhập nội dung vào ô input tương ứng - Edit gender cách chọn từ dropdown Người dùng nhấn "Save" để cập nhật thông tin chỉnh sửa Hệ thống kiểm tra tính hợp lệ thông tin cá nhân thành công Hệ thống cập nhật thông tin cá nhân người dùng hiển thị thông báo thành công Alternative Flow Exception Flow: 26 5a Người dùng không muốn lưu chỉnh sửa quay lại trạng thái ban đầu, chọn nút “Cancel” biểu tượng hủy để 6a Nếu thơng tin cá nhân không hợp lệ, hệ thống thông báo lỗi yêu cầu người dùng chỉnh sửa 3.3 Yêu cầu phi chức - Giao diện người dùng: hấp dẫn, trực quan thân thiện, tạo trải nghiệm tốt cho người dùng truy cập tương tác với hình ảnh - Trang web cần hoạt động ổn định, đảm bảo người dùng không gặp cố tải lên, chia sẻ xem hình ảnh Tốc độ tải, truy cập trang nhanh, giảm thời gian chờ - Hỗ trợ nhiều định dạng ảnh khác nhau: JPEG, PNG, GIF, độ phân giải đủ để hiển thị hình ảnh chất lượng cao - Tính an tồn bảo mật: đảm bảo tính riêng tư thơng tin người dùng truy cập trang web tạo tài khoản - Bảo mật ảnh: Tránh việc tải lên, chia sẻ hiển thị hình ảnh khơng phù hợp, xâm phạm quyền riêng tư vi phạm quyền - Tương thích với trình duyệt khác (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari…) Tương thích với thiết bị khác (smartphone, máy tính bảng, laptop, desktop…) - Đa ngơn ngữ: Hỗ trợ ngôn ngữ Việt – Anh CHƯƠNG 4: THIẾT KẾ & ĐẶC TẢ GIAO DIỆN 4.1 Sơ đồ màn hình 27 Hình 9: Sơ đồ hình 4.2 Các giao diện màn hình Website Hình 10: Màn hình trang Landing page 28 Hình 11: Màn hình trang Log in Hình 12: Màn hình trang Sign up 29 Hình 13: Màn hình trang Mainboard Hình 14: Màn hình trang Create post 30 Hình 15: Màn hình trang View detail post Hình 16: Popup Account information Change password 31 CHƯƠNG 5: XÂY DỰNG HỆ THỐNG 5.1 Công cụ hỗ trợ và phần mềm sử dụng - Trình duyệt web: Microsoft Edge Google Chrome - Code editor: Visual Studio Code - Github: lưu trữ mã nguồn quản lý dự án - Node.js npm (Node Package Manager): cho phép sử dụng thư viện React (trong phạm vi dự án) + Node.js môi trường chạy mã JavaScript phía máy chủ + npm trình quản lý gói phổ biến cho JavaScript - React: thư viện JavaScript phổ biến để xây dựng giao diện người dùng (UI) - Thiết kế giao diện trải nghiệm người dùng (UI, UX): phần mềm Figma - React Router: để quản lý điều hướng trang thành phần khác ứng dụng đơn trang (SPA - Single Page Application) - Styled Components: viết mã CSS bên mã JavaScript React 5.2 Kết • Link Design Figma: FrameCraft Design UI/UX • Link Source Code Github: FrameCraft Source Code GitHub - Ứng dụng kiến thức học Javascript ReactJS để ứng dụng vào dự án cá nhân, xây dựng phần giao diện cho trang web - Đạt khoảng 80% mục tiêu dự án ban đầu - Chưa xây dựng trang chỉnh sửa xóa đăng - Chưa xử lý logic nhiều dự án 32 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Đạt - Củng cố kiến thức HTML, CSS Bên cạnh đó, học thêm Javascript, React áp dụng vào dự án thực tập - Phát triển khả tự học khả giải vấn đề - Có định hướng tốt rõ ràng vị trí cơng việc - Hiểu rõ cách làm việc môi trường doanh nghiệp - Được học kỹ mềm khóa đào tạo cơng ty: kỹ thuyết trình, kiến thức an tồn bảo mật, kỹ viết email, kỹ giao tiếp, kỹ làm việc môi trường doanh nghiệp… Hạn chế - Khả thực dự án hạn chế cần nâng cao - Việc tiếp cận tài liệu tiếng Anh cịn nhiều khó khan - Chưa hồn tồn chủ động hồn tồn cơng việc Hướng phát triển • Kế hoạch dự kiến để phát triển lực cá nhân - Củng cố kiến thức có, đồng thời tìm hiểu học thêm ngơn ngữ lập trình back-end - Vì thời gian thực tập lực thân nhiều hạn chế mức nên chưa thể tìm hiểu thêm phần chức nâng cao Do đó, thân em cố gắng cải thiện hồn thiện tương lai • Kế hoạch dự kiến để hoàn thiện project - Hoàn thành chức cũ, học cách viết code logic, rõ ràng, dễ đọc thông minh - Trước mắt, tạo chức thêm sửa xóa xử lý phía back-end để có project hồn thiện Tìm hiểu, tham khảo thêm nhiều tài liệu trang web khác để phát triển thêm nhiều chức khác 33 TÀI LIỆU THAM KHẢO Nguồn tài liệu ReactJS: Quick Start – React Nguồn học Javascript bản: Javascript - Learn Nguồn tham khảo khác: W3Schools Online Web Tutorials Figma tool documentation: Figma Learn - Help Center Web color: ColorSpace - Color Palettes Generator Một số thư viện hỗ trợ khác: - React Router: Home v6.15.0 | React Router - Bootstrap: Bootstrap (getbootstrap.com) - React Bootstrap: React Bootstrap (react-bootstrap.github.io) - Material UI: Material UI: React components based on Material Design 34