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

Với tốc độ phát triển vôcùng mạnh mẽ của thời đại 4.0, các website quản lý đã và đang là nhân tố kích thích sự pháttriển của công nghệ thông tin thế giới.. Vì vậy, em quyết định chọn Côn

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

TP Hồ Chí Minh, ngày 28 tháng 6 năm 2021

LỜI MỞ ĐẦU

Ngày nay, nhu cầu phát triển của các ngành bán hàng cũng như chuỗi quản lý bán hàng

là một bộ phận không thể thiếu của ngành công nghiệp phần mềm Với tốc độ phát triển vôcùng mạnh mẽ của thời đại 4.0, các website quản lý đã và đang là nhân tố kích thích sự pháttriển của công nghệ thông tin thế giới

Sau ba năm học tập trên trường, vì mong muốn có thêm kinh nghiệm thực tế, cũng nhưmuốn được tham gia làm dự án website trong một môi trường chuyên nghiệp, em có dự định là

sẽ thực tập trong kỳ này Vì vậy, em quyết định chọn Công ty TNHH Giải pháp và Công nghệMinh Phú - 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được dự định này

Đặc biệt cảm ơn chị Lưu Ngọc Bảo Nguyên, đã training quy định và văn hóa của công

ty, hướng dẫn, giúp đỡ cho chúng em tận tình cả những khó khăn trong công việc, đến nhữngkhó 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 và những kiến thức quan trọng về testing như Monkey test và Unit Test để có thể đảm bảochất lượng của sản phẩm, hỗ trợ chúng em rất nhiều về các vấn đề kỹ thuật Coding Frameworktrong quá trình phát triển dự án sản phẩm, chỉ dẫn chúng em về cách làm báo cáo, lên kế hoạchcho chúng em trong thời gian qua

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điềukiện em làm bài báo cáo này

Trương Nguyễn Tuấn Nam

TP Hồ Chí Minh, ngày 28 tháng 6 năm 2021

NHẬN XÉT CỦA KHOA

MỤC LỤC

CHƯƠNG 1: GIỚI THIÊU TỔNG QUAN VỀ CÔNG TY THỰC TẬP 6

1 Giới thiệu công ty TNHH Giải pháp và Công nghệ Minh Phú 6

2 Sản phẩm của công ty 7

3 Giới thiệu công việc 7

3.1 Vị trí 7

3.2 Công việc 7

3.3 Yêu cầu 7

3.4 Nhiệm vụ của sinh viên thực tập 7

CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP 8

1 Kế hoạch thực tập 8

2 Thời gian biểu làm việc 9

CHƯƠNG 3: CÔNG NGHỆ VÀ KIẾN THỨC HỌC ĐƯỢC 10

1 React.js 10

1.1 Giới thiệu 10

1.2 Các tính năng của React.js 10

2 Ant Design 12

CHƯƠNG 4: CHI TIẾT VỀ QUÁ TRÌNH THỰC TẬP 13

1 Giới thiêu về chức năng quản lý nhân viên 13

1.1 Màn hình chính 13

1.2 Màn hình thêm mới nhân viên 14

1.3 Màn hình nhập file 15

1.4 Màn hình xem thông tin nhân viên 15

1.5 Chức năng xóa thông tin nhân viên 16

1.6 Màn hình sửa thông tin nhân viên 18

CHƯƠNG 5: TỔNG KẾT 19

1 Kiến thức 19

2 Kỹ năng 19

3 Bài học kinh nghiệm 19

TÀI LIỆU THAM KHẢO 20

TỔNG KẾT 21

CHƯƠNG 1: GIỚI THIÊU TỔNG QUAN VỀ CÔNG TY THỰC TẬP

1 Giới thiệu công ty TNHH Giải pháp và Công nghệ Minh Phú

- Tên công ty: Công ty TNHH Giải pháp và 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

