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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜ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 CP PT Phần Mềm Á Đông

ĐẠ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 CP PT Phần Mềm Á Đông

Người hướng dẫn: Võ Đăng Khoa

Sinh viên thực hiện: Hoàng Anh Dũng

Mã số sinh viên: 14520192

Tp Hồ Chí Minh, ngày 10 tháng 1 năm 2021

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

CP PT phần mềm Á Đông với nhiệm vụ Kỹ sư phần mềm (Reactjs Developer) với việc tham gia làm việc trong các dự án outsource 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

- Tài liệu tham khảo

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 10 tháng 1 năm 2021

Sinh viên thực tập

Hoàng Anh Dũng

LỜI CẢM ƠN CÔNG TY CP PT PHẦN MỀM Á ĐÔNG

đó 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 10 tháng 1 năm 2021

Sinh viên thực tập

Hoàng Anh Dũ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 Giới thiệu tổng quan về công ty CP PT phần mềm Á Đông

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

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

1.3 Cơ cấu tổ chức

1.4 Văn hóa công ty

2 Giới thiệu về công việc thực tập

2.1 Vị trí thực tập

2.2 Công việc thực tập

2.3 Yêu cầu đối với sinh viên thực tập

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

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

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

1.2.SourceTree

2 Giới thiệu về VSCode………

3 Vòng đời của ReactJS……….

4 UX/UI ReactJS và Layout………

5 Redux………

6 Redux Saga……….

7 Reselect………

8 Rjsx………

9 Sync and Async programming………

10 Agile Scrum………

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

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

2 Project Kaercher

2.1 Giới thiệu

2.2 Trách nhiệm trong dự án

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

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

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

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

PHẦN V TÀI LIỆU THAM KHẢO

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 CP PT phần mềm Á Đông

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

Tên công ty: Công ty CP PT phần mềm Á Đông

Địa chỉ: Tầng 5 tòa nhà Etown 1, 364 Cộng Hòa, Phường 13, Tân Bình, Hồ Chí Minh

Điện thoại: (+84) 28 3812 0101

Email: sales@orient software com

Địa chỉ Website: https://www.orientsoftware.net/

Công ty CP PT phần mềm Á Đông được thành lập vào năm 2005 với CEO

là chị Nguyễn Thị Tuyết Nhung cùng với các anh Oyvind Forsbak Ngày nay, Orient là một trong những công ty phát triển phần mềm lớn ở Việt Nam. Sau gần 10 năm cung cấp các giải pháp CNTT chuyên nghiệp, đội ngũ 100 chuyên gia CNTT lành nghề và giàu kinh nghiệm của Orient đã hợp tác để cung cấp các giải pháp phát triển phần mềm cho khách hàng với các doanh nghiệp vừa và nhỏ trên toàn thế giới. Danh sách khách hàng của chúng tôi tại Orient bao gồm các công ty từ các công ty mới thành lập, nóngbỏng cho đến các tập đoàn được thành lập tốt. Khách hàng của chúng tôi biết rằng sử dụng đội ngũ nhân viên chuyên nghiệp của chúng tôi cho nhu cầu CNTT giúp tăng thu nhập, xây dựng hoặc cải thiện các kênh truyền thông và đơn giản hóa các hoạt động

Tại Orient, chúng tôi biết rằng chúng tôi cần hiểu rõ về tổ chức công ty của bạn để cung cấp cho bạn các giải pháp CNTT hiệu quả, chất lượng hàng đầu phát triển theo nhu cầu của công ty bạn. Chúng tôi có thể cung cấp cho

bạn các giải pháp phần mềm cá nhân ở mọi quy mô vì chúng tôi biết cách

sử dụng sức mạnh của các công nghệ khác nhau và tích hợp chúng một cáchliền mạch

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

1.2.1 Phát triển ứng dụng mobile

CP PT phần mềm Á Đông tập trung chủ yếu phát triển các lĩnh vực sau:

 Android

 Phát triển ứng dụng máy khách / máy chủ Android

 Giải pháp kiểm tra thiết bị cầm tay Android

 Gửi ứng dụng lên Google Play Android Marketplace

 Phát triển ứng dụng phần mềm Android tùy chỉnh

 Phát triển ứng dụng đa phương tiện phong phú cho Android

 Cổng ứng dụng của bên thứ ba trên thiết bị Android

 IOS

 Phát triển ứng dụng IOS

 Phát triển ứng dụng GPS

 Phát triển trò chơi trên Iphone

 Phát triển ứng dụng web safari

 Phát triển ứng dụng mạng xã hội

Các project nổi bật như là Croozemode, Yappa App, Imageware App, Chit Chat English, Inspekt,…

1.2.2 Phát triển Web

CP PT phần mềm Á Đông tập trung chủ yếu phát triển các lĩnh vực sau:

• Backend tập trung vào NET, ASP.NET, PHP, JAVA,…

• Frontend framework công ty chủ yếu làm về AngularJs, ReactJs

Các project nổi bật như Penetrace, Skribenta & Finder, Kikora, Yuntaa,…

1.3 Cơ cấu tổ chức

Sơ đồ 1: Cơ cấu tổ chức công ty CP PT phần mềm Á Đông

1.4 Văn hóa công ty

