THIẾT KẾ GIAO DIỆN HỆ THỐNG LOYALTY FOR FRISTI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN HỆ THỐNG LOYALTY FOR FRISTI Công ty thực tập : Cơng ty TNHH Phần Mềm Hồn Cầu (GSOFT) Người phụ trách : Phạm Tri Thức Thực tập sinh : Nguyễn Tài Nguyên TP Hồ Chí Minh, tháng năm 2022 LỜI MỞ ĐẦU Hiện giới công nghệ thông tin ngày phát triển vô mạnh mẽ Công nghệ thông tin không dừng lại việc phục vụ cho khoa học kỹ thuật mà sâu vào đời sống, trị, kinh tế, xã hội ngày trở nên thân thiện, gần gũi, mang lại nhiều giá trị lợi ích cho người dùng Đi kèm theo đó, hệ thống website phát triển không ngừng với đầy đủ lĩnh vực văn hóa, thời sự, khoa học, làm đẹp, nấu ăn,… Tuy nhiên, để tạo trang web thân thiện, phù hợp với đối tượng người dùng nhắm đến giao diện yếu tổ để gây ấn tượng ban đầu, qua người dùng định sử dụng hệ thống bạn tiếp hay không Sau khoảng thời gian trau dồi kiến thức kỹ ghế nhà trường, với mong muốn thử sức với môi trường doanh nghiệp để có thêm kinh nghiệm từ dự án thực tế tiếp xúc với văn hóa làm việc cơng ty CNTT, em định tìm kiếm nơi phù hợp với mong muốn thân Sau cân nhắc trao đổi với đại diện công ty em tham gia vào đội ngũ nhân Cơng ty TNHH Phần mềm Hồn cầu (GSOFT) – môi trường lý tưởng, đại, chuyên nghiệp – nơi giúp em thực dự định LỜI CẢM ƠN Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh chị hướng dẫn, em tiếp thu kiến thức quan trọng để ứng dụng kiến thức học vào ứng dụng thực tế Chân thành cảm ơn anh chị nhóm hướng dẫn bỏ nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Phạm Tri Thức anh chị công ty, hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với mơi trường dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu Cũng xin cảm ơn thầy cô khoa Công nghệ Phần mềm ln nhiệt tình truyền đạt kiến thức, kinh nghiệm nghề nghiệp, truyền cảm hứng để em tiếp thu cách dễ dàng Và đồng thời em xin cảm ơn thầy cô Khoa tạo điều kiện cho em hoàn thành việc thực tập báo cáo thực tập thân Nguyễn Tài Nguyên Tp.Hồ Chí Minh, ngày 02 tháng 06 năm 2022 NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập 1.1 Giới thiệu công ty : 1.2 Sản phẩm công ty: Chương 2: Nội dung thực tập: 2.1 Tìm hiểu công ty kỹ công ty: 2.2 Thực Project: 2.2.1 Đọc hiểu phân tích yêu cầu khách hàng: 2.2.2 Phác thảo ý tưởng thiết kế: 10 2.2.3 Thiết kế giao diện: 10 2.2.4 Trình bày ý tưởng, ghi nhận ý kiến đóng góp từ khách hàng: 11 2.2.5 Chỉnh sửa giao diện hệ thống, trình bày ý tưởng với lập trình viên: 11 2.3 Lịch làm việc: 12 Chương 3: Chi tiết dự án: 14 3.1 Giới thiệu project: 14 3.2 Giao diện thiết kế: 14 3.3 Kế hoạch thực dự án: 29 TÀI LIỆU THAM KHẢO 31 TỔNG KẾT 32 Chương 1: Giới thiệu công ty thực tập 1.1 Giới thiệu công ty : Cơng ty TNHH Phần mềm Hồn Cầu ( GSOFT ) công ty phần mềm hướng công nghệ thành lập vào năm 2007 GSOFT cung cấp giải pháp phần mềm quản lý cho doanh nghiệp tập đoàn, tổng công ty, ngân hàng, trường đại học, bệnh viện, giải pháp kết nối cộng đồng tảng internet, hệ thống website dịch vụ liên quan đến website, hệ thống lĩnh vực thương mại điện tử phủ điện tử GSOFT có trụ sở 235 Lý Thường Kiệt , Phường 6, Quận Tân Bình, Thành phố Hồ Chí Minh hai chi nhánh khác 177B Trần Văn Đang , Phường 11, Quận 3, Thành Phố Hồ Chí Minh Số Duy Tân, Phường Dịch Vọng Hậu, Quận Cầu Giấy, Hà Nội Với giá trị cốt lõi: GSOFT mong muốn phát triển mạnh mẽ không phạm vi nước mà vươn khu vực toàn cầu giải pháp sản phẩm cơng nghệ trí tuệ, độc đáo giúp nâng cao chất lượng sống GSOFT 1.2 Sản phẩm công ty: Qua 19 năm hoạt động GSOFT cung cấp sản phẩm/dịch vụ tiếng như: - Hệ thống phần mềm quản trị đầu tư mua sắm quản lý tài sản gAMSPro: Hệ thống phần mềm quản trị đầu tư mua sắm quản lý tài sản tập trung gAMSPro mang đến giải pháp tổng thể giúp tổ chức, doanh nghiệp giải tất vấn đề phận liên quan tới quản lý tài sản phân tích hiệu sử dụng, hiệu đầu tư tài sản cố định, công cụ dụng cụ, hệ thống gAMSPro nhiều tổ chức, doanh nghiệp có quy mơ giá trị tài sản lớn tin chọn Đặc biệt lĩnh vực: Ngân hàng, Tài chính, Giáo dục, Bệnh viện, Vận tải Khu cơng nghiệp - Phần mềm quản lý tín dụng gLOS: Quản lý khoản vay tín dụng quy trình quản lý hồ sơ tín dụng hệ thống phần mềm Phần mềm liên kết chặt chẽ trường liệu thông tin cần vay vốn người tiêu dùng nhằm đảm bảo giảm thiểu rủi ro cho công tác thu hồi nợ sau - Phần mềm quản lý phòng khám chuyên nghiệp gEClinic: Sử dụng phần mềm quản lý phòng khám giúp đơn giản hóa quy trình cơng tác quản lý, lưu trữ thông tin, liệu bệnh nhân, nhà cung cấp dược, lịch hẹn khám, thông tin lịch sử khám bệnh, sử dụng thuốc, kết cận lâm sàng,… đáp ứng tối đa nhu cầu quản lý, nâng cao chất lượng dịch vụ khám chữa bệnh tối ưu chi phí vận hành cho phịng khám - Hệ thống phần mềm Core Banking Phục Vụ Đào Tạo gEduBanking: Hệ thống phần mềm gEDUBANKING tích hợp đầy đủ nghiệp vụ ngân hàng chuẩn cập nhật nghiệp vụ khác nhiều ngân hàng hoạt động Việt Nam để cung cấp cho việc thực hành Trường Đại học, Cao đẳng đào tạo ngành liên quan đến nghiệp vụ ngân hàng, đảm bảo cho sinh viên tiếp cận từ 80 đến 100% nghiệp vụ, công việc thực tế làm việc ngân hàng sau trường - Cung cấp giải pháp phần mềm theo dự án: Phần mềm lập trình viên thiết kế, xây dựng, với tính riêng biệt, tùy chỉnh theo yêu cầu, giúp doanh nghiệp kiểm soát dễ dàng khâu quản lý, vận hành, hoạt động sản xuất kinh doanh - Hợp tác phát triển phần mềm ONSITE: GSOFT đơn vị có nhiều năm kinh nghiệm cung cấp hình thức hợp tác phát triển phần mềm Onsite cách cử nhân CNTT , nhân lập trình, nhân phát triển phần mềm làm việc theo mơ hình ONSITE đơn vị để với đội ngũ dự án thực phát triển hệ thống phần mềm Chương 2: Nội dung thực tập: 2.1 Tìm hiểu cơng ty kỹ công ty: Thời gian: ngày Nội dung: Người phụ trách giới thiệu cơng ty, q trình thành lập phát triển, phổ biến nội dung quy chế làm việc, giới thiệu sản phẩm chủ chốt cơng ty Sau đó, thực tập sinh cung cấp tài khoản riêng nội dùng để trao đổi thông tin tham gia họp nội với khách hàng Ngoài dùng tài khoản truy xuất vào phần mềm nội cơng ty Cùng lúc thực tập sinh người phụ trách hướng dẫn cách thức làm việc Quan trọng hơn, người phụ trách cung cấp tài liệu hướng dẫn công việc liên quan tới phần việc làm thời gian thực tập Tiếp đến liên quan đến đồng phục quy định, thời gian làm việc, phổ biến quy định chung công ty đãi ngộ mà thực tập sinh hưởng q trình thực tập Người phụ trách giới thiệu thực tập sinh với đồng nghiệp làm việc thời gian thực tập Kết : Có kiến thức cơng ty GSOFT, q trình thành lập phát triển, sản phẩm công ty Hiểu biết thêm mơi trường làm việc, có nhìn quy trình phát triển sản phẩm thực tế 2.2 Thực Project: 2.2.1 Đọc hiểu phân tích yêu cầu khách hàng: Thời gian: tuần Nội dung: Dựa thông tin yêu cầu khách hàng, xác định xác mục tiêu trang thiết kế: Khách hàng mong muốn website có chức gì, yêu cầu phong thiết kế sao, đối tượng người dùng khách hàng muốn hướng đến ai,… Thực hiện: Thu thập thơng tin từ phía khách hàng, tìm kiếm thơng tin liên quan đến khách hàng, đối tượng người dùng mà khách hàng dự án muốn nhắm đến, phân tích yêu cầu khách cung cấp, để đưa đề xuất phong cách thiết kế phù hợp với đối tượng người dùng mà khách hàng muốn nhắm đến Kết quả: Tìm hiểu nhu cầu xây dựng web khách hàng, biết cách research thông tin, đưa phân tích thói quen sử dụng, nhu cầu thực tế, … người dùng mà khách hàng mong muốn 2.2.2 Phác thảo ý tưởng thiết kế: Thời gian: tuần Nội dung: Dựa thông tin nhu cầu người dùng, kết đọc hiểu phân tích u cầu khách hàng, liệt kê tồn trang, chủ đề xuất trang trang Ngoài ra, xác định nội dung chi tiết trang sau phác thảo sơ website Thực hiện: - Tìm kiếm bảng màu, font chữ, phong cách thiết kế… phù hợp với ý tưởng, đối tượng người dùng hệ thống - Thiết kế phác thảo cho hệ thống Kết quả: - Hoàn thành danh sách trang, nội dung hiển thị trang,… - Hoàn thành phác thảo hệ thống 2.2.3 Thiết kế giao diện: Thời gian: tuần Nội dung: Từ thơng tin phân tích trên, lựa chọn tơng màu, font chữ, phong cách thiết kế phù hợp với yêu cầu công ty, phù hợp với đối tượng người dùng mà khách hàng hướng đến Áp dụng màu, font chữ, phong cách thiết kế chọn vào hệ thống Tối ưu thiết kế giao diện hoàn chỉnh phù hợp với nhiều loại thiết bị khác (Desktop, Tablet, Mobile) Thực hiện: - Tìm kiếm font chữ, tơng màu phù hợp 10 - Màn hình vịng quay may mắn: - Màn hình kết vịng quay may mắn: 18 - Cập nhật thông tin giao hàng: - Màn hình kho bảo bối (Màn hình dùng điểm đổi quà): 19 - Màn hình mơ tả chi tiết q tặng: 20 - Màn hình tra cứu lịch sử: 21 - Màn hình thơng tin người dùng: - Màn hình bước săn quà: 22 - Màn hình chế chương trình: 23 24 - Màn hình giải thưởng chương trình: - Màn hình quản lý quà tặng: 25 - Màn hình thêm q tặng: - Chỉnh sửa thơng tin q tặng: 26 - Màn hình quản lý vịng quay: - Màn hình chỉnh sửa vịng quay: 27 - Màn hình quản lý giao hàng: - Quản lý tỷ lệ đổi mã may mắn: 28 3.3 Kế hoạch thực dự án: Hệ thống thực qua giai đoạn: Giai đoạn 1: Khảo sát dự án phân tích yêu cầu khách hàng Thu thập thông tin chi tiết (Chức xử lý, thông tin nhập xuất, đầu vào đầu hệ thống, yêu cầu phong cách thiết kế, màu sắc từ khách hàng) Dựa thông tin mà khách hàng cung cấp, thu thập thông tin người dùng mà khách hàng nhắm đến (Phân tích mục đích sử dụng, yêu cầu mà người dùng đặt ra,…) Giai đoạn 2: Phân tích hệ thống Dựa thông tin khách hàng cung cấp, phân tích đặc tả mơ hình phân cấp, xây dựng chức tổng thể qua đặc tả SRD Liệt kê toàn trang, chủ đề xuất trang trang Ngoài ra, xác định nội dung chi tiết trang sau phác thảo sơ website Giai đoạn 3: Thiết kế giao diện hệ thống Dựa SRD đặc tả giai đoạn 2, dựa phong cách thiết kế chọn phù hợp với người dùng khách hàng nhắm đến, phác thảo giao diện hệ thống Áp dụng màu sắc, phong cách thiết kế giao diện chọn vào giao diện phác thảo 29 Trình bày ý tưởng với khách hàng, ghi nhận góp ý điều chỉnh giao diện từ khách hàng Thảo luận với khách hàng để đưa phương án tốt Dựa kết chọn buổi thảo luận góp ý với khách hàng, chỉnh sửa giao diện phiên cuối chuyển giao diện hoàn chỉnh Giai đoạn 4: Lập trình hệ thống Lựa chọn hệ quản trị CSDL cài đặt sở liệu cho hệ thống Lựa chọn công cụ, ngôn ngữ, framework để lập trình hệ thống Tiến hành lập trình hồn thiện hệ thống Viết tài liệu hướng dẫn sử dụng cho phép khách hàng vào UAT, sử dụng thử hệ thống Giai đoạn 5: Hoàn thành hệ thống, kiểm thử Dựa tài liệu đặc tả SRD thực viết test case để thực kiểm thử hệ thống Sau hoàn thành test case thực kiểm thử hệ thống, phản hồi lại cho lập trình viên lỗi gặp phải trình test lập trình viên chỉnh sửa hệ thống Giai đoạn 6: Triển khai hệ thống bảo trì, bảo dưỡng Triển khai hệ thống lên server Đào tạo hướng dẫn sử dụng hệ thống Cho phép người dùng tham gia sử dụng hệ thống Bảo hành hệ thống Nâng cấp chương trình có phiên 30 TÀI LIỆU THAM KHẢO [1] Norman, D The design of everyday things, 2013 Perseus Books Group, 2013 [3] Stead, R and Gartner Don’t make me think! A common sense approach to web usability, 2018 New Riders, 2018 [4] Alan Dix, Janet Finlay, Gregory D Abowd, Russell Beale Human-Computer Interaction, 2004 ResearchGate, 2005 [6] Norman D, người dịch Phương Lan, Thiết kế lấy người dùng làm trung tâm NXB Công thương, 2019 [5] Figma, “Figma: the collaborative interface design tool,” 2022 [Trực tuyến] Địa chỉ: https://www.figma.com/ [Truy cập 2021] [6] Hoang.moe, “Designing Archives - Designer Writer Animal Lover,” 2021 [Trực tuyến] Địa chỉ: https://hoang.moe/writing/designing/ [Truy cập 2021] 31 TỔNG KẾT Trong vòng hai tháng, em với đồng nghiệp hồn thành công việc thiết kế giao diện hệ thống Loyalty Web App for Fristi Có hội làm quen, vận dụng kiến thức học áp dụng vào công việc q trình thực tập cơng ty Đặc biệt em cải thiện thân trở nên tốt hơn, chủ động việc tìm kiếm thơng tin tài liệu Internet Em xin chân thành cảm ơn giúp đỡ từ anh chị trước công ty hỗ trợ em suốt trình thực tập Cảm ơn tất người nhóm hỗ trợ lẫn hồn thành dự án Đặc biệt anh Phạm Tri Thức ln quan tâm, dẫn cách nhiệt tình q trình thực dự án, ln đem đến hỗ trợ hết mức để giúp em thực cơng việc giao Qua học hỏi thêm nhiều kinh nghiệm làm việc môi trường thực tế khắc phục lỗi, khuyết điểm cịn thiếu xót thân Những điều em vô trân trọng biết ơn Cuối em xin cảm ơn Công ty TNHH Phần mềm Hoàn cầu (GSOFT) tạo điều kiện cho em có hội thực tập, đào tạo cho em nhiều kiến thức định hướng theo công việc mà em mong muốn làm tương lai Qua đợt thực tập này, em tiếp tục cố gắng bổ sung cho thân thêm nhiều kiến thức chuyên sâu tiếp tục cống hiến sức trẻ thân cho công ty mà em thực tập Xin chân thành cảm ơn! 32 ... khách hàng giao diện hệ thống Kết quả: - Nhận phản hồi tích cực từ khách hàng - Biết cách trao đổi với khách hàng, đưa ý tưởng tốt cho giao diện hệ thống 2.2.5 Chỉnh sửa giao diện hệ thống, trình... 3: Thiết kế giao diện hệ thống Dựa SRD đặc tả giai đoạn 2, dựa phong cách thiết kế chọn phù hợp với người dùng khách hàng nhắm đến, phác thảo giao diện hệ thống Áp dụng màu sắc, phong cách thiết. .. cách thiết kế chọn vào hệ thống Tối ưu thiết kế giao diện hoàn chỉnh phù hợp với nhiều loại thiết bị khác (Desktop, Tablet, Mobile) Thực hiện: - Tìm kiếm font chữ, tơng màu phù hợp 10 - Thiết kế