Báo Cáo Thực Tập Lập Trình Front-End Với Reactjs.pdf

1 Thiều Quang Lâm 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 VỚI REACTJS Công ty thực tập Công ty TNHH DV TM Good Goods Người phụ trách Thiều Hạnh[.]

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 VỚI REACTJS

Công ty thực tập : Công ty TNHH DV TM Good Goods Người phụ trách : Thiều Hạnh Dung

Thực tập sinh : Thiều Quang Lâm

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển của công nghệ, các nền tảng thương mại điện tử (E-commerce) đã trở thành một phần không thể thiếu trong cuộc sống của nhiều người Hơn thế nữa, trong và sau đại dịch Covid-19, một bộ phận không nhỏ người dùng Internet rất cần những trang web, những ứng dụng di động phục vụ cho việc mua sắm qua mạng, qua đó làm gia tăng tầm quan trọng của E-commerce Ngoài ra, dưới sự ảnh hưởng của cuộc Cách mạng Công nghiệp 4.0, ngày càng nhiều doanh nghiệp quyết định mở rộng thị trường lên mạng Internet, qua

đó mang thêm nhiều cơ hội việc làm cho các lập trình viên website Vì lý do này, em quyết định chọn lập trình website 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 phát triển bản thân trong một môi trường chuyên nghiệp, em có dự định là

sẽ đi thực tập Vì vậy, em quyết định chọn Công ty TNHH Dịch vụ Thương mại Good Goods - một môi trường lý tưởng, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Dịch vụ Thương mại Good Goods đã 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 khoảng thời gian ngắn ngủi, nhưng nhờ có sự chỉ dẫn nhiệt tình của các anh chị trong công ty, em đã tiếp thu được những kiến thức quan trọng để có thể xây dựng được giao diện của một website bán hàng Chân thành cảm ơn các anh chị đã bỏ ra nhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn chị Thiều Hạnh Dung đã hướng dẫn, giúp đỡ cho em tận tình về những vấn đề và thắc khi bước đầu làm quen với môi trường làm việc mới, về các vấn đề kỹ thuật trong quá trình xây dựng giao diện website, về cách làm báo cáo, lên kế hoạch, về những kỹ năng không thể thiếu trong môi trường làm việc, và về việc training cho em những kiến thức quan trọng về lập trình front-end như Reactjs, Redux, và Material Design UI để có thể làm ra một sản phẩm 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ều kiện em làm bài báo cáo này

Thiều Quang Lâm

Tp HCM, ngày 26 tháng 12 năm 2022

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1: Giới thiêu Công ty TNHH Dịch vụ Thương mại Good Goods 6

Chương 2: Nội dung thực tập 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

2.1 Các công cụ làm việc 7

2.2 Tìm hiểu các ngôn ngữ lập trình web (HTML, CSS, JavaScript) 7

2.3 Tìm hiểu về các thư viện liên quan 9

3 Thực hiện project 11

4 Lịch làm việc 11

Chương 3: Chi tiết về project 14

1 Giới thiệu về trang web bán quần áo online 14

2 Kế hoạch 16

TÀI LIỆU THAM KHẢO 18

Chương 1: Giới thiêu Công ty TNHH Dịch vụ Thương mại Good Goods

Công ty TNHH Dịch vụ Thương mại Good Goods được thành lập năm 2015, là công ty chuyên về bán lẻ các sản phẩm như:

• Bán lẻ đồ điện gia dụng, giường, tủ, bàn, ghế và đồ nội thất tương tự, đèn và bộ đèn điện,

đồ dùng gia đình

• Bán lẻ đồ uống trong các cửa hàng chuyên doanh

• Bán lẻ vải, len, sợi, chỉ khâu và hàng dệt khác

• Bán lẻ đồ ngũ kim, sơn, kính và thiết bị lắp đặt

• Bán lẻ thảm, đệm, chăn, màn, rèm, vật liệu phủ tường và sàn

• Bán lẻ sách, báo, tạp chí văn phòng phẩm

• Bán lẻ băng đĩa âm thanh, hình ảnh (kể cả băng, đĩa trắng)

• Bán lẻ thiết bị, dụng cụ thể dục, thể thao

• Bán lẻ trò chơi, đồ chơi trong các cửa hàng chuyên doanh

• Bán lẻ hàng may mặc, giày dép, hàng da và giả da

Chương 2: Nội dung thực tập

