báo cáo thực tập lập trình WEB với REACTJS

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ------ BÁO CÁO THỰC TẬP DOANH NGHIỆP LẬP TRÌNH WEB VỚI REACTJS Nơi thực tập: Công ty TNHH Virtual Desi

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

- -

BÁO CÁO THỰC TẬP DOANH NGHIỆP LẬP TRÌNH WEB VỚI REACTJS

Nơi thực tập: Công ty TNHH Virtual Desire Event

Người hướng dẫn: Kiều Trí Đăng

Sinh viên thực hiện: Nguyễn Thanh Hoàng

Mã số sinh viên: 17520514

Tp Hồ Chí Minh, ngày 15 tháng 12 năm 2020

LỜI MỞ ĐẦU

Những năm gần đây, ngành công nghệ thông tin luôn phát triển với tốc độ cao ở Việt Nam đòi hỏi một nguồn nhân lực lớn Các công ty product cũng như outsourcing đều muốn tạo ra các sản phẩm chất lượng đến và mang đến trải nghiệm tốt nhất với khách hàng Chính vì thế, người chịu trách nhiệm đảm bảo chất lượng sản phẩm thông qua việc làm việc tương tác giữa các bên liên quan là rất cần thiết

Trong bài báo cáo này, tôi xin được trình bày về chương trình thực tập tại Công ty TNHH Virtual Desire Event với vị trí (Frontend Developer) với việc tham gia làm việc trên platform của công ty

Nội dung bài báo cáo gồm các phần sau

- Giới thiệu công ty và chương trình 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

LỜI CẢM ƠN KHOA CÔNG NGHỆ PHẦN MỀM TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

  

Em xin chân thành cảm ơn trường Đại học Công nghệ Thông tin và Khoa Công nghệ Phần mềm đã tạo điều kiện cho em hoàn thành tốt đợt thực tập doanh nghiệp Nhờ đợt thực tập này đã giúp cho em rất nhiều kinh nghiệm quý báu Những kinh nghiệm đó sẽ giúp em hoàn thiện hơn trong công việc và môi trường làm việc sau này

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 hoàn thành khóa thực tập doanh nghiệp

Mặc dù em đã cố gắng hoàn thành báo cáo 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 hoàn thành tốt bộ môn thực tập doanh nghiệp

Một lần nữa em xin chân thành cảm ơn !

Hồ Chí Minh, ngày 15 tháng 12 năm 2020

Sinh viên thực tập

Nguyễn Thanh Hoàng

LỜI CẢM ƠN CÔNG TY TNHH VIRTUAL DESIRE EVENT

  

Em xin chân thành cảm ơn Công ty TNHH Virtual Desire Event đã hỗ trợ, tạo điều kiện cho em được tham gia thực tập ở Công ty trong thời gian vừa qua

Em xin đặc biệt cảm ơn anh Võ Đăng Khoa, anh Bùi Thanh Chính, anh Lương Trường

An đã giúp đỡ, kèm cặp em trong suốt quá trình training và thực tập ở công ty Nhờ sự hướng dẫn của các anh đã giúp em có kinh nghiệm quý báu Những kinh nghiệm đó sẽ giúp em hoàn thiện hơn trong công việc và môi trường làm việc sau này

Mặc dù em đã cố gắng hoàn thành báo cáo 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ẻ và góp ý của công ty để báo cáo của em có thể tốt và hoàn thiện hơn

Một lần nữa em xin chân thành cảm ơn !

Hồ Chí Minh, ngày 15 tháng 12 năm 2020

Sinh viên thực tập

Nguyễn Thanh Hoàng

NHẬN XÉT (Của giảng viên)

Mục Lục

PHẦN I GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP 1

1 Giới thiệu tổng quan về Công ty TNHH Virtual Desire Event 1

1.1 Sơ lược về công ty 1

1.2 Nhiệm vụ, chức năng 2

1.3 Cơ cấu tổ chức 6

1.4 Văn hóa công ty 6

