Tài liệu Báo cáo thực tập 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 Hoà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 6 năm 2022 LỜI MỞ ĐẦU Hiện nay trên thế giới công nghệ thông tin đang ngày càng phát triển vô cùng mạnh mẽ. Công nghệ thông tin không chỉ dừng lại ở việc phục vụ cho khoa học kỹ thuật mà còn đi sâu hơn vào đời sống, chính trị, kinh tế, xã hội và ngày càng 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 đó, các hệ thống website cũng phát triển không ngừng với đầy đủ các 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 ra một trang web thân thiện, phù hợp với đối tượng người dùng nhắm đến thì giao diện chính là một trong những yếu tổ để gây ấn tượng ban đầu, qua đó người dùng có thể quyết định sử dụng hệ thống của bạn tiếp hay không. Sau khoảng thời gian trau dồi các kiến thức và kỹ năng trên ghế nhà trường, với mong muốn được thử sức với môi trường doanh nghiệp để có thêm những kinh nghiệm từ những dự án thực tế và tiếp xúc với văn hóa làm việc tại các công ty CNTT, em đã quyết định tìm kiếm nơi phù hợp với mong muốn của bản thân. Sau những cân nhắc cũng như trao đổi với đại diện công ty em đã tham gia vào đội ngũ nhân sự của Công ty TNHH Phần mềm Hoàn cầu (GSOFT) – một môi trường lý tưởng, hiện đại, chuyên nghiệp – là nơi sẽ giúp em thực hiện dự định này. 2 LỜI CẢM ƠN Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của anh chị hướng dẫn, em đã tiếp thu được những kiến thức quan trọng để có thể ứng dụng kiến thức đã được học vào ứng dụng thực tế. Chân thành cảm ơn các anh chị trong nhóm hướng dẫn đã bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này. Đặc biệt cảm ơn anh Phạm Tri Thức và những anh chị trong công ty, đã hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới và đã chỉ dẫn em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu. Cũng xin cảm ơn thầy cô trong khoa Công nghệ Phần mềm luôn nhiệt tình truyền đạt các kiến thức, kinh nghiệm nghề nghiệp, truyền cảm hứng để em được tiếp thu một cách dễ dàng nhất. Và đồng thời em cũng xin cảm ơn thầy cô và Khoa đã tạo điều kiện cho em hoàn thành việc thực tập và báo cáo thực tập của bản thân. Nguyễn Tài Nguyên Tp.Hồ Chí Minh, ngày 02 tháng 06 năm 2022 3 NHẬN XÉT CỦA KHOA .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... 4 MỤC LỤC Chương 1: Giới thiệu công ty thực tập .......................................................................................... 6 1.1. Giới thiệu công ty : .............................................................................................................. 6 1.2. Sản phẩm của công ty: ........................................................................................................ 7 Chương 2: Nội dung thực tập: ....................................................................................................... 9 2.1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty: ..................................................... 9 2.2. Thực hiện Project: ............................................................................................................... 9 2.2.1. Đọc hiểu và phân tích yêu cầu của khách hàng:........................................................... 9 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 về dự án: ........................................................................................................ 14 3.1. Giới thiệu về project:......................................................................................................... 14 3.2. Giao diện đã thiết kế: ........................................................................................................ 14 3.3. Kế hoạch thực hiện dự án: ................................................................................................. 29 TÀI LIỆU THAM KHẢO ........................................................................................................... 31 TỔNG KẾT .................................................................................................................................. 32 5 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 Hoàn Cầu ( GSOFT ) là công ty phần mềm hướng công nghệ được thành lập vào năm 2007. GSOFT cung cấp các giải pháp phần mềm quản lý cho các 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, các giải pháp kết nối cộng đồng trên nền tảng internet, các hệ thống website và các dịch vụ liên quan đến website, các hệ thống trong lĩnh vực thương mại điện tử và chính phủ điện tử. GSOFT có trụ sở chính tại 235 Lý Thường Kiệt , Phường 6, Quận Tân Bình, Thành phố Hồ Chí Minh và hai chi nhánh khác ở 177B Trần Văn Đang , Phường 11, Quận 3, Thành Phố Hồ Chí Minh và Số 9 Duy Tân, Phường Dịch Vọng Hậu, Quận Cầu Giấy, Hà Nội. Với 5 giá trị cốt lõi: 6 GSOFT mong muốn phát triển mạnh mẽ không chỉ trong phạm vi cả nước mà còn vươn ra khu vực và toàn cầu bằng những giải pháp và sản phẩm công nghệ trí tuệ, độc đáo giúp nâng cao chất lượng cuộc sống. GSOFT 1.2. Sản phẩm của công ty: Qua 19 năm hoạt động GSOFT đã cung cấp 6 sản phẩm/dịch vụ nổi tiếng như: - Hệ thống phần mềm quản trị đầu tư mua sắm và quản lý tài sản gAMSPro: Hệ thống phần mềm quản trị đầu tư mua sắm và quản lý tài sản tập trung gAMSPro mang đến giải pháp tổng thể giúp các tổ chức, doanh nghiệp giải quyết tất cả các vấn đề của các bộ phận liên quan tới quản lý tài sản và phân tích hiệu năng sử dụng, hiệu quả đầu tư tài sản cố định, công cụ dụng cụ, chỉ trên một hệ thống duy nhất. gAMSPro được 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 trong các lĩnh vực: Ngân hàng, Tài chính, Giáo dục, Bệnh viện, Vận tải và Khu công nghiệp - Phần mềm quản lý tín dụng gLOS: Quản lý các khoản vay tín dụng và quy trình quản lý hồ sơ tín dụng trên một hệ thống phần mềm. Phần mềm liên kết chặt chẽ giữa các trường dữ liệu và các thông tin cần vay vốn của người tiêu dùng nhằm đảm bảo giảm thiểu rủi ro cho các công tác thu hồi nợ sau này. - 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 mọi quy trình trong công tác quản lý, lưu trữ thông tin, dữ liệu về 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 quả 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 và 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 đủ các nghiệp vụ ngân hàng chuẩn cũng như cập nhật các nghiệp vụ khác nhau tại nhiều ngân hàng đang hoạt động ở Việt Nam để cung cấp cho việc thực hành tại các Trường Đại học, Cao đẳng đào tạo các ngành liên quan đến nghiệp vụ 7 ngân hàng, đảm bảo cho sinh viên tiếp cận được từ 80 đến 100% nghiệp vụ, công việc thực tế làm việc tại ngân hàng sau khi ra trường. - Cung cấp giải pháp phần mềm theo dự án: Phần mềm được lập trình viên thiết kế, xây dựng, với những tính năng 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 trong 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 là đơ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 bằng cách cử nhân sự CNTT , nhân sự lập trình, nhân sự phát triển phần mềm làm việc theo mô hình ONSITE tại đơn vị để cùng với đội ngũ dự án thực hiện phát triển hệ thống phần mềm. 8 Chương 2: Nội dung thực tập: 2.1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty: Thời gian: 1 ngày Nội dung: Người phụ trách sẽ giới thiệu về công ty, quá trình thành lập và phát triển, phổ biến nội dung quy chế làm việc, giới thiệu các sản phẩm chủ chốt của công ty. Sau đó, thực tập sinh được cung cấp các tài khoản riêng nội bộ được dùng để trao đổi thông tin và tham gia họp nội bộ hoặc với khách hàng. Ngoài ra chỉ khi dùng các tài khoản này thì mới có thể truy xuất vào các phần mềm nội bộ của công ty. Cùng lúc đó sẽ thực tập sinh sẽ được người phụ trách hướng dẫn về cách thức làm việc. Quan trọng hơn, người phụ trách sẽ cung cấp các tài liệu và hướng dẫn các công việc liên quan tới phần việc sẽ làm trong thời gian thực tập. Tiếp đến là liên quan đến đồng phục quy định, thời gian làm việc, phổ biến các quy định chung trong công ty và những đãi ngộ mà thực tập sinh có thể được hưởng trong quá trình thực tập. Người phụ trách cũng giới thiệu thực tập sinh với các đồng nghiệp sẽ làm việc trong thời gian thực tập. Kết quả : Có kiến thức cơ bản về công ty GSOFT, quá trình thành lập và phát triển, các sản phẩm của công ty. Hiểu biết thêm về môi trường làm việc, có cái nhìn cơ bản về quy trình phát triển sản phẩm thực tế. 2.2. Thực hiện Project: 2.2.1. Đọc hiểu và phân tích yêu cầu của khách hàng: Thời gian: 1 tuần Nội dung: Dựa trên thông tin yêu cầu của khách hàng, xác định chính xác mục tiêu của trang sẽ thiết kế: Khách hàng mong muốn website có những chức năng gì, yêu cầu về phong các thiết kế ra sao, đối tượng người dùng khách hàng muốn hướng đến là những ai,… Thực hiện: Thu thập thông tin từ phía khách hàng, tìm kiếm những thông tin liên quan đến khách hàng, đối tượng người dùng mà khách hàng của dự án muốn nhắm đến, phân tích 9 những yêu cầu của khách cung cấp, để đưa ra những đề xuất về 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 được nhu cầu xây dựng web của khách hàng, biết được cách research thông tin, đưa ra những phân tích về thói quen sử dụng, nhu cầu thực tế, … của 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: 1 tuần Nội dung: Dựa trên những thông tin nhu cầu của người dùng, kết quả đọc hiểu và phân tích yêu cầu của khách hàng, liệt kê toàn bộ những trang, chủ đề sẽ xuất hiện trang trang. Ngoài ra, xác định nội dung chi tiết của từng trang sau đó phác thảo sơ bộ 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 chính của hệ thống. - Thiết kế bản phác thảo cho hệ thống. Kết quả: - Hoàn thành được danh sách trang, nội dung hiển thị trên từng trang,… - Hoàn thành bản phác thảo của hệ thống. 2.2.3. Thiết kế giao diện: Thời gian: 4 tuần Nội dung: Từ những 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ủa 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 và thiết kế giao diện hoàn chỉnh phù hợp với nhiều loại thiết bị khác nhau (Desktop, Tablet, Mobile). Thực hiện: - Tìm kiếm font chữ, tông màu phù hợp. 10 - Thiết kế hoàn chỉnh hệ thống. - Thiết kế hệ thống đáp ứng với nhiều loại thiết bị khác nhau. Kết quả: - Hoàn thiện trang giao diện của trang web. 2.2.4. Trình bày ý tưởng, ghi nhận ý kiến đóng góp từ khách hàng: Thời gian: 1 tuần Nội dung: Trình bày ý tưởng về lý do chọn màu, phong cách thiết kế, trình bày giao diện hệ thống sẽ được lập trình. Trình bày những chức năng, giao diện mà hệ thống có được để đáp ứng được yêu cầu khách hàng, lý do thu hút được người dùng mà khách hàng muốn hướng đến. Ghi nhận những ý kiến đánh giá về thiết kế của hệ thống từ khách hàng, phản hồi lại đánh giá, trao đổi và đưa ra ý tưởng tốt nhất cho những phần khách hàng góp ý. Thực hiện: - Trình bày giao diện hệ thống cho khách hàng. - Ghi nhận và phản hồi những đóng góp của khách hàng về giao diện của hệ thống. Kết quả: - Nhận được 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, cùng nhau đưa ra ý tưởng tốt nhất cho giao diện của hệ thống. 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: Thời gian: 3 tuần Nội dung: Dựa trên những trao đổi, đóng góp ý kiến từ phía khách hàng. Chỉnh sửa giao diện của hệ thống. Làm việc với lập trình viên Front-end, trình bày ý tưởng, giải đáp thắc mắc về giao diện, nội dung hiển thị,… Viết tài liệu hướng dẫn sử dụng cho khách hàng. Thực hiện: 11 - Chỉnh sửa giao diện. - Trình bày ý tưởng cho lập trình viên. - Viết tài liệu hướng dẫn sử dụng cho khách hàng. Kết quả : - Hoàn thành giao diện của hệ thống bản cuối cùng. - Biết được phương pháp trao đổi, trình bày ý tưởng với lập trình viên Front-end. - Biết cách viết tài liệu hướng dẫn sử dụng dành cho khách hàng, những người chưa hiểu về hệ thống để sử dụng. 2.3. Lịch làm việc: Mức Tuần Công việc Người hướng dẫn độ Nhận xét của người hoàn hướng dẫn thành 1 Tìm hiểu về công ty. Anh Phạm Tri Hoàn Hoàn thành đầy đủ, Làm quen với cách làm Thức thành đúng deadline Đọc hiểu, phân tích yêu Anh Phạm Tri Hoàn Hoàn thành đầy đủ, cầu của khách hàng Thức thành đúng deadline việc của công ty. Học cách trao đổi công việc với nhau. 2 tốt 3 Tìm kiếm phong cách thiết Anh Huỳnh Ngọc Hoàn Hoàn thành đầy đủ, kế phù hợp với nhu cầu thành đúng deadline Nhân khách hàng, đối tượng 12 người dùng khách hàng muốn nhắm đến. Phác thảo ý tưởng cho hệ thống. Thiết kế giao điện của hệ 4,5,6,7 thống Anh Huỳnh Ngọc Hoàn Hoàn thành đầy đủ, Nhân thành đúng deadline tốt Trình bày ý tưởng với Anh Phạm Tri Hoàn Hoàn thành đầy đủ, khách hàng. Thức và anh thành đúng deadline Ghi nhận ý kiến của khách Huỳnh Ngọc Nhân 8 tốt hàng. Trao đổi với khách hàng đưa ra ý tưởng tốt nhất cho hệ thống 9 Chỉnh sửa giao diện dựa Anh Huỳnh Ngọc Hoàn Hoàn thành đầy đủ, trên đóng góp và trao đổi Nhân thành đúng deadline Trao đổi ý tưởng với lập Anh Phạm Tri Hoàn Hoàn thành đầy đủ, trình viên. Viết tài liệu Thức thành đúng deadline ý tưởng với khách hàng 10,11 hướng dẫn sử dụng. 13 Chương 3: Chi tiết về dự án: 3.1. Giới thiệu về project: Hệ thống Loyalty Web App for Fristi là một hệ thống website quay quà trúng thưởng. Khi người tiêu dùng mua những lốc sữa 6 chai hoặc hộp giấy của Fristi, người tiêu dùng sẽ nhận được mã may mắn bao gồm 8 chữ số. Người tiêu dùng sẽ tham gia đổi thưởng hoặc quay vòng quay may mắn bằng cách đăng nhập vào hệ thống bằng zalo hoặc số điện thoại và nhập mã số may mắn. Khi nhập mã số may mắn người tiêu dùng có thể nhận 1 điểm hoặc 1 vòng quay may mắn. Đối với trường hợp nhận được điểm, người tiêu dùng sẽ tích đủ điểm tương ứng với giá trị quà tặng trong “Kho báu” và thực hiện đổi quà. Khi trúng vòng quay, người dùng sẽ tham gia vào vòng quay may mắn và trúng 1 trong 4 phần quà hấp dẫn. Cuối cùng, người dùng có thể nhận quà và cập nhật địa chỉ tại trang “Tra cứu lịch sử” mà hệ thống sẽ cập nhật trạng thái đơn hàng sớm nhất có thể. Về phía quản trị, hệ thống cung cấp cho người dùng các chức năng cập nhật số lượng quà tặng, tỷ lệ điểm vòng quay, xem và cập nhật trạng thái đơn hàng. 3.2. Giao diện đã thiết kế: 14 - Màn hình trang chủ: - Màn hình kết quả nhập mã: 15 16 - Màn hình đăng nhập: - Màn hình nhập mật khẩu: 17 - Màn hình vòng quay may mắn: - Màn hình kết quả 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 quà tặng: 20