- Lời giới thiệu ngắn: Công ty TNHH Công nghệ và Giải pháp Minh Phú được thànhlập ngày 12/9/2019, là một công ty start-up công nghệ phần mềm, người đại diệnpháp luật là anh Nguyễn Đình Phú (CEO) Ban đầu, Công ty lấy tên là Công tyTNHH Phần mềm Minh Phú, sau đó đổi thành Công ty TNHH Công nghệ và Giảipháp Minh Phú và giữ cái tên đó cho đến ngày nay

- Tìm hiểu về quy trình làm việc, làm task, nghiệp vụ công ty.

- Tìm hiểu về monkey test và unit test

- Tìm hiểu về React JS và Ant Design

3.3 Yêu cầu

- Nắm rõ được quy trình làm việc và tuân thủ đúng

- Hiểu rõ các kiến thực của Monkey Test và Unit Test

- Giao tiếp tốt và teamwork tốt với các thành viên trong công ty

3.4 Nhiệm vụ của sinh viên thực tập

- Hoàn thành đầy đủ các task được giao

- Thực hiện đúng quy trình phát triền phần mêm của công ty

- Đi làm đúng giờ, số ngày trong tuần thỏa thuân với công ty

CHƯƠNG 2: QUÁ TRÌNH THỰC TẬP

1 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

1 Làm quen, tìm hiểu về công ty

Tiến hành đọc hiểu Monkey test và Unittest sự hướng dẫn của mentor

Học và làm quen với cách làm việc của công ty

Nắm được testing cần làm những thao tác gì

Hiểu được luồng hoạt động của phần mềm đang phát triển

vào evidence để dev fix

Cách thực hiện các bước test

hợp với Monkey Test để test hiệu quảhơn

4-6 Đọc hiểu và coding sample React Js

theo video

Đọc hiểu về Ant Design

Vận dụng công nghệ mà công ty đang

sử dụng để phát triển

Sử dụng thuần thục thiết kế của Ant đồng bộ theo dự án của công ty

7-… Làm quen với framework, mô hình sản

phẩm của công ty

Áp dụng kỹ năng từ coding sample vào framework, workflow của công ty

Bảng 2.1: Kế hoạch thực tập

• Thời gian làm việc:

CHƯƠNG 3: CÔNG NGHỆ VÀ KIẾN THỨC HỌC ĐƯỢC

1 React.js

1.1 Giới thiệu

React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướngSingle Page Application Trong khi những framework khác cố gắng hướng đến một môhình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với nhữngthư viện Javascript khác React.js cho phép nhúng code html trong code javascript nhờvào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS Tích hợp giữajavascript và HTML vào trong JSX làm cho các component dễ hiểu hơn

React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thànhphần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được

1.2 Các tính năng của React.js

1.2.1 Virtual DOM

Hình 3.1: Cấu trúc DOM Tree

DOM là tên gọi tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một

chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên code HTML hay

XML bằng các ngôn ngữ lập trình thông dịch (scripting language) như Javascript

Trong khi HTML là 1 đoạn code, DOM là một thể hiện trừu tượng của đoạn code đó

trong bộ nhớ

Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để

tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM Tree thật React sử dụng cơ chế

one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến childthông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửalỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu củachúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi

về giao diện

1.2.2 JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm:

Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.

Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viếttrực tiếp bằng Javascript

1.2.3 Props và State

Props: giúp các component tương tác với nhau, component nhận input gọi là props, vàtrả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiệntrạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cậpnhật UI

2 Ant Design

2.1 Giới thiệu

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng

Có thể coi Ant Design cho React là tập hợp của hầu hết các thư viện về React Nó đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thưviện nào nữa Dưới đây là danh sách các component mà nó 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

CHƯƠNG 4: CHI TIẾT VỀ QUÁ TRÌNH THỰC TẬP

Theo quy chế đối với 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 của 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, dữ liệu, …)

