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 DOANH NGHIỆP

LẬP TRÌNH WEB VỚI REACTJS

Cơng ty thực tập

: CTY TNHH HITIME

Người Hướng Dẫn

: Đinh Xuân Lộc

Thực tập sinh

: Cao Hà Minh Quyết

Mã số sinh viên

: 14520750

TP. Hồ Chí Minh, tháng 7 năm 2020

1


LỜI MỞ ĐẦU

Ngày nay, mạng xã hội đã trở thành một món ăn tinh thần khơng thể thiếu trong cuộc
sống của hơn hai tỷ người trên toàn thế giới. Sự bùng nổ của mạng xã hội trong những năm gần
đây đã thay đổi đáng kể cách sống và làm việc của nhiều người. Mạng xã hội đã trở thành công
cụ rất hữu ích đặc biệt là cho mục đích bán hàng. Các mạng xã hội đáp ứng nhiều mục đích
khác nhau, nhưng chưa cung cấp các tính chuyên biệt cho mục đích bán hàng cũng như chưa có
hệ thống nào tại thị trường Việt Nam hỗ trợ việc bán hàng, quản lý các kênh bán hàng từ nhiều
mạng xã hội.
Với những lý do trên, ứng dụng Doopage đã được xây dựng bởi công ty TNHH Hitime
với mong muốn tạo ra hệ thống ứng dụng DooPage tất cả trong một, hỗ trợ đa nền tảng, đa kênh
bán hàng, cung cấp các tính năng cho mục đích bán hàng, hỗ trợ bán hàng trên các mạng xã hội
phổ biến, nhằm giúp việc tư vấn, hỗ trợ, bán hàng trở nên thuận tiện, dễ dàng hơn.
Nội dung bài báo cáo gồm các phần sau
-

Giới thiệu công ty thực tập

-

Báo cáo nội dung thực tập

-

Kinh nghiệm thực tiễn thu được

-

Những đóng góp cho cơng ty

-


Tài liệu tham khảo.

2


LỜI CẢM ƠN
KHOA CÔNG NGHỆ PHẦN MỀM
VÀ CÔNG TY CỔ PHẦN HITIME

Em cũng xin cảm ơn quý thầy cô trong khoa đã tận tình giảng dạy và trang bị cho em
những kiến thức cần thiết. Chính những kiến thức này hỗ trợ em rất trong việc hồn thành khóa
thực tập doanh nghiệp. Tuy nhiên sẽ có những thiếu sót, rất mong nhận được sự thông cảm, chia
sẻ của quý thầy cơ để giúp em hồn thành tốt bộ mơn thực tập doanh nghiệp.
Trân trọng gửi lời cảm ơn Công ty Cổ phần Hitime đã 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 của các anh chị trong cơng
ty, nhóm thực tập em đã tiếp thu được những kiến thức quan trọng để có thể làm được một số
chức năng nhỏ trong dự án Doopage. 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 chúng em hoàn thành đợt thực tập này.

TP HCM, ngày 20 tháng 7 năm 2020
Sinh Viên Thực Tập

Cao Hà Minh Quyết

3


NHẬN XÉT CỦA KHOA


.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................

4


Mục Lục
Mục Lục........................................................................................................................................................................5
PHẦN I: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP....................................................................................................6
PHẦN II: NỘI DUNG THỰC TẬP.............................................................................................................................8
PHẦN III: CHI TIẾT VỀ DỰ ÁN..............................................................................................................................11
PHẦN IV: TÀI LIỆU THAM KHẢO........................................................................................................................31

5



PHẦN I: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP

1. Giới thiệu tổng quan về công ty cổ phần Hitime
1.1

Sơ lược về công ty.

Tên công ty: Công Ty Cổ phần Hitime
Địa chỉ: 373/9 đường âu Cơ, tổ 09, khu phố 1, Phường Phú Trung, Quận Tân Phú,
Thành phố Hồ Chí Minh
Điện thoại: 0903725050
Kể từ khi thành lập năm 2017, Hitime đã trở thành công ty dịch vụ CNTT đang
phát triển tại Việt Nam. Được thúc đẩy bởi niềm đam mê và làm việc chăm chỉ, Hitime
giúp khách hàng xây dựng các doanh nghiệp mạnh hơn, nhanh nhẹn và sáng tạo hơn.
Là một tổ chức được xây dựng trên các nền tảng có sẵn, HiTime mang cơng nghệ
tới gần bạn với phương châm đơn giản hóa cho khách hàng sử dụng, giải pháp của chúng
tôi là làm sao để mang lại cho khách hàng có kết quả cơng việc Kinh doanh.