2 Giới thiệu về công việc 8

2.1 Vị trí 8

2.2 Công việc 8

2.3 Yêu cầu 8

2.4 Nhiệm vụ của sinh viên thực tập 8

2.5 Nội dung training trước khi làm việc được note lại trên notion 9

PHẦN II CÔNG NGHỆ, GIẢI PHÁP, QUY TRÌNH ÁP DỤNG 10

1 Giới thiệu về Git và Source Tree 10

1.1 Git 10

1.2 SourceTree 15

PHẦN III NỘI DUNG THỰC TẬP 21

1 Nhiệm vụ của sinh viên được giao 21

PHẦN IV KẾT LUẬN 22

1 Nhận xét đánh giá về doanh nghiệp và góp ý của sinh viên 22

1.1 Về quy mô công ty 22

1.2 Về môi trường làm việc 22

1.3 Về văn hóa công ty 23

2 Kinh nghiệm đạt được 23

1

PHẦN I GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP

1 Giới thiệu tổng quan về Công ty TNHH Virtual Desire Event

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

Tên công ty: Công ty TNHH Virtual Desire Event

Địa chỉ: 106 - 108 Bùi Đình Túy, Phường 12, quận Bình Thạnh, TPHCM Điện thoại: 1800 6872

Mã số thuế: 0313940971

VDEs - start-up chuyên về công nghệ, do chị Nguyễn Thị Xuân Ngọc (Ann Nguyễn) sáng lập và ra mắt vào tháng 2/2017 với mục tiêu đưa ứng dụng

VDES là công ty công nghệ, ứng dụng kĩ thuật tiên tiến vào ngành công nghệ sự kiện Bên cạnh đó, trang web www.VDES.vn là trang thương mại điện tử (e – commerce), tìm kiếm địa điểm và hỗ trợ khách hàng tổ chức sự kiện cùng với sự khác biệt chưa từng xuất hiện tại Việt Nam Đồng thời, VDES mong muốn trở thành một phương tiện kết nối hiệu quả với tất cả các đối tác dịch vụ tổ chức sự kiện tại Việt Nam và trên toàn thế giới

Khách hàng đặt dịch vụ tổ chức sự kiện (hội thảo, hội nghị, tiệc cưới…) qua VDEs sẽ tiết kiệm 80% thời gian và 30% chi phí trên tổng thể kế hoạch VDEs không thu bất cứ khoản phí nào đối với người dùng khi đặt địa điểm, dịch vụ, mà chỉ thu phí hoa hồng của đơn vị cung cấp dịch vụ khi hợp đồng được chốt Ngoài ra, thông qua các gói bảo hiểm, khách hàng và nhà cung cấp có ràng buộc chặt chẽ, tránh những rủi ro khi tổ chức sự kiện

2

1.2 Nhiệm vụ, chức năng

1.2.1 Phát triển nền tảng của công ty dành cho phía khách hàng

Thông qua trang website (VDES), công ty cung cấp một nền tảng trực tuyến thông qua tất cả các loại địa điểm và nhà cung cấp tạm thời (ví dụ như khách sạn, nhà hàng, hội trường tiệc cưới, trung tâm hội nghị, tiệm bán hoa, chỗ thuê đồ nội thất, trang trí sự kiện), có thể quảng cáo sản phẩm của họ cho việc đặt chỗ và thông qua đó khách hàng đến trang website để có thể đặt chỗ Bằng cách tạo một cái đặt chỗ qua VDES, bạn ký vào một hợp đồng trực tiếp (ràng buộc pháp lý) mối quan hệ với người tổ chức sự kiện mà bạn đặt chỗ Từ quan điểm này, bạn có thể đặt chỗ của bạn, công ty đóng vai trò như trung gian giữa bạn và nhà cung cấp, truyền tải những chi tiết thông tin cho việc đặt chỗ của bạn tới nhà cung cấp sự kiện và gửi cho bạn mail xác nhận để thay mặt và cho nhà cung cấp sự kiện

