BÁO cáo THỰC tập PHÁT TRIỂN hệ THỐNG QUẢN lý

1 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 PHÁT TRIỂN HỆ THỐNG QUẢN LÝ CƠNG TY THỰC TẬP Cơng ty TNHH Giải pháp CNTT Minh Phú Người phụ trách: Nguyễn Đình Phú Thực tập sinh: Hồng Đình Quang Mã số sinh viên: 18520342 Lớp: PMCL2018.1 TP Hồ Chí Minh, ngày 28 tháng năm 2021 Nguyễn Đình Phú Hồng Đình Quang LỜI MỞ ĐẦU Ngày nay, nhu cầu phát triển ngành bán hàng chuỗi quản lý bán hàng phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ thời đại 4.0, website quản lý nhân tố kích thích phát triển công nghệ thông tin giới Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm dự án website môi trường chuyên nghiệp, em có dự định thực tập kỳ Vì vậy, em định chọn Cơng ty TNHH Giải pháp Công nghệ Minh Phú - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Nguyễn Đình Phú Hồng Đình Quang LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Công nghệ Giải pháp Minh Phú tạo điều kiện cho em có hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để tiếp tục phát triển sản phẩm công ty Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,cơng sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn chị Lưu Ngọc Bảo Nguyên, training quy định văn hóa cơng ty, hướng dẫn, giúp đỡ cho chúng 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 mới; cảm ơn anh Nguyễn Đình Phú, training React JS kiến thức quan trọng testing Monkey test Unit Test để đảm bảo chất lượng sản phẩm, hỗ trợ chúng em nhiều vấn đề kỹ thuật Coding Framework trình phát triển dự án sản phẩm, dẫn chúng em cách làm báo cáo, lên kế hoạch cho chúng em thời gian qua Cũng xin cảm ơn thầy cô khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Trương Nguyễn Tuấn Nam TP Hồ Chí Minh, ngày 28 tháng năm 2021 Nguyễn Đình Phú Hồng Đình Quang NHẬN XÉT CỦA KHOA Nguyễn Đình Phú Hồng Đình Quang MỤC LỤC 1.Giới thiêu chức quản lý nhân viên .12 1.1.Màn hình 12 1.2.Màn hình thêm nhân viên 13 1.3.Màn hình nhập file .14 1.4.Màn hình xem thơng tin nhân viên .14 1.5.Chức xóa thơng tin nhân viên 15 1.6.Màn hình sửa thơng tin nhân viên 17 CHƯƠNG 5: TỔNG KẾT 18 1.Kiến thức .18 2.Kỹ .18 3.Bài học kinh nghiệm 18 TÀI LIỆU THAM KHẢO 19 TỔNG KẾT 20 CHƯƠNG 1: GIỚI THIÊU TỔNG QUAN VỀ CÔNG TY THỰC TẬP Giới thiệu công ty TNHH Giải pháp Công nghệ Minh Phú - Tên công ty: Công ty TNHH Giải pháp Công nghệ Minh Phú - Tên viết tắt: Minh Phú Solutions - Năm thành lập: 2019 - Quy mô công ty: 20 nhân viên - Trụ sở công ty: 14Q1 đường số 38, Phường Thảo Điền, Quận 2, TP Hồ Chí Minh Nguyễn Đình Phú Hồng Đình Quang - Lời giới thiệu ngắn: Công ty TNHH Công nghệ Giải pháp Minh Phú thành lập ngày 12/9/2019, công ty start-up công nghệ phần mềm, người đại diện pháp luật anh Nguyễn Đình Phú (CEO) Ban đầu, Công ty lấy tên Công ty TNHH Phần mềm Minh Phú, sau đổi thành Cơng ty TNHH Công nghệ Giải pháp Minh Phú giữ tên ngày Sản phẩm công ty - Từ thành lập vào cuối năm 2019 đến tháng 02/2021 (03 năm) công ty tập trung vàp phát triển hoàn thiện phần mềm - Từ tháng 03/2021: xây dựng phát triển số tính cho phần mềm theo yêu cầu khách hàng; đẩy mạnh tìm kiếm khách hàng Giới thiệu cơng việc 3.1 Vị trí Sinh viên thực tập vị trí developer 3.2 Cơng việc - Tìm hiểu quy trình làm việc, làm task, nghiệp vụ cơng ty Tìm hiểu monkey test unit test Tìm hiểu React JS Ant Design 3.3 Yêu cầu - Nắm rõ quy trình làm việc tuân thủ Hiểu rõ kiến thực Monkey Test Unit Test Giao tiếp tốt teamwork tốt với thành viên công ty 3.4 Nhiệm vụ sinh viên thực tập - Hoàn thành đầy đủ task giao Nguyễn Đình Phú Hồng Đình Quang - Thực quy trình phát triền phần mêm công ty Đi làm giờ, số ngày tuần thỏa thn với cơng ty CHƯƠNG 2: Q TRÌNH THỰC TẬP Kế hoạch thực tập KẾ HOẠCH THỰC TẬP TẠI MINH PHÚ SOLUTIONS 17/5/2021 – 30/6/2021 TUẦN CÔNG VIỆC MỤC ĐÍCH Làm quen, tìm hiểu cơng ty Học làm quen với cách làm việc công ty Tiến hành đọc hiểu Monkey test Unit test hướng dẫn mentor Nắm testing cần làm thao tác Hiểu luồng hoạt động phần mềm phát triển Làm Monkey Test Tìm bug/feature cases thêm vào evidence để dev fix Cách thực bước test Làm Unit Test Học cách testing file Unit Test kết Nguyễn Đình Phú Hồng Đình Quang hợp với Monkey Test để test hiệu 4-6 7-… Đọc hiểu coding sample React Js theo video Vận dụng công nghệ mà công ty sử dụng để phát triển Đọc hiểu Ant Design Sử dụng thục thiết kế Ant đồng theo dự án công ty Làm quen với framework, mơ hình sản phẩm cơng ty Áp dụng kỹ từ coding sample vào framework, workflow công ty Bảng 2.1: Kế hoạch thực tập Thời gian biểu làm việc • Thời gian làm việc: - • Sáng từ 8h00 tới 12h00 Chiều từ 13h00 tới 17h00 Các buổi làm việc tuần: Thứ Thứ Thứ Thứ Sáng x x x Chiều x x x Thứ Thứ Bảng 2.2: Thời gian thực tập tuần Nguyễn Đình Phú Hồng Đình Quang CHƯƠNG 3: CƠNG NGHỆ VÀ KIẾN THỨC HỌC ĐƯỢC React.js 1.1 Giới thiệu React.js thư viện Javascript 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 bật với đơn giản dễ dàng phối hợp với thư viện Javascript khác React.js cho phép nhúng code html code javascript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS Tích hợp javascript HTML vào JSX làm cho component dễ hiểu React thư viện UI 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 1.2 Các tính React.js 1.2.1 Virtual DOM Nguyễn Đình Phú Hồng Đình Quang 10 Hình 3.1: Cấu trúc DOM Tree DOM tên gọi tắt Document Object Model (Mơ hình Đối tượng Tài liệu), chuẩn định nghĩa W3C dùng để truy xuất thao tác code HTML hay XML ngơn ngữ lập trình thông dịch (scripting language) Javascript DOM giúp thao tác với liệu theo mơ hình hướng đối tượng phần tử DOM có cấu trúc định nghĩa thành đối tượng, phương thức, thuộc tính để truy xuất dễ dàng Chúng coi node biểu diễn dạng DOM Tree Trong HTML đoạn code, DOM thể trừu tượng đoạn code nhớ Virtual DOM object Javascript, object chứa đầy đủ thông tin cần thiết để tạo DOM, liệu thay đổi tính tốn thay đổi object tree thật, điều giúp tối ưu hoá việc re-render DOM Tree thật React sử dụng chế one-way data binding – luồng liệu chiều Dữ liệu truyền từ parent đến child thông qua props Luồng liệu đơn giản giúp dễ dàng kiểm soát sửa lỗi Với đặc điểm trên, React dùng để xây dựng ứng dụng lớn mà liệu chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi hầu hết kèm theo thay đổi giao diện 1.2.2 JSX JSX dạng ngôn ngữ cho phép viết mã HTML Javascript Đặc điểm: Faster: Nhanh JSX thực tối ưu hóa biên dịch sang mã Javacsript Các mã cho thời gian thực nhanh nhiều so với mã tương đương viết trực tiếp Javascript Nguyễn Đình Phú Hồng Đình Quang 11 1.2.3 Props State Props: giúp component tương tác với nhau, component nhận input gọi props, trả thuộc tính mơ tả component render Prop bất biến State: thể trạng thái ứng dụng, state thay đồi component đồng thời render lại để cập nhật UI Ant Design 2.1 Giới thiệu Ant tập hợp components React xây dựng theo chuẩn thiết kế Ant UED Team Tương tự chuẩn Material Design, Ant cung cấp hầu hết component thông dụng ứng dụng web đại, Layout, Button, Icon, DatePicket, v.v… Bên cạnh Ant có component riêng thú vị, LocaleProvider cho phép bạn thay đổi ngơn ngữ tồn ứng dụng Có thể coi Ant Design cho React tập hợp hầu hết thư viện React Nó đáp ứng hầu hết yêu cầu project bạn mà ban cài thêm thư viện Dưới danh sách component mà cung cấp: • General: Button, Icon • Layout: Grid, Layout • Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps • Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload • Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table • Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton • Other: Anchor, BackTop, Divider, LocaleProvider Nguyễn Đình Phú Hồng Đình Quang 12 CHƯƠNG 4: CHI TIẾT VỀ QUÁ TRÌNH THỰC TẬP Theo quy chế thực tập sinh, trích dẫn: Điều 5: Bảo mật thông tin Phần a.Thông tin khách hàng: … Bảo mật thông tin khách hàng ( họ tên, địa chỉ, điện thoại, sản phẩm, doanh thu, liệu, …) Phần b.Thông tin công ty: … Đảm bảo an tồn thơng tin sản phẩm, dự án giai đoạn kế hoạch, phát triển sản phẩm chưa phép cơng bố Kèm theo q trình thực tập chưa lâu nên phần mô tả giới hạn trình thực tập Giới thiêu chức quản lý nhân viên 1.1 Màn hình Màn hình quản lý nhân viên giới thiệu chức quản lý nhân viên Bao gồm tính Thêm, Sửa, Xóa, Xem, Tìm kiếm, Nhập file, Tải liệu (CSV) Hơn ngồi trường mặc định có sẵn thơng tin tìm kiếm mục cịn lựa chọn thêm nhiều trường hiển thị tìm kiếm khác Nguyễn Đình Phú Hồng Đình Quang 13 Bảng 4.1: Màn hình quản lý nhân viên 1.2 Màn hình thêm nhân viên Khi bấm vào button thêm lên “Modal” thêm nhân viên Nguyễn Đình Phú Hồng Đình Quang 14 Bảng 4.2: Màn hình thêm nhân viên 1.3 Màn hình nhập file Màn hình (Modal) xuất sau bấm vào button Nhập file Ở hình load liệu nhân viên file excel có sẵn sau tải từ button “Tải file mẫu” Bảng 4.3: Màn hình nhập file nhân viên 1.4 Màn hình xem thơng tin nhân viên Màn hình xem thông tin nhân viên xuất sau tick vào ô nhân viên hiển thị ô hiển thị data bấm vào button “Xem” Nguyễn Đình Phú Hồng Đình Quang 15 Bảng 4.4: Màn hình xem thơng tin nhân viên 1.5 Chức xóa thơng tin nhân viên Thơng báo (modal) xóa thơng tin sau chọn nhân viên bấm vào button “Xóa” Nguyễn Đình Phú Hồng Đình Quang 16 Bảng 4.5: Màn hình hiển thị chức xóa nhân viên Nguyễn Đình Phú Hồng Đình Quang 17 1.6 Màn hình sửa thơng tin nhân viên Màn hình (modal) sửa thơng tin nhân viên hiển thị sau chọn nhân viên bấm vào button “Chỉnh sửa” Bảng 4.6: Màn hình sửa nhân viên Nguyễn Đình Phú Hồng Đình Quang 18 CHƯƠNG 5: TỔNG KẾT Kiến thức • Tìm hiểu, học hỏi sử dụng thêm framework JS React • Củng cố kiến thức lập trình Front-End HTML, CSS, JavaScript, Typescript • Biết sử dụng Ant Design dự án thực tế Kỹ • Cải thiện kỹ phân tích, phát xử lý lỗi q trình code • Tăng cường khả học hỏi giao tiếp làm việc nhóm • Nâng cao khả tự học hỏi, tìm hiểu cơng nghệ • Biết quy trình làm việc nhóm triển khai dự án thực tế • Đảm bảo tiến độ công việc Bài học kinh nghiệm • Làm việc mơi trường chun nghiệp, động • Hiểu thêm quy trình làm việc dự án thực tế Nguyễn Đình Phú Hồng Đình Quang 19 TÀI LIỆU THAM KHẢO Ant Design https://ant.design/components/overview/ https://viblo.asia/p/gioi-thieu-ant-design-L4x5xwzblBM React JS https://viblo.asia/p/gioi-thieu-reactjs-Qbq5QvaGKD8 https://reactjs.org/docs/getting-started.html Nguyễn Đình Phú Hồng Đình Quang 20 TỔNG KẾT Sau tháng thực tập công ty, em học nhiều đều, không kiến thức riêng lập trình mà cịn quy chuẩn, văn hóa làm việc cơng ty, để biết doanh nghiệp thị trường làm việc nào, điều phối nhân lực tài nguyên Hơn nữa, em tiếp thu kinh nghiệp quý báu từ anh/chị đồng nghiệp, góp phần giúp em hồn thiện kiến thức, kỹ đạt số thành cơng định q trình thực tập cơng ty Về tư tưởng thân, em biết để trở thành lập trình viên, lập trình viên khác giải vấn đề, nghề nghiệp làm tương lai, định hướng nghề nghiệp Nguyễn Đình Phú Hồng Đình Quang ... cầu phát triển ngành bán hàng chuỗi quản lý bán hàng phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ thời đại 4.0, website quản lý nhân tố kích thích phát triển công nghệ... kế hoạch, phát triển sản phẩm chưa phép cơng bố Kèm theo q trình thực tập chưa lâu nên phần mô tả giới hạn trình thực tập Giới thiêu chức quản lý nhân viên 1.1 Màn hình Màn hình quản lý nhân viên... phát triển dự án sản phẩm, dẫn chúng em cách làm báo cáo, lên kế hoạch cho chúng em thời gian qua Cũng xin cảm ơn thầy cô khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo