PHẦN A : GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP Công ty cổ phần Minions Service (Always be connecting) đồng thành lập bởi anh Đỗ Duy Khoa (CEO) và anh Lê Duy Hoàng (CTO) vào năm 2018, trong bối cảnh nền công nghệ thông tin phát triển mạnh mẽ trong nước cũng như quốc tế. Công ty cung cấp các công nghệ và giải pháp tân tiến, hiện đại nhất hiện nay nhằm đáp ứng nhu cầu ngày càng lớn của thị trường công nghệ trong nước.
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN - BÁO CÁO THỰC TẬP ĐỀ TÀI: PHÁT TRIỂN ỨNG DỤNG QUẢN LÝ MĨN ĂN DÀNH CHO NHÂN VIÊN VĂN PHỊNG (FRONT-END) Giảng viên hướng dẫn : ThS Nguyễn Thị Thanh Tâm Đơn vị thực tập : Minions Service MỤC LỤC PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP Error! Bookmark not defined MỤC LỤC LỜI CẢM ƠN PHẦN A : GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP Tầm nhìn Sứ mệnh Giá trị cốt lõi Dịch vụ Minions Service PHẦN B : NỘI DUNG THỰC TẬP CHƯƠNG I: GIỚI THIỆU CHUNG 1.1 Đề tài thực tập 1.2 Nội dung công việc 1.3 Kết cần đạt CHƯƠNG II: CƠ SỞ LÝ THUYẾT 2.1 Cơ sở lý thuyết React JS 2.2 Ưu điểm nhược điểm React JS 12 2.3 Cài đặt ứng dụng React JS 12 2.4 Tiểu kết chương 14 CHƯƠNG III: NỘI DUNG THỰC TẬP 15 3.1 Tổng quan đề tài 15 3.2 Phương pháp lập trình 16 3.3 Phân tích yêu cầu 17 3.4 Hình ảnh sản phẩm 18 3.5 Tiểu kết chương 21 CHƯƠNG IV: KẾT LUẬN 22 4.1 Kết đạt 22 4.2 Hướng phát triển tương lai 22 4.3 Kinh nghiệm rút sau thời gian thực tập 22 LỜI CẢM ƠN Thực tập tốt nghiệp yêu cầu bắt buộc sinh viên Học viện Cơng nghệ Bưu Viễn thơng trước kết thúc thời gian học Học viện Một mặt yêu cầu, mặt khác giai đoạn ý nghĩa, giúp sinh viên tập làm quen với cơng việc thực tế Trong q trình thực tập Minions Service – Công ty cổ phần Minions Service, em tham gia thực dự án thật công ty, hội tốt để em có điều kiện làm quen với cơng việc thực tế, trải nghiệm khó khăn thử thách dự án thật Trong suốt trình thực tập đây, em nhận nhiều quan tâm, giúp đỡ từ anh chị Minions Service Với lòng biết ơn sâu sắc nhất, em xin gửi lời cảm ơn tới anh Đỗ Duy Khoa (CEO), thành viên Minions Service ln tạo điều kiện để em hồn thành cơng việc cách tốt Để hồn thành tập này, em xin gửi lời cảm ơn sâu sắc đến ThS Nguyễn Thị Thanh tận tình hướng dẫn chúng em từ đầu suốt q trình thực tập Bên cạnh em xin chân thành cảm ơn thầy, cô khoa Đa phương tiện tạo điều kiện truyền đạt cho em bạn kiến thức, kỹ cần có để hồn thành tốt tập Tuy nhiên, trình thực đề tài, kiến thức chuyên ngành còn hạn chế nên em còn nhiều thiếu sót Rất mong nhận quan tâm, góp ý quý thầy cô để đề tài em hoàn thiện đầy đủ Em xin chân thành cảm ơn! PHẦN A : GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP Công ty cổ phần Minions Service (Always be connecting) đồng thành lập anh Đỗ Duy Khoa (CEO) anh Lê Duy Hoàng (CTO) vào năm 2018, bối cảnh công nghệ thông tin phát triển mạnh mẽ nước quốc tế Công ty cung cấp công nghệ giải pháp tân tiến, đại nhằm đáp ứng nhu cầu ngày lớn thị trường công nghệ nước Hình 1.0 Logo cơng ty Minions Service Tầm nhìn Khơng dừng lại công ty cung cấp công nghệ giải pháp hàng đầu, giải nhu cầu ngày phát triển thị trường cơng nghệ thơng tin nước, Minions Service cịn mong muốn phát triển với thị trường quốc tế Hàn Quốc, Nhật Bản, Singapore, Philippines Hình 1.1 Tập thể cán nhân viên công ty Minions Service Sứ mệnh Đối với khách hàng: Minions Service mong muốn kết nối lúc nơi với khách hàng trở thành người bạn tri kỉ để được: Thấu hiểu Tin tưởng Tôn trọng Chia sẻ Cung cấp giải pháp công nghệ thông minh, đại, tân tiến Phương châm phục vụ khách hàng “Always be connecting” Đối với cổ đơng nhân viên: Đem đến môi trường làm việc trẻ trung, động, gia đình “cơng sở” mà đó, thành viên có gắn bó sẻ chia, có hội học hỏi để nâng cao nghiệp vụ hoàn thiện thân Đối với xã hội: Tạo giải pháp, sản phẩm công nghệ sáng tạo, đại đóng góp vào phát triển mạnh mẽ đất nước cách mạng công nghệ 4.0 Giá trị cốt lõi - Giá trị cốt lõi Thương hiệu truyền tải toàn vẹn đống điểm chạm xuyên suốt Hành trình trải nghiệm khách hàng - Tính sáng tạo, trung thực, dám đổi tạo nên khác biệt, giúp đáp ứng yêu cầu ngày cao khách hàng - Chính sách chất lượng cao nghiêm ngặt yếu tố làm hài lòng khách hàng - Hiểu phục vụ khách hàng trái tim, tạo giá trị thông minh sáng tạo cho khách hàng - Lắng nghe hiểu nhu cầu khách hàng lý khiến liên tục đổi, có thêm sáng tạo cung cấp sản phẩm chất lượng cao, đáp ứng nhu cầu đặc biệt khách hàng - Thành viên công ty không đồng nghiệp mà cịn bạn bè gia đình để chia sẻ phát triển Dịch vụ Minions Service Dịch vụ giải pháp công nghệ: Cung cấp giải pháp công nghệ tiên tiến đại lĩnh vực công nghệ thông tin Dịch vụ Tư vấn: Thiết kế hành trình trải nghiệm thương hiệu khách hàng điểm chạm từ khách hàng tiềm đến khách hàng trung thành Dịch vụ Phát triển kinh doanh: Cung cấp nhân lực, quy trình cơng cụ Tele sale để kết nối khách hàng tiềm nhằm thúc đẩy tăng trưởng thương hiệu Dịch vụ Khách hàng: Phân tích, khai thác liệu để triển khai chương trình Chăm sóc khác hàng, tăng cường gắn kết khách hàng thương hiệu PHẦN B : NỘI DUNG THỰC TẬP CHƯƠNG I: GIỚI THIỆU CHUNG 1.1 Đề tài thực tập Đề tài: Phát triển ứng dụng quản lý ăn dành cho nhân viên văn phòng 1.2 Nội dung công việc Công việc 1: Khảo sát sơ môi trường làm việc nơi thực tập Cơng việc 2: Tìm hiểu kiến thức lập trình ứng dụng tảng web Công việc 3: Nhận công việc, trao đổi, tìm hiểu yêu cầu khách hàng Cơng việc 4: Thiết kế, hồn thiện sản phẩm giao TT Nội dung thực tập Thời gian Làm quen với mơi trường làm việc, tìm hiểu cơng ty: cấu tổ chức, chức năng, văn hóa công ty, nhiệm vụ Từ ngày 19/7 đến ngày 21/7 Tìm hiểu kĩ thuật điều cần lưu ý lập trình website Từ ngày 22/7 đến ngày 19/7 Tìm hiểu kỹ thuật, công nghệ phổ biến nay, hướng áp dụng lựa chọn công nghệ phù hợp Bắt đầu nhận công việc từ khách hàng Từ ngày 20/7 đến ngày 28/7 Tiến hành phân tích thiết kế dựa yêu cầu khách hàng Từ ngày 29/7 đến ngày 15/8 Triển khai xây dựng hệ thống Từ ngày 16/8 đến ngày 22/8 Hoàn thiện báo cáo Từ ngày 23/8 đến ngày 31/8 1.3 Kết cần đạt - Hiểu tham gia vào quy trình sản xuất ứng dụng thực tế - Hiểu thêm cách làm việc nhóm mơi trường cơng ty - Hiểu cách quản lý sản phẩm - Hồn thành tốt trách nhiệm giao - Có trao đổi nội dung công việc với nhóm thực - Thích nghi với mơi trường làm việc chuyên nghiệp - Rút học kinh nghiệp sau thời gian thực tập đơn vị CHƯƠNG II: CƠ SỞ LÝ THUYẾT 2.1 Cơ sở lý thuyết React JS 1.1.1 React JS gì? React JS thư viện JavaScript, hiệu linh hoạt cho việc xây dựng giao diện người dùng React cho phép tạo giao diện (UI) phức tạp từ đoạn code nhỏ độc lập Những đoạn code gọi “components” React JS phát triển Facebook để hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại React JS lên năm gần với xu hướng Single Page Application Trong framework khác cố gắng hướng đến mơ hình MVC hồn thiện React JS bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác Hình 2.1 Hình ảnh logo React 1.1.2 Các khái niệm React JS Có kiểu thành phần React JS là: JSX, Component, Props State - JSX JSX cú pháp mở rộng cho JavaScript, kết hợp JavaScript XML Nó chuyển đổi cú pháp dạng gần XML thành JavaScript, giúp code React JS cú pháp XML thay phải dùng JavaScript - Component Component nơi render mã html thuần, điều quan trọng khác cho phép ta chia nhỏ đoạn code UI thành phần độc lập với nhau, với mục đích để tiện cho việc quản lý tái sử dụng Vậy làm cách để gọi đến Component? Câu trả lời React tên Component dùng để làm tên thẻ cách sử dụng tương tự với thẻ tag html, ví dụ: Để khai báo component Hình 2.2 Khai báo component Để sử dụng component Hình 2.3 Cách sử dụng component 10 - Props Props viết tắt Properties, ta hiểu thuộc tính Component Props hiểu thành phần miêu tả tính chất, đặc trưng đối tượng, ví dụ: Hình 2.4 Cách sử dụng props - State Trong React, State dùng để biểu diễn trạng thái Component Tức giá trị State thay đổi được, trái ngược hồn tồn với Props giá trị bất biến Mỗi State có thay đổi, React render lại thay đổi Ví dụ khai báo State: Hình 2.5 Khai báo state React 11 2.2 Ưu điểm nhược điểm React JS Ưu điểm: - Dễ dàng sử dụng, dễ dàng chia sử dụng lại component - Hỗ trợ cộng đồng lớn, có hàng trăm ngàn thư viện hỗ trợ xây dựng module chức - Rất nhiều tiện ích nguồn mở, sử dụng thư viện thứ để xây dựng giao diện (UI) Ant Design, Material UI đẹp, tiện lợi, nhanh chóng - React JS có Dom ảo, giúp cải thiện hiệu suất làm việc nhiều, có tính tốn cần thay đổi cần cập nhật lên Dom React JS tính tốn trước việc lại thực chúng lên Dom, làm giúp cho React JS tránh thao tác cần có Dom mà khơng cần tốn thêm chi phí - Có nhiều cơng cụ hỗ trợ phát triển Nhược điểm: - React JS phục vụ cho tầng View - Khó tiếp cận cho người học Web 2.3 Cài đặt ứng dụng React JS Để cài đặt sử dụng ứng dụng React JS, yêu cầu phải cài đặt Node JS Vậy Node JS gì? Node JS tảng xây dựng “V8 Javascript engine” viết C++ Javascript Nền tảng phát triển Ryan Lienhart Dahl vào năm 2009 Node JS đời developer đời đầu JavaScript mở rộng từ thứ bạn chạy trình duyệt thành thứ bạn chạy máy dạng ứng dụng độc lập Truy cập trang chủ Node JS tải cài đặt https://Node JS.org/en/ 12 Cài đặt React JS Mở command line lên chạy lệnh sau: npm install -g create-react-app create-react-app manager-food-app Trong manager-food-app tên ứng dụng Sau lệnh chạy hoàn tất, cấu trúc thư mục ứng dụng sau: manager-food-app ├── README.md ├── node_modules ├── package.json ├── gitignore ├── public │ └── favicon.ico │ └── index.html │ └── manifest.json └── src └── App.css └── App.js └── App.test.js └── index.css └── index.js └── logo.svg └── registerServiceWorker.js Chạy ứng dụng: Để chạy ứng dụng, mở thư mục manager-food-app với command line chạy npm start cd manager-food-app npm start 13 2.4 Tiểu kết chương Ở chương trình bày React JS gì? Đặc điểm, thành phần React JS ưu, nhược điểm Tiến hành cài đặt khởi chạy ứng dụng React JS Ở chương trình bày sở lý thuyết đề tài 14 CHƯƠNG III: NỘI DUNG THỰC TẬP 3.1 Tổng quan đề tài - Tên đề tài: Phát triển ứng dụng quản lý ăn dành cho nhân viên văn phòng - Mục tiêu: Xây dựng ứng dụng giúp người dùng dễ dàng quản lý bữa ăn trưa dành cho cán nhân viên công ty Người dùng truy cập vào ứng dụng thực tác vụ sau: - Đối với admin: + Tạo/xóa user + Xem thống kê số tiền cho bữa ăn + Cấp phép cho user chỉnh sửa, thêm, bớt suất ăn sau quy định + Theo dõi lịch sử chỉnh sửa, cập nhật thông tin user + Reset mật user - Đối với đầu bếp: + Lập lịch cho bữa ăn hàng ngày + Cập nhật thông tin ăn ngày + Quản lý số lượng người ăn hàng ngày - Đối với trưởng phòng ban: + Đăng ký/hủy/thêm/bớt số người phòng ban + Đánh dấu số người ăn trước 9h sáng hàng ngày - Chung: + Hiển thị thực đơn ngày + Xem thơng tin chi tiết ăn + Hiển thị tổng số suất ăn báo ngày + Hiển thị thông tin suất ăn 10 ngày gần + Thống kê bữa ăn theo tuần, tháng - Phạm vi đề tài: Xây dựng ứng dụng tảng React JS 15 3.2 Phương pháp lập trình Cơ chế “Client Side Rendering” Client Side Rendering tức việc render HTML, CSS thực client (Tức JavaScript trình duyệt) Hình 3.3 Cơ chế Client side rendering Đặc điểm: - Xử lý logic đơn giản render HTML, CSS nằm Client - Logic phức tạp liên quan đến bảo mật database nằm server - Chuyển trang client Ưu điểm: - Logic chuyển bớt cho client giúp server giảm tải - Page load lần Các lần chuyển trang sau không cần tải lại trang làm cho trang web mượt mà, tốc độ tải trang nhanh, tốt mặt UI/UX - Băng thơng giảm tải server cần gửi liệu dạng JSON Nhược điểm Client Side Rendering: - Chạy lần đầu chậm client phải tải lượng liệu lớn về, sau chạy mã javascript để tạo DOM gọi API, render HTML - Không thân thiện SEO 16 3.3 Phân tích yêu cầu Đối với Admin: - Quản lý tài khoản người dùng: admin thêm, sửa, xóa người dùng truy cập vào website, ngồi admin cấp quyền cho tài khoản người dùng khác (Người dùng truy cập vào trang quản trị với tài khoản admin; menu, chọn mục “Quản lý tài khoản”) - Quản lý phòng ban: xem danh sách phịng ban cơng ty (Tại menu, người dùng chọn mục “Bảng điều khiển”, chọn tiếp “Quản lý phòng ban”, hình hiển thị danh sách phòng ban tại) - Thống kê bữa ăn: xem danh sách bữa ăn phòng ban, cá nhân Tại có biểu đồ tần suất để thống kê bữa ăn theo tuần, tháng (Tại menu, người dùng chọn mục “Bảng điều khiển”, chọn tiếp “Quản lý bữa ăn”, hình hiển thị danh sách bữa ăn gần với biểu đồ tần suất) Đối với đầu bếp: - Tạo ăn: Tạo ăn (Người dùng truy cập vào trang quản trị với tài khoản dành cho đầu bếp Người dùng chọn mục “Thực đơn”, chọn tiếp “Tạo ăn”, người dùng nhập thơng tin ăn bao gồm: tên ăn, giá trị dinh dưỡng, đơn giá, số lượng người ăn, thành phần ăn) - Xem danh sách ăn: Xem danh sách ăn tạo, từ danh sách người dùng lựa chọn ăn phục vụ ngày, tránh việc ngày phải tạo cho ngày hơm (Người dùng chọn mục “Thực đơn”, chọn tiếp “Danh sách ăn”, hình hiển thị danh sách tất ăn tạo dạng checklist Người dùng lựa chọn ăn phục vụ bấm chọn “Xác nhận” để nhân viên cho thể xem được) Đối với trưởng phòng ban: - Đăng ký/hủy/thêm/bớt số người phòng ban: Trưởng phòng ban phải đăng ký số người tham gia trước 9h sáng ngày làm việc để đầu bếp điều chỉnh số 17 lượng ăn cho phù hợp với thực tế sử dụng, tránh thiếu hụt lãng phí khơng cần thiết (Người dùng truy cập vào trang quản trị với tài khoản cho trưởng phòng ban Người dùng chọn mục “Phòng ban”, hình hiển thị danh sách nhân viên thuộc phòng ban người dùng quản lý; người dùng chọn nhân viên tham gia bấm “Xác nhận”) Màn hình chung: - Xem danh sách ăn ngày: Người dùng khơng cần đăng nhập xem danh sách ăn ngày - Chi tiết ăn: Tại hình danh sách, người dùng bấm chọn ăn, hình hiển thị thơng tin chi tiết ăn - Xem danh sách bữa ăn gần nhất: Người dùng xem danh sách bữa ăn 10 ngày gần - Xem thống kê bữa ăn theo tuần, tháng đơn vị 3.4 Hình ảnh sản phẩm Hình 3.4 Màn hình danh sách ăn tạo 18 Hình 3.5 Màn hình tạo ăn Hình 3.6 Màn hình quản lý nhân viên 19 Hình 3.7 Màn hình quản lý đầu bếp Hình 3.8 Màn hình cập nhật thơng tin 20 Hình 3.9 Màn hình danh sách ăn 3.5 Tiểu kết chương Chương trình bày phân tích, thiết kế xây dựng ứng dụng quản lý ăn dành cho nhân viên văn phòng Mơ tả ứng dụng, đưa thiết kế tương tác luồng hoạt động ứng dụng với mơ hình sở liệu sử dụng 21 CHƯƠNG IV: KẾT LUẬN 4.1 Kết đạt - Hiểu thành phần React JS - Xây dựng ứng dụng sử dụng kiến thức tìm hiểu - Hiểu môi trường làm việc thực tế, chuyên nghiệp - Biết cách làm việc nhóm cách hiệu thực tế - Hiểu quy trình phát triển dự án, quy trình trao đổi làm việc với khách hàng - Hiểu cách sử dụng quản lý sản phẩm thông qua git 4.2 Hướng phát triển tương lai - Thiết kế giao diện đầy đủ với bố cục rõ ràng chuẩn - Bổ sung hiệu ứng, hoạt ảnh, hình động để nâng cao trải nghiệm người dùng - Bổ sung tính chat giúp trao đổi phận hiệu - Bổ sung chi tiết nội dung cho chức ứng dụng - Hoàn thiện chức còn chưa hoàn thiện 4.3 Kinh nghiệm rút sau thời gian thực tập - Sự tự tin chủ động học hỏi - Nâng cao số kĩ mềm như: làm việc nhóm, trình bày, thuyết trình - Trải nghiệm mơi trường làm việc thực tế động nghiêm túc hiệu - Là sinh viên chuyên ngành phát triển Đa phương tiện nên cần kết hợp kĩ học để phát triển ứng dụng đẹp mắt, thân thiện có ích với người dùng 22 ... khởi chạy ứng dụng React JS Ở chương trình bày sở lý thuyết đề tài 14 CHƯƠNG III: NỘI DUNG THỰC TẬP 3.1 Tổng quan đề tài - Tên đề tài: Phát triển ứng dụng quản lý ăn dành cho nhân viên văn phòng... phân tích, thiết kế xây dựng ứng dụng quản lý ăn dành cho nhân viên văn phòng Mô tả ứng dụng, đưa thiết kế tương tác luồng hoạt động ứng dụng với mơ hình sở liệu sử dụng 21 CHƯƠNG IV: KẾT LUẬN... khác hàng, tăng cường gắn kết khách hàng thương hiệu PHẦN B : NỘI DUNG THỰC TẬP CHƯƠNG I: GIỚI THIỆU CHUNG 1.1 Đề tài thực tập Đề tài: Phát triển ứng dụng quản lý ăn dành cho nhân viên văn phòng