3

4

1.2.2 Phát triển nền tảng cho nhà cung cấp, đối tác

Thông qua trang website (VDES.vn/extranet), công ty cung cấp một nền tảng trực tuyến giúp đối tác của vdes có thể quản lý các sản phẩm, gói sản phẩm, ưu đãi, thông tin địa điểm, dịch vụ của họ thông qua vdes và được đăng tải trên trang vdes.vn Đang phát triển thành dạng module để bán cho doanh nghiệp sử dụng để quản lý công ty của họ

5

1.2.3 Phát triển nền tảng cho chính vdes dùng để quản lý

Thông qua trang website (VDES.vn/vsm), công ty cung cấp một nền tảng

trực tuyến các bộ phận trên công ty thực hiện các nghiệp vụ online, có 1 nền

tảng quản lý trực quan, tiện lợi

6

1.3 Cơ cấu tổ chức

Sơ đồ 1: Cơ cấu tổ chức Công ty TNHH Virtual Desire Event

1.4 Văn hóa công ty

- Nhân viên phải có mặt ở công ty trước 09:30 AM và check in bằng fingerprint Nếu đi làm trễ hoặc về sớm thì phải báo cáo ở channel xin_nghi_phep trên slack

Giám Đốc

Trợ Lý Giám Đốc

Bộ phận

nhân sự

Bộ phận Designer

Tech Developer

Bộ phận BA/QA

Bộ phận

kế toán

Bộ phận Marketing

7

- Thời gian làm việc từ thứ 2 đến thứ 7 và làm việc 40 tiếng 1 tuần tối thiểu 6 tiếng 1 ngày, thứ 7 tối thiểu 4 tiếng

- Thời gian nghỉ trưa từ 12:00 PM đến 1:30 PM, mọi nhân viên có thể

ăn trưa và ngủ trước khi bắt đầu công việc vào buổi chiều

- Mỗi tháng có tổ chức outing theo từng phòng, bộ phận sẽ được trưởng

bộ phận sắp xếp địa điểm outing, làm việc ở bên ngoài công ty

- Mỗi chiều 05:30 PM toàn công ty sẽ tham gia peer testing cho

platform của mình để hoàn thiện sản phẩm

- Mỗi sáng 09:45 AM mọi thành viên sẽ thực hiện report công việc của mình qua bot standup trên slack với 3 câu hỏi hôm trước làm gì, hôm nay làm gì, có stuck ở đâu không

- Tìm hiểu về quy trình làm việc, làm task, nghiệp vụ công ty

- Tham gia vào phát triển nền tảng của công ty (vdes.vn)

2.3 Yêu cầu

- Nắm được quy trình làm việc và tuân thủ đúng

- Hiểu rõ các kiến thức, công nghệ, công cụ cơ bản và nâng cao đang được sử dụng như NexJS, ReactJS, Mobx, Loopback 4, Axios, Eslint, Mongo, Nodejs, Airtable, Gitlab, Slack, Discord…

- Giao tiếp tốt và phối hợp làm việc hiệu quả với các thành viên trong công ty

2.4 Nhiệm vụ của sinh viên thực tập

- Hoàn thành đầy đủ các task trong được giao

- Thực hiện theo quy trình phát triển phần mềm của công ty

- Đi làm đúng giờ, số ngày trong tuần theo thỏa thuận với công ty Tối thiểu 20h/tuần và thực tập trong vòng 3 tháng

9 2.5 Nội dung training trước khi làm việc được note lại trên notion

10

PHẦN II CÔNG NGHỆ, GIẢI PHÁP, QUY TRÌNH ÁP DỤNG

1 Giới thiệu về Git và Source Tree

1.1 Git

Git là tên gọi của một Hệ thống quản lý phiên bản phân tán (Distributed

Version Control System – DVCS) là một trong những hệ thống quản lý phiên bản

phân tán phổ biến nhất hiện nay DVCS nghĩa là hệ thống giúp mỗi máy tính có thể

