Tài liệu Lập trình front end web (báo cáo thực tập)

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 <Đoàn Minh Lực> 1 LỜI MỞ ĐẦU Như chúng ta cũng đã biết thì website (hay một trang web) hiện là một công cụ không thể thiếu trong các lĩnh vực kinh doanh, bán hàng, quảng cáo,…Nó có thể dùng để trao đổi buôn bán trực tuyến với nhau. Với các lợi ích như vậy nên hầu hết các công ty hoặc một tổ chức hay cá nhân nào đấy cũng sẽ có cho mình một trang web để phục vụ cho các mục đích khác nhau. Một trang web bắt mắt sẽ thu hút nhiều sự chú ý từ khách hàng hơn và đi kèm theo đấy sẽ là sự hiệu quả. Một website sẽ đại diện cho cả một công ty, tổ chức, cá nhân, vậy nên yếu tố thẩm mĩ là không thể thiếu. Đương nhiên nội dung cũng không kém phần quan trọng. Và một yếu tố khác đó chính là tiện ích đối với người dùng. Kết hợp các yếu tố trên chúng ta sẽ có một trang web tốt, có thể thu hút khách hàng cũng như thể hiện được các giá trị của công ty. Và với sự yêu thích nhìn trang web mà mình tạo ra ngày càng đẹp hơn thì em đã quyết định theo hướng lập trình web, cụ thể là front-end. Vì vậy, em quyết định chọn S3Corp – một môi trường chuyên nghiệp, lâu đời để giúp em thực hiện được dự định của bản thân mình. <Đoàn Minh Lực> 1 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ó cơ hội được thực tập tại công ty. Nhờ sự chỉ dẫn tận tình của các anh/chị trong công ty mà em đã có thêm nhiều kiến thức hơn về front-end (cụ thể hơn là về ReactJs) 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.. <Đoàn Minh Lực> <Đoàn Minh Lực> 1 NHẬN XÉT CỦA KHOA <Đoàn Minh Lực> 1 MỤC LỤC Chương 1: Giới thiệu công ty thực tập 1. Giới thiệu công ty S3Corp Chương 2: Nội dung thực tập 6 6 7 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7 2. Nghiên cứu kỹ thuật 7 3. 2.1. Tìm hiểu về html, css, js 7 2.2. Tìm hiểu về React 7 2.3. Thực hiện bài tập Convert từ file html sang React (Ex1) 8 2.4. Thực hiện bài tập Redux (Ex2) 8 2.5. Thực hiện Unit test và code coverage cho Ex2 9 2.6. Thực hiện bài tập Phân nhỏ component (Ex3) 9 2.7. Thực hiện bài tập với component ở Ex3 (Ex4) 9 2.8. Thực hiện thêm các tính năng vào Ex4 (Ex5) 10 2.9. Sử dụng thêm các library để tăng tốc độ code cho Ex5 (Ex6) 10 Thực hiện 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 <Đoàn Minh Lực> 1 1. Giới thiệu công ty S3Corp S3Corp được thành lập năm 2007 tại Pháp, là một trong những công ty hàng đầu trong ngành công nghệ phần mềm. S3Corp cung cấp các dịch vụ về Product Development (Full Lifecycle, Web Application, Mobile Application), Product Verification, Automation Testing Sản phẩm của công ty <Đoàn Minh Lực> 1 Chương 2: Nội dung thực tập Đợt thực tập về framework ReactJs giúp cho sinh viên hiểu được cách hoạt động cũng như chia nhỏ các component trong react, cũng như lưu trữ và xử lý các state, rèn luyện kỹ năng css , responsive. 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, quá 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 . Ngoà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 S3corp, quá 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. Nghiên cứu kỹ thuật 2.1. 2.2. Tìm hiểu về html, css, js Thời gian : 1 ngày Nội dung : Tìm hiểu các kiến thức cơ bản về html, css, js. Trong thời gian này, thực tập sinh sẽ tiến hành tìm hiểu về các kiến thức cơ bản của html, css, js. Sau đó sẽ thực hành một bài tập nhỏ (không dùng bất kỳ thư việc hỗ trợ nào) để có thể hiểu rõ cũng như áp dụng các kiến thức đã tìm hiểu. Thực hiện : Thực hiện một bài tập nhỏ. Kết quả : Hiểu rõ về html, css, js Tìm hiểu về React Thời gian : 2 ngày Nội dung : Tìm hiểu về các kiến thức trong React (Understand SPA, React Concept, React Life-Cycle, Define JSX, React Class, React Hook, DOM & Shadow DOM...) - Tìm hiểu về project structure, setup codebase, cách đặt vị trí các thư mục (assets, internal code, external code, react component - Tạo nhánh branch trên SVN và upload code lên. Thực hiện : - Tham gia đầy đủ các buổi training của công ty. - Làm các bài thực hành, kiểm tra về kiến thức đã học. <Đoàn Minh Lực> 1 Kết quả : - 2.3. Nâng cao kỹ năng lập trình, kiến thức với framework react. Có được những kiến thức quan trọng cho việc lập trình web nói chung cũng như React nói riêng sau này. Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu. Thực hiện bài tập Convert từ file html sang React (Ex1) Thời gian: 2 ngày Nội dung: Áp dụng các kiến thức đã tìm hiểu để chuyển đổi html sang react (giống như mẫu, không được lệch các element, thực hiện thêm các tính năng, selected item, dropdown menu,…) Thực hiện : - Tham gia đầy đủ các buổi trainning. Làm các bài tập thực hành chia component, xử lý state,… Tìm kiếm tài liệu trên mạng để tìm hiểu thêm. Kết quả : 2.4. - Hiểu được cách chia component, xử lý state Thực hiện bài tập Redux (Ex2) Thời gian: 3 ngày Nội dung : Convert từ file html mẫu sang React nhưng sử dụng Redux để quản lý state - Định nghĩa về Redux: Redux là một predictable state management tool cho các ứng dụng Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với React. Thực hiện : - Tham gia đầy đủ các buổi training. Quản lý cũng như xử lý các state trên redux, hiểu rõ cách quản lý cũng như luồng di chuyển của các state Kết quả: <Đoàn Minh Lực> 1 2.5. 2.6. 2.7. 2.8. 2.9. - Có thể sử dụng redux để quản lý tất cả các state Thực hiện Unit test và code coverage cho Ex2 Thời gian: 1 ngày Nội dung: Sử dụng Jet built-in để viết unit test cũng như các package khác Thực hiện: - Tham gia đầy đủ các buổi training Kết quả: - Hiểu được cách hoạt động của unit test Thực hiện bài tập Phân nhỏ component (Ex3) Thời gian: 2 ngày Nội dung: Phân nhỏ các component để có thể tái sử dụng (Form, Input, Button,…), thực hiện validation form, hiểu được 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 cách chia nhỏ component để tái sử dụng, đóng gói dữ liệu. Thực hiện bài tập với component ở Ex3 (Ex4) Thời gian: 1 ngày Nội dung: Thêm route vào ứng dụng, protected route (navigate khi login) Thực hiện: Thêm route vào và hiểu cách bảo vệ page (chỉ navigate đến khi đã đă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 hiện thêm các tính năng vào Ex4 (Ex5) Thời gian: 2 ngày Nội dung: Hiểu rõ về lifecycle hook và quản lý state. Tạo các model và generate UI component bằng cách passing model Thực hiện: Dùng lifecycle hook và quản lý state trên đó. Kết quả: - Hiểu rõ về lifecycle hook - Biết cách tạo các model và pass sang các component để generate UI Sử dụng thêm các library để tăng tốc độ code cho Ex5 (Ex6) Thời gian: 1 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 dữ liệu Kết quả: - Biết cách sử dụng các thư viện để tối ưu code <Đoàn Minh Lực> 1 3. Thực hiện project Sau thời gian được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ bản về React. Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project. Chi tiết đồ án: 3.1. UI Team - Yêu cầu: HTML, Strong CSS, Advance JS, có khả năng thiết kế UI từ PTS - Reactjs: Context, Reducer, React Hook, Lifecycle hook, Router - Exercise: o Thiết kế UI giống như 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 3 component cùng cấp : Sidebar, Profile Bar, Editor o Mỗi Profile có Editor riêng o Khi click vào 1 item sẽ add item đó vào editor. Tất cả các item sẽ thuộc về profile đang chọn. o Note: Keyboard Item: có thể edit key ▪ Mouse Item: có thể edit mouse ▪ Delay time: có thể set delay time ▪ Macro item: click để hiện dropdown menu và chọn 1 profile 3.2. Gluing team - Yêu cầu: HTML, Web API, CSS, Advance JS - Good Reactjs + Redux, có thể viết Unit test (Jest,…) - Exercise: o Tương tự như UI Team o Tạo 1 temporary server sử dụng redux để CRUD profile o Tạo 1 deviceUSB service (sử dụng navigator, usb web API để yêu cầu quyền truy cập khi USB được cắm vào PC o Viết Unit test <Đoàn Minh Lực> 1 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.zeemototyasoemo.ztt/ctrosems/emrotllemd/00070/ https://s3zrdemy.zcty/oemaco-ohem-ctyplemoem-urtdem-trcloemdrx/lemaor/lemcoroem/81/6038#tvemovtemw TỔNG KẾT Như vậy, trong 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 cũng như tạo ra một web app đơn giản, tuy chưa có nhiều chức năng nhưng việc code bằng React, chia nhỏ các component sẽ dễ dàng hơn trong việc mở rông ứng dụng Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty S3Corp, cũng như các thầy cô đã giúp em hoàn thành báo cáo này. <Đoàn Minh Lực>