Báo cáo thực tập tốt nghiệp nashtech – công ty tnhh harvey nash việt nam

Với hơn 20 năm phát triển twi Việt Nam, NashTech tự hào đã xây dựng và đào two được hàng nghìn kỹ sư và chuyên gia tài năng người Việt, gópphần đưa Việt Nam lên bản đ| Công Nghệ Thông Ti

ỦY BAN NHÂN DÂN TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC SÀI GÒN KHOA CÔNG NGHỆ THÔNG TIN

Họ và tên sinh viên : Đoàn Trung Tín

BÁO CÁO THỰC TẬP TỐT NGHIỆP

Công ty thực tập: NashTech – Công ty TNHH Harvey Nash Việt Nam

Chuyên gia hướng dẫn : Đinh Lê Trà My

Giảng viên hướng dẫn : TS NguyEn QuGc Huy

TP Hồ Chí Minh, tháng 08 năm 2022

MỤC LỤC

NHẬN XÉT CỦA CHUYÊN GIA DOANH NGHIỆP 3

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 4

LỜI MỞ ĐẦU 5

CHƯƠNG 1 GIỚI THIỆU 6

1.1 GIỚI THIỆU CÔNG TY THỰC TẬP 6

1.2 NHIỆM VỤ THỰC TẬP 9

KẾT LUẬN CHƯƠNG 1 10

CHƯƠNG 2 QU/ TR1NH THỰC TÂ3P 11

KẾT LUẬN CHƯƠNG 2 37

CHƯƠNG 3: KẾT QUẢ THỰC TẬP 38

CHƯƠNG 4 KẾT LUẬN VÀ KIẾN NGHỊ 48

TÀI LIỆU THAM KHẢO 49

PHỤ LỤC 49

NHẬN XÉT CỦA CHUYÊN GIA DOANH NGHIỆP

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI MỞ ĐẦU

Ngành Công nghệ thông tin hiện nay là một trong những ngành mũi nhọn khôngchỉ ở Việt Nam mà ở trên toàn thế giới Mọi lĩnh vực trong đời sống đều có thể ứngdụng Công nghệ thông tin, từ kinh doanh đến tài chính, từ quản lý một cửa hàng nhỏđến quản lý cả một hệ thống trực thuộc chính phủ Một đất nước không có Côngnghệ thông tin sẽ rất khó phát triển vì nó hầu như có thể giải quyết các vấn đề mộtcách nhanh chóng và chính xác, giúp tiết kiệm thời gian của con người cũng nhưgiúp mọi thứ thuận tiện và dễ dàng hơn Chính vì điều đó, em chọn ngành Côngnghệ thông tin để học tập và định hướng công việc sau này.Ngày nay, khi mà Internetngày càng phát triển, thì các doanh nghiê 3p cũng dần chuyển các howt đô 3ng của mìnhlên nền tảng Website Đây là mô 3t hướng đi tuyê 3t vời cho tương lai vì những ưu điểmtuyê 3t vời về hiê 3u năng mà xu hướng này mang lwi Đ|ng thời em xin cảm ơn Tiến sĩNguyễn Quốc Huy – giảng viên trường Đwi học Sài Gòn khoa Công nghệ thông tin

và công ty NashTech đã two điều kiện cho em có cơ hội thực tập twi môi trường làmviệc thật sự, qua đó gặt hái được những kinh nghiệm và kỹ năng quý báu song hànhvới những kiến thức đã được học ở trường, cũng như tận tình giúp đỡ em hoàn thànhbáo cáo thực tập này Dĩ nhiên sẽ không thể tránh khỏi sai sót nhưng em sẽ cố gắngcải thiện và tiếp thu ý kiến từ mọi người để nâng cao giá trị bản thân

CHƯƠNG 1 GIỚI THIỆU

1.1 GIỚI THIỆU CÔNG TY THỰC TẬP

NashTech - Công ty TNHH Harvey Nash Việt Nam

Hình 1 Logo của công ty NashTech

Trụ sở chính: Etown 3, Level 3, 364 Cộng Hòa, phường 13, quận Tân Bình,