Phần b.Thông tin của công ty: … Đảm bảo an toàn thông tin về sản phẩm, dự án đang trong giai đoạn kế hoạch, phát triển sản phẩm hoặc chưa được phép công bố

Kèm theo quá trình thực tập chưa được lâu nên phần này sẽ mô tả giới hạn về quá trình thực tập

1 Giới thiêu về chức năng quản lý nhân viên

1.1. Màn hình chính

Màn hình quản lý nhân viên được giới thiệu là chức năng quản lý nhân viên Bao gồm các tính năng cơ bản như Thêm, Sửa, Xóa, Xem, Tìm kiếm, Nhập file, Tải dữ liệu về (CSV) Hơn nữa ngoài các trường mặc định đã có sẵn trên thanh thông tin tìm kiếm thì ở mục còn có thể lựa chọn thêm nhiều trường hiển thị hoặc tìm kiếm khác nhau

Bảng 4.1: Màn hình chính quản lý nhân viên

1.2 Màn hình thêm mới nhân viên

Khi bấm vào button thêm mới thì lập tức hiện lên “Modal” thêm mới nhân viên

Bảng 4.2: Màn hình thêm mới nhân viên

1.3 Màn hình nhập file

Màn hình (Modal) này xuất hiện sau khi bấm vào button Nhập file Ở màn hình này chúng ta sẽload dữ liệu của nhân viên bằng file excel có sẵn sau khi tải về từ button “Tải file mẫu”

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 hiện sau khi tick vào ô của 1 nhân viên hiển thị ở ô hiển thị data và bấm vào button “Xem”

Bảng 4.4: Màn hình xem thông tin nhân viên

1.5 Chức năng xóa thông tin nhân viên

Thông báo (modal) xóa thông tin hiện ra sau khi chọn 1 nhân viên và bấm vào button “Xóa”

Bảng 4.5: Màn hình hiển thị chức năng xóa mới nhân viên

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 khi chọn 1 nhân viên bất kỳ và bấm vàobutton “Chỉnh sửa”

Bảng 4.6: Màn hình sửa nhân viên

CHƯƠNG 5: TỔNG KẾT

1 Kiến thức

 Tìm hiểu, học hỏi và sử dụng thêm được framework JS là React

 Củng cố kiến thức về lập trình Front-End như HTML, CSS, JavaScript, Typescript

 Biết sử dụng Ant Design dự án thực tế

2 Kỹ năng

 Cải thiện kỹ năng phân tích, phát hiện và xử lý lỗi trong quá trình code

 Tăng cường khả năng học hỏi và giao tiếp khi làm việc nhóm

 Nâng cao khả năng tự học hỏi, tìm hiểu công nghệ mới

 Biết quy trình làm việc nhóm và triển khai dự án thực tế

 Đảm bảo đúng tiến độ công việc

3 Bài học kinh nghiệm

 Làm việc trong môi trường chuyên nghiệp, năng động

 Hiểu thêm về quy trình làm việc ở dự án thực tế

TÀI LIỆU THAM KHẢO

TỔNG KẾT

Sau 3 tháng thực tập tại công ty, em đã học được rất nhiều đều, không chỉ kiến thức riêng về lập trình mà còn về quy chuẩn, văn hóa làm việc tại công ty, để biết được rằng hiện tại những doanh nghiệp trên thị trường đang làm việc như thế nào, điều phối nhân lực và tài nguyên ra sao

Hơn nữa, em còn được tiếp thu những kinh nghiệp quý báu từ các anh/chị và đồng nghiệp, góp phần giúp em hoàn thiện kiến thức, kỹ năng của mình và đạt được một số thành công nhất định trong quá trình thực tập tại công ty

Về tư tưởng của bản thân, em biết được làm sao để trở thành một lập trình viên, các những lập trình viên khác giải quyết vấn đề, về nghề nghiệp sẽ làm trong tương lai, định hướng nghề nghiệp