Đồ án tốt nghiệp khoa đa phương tiện, học viện bưu chính viễn thông (5)

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 Người hướng dẫn : Lê Duy Hoàng Sinh viên thực : Hà Viết Tiềm Mã sinh viên : B15DCPT228 Lớp : D15PTDPT Hà Nội – 2019 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập Tự Hanh phúc KHOA ĐA PHƯƠNG TIỆN ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP (Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021) Họ tên sinh viên: Hà Viết Tiềm Lớp: D15PTDPT NỘI DUNG ĐÁNH GIÁ Chấp hành kỉ luật: (Tốt, Trung bình, Yếu) Ý thức học tập: (Tốt, Trung bình, Yếu) Quan hệ, giao tiếp: (Tốt, Trung bình, Yếu) Điểm (Thang điểm 10) Các ý kiến khác (nếu có: Ngày tháng năm 2021 Giáo viên hướng dẫn thực tập (Ký ghi rõ họ tên) MỤC LỤC PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP .2 MỤC LỤC .4 LỜI CẢM ƠN .5 PHẦN A : GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP Tầm nhìn Sứ mệnh .7 Giá trị cốt lõi .8 Dịch vụ Minions Service PHẦN B : NỘI DUNG THỰC TẬP 10 CHƯƠNG I: GIỚI THIỆU CHUNG .10 1.1 Đề tài thực tập 10 1.2 Nội dung công việc 10 1.3 Kết cần đạt 11 CHƯƠNG II: CƠ SỞ LÝ THUYẾT 12 2.1 Cơ sở lý thuyết React JS .12 2.2 Ưu điểm nhược điểm React JS 15 2.3 Cài đặt ứng dụng React JS 15 2.4 Tiểu kết chương .17 CHƯƠNG III: NỘI DUNG THỰC TẬP 18 3.1 Tổng quan đề tài 18 3.2 Phương pháp lập trình .19 3.3 Phân tích yêu cầu 20 3.4 Hình ảnh sản phẩm 21 3.5 Tiểu kết chương .24 CHƯƠNG IV: KẾT LUẬN .25 4.1 Kết đạt .25 4.2 Hướng phát triển tương lai 25 4.3 Kinh nghiệm rút sau thời gian thực tập 25 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 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ó để hoà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 chúng tơi 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 Hoà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ị 10 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 11 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 12 - 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 hoàn toà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 13 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 toán trước việc còn 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/ Cài đặt React JS 14 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 2.4 Tiểu kết chương 15 Ở 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 16 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 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) 17 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 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 18 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ố 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”) 19 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 20 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 21 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 22 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 23 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 24 ...1 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập Tự Hanh phúc KHOA ĐA PHƯƠNG TIỆN ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP (Thời gian thực... gian thực tập 25 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 ý... DUNG ĐÁNH GIÁ Chấp hành kỉ luật: (Tốt, Trung bình, Yếu) Ý thức học tập: (Tốt, Trung bình, Yếu) Quan hệ, giao tiếp: (Tốt, Trung bình, Yếu) Điểm (Thang điểm 10) Các ý kiến khác (nếu có: Ngày tháng