(United Kingdom), NashTech chuyên cung cấp Dịch vụ Phát Triển Xuất Khẩu Phần Mềm và Giải Pháp Quy Trình Doanh Nghiệp cho các đối tác trên khắp thế giới Với hơn 20 năm phát triển twi Việt Nam, NashTech tự hào đã xây dựng và đào two được hàng nghìn kỹ sư và chuyên gia tài năng người Việt, gópphần đưa Việt Nam lên bản đ| Công Nghệ Thông Tin và Giải Pháp Thuê Ngoài của thế giới Trong suốt quá trình howt động, NashTech đã đặt được nhiều thành tựu tiêu biểu như 13 năm liên tiếp đwt danh hiệu Sao Khuê, top 4 nơi làm việc tốt nhất Việt Nam trong lĩnh vực Công Nghệ Thông Tin, top 50 công ty hàng đầu ở lĩnh vực Công Nghệ Thông Tin twi Việt Nam và trở thành 1trong số ít các công ty trên thế giới đwt những chứng chỉ cao nhất về CMMi L5V2.0 và được chứng nhận là đối tác Vàng của Microsoft trên 7 mảng công nghệ chính.

Hình 2 Quá trình phát triển của NashTech qua các mốc quan trọng

Các quy trình của doanh nghiệp : Mô hình Scrum

- Scrum là một Framework về quy trình và quản lý giúp giải quyết các vấn đề phức

twp, nhưng vẫn đảm bảo tính hiệu quả, sáng two và sản phẩm được two ra phải đwtđược giá trị cao nhất Bản thân Scrum là một Framework đơn giản nhằm giúpviệc phối hợp hiệu quả nhất giữa các thành viên trong đội phát triển khi thực hiệnnhững sản phẩm phức twp Với Scrum, sản phẩm được xây dựng trên 1 chuỗi cácquy trình lặp lwi (gọi là Sprint) Các sprint diễn ra đều đặn, mỗi một sprint là cơhội để học hỏi điều chỉnh nhằm đwt được sự phù hợp và kết quả tốt nhất.

- Khi áp dụng Scrum, có 4 cuộc họp (Meetings or Ceremonies) quan trọng two nêncấu trúc trong mỗi Sprint như sau:

+ Sprint planning: Cuộc họp lên kế howch của đội dự án, nhằm xác định những gìcần hoàn thành trong Spring sắp tới

+ Daily stand-up: Cũng được biết đến như “Daily Scrum”, một cuộc họp nhỏ 15phút mỗi ngày để trao đổi công việc giữa team phát triển và team kiểm thử.+ Sprint demo: Một cuộc họp chia sẻ, nơi mà các thành viên chỉ ra những gì họ đãlàm được trong Sprint đó

+ Sprint retrospective: Sự đánh giá, nhìn lwi những điều đã làm được và chưa làmđược của Sprint hiện twi, và đưa ra giải pháp hành động cho Sprint tiếp theo đượctốt và hoàn thiện hơn

- Một nhóm phát triển Scrum thì sẽ có những thành phần hơi khác biệt so với môhình truyền thống Waterfall, với 3 vai trò sau:

+ Product Owner

+ Scrum Master

+ Development Team

Hình 3 Cấu trúc của team SCRUM

● Sinh viên được phân công thực tập ở bộ phận phát triển Website

● Thông tin ngắn về chuyên gia của doanh nghiệp hướng dẫn trực tiếp:

+ Họ và tên: Đinh Lê Trà My

+ Chức vụ: Senior Software Engineer

+ Email: mydinhlt1@nashtechglobal.com

● Những nội dung mà sinh viên cần học hỏi thêm khi thực tập twi doanh nghiệp: quytrình xây dựng một trang web, quy trình howt động của team theo mô hình SCUM,những kỹ năng mềm cần có khi tham gia các dự án

1.2 Nhiệm vụ thực tập

Sinh viên tham gia vào project có tên là Asset Management với vai trò Front-End Developer, sinh viên được cung cấp danh sách những kiến thức cần thiết tìm hiểu để nắm vững nền tảng trước khi bắt đầu vào project Asset Management được thiết kế đăng nhập thông tin nhân viên, quản lý nhân viên, quản lý các tài sản (asset), quản lýphần làm việc (assignment), báo cáo (report)

Nghiên cứu công nghệ Spring framework để phát triển ở back-end và ReactJs ở phát triển front-end

*Kết luận chương 1

Công ty NashTech là một doanh nghiệp tốt cho sinh viên thực tập vì đây được ứng

dụng quy trình Agile nhằm đem lwi sản phẩm tốt nhất cho thị trường Sinh viên đượctham gia vào các dự án thực tế để ứng dụng những gì đã được học ở trường vào môitrường doanh nghiệp, phát triển kỹ năng mềm của bản thân, học hỏi thêm nhiều kiếnthức cũng như kinh nghiệm từ chuyên gia doanh nghiệp.

CHƯƠNG 2 QUÁ TRmNH THỰC TÂnP

2.1 ToNG QUAN VÀ CÁCH QUẢN LÍ DỰ ÁN

