BÁO CÁO THỰC TẬP LẬP TRÌNH FRONT-END WEB

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 FRONT-END WEB Công ty thực tập : S3Corp Người phụ trách : Trà Quang Khánh Thực tập sinh : Đoàn Minh Lực TP Hồ Chí Minh,27 tháng 05 năm 2022 LỜI MỞ ĐẦU Như biết website (hay trang web) công cụ thiếu lĩnh vực kinh doanh, bán hàng, quảng cáo,…Nó dùng để trao đổi buôn bán trực tuyến với Với lợi ích nên hầu hết cơng ty tổ chức hay cá nhân có cho trang web để phục vụ cho mục đích khác Một trang web bắt mắt thu hút nhiều ý từ khách hàng kèm theo hiệu Một website đại diện cho công ty, tổ chức, cá nhân, nên yếu tố thẩm mĩ thiếu Đương nhiên nội dung không phần quan trọng Và yếu tố khác tiện ích người dùng Kết hợp yếu tố có trang web tốt, thu hút khách hàng thể giá trị công ty Và với u thích nhìn trang web mà tạo ngày đẹp em định theo hướng lập trình web, cụ thể front-end Vì vậy, em định chọn S3Corp – môi trường chuyên nghiệp, lâu đời để giúp em thực dự định thân LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty S3Corp tạo điều kiện cho em có hội thực tập cơng ty Nhờ dẫn tận tình anh/chị cơng ty mà em có thêm nhiều kiến thức front-end (cụ thể ReactJs) 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 NHẬN XÉT CỦA KHOA MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty S3Corp Chương 2: Nội dung thực tập 6 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Tìm hiểu html, css, js 2.2 Tìm hiểu React 2.3 Thực tập Convert từ file html sang React (Ex1) 2.4 Thực tập Redux (Ex2) 2.5 Thực Unit test code coverage cho Ex2 2.6 Thực tập Phân nhỏ component (Ex3) 2.7 Thực tập với component Ex3 (Ex4) 2.8 Thực thêm tính vào Ex4 (Ex5) 10 2.9 Sử dụng thêm library để tăng tốc độ code cho Ex5 (Ex6) 10 Thực project 10 3.1 UI Team 10 3.2 Gluing team 11 TÀI LIỆU THAM KHẢO 12 Chương 1: Giới thiệu công ty thực tập 1 Giới thiệu cơng ty S3Corp S3Corp thành lập năm 2007 Pháp, công ty hàng đầu ngành công nghệ phần mềm S3Corp cung cấp dịch vụ Product Development (Full Lifecycle, Web Application, Mobile Application), Product Verification, Automation Testing Sản phẩm cơng ty Chương 2: Nội dung thực tập Đợt thực tập framework ReactJs giúp cho sinh viên hiểu cách hoạt động chia nhỏ component react, lưu trữ xử lý state, rèn luyện kỹ css , responsive Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, trình thành lập 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ơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty S3corp, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 2.2 Tìm hiểu html, css, js Thời gian : ngày Nội dung : Tìm hiểu kiến thức html, css, js Trong thời gian này, thực tập sinh tiến hành tìm hiểu kiến thức html, css, js Sau thực hành tập nhỏ (khơng dùng thư việc hỗ trợ nào) để hiểu rõ áp dụng kiến thức tìm hiểu Thực : Thực tập nhỏ Kết : Hiểu rõ html, css, js Tìm hiểu React Thời gian : ngày Nội dung : Tìm hiểu kiến thức React (Understand SPA, React Concept, React Life-Cycle, Define JSX, React Class, React Hook, DOM & Shadow DOM ) - Tìm hiểu project structure, setup codebase, cách đặt vị trí thư mục (assets, internal code, external code, react component - Tạo nhánh branch SVN upload code lên Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết : - 2.3 Nâng cao kỹ lập trình, kiến thức với framework react Có kiến thức quan trọng cho việc lập trình web nói chung React nói riêng sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Thực tập Convert từ file html sang React (Ex1) Thời gian: ngày Nội dung: Áp dụng kiến thức tìm hiểu để chuyển đổi html sang react (giống mẫu, không lệch element, thực thêm tính năng, selected item, dropdown menu,…) Thực : - Tham gia đầy đủ buổi trainning Làm tập thực hành chia component, xử lý state,… Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : 2.4 - Hiểu cách chia component, xử lý state Thực tập Redux (Ex2) Thời gian: ngày Nội dung : Convert từ file html mẫu sang React sử dụng Redux để quản lý state - Định nghĩa Redux: Redux predictable state management tool cho ứng dụng Javascript Nó giúp bạn viết ứng dụng hoạt động cách quán, chạy môi trường khác (client, server, and native) dễ dàng để test Redux đời lấy cảm hứng từ tư tưởng ngôn ngữ Elm kiến trúc Flux Facebook Do Redux thường dùng kết hợp với React Thực : - Tham gia đầy đủ buổi training Quản lý xử lý state redux, hiểu rõ cách quản lý luồng di chuyển state Kết quả: 2.5 2.6 2.7 2.8 2.9 - Có thể sử dụng redux để quản lý tất state Thực Unit test code coverage cho Ex2 Thời gian: ngày Nội dung: Sử dụng Jet built-in để viết unit test package khác Thực hiện: - Tham gia đầy đủ buổi training Kết quả: - Hiểu cách hoạt động unit test Thực tập Phân nhỏ component (Ex3) Thời gian: ngày Nội dung: Phân nhỏ component để tái sử dụng (Form, Input, Button,…), thực validation form, hiểu cách authentication Thực hiện: Chia nhỏ component, validation form (username khơng có ký tự đặc biệt,email hợp lệ, password hợp lệ,…) Kết quả: - Hiểu cách chia nhỏ component để tái sử dụng, đóng gói liệu Thực tập với component Ex3 (Ex4) Thời gian: ngày Nội dung: Thêm route vào ứng dụng, protected route (navigate login) Thực hiện: Thêm route vào hiểu cách bảo vệ page (chỉ navigate đến đăng nhập) Kết quả: - Hiểu cách thêm route vào ứng dụng - Hiểu cách bảo vệ page (Protected route) Thực thêm tính vào Ex4 (Ex5) Thời gian: ngày Nội dung: Hiểu rõ lifecycle hook quản lý state Tạo model generate UI component cách passing model Thực hiện: Dùng lifecycle hook quản lý state Kết quả: - Hiểu rõ lifecycle hook - Biết cách tạo model pass sang component để generate UI Sử dụng thêm library để tăng tốc độ code cho Ex5 (Ex6) Thời gian: Ngày Nội dung: Sử dụng thêm thư viện (Ant design) để tăng tốc độ code Thực hiện: Áp dụng Ant design để filter liệu Kết quả: - Biết cách sử dụng thư viện để tối ưu code Thực project Sau thời gian training thực hành, thực tập sinh nắm kiến thực React Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project Chi tiết đồ án: 3.1 UI Team - Yêu cầu: HTML, Strong CSS, Advance JS, có khả thiết kế UI từ PTS - Reactjs: Context, Reducer, React Hook, Lifecycle hook, Router - Exercise: o Thiết kế UI giống mẫu o Không dùng Redux, dùng React Hook o Sử dụng Context API để quản lý state o Tạo component cấp : Sidebar, Profile Bar, Editor o Mỗi Profile có Editor riêng o Khi click vào item add item vào editor Tất item thuộc profile chọn o Note: Keyboard Item: edit key ▪ Mouse Item: edit mouse ▪ Delay time: set delay time ▪ Macro item: click để dropdown menu chọn profile 3.2 Gluing team - Yêu cầu: HTML, Web API, CSS, Advance JS - Good Reactjs + Redux, viết Unit test (Jest,…) - Exercise: o Tương tự UI Team o Tạo temporary server sử dụng redux để CRUD profile o Tạo deviceUSB service (sử dụng navigator, usb web API để yêu cầu quyền truy cập USB cắm vào PC o Viết Unit test TÀI LIỆU THAM KHẢO HTML, CSS, JS http://javascripttutorial.net/es6/ https://www.w3schools.com https://babeljs.io/docs/learn-es2015/ https://webpack.github.io/docs/tutorials/getting-started React https://academy.zerotomastery.io/courses/enrolled/700475 https://s3.udemy.com/react-the-complete-guide-inclredux/learn/lecture/8156738#overview TỔNG KẾT Như vậy, vòng hai tháng thực tập, em kịp học hỏi, tiếp thu thêm kiến thức tạo web app đơn giản, chưa có nhiều chức việc code React, chia nhỏ component dễ dàng việc mở rông ứng dụng Chân thành cảm ơn giúp đỡ anh chị công ty S3Corp, thầy giúp em hồn thành báo cáo ... dùng Kết hợp yếu tố có trang web tốt, thu hút khách hàng thể giá trị công ty Và với u thích nhìn trang web mà tạo ngày đẹp em định theo hướng lập trình web, cụ thể front- end Vì vậy, em định chọn... html sang React (Ex1) 2.4 Thực tập Redux (Ex2) 2.5 Thực Unit test code coverage cho Ex2 2.6 Thực tập Phân nhỏ component (Ex3) 2.7 Thực tập với component Ex3 (Ex4) 2.8 Thực thêm tính vào Ex4 (Ex5)... code Thực hiện: Áp dụng Ant design để filter liệu Kết quả: - Biết cách sử dụng thư viện để tối ưu code Thực project Sau thời gian training thực hành, thực tập sinh nắm kiến thực