- Nhân viên phải có mặt ở công ty trước 10:30 AM và check in bằng fingerprint Nếu đi làm sau 10:30 AM thì sẽ bị vắng buổi sáng làm việc

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

- Thời gian nghỉ trưa từ 12:00 PM đến 1:00 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

- Nhân viên được khuyến khích sử dụng tiếng Anh khi giao tiếp, trò chuyện trên Skype, Microsoft Team…

Giám Đốc

Trợ Lý Giám Đốc

Bộ phận

nhân sự Designer Bộ phận Developer Tech Bộ phận BA/QA

- Đồ ăn nhẹ, trà, cà phê, trái cây miễn phí cho tất cả nhân viên vào thời gian nghỉ ngơi.

- Vào thứ 4 cuối cùng của mỗi tháng có một buổi tiệc Happy Lunch sẽ được tổ chức, nhân viên tập trung lại 1 khu vực đã được chuẩn bị và thường thức bữa trưa cùng nhau

- Một buổi sinh nhật nhỏ cho tất cả các nhân viên hằng tháng

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 hoàn thiện

- Tìm hiểu về các nguyên 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

- Tham gia vào các dự án thực tế của công ty (KaercherNet Project)2.3 Yêu cầu đối với sinh viên thực tập

- Nắm được quy trình phát triển phần mềm và khả năng ứng dụng vào các dự án thực tế

- Có một dự án thực tế và phát triển web đó thành một web hoàn chỉnh

- Hiểu rõ các kiến thức, công nghệ cơ bản và nâng cao như ReactJS, Redux Saga, Reselect, Rjsx, Axios, Jest,…

- Sử dụng thành thạo các công cụ hỗ trợ đảm bảo chất lượng phần mềm

- 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

dự án

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

- Hoàn thành đầy đủ các task trong dự án do người hướng dẫn thực tập đưa ra

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

- Đảm bảo hoàn thành dự án theo đúng yêu cầu và thời gian quy định

- Đ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 40h/tuần và thực tập trong vòng 3 tháng

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

ST

1 - Tìm hiểu về Git và các tool

liên quan tới Git.

- Tìm hiểu SourceTree

Bùi Thanh Chính

Lương Trường An

7 - Alige/Scum Bùi Thanh Chính

8 - Jira và sử dụng Jira trong một

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.

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.

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ưuvới dạng snapshot

Git Flow

Git Branching

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

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

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

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:

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

3 Vòng đời Reactjs?

Một vòng đời sẽ có trạng thái như sau:

1) Initialization

 Tương tự hàm khởi tạo (constructor) được gọi đến khi một thể hiện của component được tạo ra.

Render()

 Được gọi khi hiển thị component ra ngoài trình duyệt

 Sẽ return về nội dung mà bạn đã viết, có thể là một component hoặc null hoặc là false (trong trường hợp không muốn render gì cả)

 Phải gọi setState() nếu muốn render lại.

shouldComponentUpdate(nextProps, nextState)

 Được thực hiện ngay sau khi state và props thay đổi

 sẽ trả về kết quả true or false Phương thức này sẽ xác định 1 component có được update hay không Mặc định giá trị này là true Nếu bạn không muốn component render lại sau khi update state hay props thì return giá trị thành false

componentWillUpdate(nextProps, nextState)

 Được gọi khi chúng ta update state của component trước khi nó render lại

 Bạn không thể gọi this.setState trong componentWillUpdate

 Hàm render sẽ được gọi ngay sau hàm này

 (từ phiên bản 16.3 thì hàm này không được khuyến khích dùng và sẽ bị loại

 Được gọi trước khi một component bị remove khỏi một DOM

4 UX/UI Reactjs và Layout

Ant Design of React

Ant (Github) là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng

https://ant.design/docs/react/introduce

Material-UI

Như tên gọi, Material-UI (Github) là tập hợp các components của React được thiết kế theo chuẩn Material Design của Google Với hơn 25+ components đượcxây dựng sẵn, cùng với khả năng tùy biến cao, cho phép thay đổi giữa hai theme Sáng/ Tối, Material-UI hứa hẹn đáp ứng cho tất cả dự án từ nhỏ đến lớn Hơn 34k stars được “đánh dấu” trên Github đã cho thấy mức độ phổ biến của thư viện này Material-UI sử dụng JSS để quản lý CSS

https://v0.material-ui.com/

Bootstrap 4

Bootstrap có lẽ không còn quá xa lạ với lập trình viên front-end nữa

React-Bootstrap (Github) là tập hợp các component của React-Bootstrap được xây dựng riêng cho React Đây là thư viện đơn giản cho React bootstrap 4 Với hơn 4k stars và gần

100 người đóng góp Nó là lựa chọn phổ biến rộng rãi cho fan của bootstrap

https://react-bootstrap.github.io/

5 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 Được dựa trên nền tảng tư tưởng của ngôn ngữ Elm kiến

trúc Flux do Facebook giới thiệu, do vậy Redux thường là bộ đôi kết hợp hoàn

hảo với React (ReactJs và React Native)

Nguyên lý của Redux:

Redux được xây dựng dựa trên 3 nguyên lý như sau:

 Trạng thái (state) của toàn bộ ứng dụng được lưu trong trong 1 store duy nhất là 1 Object mô hình tree