1.2 Văn hóa của cơng ty
- Nhân viên phải có mặt ở công ty trước 9:00 AM và kết thúc ngày làm việc
vào 6:00 PM.
6


- Thời gian làm việc từ thứ 2 đến thứ 6,
- Thời gian nghỉ trưa từ 12:00 PM đến 1:00 PM, nhân viên có thể ăn trưa và
ngủ trước khi bắt đầu công việc buổi chiều.


2. Giới thiệu về công việc thực tập
2.1 Vị trí thực tập
Sinh viên thực tập tại vị trí React.js Developer Intership.
2.2 Cơng việc thực tập

- Tìm hiểu về quy trình phát triển phần mềm
- Tìm hiểu về các chuyên đề phát triển một ứng dụng web hồn thiện.
- Tìm hiểu về các ngun tắc code.
- Tìm hiểu về các cơng cụ hỗ trợ đảm bảo chất lượng phần mềm
2.3
STT

Lịch thực tập cụ thể

Thời gian

Công việc

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.

Đinh Xuân Lộc

2


-

Làm quen với các công cụ làm

Đinh Xuân Lộc

việc trong cơng ty.
3

-

Tìm hiểu về HTML, CSS

-

Thực hành và làm các bài Test

4

-

Tìm hiểu về Javascript

5

-

Tìm hiểu về ReactJS


-

Thực hành và làm các bài test

-

Tìm hiểu về Redux

-

Tìm hiểu về React Native

6
7

7

Đinh Xuân Lộc

Đinh Xuân Lộc
Đinh Xuân Lộc

Đinh Xuân Lộc
Đinh Xuân Lộc


8

Đinh Xuân Lộc


-

Dự án Doopage

-

Hiển thị thông tin channel
( list zalo, list sendo) cập nhật,
xóa

PHẦN II: NỘI DUNG THỰC TẬP
Tìm hiểu và làm việc với ReactJS, quy trình agile nhằm mục đích giúp sinh viên thực tập
được đào tạo tồn diện về lập trình front-end, đồng thời rèn luyện kỹ năng mềm như làm việc
nhóm, thuyết trình, giao tiếp.

1.Tìm hiểu công ty Hitime.
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,
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 Hitime, q trình thành lập và phát triển. 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: 2 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, được anh Lê Tường Lâm hướng dẫn sử dụng các công cụ làm
việc của công ty như: ứng dụng chat của công ty (Slack), theo giõi dự án
(pm.Hitime.net), quản lý dự án (git.Hitime.net), lịch làm việc (erp.Hitime.net).
Kết quả: Hiểu được các công cụ làm việc của cơng ty.
2.2 Tìm hiểu về HTML, CSS, JAVASCRIPT
Thời gian: 5 ngày (1 tuần)
8


Nội dung: Được anh Đinh Xuân Lộc training các kiến thức cơ bản về html, css,
javascript để có thể làm ra một trang web đơn giản.
-

Khái niệm cơ bản về html.
• HTML là viết tắt của Hyper Text Markup Language
• HTML mơ tả cấu trúc của một trang Web
• HTML bao gồm một loạt các yếu tố
• các phần tử HTML cho trình duyệt làm thế nào để hiển thị nội dung
• các phần tử HTML được đại diện bởi thẻ
• thẻ HTML nhãn mẩu nội dung như "tiêu đề", "đoạn", "bảng", và vân vân
• Trình duyệt khơng hiển thị các thẻ HTML, nhưng sử dụng chúng để làm cho
nội dung của trang.
Nắm được các khái niệm cơ bản và kiến thức quan trọng để phát triển các chức
năng trong dự án.

-

Khái niệm cơ bản về css:


-

CSS là viết tắt của Cascading Style Sheets

-

CSS mô tả cách các phần tử HTML sẽ được hiển thị trên màn hình, giấy, hoặc các
phương tiện khác

-

CSS giúp tiết kiệm rất nhiều công việc. Nó có thể kiểm sốt cách bố trí của nhiều
trang web cùng một lúc

-

Stylesheets bên ngoài được lưu trữ trong file CSS

-

Khái niệm cơ bản về javascript.
Là các phép biến đổi vertex, color để cho ra những hiệu ứng đặc biệt. Việc này
được thực hiện trong pipeline, từ phiên bản OpenGL 2.0 trở đi.

Thực hiện:
-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành như thiết kế một trang web tin tức.
Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

9


Kết quả:
-

Hiểu được những khái niệm cơ bản trong lập trình web.

