LỜI MỞ ĐẦUNgày nay, với sự phát triển của lĩnh vực Công nghệ Thông tin cùng với nhu cầu tiện dụng của con người đối với các sản phẩm của lĩnh vực đang rất phát triển này thì Website chín
Trang 1TRƯỜ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 WEBSITE VỚI REACTJS
TP Hồ Chí Minh, 24 tháng 12 năm 2021
Trang 2LỜI MỞ ĐẦU
Ngày nay, với sự phát triển của lĩnh vực Công nghệ Thông tin cùng với nhu cầu tiện dụng của con người đối với các sản phẩm của lĩnh vực đang rất phát triển này thì Website chính
là một giải pháp vô cùng hiệu quả để giải quyết các nhu cầu trên
Cùng với xu hướng phát triển của các phương tiện truyền thông như Báo, Radio… thì việc sử dụng Internet ngày càng phổ biến Truy cập Internet, chúng ta có được một kho thông tin khổng lồ phục vụ mọi nhu cầu, mục đích của chúng ta chỉ bằng một cái nhấp chuột Nhận thức được nhu cầu tìm hiểu thông tin, giải trí của xã hội, là sự ra đời của hàng loạt website cho các mục đích thương mại, giải trí, tin tức… Để đáp ứng với việc cập nhật thông tin hàng ngày, tình hình xã hội, chính trị, thời sự, và sức khỏe… thì website tin tức ra đời là một nhu cầu tất yếu
Sau bốn năm đào tạo ở trường, em muốn tìm hiểu quy trình làm việc thực tế và thử sức với các dự án thực tế nên em quyết định chọn Công ty Cổ phần Giải pháp Công nghệ TEGO GLOBAL để tiếp xúc và làm việc với một đội ngũ và quy trình chuyên nghiệp
Trang 3LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty TEGO đã 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 và giảng giải của các anh trainer, leader ở công ty, em đã làm quen và đã hoàn thành một vài dự án của công ty
Đặc biệt cảm ơn anh ???????, đã training kiến thức Javascript cũng như các framework,,
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ững khó
khăn việc làm quen với môi trường mới; cảm ơn chị ???????, đã training VueJS cũng như
ReactJS, giúp em làm quen và thuần thục các thư viện mới như Redux, VueX,… và các quy trình phát triển phần mềm như Agile, Scrum … để có thể hoàn thành các dự án của công ty Em xin chân thành cảm ơn toàn thể công ty đã tạo cho em một môi trường làm việc chuyên nghiệp cũng như giúp em phát triển được bản thân mình
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
Lê Trung Hiếu
Hồ Chí Minh, ngày 24 tháng 12 năm 2021
Trang 4NHẬN XÉT CỦA KHOA
Trang 5
MỤC LỤC
LỜI MỞ ĐẦU 2
LỜI CẢM ƠN 3
NHẬN XÉT CỦA KHOA 4
MỤC LỤC 5
CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 6
1 Giới thiệu công ty TEGO 6
2 Sản phẩm của công ty 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
3 Thực hiện project 10
4 Lịch làm việc 10
CHƯƠNG 3: CHI TIẾT DỰ ÁN – TEGO FINANCE 11
1 Giới thiệu về dự án Tego Finance 11
2 Kế hoạch 11
3 Giao diện chính: 12
TÀI LIỆU THAM KHẢO 17
TỔNG KẾT 18
Trang 6CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP
1 Giới thiệu công ty TEGO
Tego Global là một công ty công nghệ Outsource có trụ sở chính tại Thành phố
Hồ Chí Minh, Việt Nam Kể từ năm 2015, công ty đã giúp các công ty toàn cầu và các thương hiệu lâu đời phát triển hoạt động kinh doanh của họ bằng cách xây dựng các giải pháp hiệu quả được hỗ trợ bởi các công nghệ mới nhất
Sứ mệnh của công ty là ứng dụng công nghệ kỹ thuật số cho khách hàng của mình bằng cách tập hợp tài năng kỹ thuật hàng đầu, chuyên môn sâu trong ngành và
sự cống hiến cá nhân để đáp ứng nhu cầu kinh doanh riêng của từng khách hàng
2 Sản phẩm của công ty
Công ty chúng tôi nhận các dịch vụ phát triển web và di động ở mọi nơi Chúng tôi cung cấp dịch vụ quản lý dự án kỹ lưỡng và quy trình phát triển sản phẩm chuyên nghiệp cùng với đội ngũ phát triển nhiều kinh nghiệm và QA để đảm bảo chất lượng sản phẩm tốt nhất
Một số đối tác của công ty: CoverGo, BCMS Tech, ADORA, Golden Gate, …
Trang 7CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình Website giao hàng quốc tế” nhằm mục đích giúp sinh viên học tập thêm công nghệ mới như ReactJS, Redux, VueJS, VueX, quy trình phát triển phần mềm Agile/Scrum, giao tiếp với khách hàng nước ngoài
Thời gian: 1 ngày
Nội dung: Giới thiệu về công ty
Được người phụ trách giới thiệu về công ty, quá trình thành lập, phát triển của công ty, quy trình làm việc, các mentor, leader, làm quen với mọi người ở công ty
Thực tập sinh được hướng dẫn sử dụng các email, các dịch vụ của công ty để phục
vụ công việc
Kết quả : Hiểu thêm về công ty TEGO, 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.1 Các công cụ làm việc
Thời gian : 3 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, mentor sẽ 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ố công cụ cơ bản để phát triển phần mềm như Visual Studio Code, Git, Figma, npm, yarn, …
Ứng viên sẽ được mentor hướng dẫn sử dụng các công cụ quản lý quy trình phổ biến như Jira, Trello, Open Project…
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 hàm, các kỹ thuật cơ bản của Javascript
Thời gian : 10 ngày (2 tuần)
Nội dung : Được training về các kỹ thuật JAVASCRIPT nâng cao, những kiến thức
quan trọng cho việc tối ưu trên ReactJS
- Lập trình hướng đối tượng
Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình
Trang 8Thự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
- Sử dụng kiến thức của VueJS để chuyển design từ FIGMA sang HTML/CSS kết hợp với Javascript
Kết quả :
- Nâng cao kỹ năng lập trình với ngôn ngữ Javascript, cũng như thư ReactJS
- Có được những kiến thức quan trọng cho việc lập trình website 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 Lập trình website với ReactJS và Redux
Nội dung: Các kiến thức cơ bản về ReactJS
- Khái niệm cơ bản về ReactJS: React Js là một thư viện viết bằng javascript, dùng
để xây dựng giao diện người dùng (UI) React được sử dụng rộng rãi và có hệ sinh thái đa dạng phong phú UI tất nhiên là quan trọng, nhưng không phải là tất cả
- Phần chính của ReactJS là gì?
o Redux: Đây có thể gọi là một phần cực kỳ quan trọng đối với ReactJS và không một ai sử dụng mà không biết đến redux Trong một reactJS không bao gồm những module chuyên dụng để xử lý dữ liệu vì thế ReactJS được thiết lập một cách độc lập bằng việc chia nhỏ view thành các component nhỏ để chúng liên kết chặt chẽ với nhau hơn
o Sự liên kết và mối quan hệ giữa các component trong ReactJS cần được quan tâm đặc biệt là vì luồng dữ liệu một chiều từ cha xuống con là luồng
dữ liệu duy nhất trong một reactJS việc sử dụng luồng dữ liệu một chiều này có một chút khó khăn cho những người mới tìm hiểu sử dụng và ứng dụng vô các dự án tuy nhiên bên cạnh mặt hạn chế vẫn có mặt nổi trội đó chính là ReactJS sẽ phát huy được hết tất cả chức năng vai trò của mình khi
sử dụng cơ chế một chiều này vì nó sẽ làm cho các chức năng của view trở nên phức tạp hơn
Trang 9o Virtual Dom: đây là phần mà hầu như những Framework đều sử dụng Virtual dom và sử dụng nó như một ReactJS khi mà virtual dom thay đổi, điều đặc biệt ở đây là chúng ta không cần thao tác trực tiếp trên dom mà vẫn có thể thấy được view và thấy được những thay đổi đó
Thực hiện :
- Thực hiện các công việc chuyển design từ mockup sang HTML/CSS – JS
- 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 website với ReactJS và Redux
để quản lý store, state
2.4 Lập trình trên ReactJS
Nội dung : Các kỹ thuật tạo ra một website cơ bản, sử dụng ReactJS.
- Định nghĩa về Website:
o Website là một tập hợp các trang web (web pages) bao gồm văn bản, hình ảnh, video, flash v.v thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain) trên World Wide Web của Internet Trang web được lưu trữ (web hosting) trên máy chủ web (web server) có thể truy cập thông qua Internet
o Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP hoặc HTTPS Website có thể được xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động) Website có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,.NET, Java, Ruby on Rails )
- Tạo project ReactJS: Được các mentor hướng dẫn tạo ra một project cơ bản, cấu hình redux cho project
Thực hiện :
- Tìm hiểu và tự config được một project sử dụng thư viện ReactJs và Redux
Kết quả:
Trang 10- Đã có thể tạo ra được một project sử dụng thư viện ReactJs và Redux, kết hợp với một số thư viện design như Ant design, SCSS/SASS, Tailwind CSS
Sau 2 tuần đượ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ề Javascript, ReactJS và Redux
Chi tiết đồ án sẽ được nói ở phần sau
4 Lịch làm việc
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ị Nguyễn Thị Mỹ Duyên Anh Nguyễn Duy Tuấn Quang
100%
3-4
- Tìm hiểu ngôn ngữ lập trình Javascript
- Tìm hiểu ReactJS, Redux, Rest API, Easy-peasy
Anh Trần Phương Nam 100%
5-8 - Convert mockup to
Html/css – JS
Anh Trần Phương Nam 100%
9-12
- Integrate API
- Test during implementing, fix bugs
Anh Trần Phương Nam 100%
13-14
- UAT version
- Test during
Anh Trần Phương Nam 100%
Trang 1115-16 - Fix UAT issues
- Release project
Anh Trần Phương Nam Anh Nguyễn Duy Tuấn Quang
100%
CHƯƠNG 3: CHI TIẾT DỰ ÁN – TEGO FINANCE
1 Giới thiệu về dự án Tego Finance
giúp nhân viên có thể gửi yêu cầu ứng lương đến công ty chủ quản, từ đó, công ty có thể xác nhận/từ chối yêu cầu đó, giúp nhân viên có thể giải quyết vấn đề tài chính hiện tại nếu cần thiết Từ số lương được ứng, sẽ trích ra một phần hoa hồng cho công ty chủ quản
- Dự án sẽ phát triển theo hướng quản lý toàn bộ chi tiêu cho người sử dụng, người sử dụng có thể dùng tiền lương để thanh toán hóa đơn, trả các khoản
nợ được đặt lịch trước, nạp thẻ điện thoại …
2 Kế hoạch
2.1 Vai trò trong dự án: Front-end engineer, nhận yêu cầu từ anh Mentor (Trần
Phương Nam), design, và endpoint của api để tiến hành tích hợp theo yêu cầu.
2.2 Giai đoạn phát triển dự án:
2.2.1 Giai đoạn 1: Chuyển design từ Figma sang HTML/CSS:
- Hoàn thành toàn bộ UI cho dự án (UI chính ở mục 3.).
- Kết quả: Hoàn thành toàn bộ UI cho dự án (Mức hoàn thiện: 99%, dựa theo
design/mockup ở figma).
2.2.2 Giai đoạn 2: API Integration:
- Tìm hiểu các phương thức, config của axios.
- Tích hợp API được cung cấp bởi backend, tích hợp Easy-peasy để quản lý state cho dự án.
- Kết quả: Tích hợp toàn bộ API cho dự án, đồng thời kiểm thử dự án trong
quá trình tích hợp.
2.2.3 Giai đoạn 3: UAT
- Deploy web demo để tiến hành giai đoạn UAT
- Kết quả: Tiến hành sửa chữa các bugs có trong quá trình kiểm thử, cuối cùng sẽ
release phiên bản hoàn thiện
Trang 123. Giao diện chính:
3.1Màn hình đăng nhập:
Trang 133.2 Màn hình quên mật khẩu:
3.3 Màn hình chính:
Trang 143.4 Màn hình thông tin nhân viên:
3.4.1 Thông tin cơ bản:
Trang 153.4.2 Thông tin tài khoản ngân hàng:
3.5 Màn hình nhập số lương muốn ứng:
Trang 163.6 Màn hình xác nhận thông tin:
Trang 173.7 Màn hình báo thành công (ứng lương):
Trang 18TÀI LIỆU THAM KHẢO
For Main concepts of ReactJS, Redux:
- ReactJS
- Redux
- Easy-peasy
For API Integration:
- Axios
For design pattern:
- Ant design
- Chakra-UI
For css libraries:
- Tailwind css
Trang 19TỔNG KẾT
Như vậy, sau thời gian thực tập ở vai trò Front-end intern ở công ty Tego, em đã học hỏi được một quy trình phát triển sản phẩm một cách hoàn thiện với sự giúp đỡ của anh Trần Phương Nam và anh Nguyễn Duy Tuấn Quang đã giúp đỡ team để hoàn thành dự án
Qua quá trình thực tập trên, em đã được tiếp xúc với môi trường làm việc thực tế, tiếp xúc với các dự án thực tế, từ đó giúp nâng cao khả năng giao tiếp với khách hàng, nâng cao khả năng ngoại ngữ, khả năng quản lý công việc cũng như kỹ thuật lập trình
Em xin cảm ơn các thầy/cô khoa Công nghệ Phần mềm đã giúp em hoàn thành bài báo cáo này
Em xin chân thành cảm ơn