lưu trữ nhiều phiên bản khác nhau của một mã nguồn được nhân bản (clone) từ một kho chứa mã nguồn (repository), mỗi thay đổi vào mã nguồn trên máy tính sẽ

có thể ủy thác (commit) rồi đưa lên máy chủ nơi đặt kho chứa chính Và một máy

tính khác (nếu họ có quyền truy cập) cũng có thể clone lại mã nguồn từ kho chứa hoặc clone lại một tập hợp các thay đổi mới nhất trên máy tính kia Trong Git, thư

mục làm việc trên máy tính gọi là Working Tree Đại loại là như vậy

11

Mô hình hoạt động của DVCS

Ngoài ra, có một cách hiểu khác về Git đơn giản hơn đó là nó sẽ giúp bạn lưu lại các phiên bản của những lần thay đổi vào mã nguồn và có thể dễ dàng khôi phục lại dễ dàng mà không cần copy lại mã nguồn rồi cất vào đâu đó Và một người khác có thể xem các thay đổi của bạn ở từng phiên bản, họ cũng có thể đối chiếu các thay đổi của bạn rồi gộp phiên bản của bạn vào phiên bản của họ Cuối cùng là tất cả có thể đưa các thay đổi vào mã nguồn của mình lên một kho chứa mã nguồn

12

Cơ chế lưu trữ phiên bản của Git là nó sẽ tạo ra một “ảnh chụp” (snapshot) trên

mỗi tập tin và thư mục sau khi commit, từ đó nó có thể cho phép bạn tái sử dụng lại một ảnh chụp nào đó mà bạn có thể hiểu đó là một phiên bản Đây cũng chính

là lợi thế của Git so với các DVCS khác khi nó không “lưu cứng” dữ liệu mà sẽ lưu với dạng snapshot

Git Flow

13

14

Git Branching

15

1.2 SourceTree

SourceTree là một tool hỗ trợ quản lý Git version với giao diện dễ dùng

Kéo dự án về ( Clone project )

– Bạn click vào Clone/new một popup sẽ hiện ra

16

Lưu ý:

• Cách lấy source path/url

chỉ cần copy đoạn code trên paste vào Source Url sẽ tự sinh ở destination

path, nếu để tự sinh thì nó sẽ được lưu vào thư mục mặc định nên bạn cần thay đổi

lại đường dẫn Destination Path trỏ vào một thư mục rỗng( bạn phải chắc chắn thư

mục đó là rỗng ) Sau đó click vào clone lúc này thư mục cho dự án đã được kéo về máy tính cá nhân của bạn Ở các máy thành viên khác cũng làm tương tự

Đẩy code lên( push code )

Đây là việc cần thiết khi có sự thay đổi trong source code, trước khi push được bắt

buộc phải click vào unstaged files và comment -> click vào push trên toolbar của

source tree Việc làm này phải được thực hiện thường xuyên khi có sự thay đổi về code để người quản lý có thể quản lý được công việc cũng như là các thành viên khác có thể nắm bắt được sự thay đổi

17

18

Kéo code về( pull code )

Cũng giống như Push code lên tuy nhiên việc bây giờ chỉ là lấy code về bao gồm

những thay đổi mà thành viên khác đã push lên Bạn chỉ cần click vào Pull ở

trên toolbar của source tree

Lưu ý:

– Nếu có nhiều người cùng thay đổi trên 1 file và cùng một chỗ thì chắc chắn bạn

sẽ bị conflict và việc pull hoặc Push code lên sẽ báo lỗi và không thực hiện được Dấu hiệu nhận biết lỗi Conflict sẽ xuất hiện dòng lỗi sau:

1

2

3

Auto-merging hello.html

CONFLICT (content): Merge conflict in hello.html

Automatic merge failed; fix conflicts and then commit the result

19

2 Giới thiệu về VSCode

Visual Studio Code là sản phẩm của Microsoft, ra mắt vào tháng 4 năm 2015 ở