2.1.1 Tpng quan dự án

 Tên dự án: Asset Management

 Description: Quản lí nhân viên, các dự án và các task trong công ty

 Ước lượng thời gian hoàn thành : 18/07/2022 – 17/08/2022

 Thành viên và vai trò trong dự án :

Tên thành viên Vai trò trong dự án

Đoàn Trung Tín Front-end Dev(ReactJs)

Lê Nhân Front-end Dev(ReactJs) và Back-and Dev(Java)Châu Văn Hậu Front-end Dev(ReactJs) và Back-and Dev(Java)Đinh Trọng Khánh Front-end Dev(ReactJs) và Back-and Dev(Java)Bùi Xuân Khôi Front-end Dev(ReactJs) và Back-and Dev(Java)

Hà Gia Phước Back-end Dev (Java)

 Mentor : Đinh Lê Trà My

 PM : Ngô Thị Hoàng Lan

 Quy trình phát triển dự án : Scrum

 Yêu cầu chức năng

Login Account -Cho phép đăng nhập, đăng xuất trong hệ thống, đổi

password khi lần đầu được login vào hệ thống.Manage User (quản lý User) -Admin có thể quản lý user với các tác vụ như thêm,

xóa, sửa, tìm kiếm, sắp xếp, xem chi tiết thông tin củanhân viên và các admin khác có trong hệ thống.Manage Asset(quản lí các tài

asset sau khi đã assign cho

nhân viên

- Admin có thể quản lý tất cả các asset của hệthống(laptop, màn hình, bàn phím, chuột, ) sau khi đãassign asset đó cho user hoặc là admin khác với cáctác vụ như two mới, xóa, sửa, tìm kiếm, sắp xếp, xemthông tin chi tiết thông tin của asset đã được assignđến admin/user trong hệ thống

Manage Request of Returning

(quản lý yêu cầu hoàn trả tài

sản)

-Admin có thể quản lý quá trình hoàn trả lwi asset(tàisản) mà công ty đã cấp (assign) cho một user/ adminnào đó có trong hệ thống

2.1.2 Quản lí dự án

2.1.2.1 Azure DevOps

Giới thiê 3u: Azure DevOps cung cấp dịch vụ dành cho các nhà phát triển để hỗ trợ

các dội ngũ lên kế howch làm việc, kết hợp phát triển code, cũng như xây dựng và triển khai các ứng dụng Các nhà phát triển có thể làm việc trên đám mây bằng cách

sử dụng Azure DevOps Service

Azure DevOps cung cấp một bộ tính năng tích hợp mà bwn có thể truy cập thông qua trình duyệt web hoặc ứng dụng IDE Bwn có thể sử dụng một hoặc nhiều dịch vụ dưới đây tùy thuộc vào nhu cầu kinh doanh mà các nhà phát triển đang cần :

 Azure Repos: cung cấp kho kiểm soát phần mềm Git hoặc Team Foundation Version

Control (TFVC) để kiểm soát ngu|n mã của bwn

 Azure Pipelines: cung cấp dịch vụ xây dựng và phát hành để hỗ trợ khả năng tích

hợp và chuyển giao liên tục ứng dụng của bwn

 Azure Boards: cung cấp một bộ công cụ Agile để hỗ trợ lập kế howch và theo dõi

công việc, các lỗi mã và nhiều vấn đề khác bằng phương pháp Kanban và Scrum

 Azure Test Plans: cung cấp một số công cụ để kiểm tra ứng dụng của bwn, bao g|m:

kiểm tra thủ công và kiểm tra liên tục

 Azure Artifacts: cho phép chia sẻ các gói Maven, npm và NuGet từ các ngu|n công

khai và cá nhân

 Các công cụ cộng tác bao g|m các dashboard có thể tùy chỉnh với các tiện ích có thểđịnh cấu hình để chia sẻ thông tin, tiến trình và xu hướng, thông báo cấu hình vànhiều tiện ích khác

Hình 4 Azure DevOps

2.2 CÀI ĐĂnT MÔI TRƯỜNG

2.2.1 Cài đă n t Visual Studio Code :

Sử dụng VsCode để làm IDE để xây dựng Front-end

Hình 5 Giao diê 3n cài đặt VsCodeChọn hệ điều hành tương thích với máy mà mình đang sử dụng, ở đây em chọn hệ điều hành Window.

2.2.2 Cài đặt trình duyệt để chạy localhost để test chương trình :

Về phần này thì chúng ta có thể chọn các trình duyệt để chwy ”http://localhost:3000/”

để test phần mà mình đang làm

2.2.3 Cài đă n t NodeJS :

Trong dự án này, team em chọn ReactJS để phát triển dự án ở Front-end

Hình 6 Cài đặt NodeJS

Sau khi cài đặt thành công thì ta sẽ có một file như hình, sau đó chúng ta mở ra và làm đầy đủ các bước.

Sau khi đã hoàn thành các bước thì chúng ta có thể kiểm tra phiên bản của NodeJS ở terminal như sau :

Hình 7 Kiểm tra phiên bản của NodeJS

2.3 GIỚI THIÊnU REACTJS

2.3.1 ReactJS là gì ?

- ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để xây dựng các tương tác với các thành phần trên website

- Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

Hình 8 Javascript và ReactJS

- Lợi ích của ReactJS :

+ Nhờ công nghệ mới Render trang web mà nó có tốc độ phản h|i nhanh chóngvới user, tối đa tốc độ, khả năng mở rộng cao và đơn giản

+ Hỗ trợ Reusable Component trong Java : React cho phép bwn sử dụngcomponents đã được phát triển thành các ứng dụng khác có cùng chức năng vàđưa ra hai khái niệm bao g|m : JSX và Virtual DOM

+ Hỗ trợ viết component dễ hơn : React component dễ viết hơn vì nó sử dụngJSX, mở rộng cú pháp tùy chọn cho Javascript cho phép kết hợp Javascript vàHTML.

+ Hiệu suất tốt hơn Virtual DOM : React sẽ cập nhật hiệu quả quá trình DOMtránh rắc rối trong các dự án ứng dụng dựa trên website Công cụ cho phép bwnxây dựng các virtual DOM và host chúng trong bộ nhớ, virtual sẽ thay đổi ngaylập tức mỗi khi có sự thay đổi trong DOM thực tế

+ Thân thiện với SEO : nhờ sự hỗ trợ của nó và trình duyệt cũng trả về dwng webpage trên Server và các Virtual DOM khi bwn chwy ReactJS

2.3.2 JSX là gì ?

- Trọng tâm chính của bất kì website cơ bản nào đó là những HTML documents Trìnhduyệt đọc những doccument này để hiển thị nội dung của website trên máy tính, tablet, điện thowi của bwn Trong suốt quá trình đó, trình duyệt sẽ two ra một thứ gọi làDocument Object Model (DOM) – một trê đwi diện cho cấu trúc website được hiển thị như thế nào Lập trình viên có thể thêm bất kì dynamic content nào vào những dự

án của họ bằng cách sử dụng Javascript để thay đổi cây DOM

Hình 9 DOM

- JSX (nói ngắn gọn là JavaScript extension) là một React extension giúp chúng ta

dễ dàng thay đổi cây DOM bằng các HTML-style code đơn giản Và kể từ lúc ReactJS browser hỗ trợ toàn bộ những trình duyệt web hiện đwi Hiện twi chúng ta

có thể sử dụng JSX trên bất kì trình duyệt mà mình đang làm việc

là những website thiên về xử lý các tưởng tác của người dùng nhiều, điều này sẽlàm ảnh hưởng performance website cực kì nghiêm trọng bởi vì toàn bộ cây DOMphải reload lwi mỗi lần người dùng nhấn vào tính năng yêu cầu phải tải lwi trang.

- Tuy nhiên, nếu bwn sử dụng JSX thì bwn sẽ giúp cây DOM cập nhật cho chínhDOM đó, ReactJS đã khởi two một thứ gọi là Virtual DOM(DOM ảo) VirtualDOM(bản chất của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó,

và ReactJS sử dụng bản copy đó để tìm kiếm đúng phần mà DOM thật cần cậpnhật khi bất kì một sự kiện nào đó khiến thành phần trong nó thay đổi(chẳng hwnnhư user nhấn vào 1 nút bất kỳ)

- Với việc cập nhật đúng chỗ như vậy, nó đã tiết kiệm cho chúng ta rất nhiều tàinguyên cũng như thời gian xử lý Ở các website lớn và phức twp như thương mwi

điện tử, đặt món ăn,….cho thấy việc này là vô cũng cần thiết và quan trọng để làmtăng trải nghiệm của khách hàng và performance được cải thiện đáng kể.

2.3.4 Ưu điểm của ReactJS?

- Phù hợp với đa dwng thể lowi website : ReactJS khiến cho việc khởi two website dễ dàng hơn bởi vì không cần phải code nhiều như khi two trang web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp đủ tiện ích để có thể dùng cho nhiều trường hợp

- Tái sử dụng các Component: Nếu bwn xây dựng các Component đủ tốt, đủ flexible để

có thể thỏa các ”yêu cầu” của nhiều dự án khác nhau, bwn chỉ tốn thời gian xây dựng ban đầu và sử dụng lwi hầu như toàn bộ ở các dự án sau

- Có thể sử dụng cho cả Mobile application : Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất thì nó có thể làm được nhiều hơn thế nữa Nếu muốn phát triển thêm ứng dụng Mobile thì có thể dụng thêm React Native – một framework khác được phát triển bởi chính Facebook

- Thân thiện với SEO : SEO là một phần không thể thiếu để đưa thông tin website của bwn lên top đầu tìm kiếm của Google Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScipt

- Debug dễ dàng : FaceBook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng Điều đó giúp tăng tốc quá trình release sản phẩmcũng như quá trình coding của bwn

- Công dụng phát triển web hot nhất hiện nay : Hiện nay theo như Google Trend ở ViệtNam hiện này thì các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, thìhầu như các doanh nghiệp đang tuyển ReactJS developer rất nhiều cho thấy mức độ

”hot” của framework này trên thị trường Công nghệ thông tin

Hình 11 ngu|n : Google Trend.

2.3.5 Component trong ReactJS?

- React được xây dựng xung quanh các component, chứ không dùng template nào như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần(component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trwng thái hoặc các thuộc tính khác nhau, trong một component lwi có thểchứa thành phần khác Mỗi component trong React có một trwng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trwng thái

- Mọi thứ trong React đều là component Chúng giúp bảo trì mã code khi làm việc với

cá dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiềumethods khả dụng khác, nhưng render vẫn là chủ đwo

2.3.6 Props và State?

- Props là một tham số được chuyển qua lwi giữa các React Components, các props nàyđược truyền qua các component với cú pháp giống như là HTML attributes

- State là một object mà lưu trữ giá trị của các thuộc tính bên trong components và chỉ t|n twi trong phwm vi của components đó Mỗi khi bwn thay đổi giá trị của một state thì component đó sẽ được render lwi

2.3.7 ReactJS Lifecycle?

-React cho phép chúng ta tham gia vào các giai đown của mỗi component bằng cách

sử dụng các phương thức được xây dựng sẵn trong mỗi giai đown đó Khi một components được khởi chwy thì nó sẽ phải trải qua 4 giai đown chính :

+ Initialization : Đây là giai đown mà thành phần sẽ bắt đầu hành trình của mình bằng cách khởi two state và props Được thực hiện ở trong contructor.+ Mounting : Giai đown này thực hiện sau khi quá trình innitialization(khởi two) được hoàn thành Nó thực hiện nhiệm vụ chuyển virtual DOM(DOM ảo) trong React thành DOM và hiển thị lên trình duyệt Component sẽ được render lần đầu tiên, ở đây chúng ta có hai phương thức ở giai đown này :

*componentWillMount() : Được khởi chwy khi một component chuẩn

bị được mount(tức là trước khi thực hiện render), sau khi thực hiện

componentWillMount() xong thì component mới có thể được mount

*componentDidMount() : Khi component đã được mount (render thànhcông), quá trình này xảy ra sau khi componentWillMount() thực hiện xong Trong phương thức này có thể gọi API, thay đổi state, props

+ Updating : Đây là giai đown thứ ba mà các component phải thực hiện, sau giai đown initialization, mount(render lần đầu), Trong giai đown này, dữ liệu của cácphần ( props và state) sẽ được cập nhật để đáp ứng với các sự kiện của người dùng như click, gõ, ở giai đown này có ba phương thức chính :

* shouldComponentUpdate() : Phương thức này xác định xem component có nên được render lwi hay không? Theo mặc định thì nó sẽ trả về true Nhưng bwn có thể thay đổi giá trị trả về của nó theo từng trường hợp Nó nhận hai tham số truyền vào là nextState và nextProps

* componentWillUpdate() : Phương thức này được gọi khi tiến hành re-render, có thể thực hiện các hành động như update state, update props, Trong phương thức này trước khi tiến hành re-render.Giống như

shouldComponentUpdate(), componentWillUpdate() cũng sẽ nhận hai tham số truyền vào là nextState và nextProps.

* ComponentDidUpdate() : Phương thức này được gọi khi component

đã re-render xong

+ Unmounting : Đây là bước cuối cùng trong mỗi component, khi tất cả các tác vụ hoàn thành và bwn tiến hành unmount DOM Quá trình này chỉ có duy nhất một phương thức đó là componentWillUnmount()

Hình 12 React Lifecycle

2.4 K•T QUẢ THỰC NGHIÊnM

Chqc năng đã xây dựng

 Login Account :

Hình 13 Giao diện đăng nhập

-Chức năng login của admin : thực hiện login với tài khoản là admin

Hình 14 Form Login của hệ thống