Báo Cáo Thực Tập Lập Trình Font End Reactjs.docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.99 MB, 22 trang )
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
LẬP TRÌNH FONT END REACTJS
Cơng ty thực tập
: TISOHA
Người phụ trách
: Đỗ Công Bá
Thực tập sinh
: Đinh Huỳnh Thái Bình
TP. Hồ Chí Minh, tháng 06 năm 2022
Đinh Huỳnh Thái Bình
2
LỜI MỞ ĐẦU
Trong thời đại như hiện nay, công nghệ và Internet trở nên phổ biến và không ngừng
phát triển trong mọi lĩnh vực. Chính vì thế, phát triển Web đang trở thành một yếu tố không thể
thiếu trong chiến lược truyền thông của mọi doanh nghiệp trên thế giới.
Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ. Ngành công
nghiệp phát triển ứng dụng web ở Việt Nam đã và đang phát triển mạnh mẽ trong mọi lĩnh vực
về thương mại, quảng cáo, giáo dục,.. Ngành lập trình Web được sinh ra là do nhu cầu truy cập,
tìm kiếm thơng tin cũng như các nhu cầu khác.Vì lý do này, em quyết định chọn lập trình web
làm định hướng cho việc học tập của mình.
Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như
muốn được tham gia làm lập trình web trong một mơi trường chun nghiệp, em có dự định là
sẽ thực tập. Vì vậy, em quyết định chọn TISOHA - 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.
Đinh Huỳnh Thái Bình
3
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TNHH giải pháp phần mềm TISOHA đã tạo điều kiện
cho em có cơ hội được thực tập tại cơng ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình, em đã tiếp thu được
những kiến thức và kinh nghiệm quan trọng trong lập trình font-end Reactjs.
Đặc biệt cảm ơn anh Đỗ Công Bá đã hướng dẫn, giúp đỡ em tận tình hồn thành các
cơng việc được giao.
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ều
kiện em làm bài báo cáo này.
Đinh Huỳnh Thái Bình
TpHCM, 15/12/2022
Đinh Huỳnh Thái Bình
4
NHẬN XÉT CỦA KHOA
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
Đinh Huỳnh Thái Bình
5
MỤC LỤC
Chương 1: Giới thiêu công ty thực tập........................................................................................................7
1.1
Giới thiệu công ty TISOHA.........................................................................................................7
1.2
Sản phẩm của công ty...................................................................................................................7
Chương 2: Nội dung thực tập......................................................................................................................8
2.1 Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty....................................................................8
2.2 Nghiên cứu kỹ thuật..........................................................................................................................8
2.2.1 Các công cụ làm việc.....................................................................................................................8
2.2.2 Đọc hiểu source code, fix bug được giao.......................................................................................8
2.2.3 Thực hiện project...........................................................................................................................9
Chương 3: Các công việc đã làm..............................................................................................................10
3.1
Xây dựng giao diện Mark Web..................................................................................................10
3.2
Xây dựng giao diện và kết nối Api module quản lí Designer và Admin Director.....................10
3.3 Xây dựng giao diện và kết nối Api module quản lí Normal User..................................................11
3.4 Xây dựng giao diện và kết nối Api module Business Profile.........................................................11
3.5 Một số chức năng khác như xuất file PDF, xem file PDF trên trình duyệt, Upload File...............12
3.6 Một số hình ảnh về giao diện ứng dụng..........................................................................................12
Đinh Huỳnh Thái Bình
6
Chương 1: Giới thiêu công ty thực tập
1.1 Giới thiệu công ty TISOHA
TISOHA là công ty cung cấp các giải pháp phần mềm hiện đại, tiếp cận các công
nghệ mới một cách khoa học có nghiên cứu.
1.2 Sản phẩm của công ty
TISOHO đang phát triển dựa trên nhiều mảng trải đều từ Web, Mobile, ....
Đinh Huỳnh Thái Bình
7
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 : Giới thiệu về công ty, cách tổ chức của công ty
Được nghe người phụ trách giới thiệu về cơng ty, q trình thành lập và phát triên
(như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức của
công ty .
Ngồi ra, thực tập sinh cịn được giới thiệu về cách thức làm việc trong công ty
như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công
việc…
Kết quả : Hiểu thêm về cơng ty TISOHA, q trình thành lập và phát triển. Có thêm các
kỹ năng về việc sử dụng email trong cơng việc, làm việc có kế hoạch, có kỷ luật, có trách
nhiệm hơn.
2.2 Nghiên cứu kỹ thuật
2.2.1 Các cơng cụ làm việc
Thời gian : 1 tuần
Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc.
Trong thời gian này, cài đặt các cơng cụ phục vụ cho công việc như :AI
Photoshop, visual studio code, visual studio, smart git
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Làm quen được với các công cụ
2.2.2 Đọc hiểu source code, fix bug được giao
Thời gian : 5 ngày (1 tuần)
Nội dung : Do dự án đã được phát triển trước đó 1-2 tháng nên cần phải đọc source
code và fix các bug nhỏ được giao để hiểu hơn về các tính năng, các component đã
được team phát triển trước đó
Thực hiện :
- Đọc code và tiến hành fix các bug được giao
Kết quả :
-
Hiểu hơn về dự án mà team đang phát triển
Đinh Huỳnh Thái Bình
8
2.2.3 Thực hiện project
Sau 1 tuần đọc hiểu source code và fix các bug nhỏ được giao, đã nắm được sơ bộ dự án
mà team đang phát triển, tiến hành nhận và hoàn thành thành các task theo print của
team.
Chi tiết cơng việc đã làm sẽ được nói ở phần sau.
2.2.4 Lịch làm việc
Tháng
1,2
-
3
-
Mức
độ
Cơng việc
Người hướng dẫn
hồn
thành
Tìm hiểu về cơng Anh Đỗ Công Bá 100%
ty, cách tổ chức
của công ty.
Làm quen với các
công cụ làm việc
trong công ty.
Đọc code, fix bug
để hiểu về dự án
của đang phát triển
của công ty
Thực hiện các task Anh Đỗ Công Bá 100%
theo Print của team
Nhận xét của người
hướng dẫn
Đinh Huỳnh Thái Bình
9
Chương 3: Các công việc đã làm
3.1 Xây dựng giao diện Mark Web
Nội dung : Sử dụng thư viên Material UI để xây dưng giao diện được giao trên figma.
Thực hiện :
-
Sử dụng html,css để dựng giao diện.
-
Custom các component để có thể xây dựng được giao diện.
Kết quả :
- Hoàn thành task đúng với thiết kế của designer.
3.2 Xây dựng giao diện và kết nối Api module quản lí Designer và Admin Director
Nội dung : Xây dựng giao diện theo thiết figma và kết nối các api cần thiết.
Thực hiện :
-
Sử dụng Html, Css, Material UI để dựng giao diện.
-
Sử dụng Redux để quản lý state của giỏ hàng
-
Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế
-
Sử dụng useEffect để xử lý các ảnh hưởng bên cạnh ứng dụng
-
Sử dụng React slick cho slider.
Kết quả :
- Hoàn thành task đúng với thiết kế của designer.
Đinh Huỳnh Thái Bình
10
3.3 Xây dựng giao diện và kết nối Api module quản lí Normal User
Nội dung : Xây dựng giao diện theo thiết figma và kết nối các api cần thiết.
Thực hiện :
-
Sử dụng Html, Css, Material UI để dựng giao diện.
-
Thiết kế các form thêm, xóa, sửa người dùng
-
Sử dụng Redux để quản lý state của giỏ hàng
-
Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế
-
Sử dụng useEffect để xử lý các ảnh hưởng bên cạnh ứng dụng
-
Sử dụng React slick cho slider.
Kết quả :
- Hoàn thành task đúng với thiết kế của designer.
3.4 Xây dựng giao diện và kết nối Api module Business Profile
Nội dung : Xây dựng giao diện theo thiết figma và kết nối các api cần thiết.
Thực hiện :
-
Sử dụng Html, Css, Material UI để dựng giao diện.
-
Sử dụng Redux để quản lý state của giỏ hàng
-
Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế
-
Sử dụng useEffect để xử lý các ảnh hưởng bên cạnh ứng dụng
-
Sử dụng React slick cho slider.
Kết quả :
- Hoàn thành task đúng với thiết kế của Business Profile.
Đinh Huỳnh Thái Bình
11
3.5 Một số chức năng khác như xuất file PDF, xem file PDF trên trình duyệt, Upload File
Nội dung: Xây dựng chức năng Upload File, PDF, Export PDF.
Thực hiện :
-
Xử lí File và gửi qua WebService để lưu trữ.
-
Sử dụng Redux để quản lý state của giỏ hàng
-
Sử dụng useState để set state chuyển tab cửa hàng, thương hiệu, tự thiết kế
-
Sử dụng useEffect để xử lý các ảnh hưởng bên cạnh ứng dụng
Kết quả :
-
Hoàn thành task
3.6 Một số hình ảnh về giao diện ứng dụng
Đinh Huỳnh Thái Bình
12
Đinh Huỳnh Thái Bình
13
Đinh Huỳnh Thái Bình
14
Đinh Huỳnh Thái Bình
15
Đinh Huỳnh Thái Bình
16
Đinh Huỳnh Thái Bình
17
Đinh Huỳnh Thái Bình
18
Đinh Huỳnh Thái Bình
19
Đinh Huỳnh Thái Bình
20
Đinh Huỳnh Thái Bình