hội nghị Build Đặc điểm nổi bật là đơn giản, gọn nhẹ, dễ dàng cài đặt Visual Studio Code có thể cài đặt được trên cả Windows, Linux và Mac OS và hỗ trợ nhiều ngôn ngữ

Giao diện ban đầu:

20

Nhìn sang thanh sidebar ta thấy 4 biểu tượng, đầu tiên là hai tờ giấy xếp chồng lên nhau, đây là cây thư mục chứ những file mà chúng ta đang làm việc Hình chiếc kính lúp hỗ trợ chức năng tìm kiếm Một điểm đặc biệt là Visual Studio Code được tính hợp luôn git, rất tiện cho việc quản lý code của chúng ta

Biểu tượng thứ 4 là diệt con bọ, chính là chức năng hỗ trợ chúng ta fix bug Hình vuông cuối cùng là nơi cho phép chúng ta cài thêm các phần extensions mà

Microsoft và cộng đồng viết thêm cho chúng ta

21

PHẦN III NỘI DUNG THỰC TẬP

1 Nhiệm vụ của sinh viên được giao

- Hoàn thành 122 task trong thời gian 3 tháng

22

PHẦN IV KẾT LUẬN

1 Nhận xét đánh giá về doanh nghiệp và góp ý của sinh viên

1.1 Về quy mô công ty

Công ty TNHH Virtual Desire Event có quy mô gần như 1 công ty gia đình nhưng đã kết nối, hợp tác, ký kết với gần 1000 đối tác là các doanh

nghiệp khác và không ngừng phát triển qua từng thời kỳ Các bộ ph

1.2 Về môi trường làm việc

Công ty TNHH Virtual Desire Event nhìn chung giống như một đại gia đình,

số lượng nhân viên ở tầm tương đối (~100 nhân viên) nên mỗi thành viên

23

trong công ty rất thân thiện, biết quan tâm và giúp đỡ lẫn nhau Điều này tạo điều kiện thuận lợi cho các thành viên trong công ty có thể hỗ trợ lẫn nhau, tạo cảm giác thoải mái cho nhân viên làm việc trong công ty

Bên cạnh đó, do công ty có số lượng nhân viên không quá lớn nên các xung đột ít khi hoặc hầu như không xảy ra Điều này tạo điều kiện tốt cho mối quan hệ giữa các thành viên trong công ty, giúp các thành viên gắn bó và thân thiết với nhau, có thể san sẻ công việc cho nhau, tạo điều kiện cho công

ty ngày càng phát triển

1.3 Về văn hóa công ty

Tuy công ty chỉ nằm gọn trong 2 tầng lầu trong tòa nhà của mình

Mỗi nhân viên có một không gian làm việc riêng khá thoải mái Khi cần thiết các nhân viên có thể trao đổi dễ dàng với nhau, tìm ra cách hiệu quả nhất để đạt được mục đích công việc Khi cần có thể book lịch họp với nhau

để tìm ra giải pháp tốt nhất

Mỗi tuần công ty họp ngắn 1h giúp toàn công ty nắm được tình hình, tiến độ công việc, nghiệp vụ của công ty qua báo cáo của từng trưởng bộ phận

2 Kinh nghiệm đạt được

- Qua thời gian thực tập ở công ty, tôi đã nắm được các kiến thức cơ bản và vài nâng cao liên quan đến công việc của một lập trình viên ReactJS

- Làm việc trong dự án production cũng như nền tảng, sản phẩm chính của công ty với vai trò là một ReactJS developer trong mô hình Kanban, tôi đã học được nhiều điều về quá trình làm ra một sản phẩm phần mềm thực sự Không chỉ đảm bảo chất lượng phần mềm mà còn giúp sản phẩm tốt hơn về

cả chất lượng và quy trình

- Được trở thành nhân viên chính thức của công ty sau kì thực tập và đủ khả năng làm việc trong các dự án thực tế khác của công ty