2.3 Tìm hiểu về ReactJS
Thời gian: 15 ngày (3 tuần)
Nội dung: Được training về ReactJS.
- State:
Là thành phần của component, giá trị của component, một button màu xanh là một
trạng thái, màu đỏ là một trạng thái. Tương tự như component jsx cũng có trạng
thái, có thể quản lí nó bằng state.
- Props:
Là dữ liệu truyền cho đối tượng. Thường thì là thằng cha truyền cho thằng con.
- Redux:
Redux JS là một thư viện Javascript giúp tạo ra thành một lớp quản lý trạng thái
của ứng dụng. Redux có 4 thành phần chính là: store, views, actions, reduces.
• Store: Là nơi quản lí trạng thái (state), có thể truy cập để lấy trạng thái của
state.
• Actions: Nó là 1 pure object định nghĩa 2 thuộc tính lần lượt là type: kiểu
của action.
• Reducers: Khác với action có chức năng là mơ tả những thứ gì đã xảy ra,
nó khơng chỉ rõ state nào của response thay đổi, mà việc này là do reducers
đảm nhiệm, nó là nơi xác định state sẽ thay đổi như thế nào, sau đó trả ra
một state mới.
• View: Hiển thị dữ liệu được cung cấp bởi Store.
- Hook

• Hook là một bổ sung mới trong React 16.8
• Hook là những hàm cho phép bạn “kết nối” React state và lifecycle vào các
component sử dụng hàm.
• Với hooks thì có thể sử dụng state và lifecycle mà không cần dung ES6
class.
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 với ReactJS.
Có được những kiến thức quan trọng cho việc lập trình front-end sau này.

10


2.4 Tìm hiểu về React Native
Thời gian: 10 ngày (2 tuần)
Nội dung: Được training về react native
•

Khả năng tái sử dụng code và các components đã được phát triển sẵn.

•

Có một cộng đồng developers hùng hậu.

•


Tiết kiệm khi có thể code 1 mà có thể run cho cả ios và android.

Components là một khái niệm cơ bản của cả react và react native. Chính việc chia nhỏ
ứng dụng thành các components nhỏ tạo nên tính tái sử dụng cao và khả năng mở rộng
của chúng.
Flex Là thành phần để mở rộng hoặc thu nhỏ linh hoạt dựa trên không gian có sẵn.
thơng thường sẽ sử dụng flex: 1, thơng báo cho một thành phần lấp đầy tất cả khơng
gian có sẵ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 kiến thức đã học.
Kết quả:
- Nâng cao kỹ năng lập trình với React native.

PHẦN III: CHI TIẾT VỀ DỰ ÁN
1.Giới thiệu web máy trống
Máy trống là 1 công cụ mô tả âm thanh của dàn trống bằng máy. Ngày nay thì nó
đã hiện đại hơn nhiều khi mơ tả được nhiều âm thanh hơn và là công cụ không thể thiếu
cho các loại EDM.

11


1.1 Phác họa giao diện web

12


1.2 Khởi tạo web


Chỉnh ở tsconfig.json ở “noImplicitAny”: true, thành “noImplicitAny”: false,. Chỉnh tương tự ở
noUnusedLocals.

1.3 Component transport
Cài đặt thư viện Tone.js: npm install — save tone
Code cho Component transport:

Đặt 1 instrument trong 1 transport và đặt transport trong app và thử:

13


1.4 Tạo bộ máy âm:
Bộ kick
Vì Tone.js cung cấp cho chúng ta API và nên chỉ cần viết như sau:
var AudioParam = AudioParam.exponentialRampToValueAtTime(value, endTime)

Như vậy, ta sẽ có:

14


Quay lại component transport:

15


1.5 Vòng lặp:
Sửa lại để lập lại số lần kick trong 1 bài hát:


Component InstumentHack:

16


Sau đó cập nhật lại Instrument

17


1.6 Các component Steps :
Step để bài hát không lặp đi lặp lại 1 nhịp

-

Step lẻ :

-

Step để gom những step lẻ:

18


Sửa lại transport:

19


Kết quả:


1.7 Sửa đổi các Component:
Instrument Hack:

Thêm method:
20


areEqual = (a, b) => {
a.forEach((item, index) => {
if(item !== b[index]) return false
}
return true;
}

21


1.8 Tạo nút Play/ Pause:

Lấy Transport.start và đặt vào 1 method của TransportComponent:

22


23


1.9 Thêm các nhạc cụ khác:
Tạo render cho các loại nhạc cụ:


24


Snare:

25