Đợt thực tập với chủ đề “Lập trình Front-end với Reactjs” nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện về lập trình ứng dụng trên website, đồng thời rèn luyện những

kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển phần mềm chuyên nghiệp

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 (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 TNHH Dịch vụ Thương mại Good Goods, 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 Các công cụ làm việc

Thời gian: 4 ngày

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, người phụ trách đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số đó như Basecamp - sử dụng trong làm việc nhóm và theo dõi tiến độ làm việc, Visual Studio Code – chương trình soạn thảo source code, và các extension đi kèm với Visual Studio Code để phục vụ cho việc lập trình

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ập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau, so với việc dung các IDE

2.2 Tìm hiểu các ngôn ngữ lập trình web (HTML, CSS, JavaScript)

Thời gian: 3 ngày

Nội dung: Được training về những kiến thức quan trọng cho việc lập trình ứng dụng

web bao gồm:

- HTML, CSS

Các kiến thức cơ bản về HTML và CSS như các thẻ định dạng, các cách sử dụng CSS cho một đoạn mã HTML, …

- JavaScript

Giới thiệu các cú pháp cơ bản của JavaScript, cách nhúng mã JavaScript vào mã HTML, và cách tạo một trang web đơn giản bằng JavaScript

- Các quy tắc trong lập trình

Thực tập sinh sẽ được hướng dẫn về các nguyên tắc cơ bản trong lập trình nói chung, như Single Responsibility, KISS (Keep It Simple, Stupid),

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

Kết quả:

- Nâng cao kỹ năng lập trình web

- Có được những kiến thức quan trọng cho việc lập trình web 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

2.3 Tìm hiểu về các thư viện liên quan

Thời gian: 7 ngày

Nội dung: Các kiến thức cơ bản về các thư viện JavaScript như NPM, Reactjs

- NPM

NPM (Node Package Manager) là một trình quản lý các gói mã nguồn JavaScript được cài đặt kèm theo sẵn với Nodejs Các gói này được gọi là NPM Package Các NPM package được phát triển bởi các developer, họ publish ra và package của họ được tải lên server của NPM Thực tập sinh được hướng dẫn tìm hiểu các thông tin cơ bản về NPM và cách cài đặt các package vào môi trường lập trình sử dụng NPM

- Reactjs

Reactjs là một thư viện JavaScript dùng để xây dựng giao diện người dùng, hỗ trợ việc xây dựng những thành phầ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; Reactjs không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau Thực tập sinh được hướng dẫn cách cài đặt Reactjs và tạo một React App đơn giản

- Redux

Redux là một thư viện JavaScript để quản lý trạng thái của ứng dụng, thường được sử dụng với React Redux giúp các ứng dụng có thể hoạt động một cách nhất quán và có thể hoạt động trong nhiều môi trường khác nhau như client, server, native, … Ngoài

ra, sử dụng thư viện Redux để lưu trữ cũng giúp quá trình test/kiểm thử phần mềm dễ dàng hơn Redux được xây dựng dựa trên 3 nguyên lý:

• Nguồn dữ liệu tin cậy duy nhất: State của toàn bộ ứng được chứa trong một object tree nằm trong Store duy nhất

• Trạng thái chỉ được phép đọc: Cách duy nhất để thay đổi State của ứng dụng là phát một Action (là một object mô tả những gì xảy ra)

• Thay đổi chỉ bằng hàm thuần túy: Để chỉ ra cách mà State được biến đổi bởi Action chúng ta dùng các pure function gọi là Reducer

- Material UI

Material UI (thường viết tắt là MUI) là một thư viện JavaScript cung cấp các công cụ thiết kế giao diện cơ bản có sẵn như Button, Checkbox, Slider, Menu, Dialog, Table,

… giúp cho việc lập trình Front-end trở nên nhanh chóng và dễ dàng hơn

Thực hiện:

- Tham gia đầy đủ các buổi training

- Làm các bài tập thực hành như cài đặt thư viện, xây dựng app React …

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả:

- Hiểu được những khái niệm cơ bản trong lập trình Front-end với Reactjs

- Hiểu thêm về cách quản lý các thư viện, các dependencies trong một ứng dụng JavaScript

3 Thực hiện project

Sau một tháng đượ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ề lập trình Front-end như Reactjs, Redux 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 để xây dựng giao diện một website thương mại điện tử về các sản phẩm thời trang

Chi tiết đồ án sẽ được nói ở phần sau

Tuần Công việc Người hướng dẫn

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công

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

- Học cách trao đổi, làm việc qua email

Chị Thiều Hạnh Dung

2

- Tìm hiểu các ngôn ngữ lập trình web như HTML, CSS, Javascript

- Tìm hiểu về NPM

và Reactjs

Chị Thiều Hạnh Dung

3

- Tìm hiểu về quản

lý trạng thái với Redux

- Tìm hiểu về lập trình giao diện với Material Design UI

Chị Thiều Hạnh Dung

4

- Tìm hiểu cách thức vận hành của một trang web thương mại điện tử

- Lên kế hoạch xây dựng trang web

Chị Thiều Hạnh Dung

5

Xây dựng giao diện trang chủ, giỏ hàng, trang thanh toán

Chị Thiều Hạnh Dung

6

- Hiện thực giao diện, quản lý trạng thái của các trang

- Hiện thực các chức năng cơ bản như thêm vào giỏ hàng, thanh toán

Chị Thiều Hạnh Dung

7

Xây dựng giao diện các chức năng đăng ký, đăng nhập tài khoản

Chị Thiều Hạnh Dung

8

- Hiện thực chức năng đăng ký và đăng nhập

- Báo cáo cuối đợt thực tập

Chị Thiều Hạnh Dung

Chương 3: Chi tiết về project

1 Giới thiệu về trang web bán quần áo online

Trang web bán quần áo (tạm thời chưa có tên gọi) dự định sẽ là một nền tảng thương mại điện

tử cung cấp các sản phẩm thời trang, may mặc cho người dùng

Nền tảng này sẽ có những chức năng cơ bản nhất của một trang E-commerce như xem danh sách hàng đang có sẵn, chi tiết sản phẩm, đặt hàng, thanh toán (yêu cầu các thông tin bổ sung như số điện thoại, địa chỉ giao hàng, …); ngoài ra các khách hàng có nhu cầu tạo tài khoản để nhận ưu đãi cũng có thể đăng ký và đăng nhập tài khoản (yêu cầu xác thực bằng email)

Một số giao diện của trang web:

2 Kế hoạch

Giai đoạn 1 (thực hiện trong 2 tuần):

- Hoàn thành giao diện trang chủ, giỏ hàng, thanh toán sản phẩm, và các chức năng liên quan

- Hoàn thành các thành phần cơ bản của trang web như Header, Navigation Bar Kết quả:

- Hầu hết các tính năng đã được thực hiện, mặc dù giao diện vẫn còn sơ sài, chưa đẹp mắt

Giai đoạn 2 (thực hiện trong 2 tuần):

- Thiết lập quy trình đăng ký, đăng nhập vào trang web, và các chức năng liên quan như Quên mật khẩu, Thiết lập lại mật khẩu

- Bổ sung thêm Side Bar, giao diện trang Hồ sơ người dùng

Kết quả: Hoàn thành các tính năng trên, dù chưa có cải thiện nhiều về giao diện

TÀI LIỆU THAM KHẢO

Visual Studio Code:

https://code.visualstudio.com/

https://code.visualstudio.com/docs

HTML, CSS:

https://www.w3schools.com/html/html_css.asp

JavaScript:

https://www.javascript.com/

https://www.w3schools.com/js/

NPM:

https://www.npmjs.com/

https://docs.npmjs.com/

https://www.npmjs.com/package/package

Reactjs:

https://reactjs.org/

https://reactjs.org/tutorial/tutorial.html

Redux:

https://redux.js.org/

Material UI:

https://mui.com/

Các quy trình xây dựng một trang web thương mại điện tử:

https://www.forbes.com/advisor/business/software/how-build-ecommerce-website/

TỔNG KẾT

Như vậy, chỉ trong vòng một tháng ngắn ngủi, nhóm đã kịp hoàn thành một trang web thương mại điện tử với những tính năng cơ bản nhất Do thời gian có hạn nên trang web còn đơn giản, đồ hoạ chưa thực sự được trau chuốt và cũng chưa có nhiều tính năng như mong đợi Tuy nhiên, trang web có thể được mở rộng thêm nhiều chức năng hữu ích hơn nên sau này khi

có thời gian sẽ có thể phát triển lên mức cao hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty Đặc biệt cảm ơn chị trainer Thiều Hạnh Dung đã giúp em hoàn thành bài báo cáo này