BÁO CÁO THỰC TẬP Lập trình Front – end

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể tham gia vào khóa training cũ

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

Lập trình Front – end

Công ty thực tập: NCC Plus Viet Nam Người phụ trách: Bùi Minh Thái

Thực tập sinh: Phạm Ngọc Anh Tín

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

LỜI MỞ ĐẦU

Ngày nay, ngành phát triển ứng dụng web, mobile là một bộ phận không thể thiếu của ngành công nghiệp phần mềm Với tốc độ phát triển vô cùng mạnh mẽ và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm

Cùng với sự phát triển của thế giới, Việt Nam cũng không phải ngoại lệ Ngành công nghiệp phát triển web đã và vẫn đang phát triển mạnh mẽ, để hoà nhập với toàn cầu Các công

ty lớn có thể kể đến như VNG, Tiki, NCC, FPT, KMS,…

Ngành lập trình web, đặc biệt trong thời đại 4.0 như hiện nay càng trở nên phát triển Và giới trẻ như chúng em sẽ là nguồn nhân lực quan trọng trong quá trình phát triển đó Vì lí do này, em quyết định chọn lập trình web - cụ thể là ở mảng frontend làm định hướng cho việc học

và làm việc của mình sau này

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia làm game trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập sau tết 2022 Vì vậy, em quyết định chọn NCC Plus Việt Nam - một môi trường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty NCC Plus Việt Nam đã 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 nhóm trainer, nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể tham gia vào khóa training cũng như các dự án để có thể có những kinh nghiệm trong việc phát triển và vận hành các chương trình phần mềm đặc biệt là về phía mảng front – end Chân thành cảm ơn các anh chị trong nhóm trainer đã 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

Đặc biệt cảm ơn anh Bùi Minh Thái, đã training phần front-end angular, 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ị , đã cho em cơ hội để tham gia vào dự án, tích lũy thêm

kinh nghiệm, cảm ơn anh Nguyễn Lê Linh , đã chỉ dẫn chúng em về cách sống, những kỹ năng không thể thiếu khi làm việc trong công ty; cảm ơn các anh Trịnh Đức Đại, đã training cho chúng em những kiến thức quan trọng về Next.js để có thể làm ra một sản phẩm trong thời gian qua

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

<Phạm Ngọc Anh Tín>

< TpHCM, ngày 15 tháng 5 năm 2022>

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 1

Chương 1: Giới thiệu công ty thực tập 2

1 Giới thiệu về công NCC Plus Viet Nam 2

2 Sản phẩm của công ty 2

Chương 2: Nội dung thực tập 3

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 3

2 Nghiê

n cứu kỹ thuật 3

3 Thực hiện project 7

4 Lịch làm việc 7

Chương 3: Chi tiết về project 9

1 Giới thiệu về Website 9

2 Thực hiện 11

3 Kế

hoạch 11

TÀI LIỆU THAM KHẢO 13

TỔNG KẾT 14

Chương 1: Giới thiệu công ty thực tập

1 Giới thiệu công ty NCC Plus Viet Nam

NCC Plus Việt Nam là một mạng lưới các kỹ sư phần mềm được kết nối, trẻ trung

và đầy nhiệt huyết Công ty có trụ sở tại Hà Nội, Việt Nam và được thành lập bởi 4

kỹ sư phần mềm giàu kinh nghiệm và nhiệt huyết vào năm 2014-09-01

Là một đội ngũ chuyên gia lành nghề trong lĩnh vực phát triển phần mềm NCC Plus

sử dụng niềm đam mê của mình với các nhà phát triển để cung cấp các ứng dụng phần mềm tốt nhất Với sự kết hợp của công nghệ, bí quyết và giao tiếp tuyệt vời, họ

có thể tạo ra các giải pháp hoàn chỉnh cho khách hàng của mình

Mục tiêu: Trở thành công ty phần mềm hàng đầu và nhà cung cấp dịch vụ gia công

phần mềm Xây dựng mối quan hệ lâu dài với khách hàng của chúng tôi và cung cấp dịch vụ khách hàng đặc biệt với các giải pháp sáng tạo và công nghệ tiên tiến

2 Sản phẩm của công ty

NCC Plus Việt Nam cung cấp dịch vụ thuê ngoài để phát triển web , thiết bị di động và trò chơi Chúng tôi là chuyên gia về NET và Java và cung cấp dịch vụ dành riêng cho nhà phát triển cho C / C ++, JAVA , NET, PHP và thiết bị di động

Chương 2: Nội dung thực tập

Đợt thực tập với chủ đề “Lập trình Front-end” nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện về lập trình giao diện web, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá

và làm việc trong một môi trường phát triển chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

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, quá trình thành lập và phát triên (như đã nhắc đến ở trê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

Ngoà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 NCC Plus, 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 Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc

Thời gian : 4 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, supervisor đã 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ố phần mềm trong số đó như Open VPN GUI- sử dụng trong làm việc hoặc truy cập các trang web của công ty, GIT–Lập trình Git, Visual studio code - một chương trình dùng trong phát triển ứng dụng rất hữu ích và phổ biến với lập trình viên

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 ngôn ngữ Angular

Thời gian : 1 tháng (6 tuần)

Nội dung : Được training về các kỹ thuật về ngôn ngữ Angular cơ bản và nâng cao,

những kiến thức quan trọng cho việc tối ưu code hoặc clean code

- Components

Các kiến thức cơ bản về Components trong angular Câu lệnh dùng để tạo

components trong angular ng generate component + name Một file components

trong angular bao gồm:

 <component-name>.component.ts: sử dụng typescript

 <component-name>.component.html

 <component-name>.component.css

 <component-name>.component.spec.ts

- Directives :

Là các lớp bổ sung cho các hành vi bổ sung cho các thành phần trong ứng dụng của angular

 Components

 Attribute directives

 Structural directives

- Modules :

- Dependency Injection :

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 ngôn ngữ Angular

- Có được những kiến thức quan trọng cho việc lập trình ứng dụng web 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 Timesheet App

Nội dung: Áp dụng các kiến thức cơ bản về Angular để có thể làm ra một app đơn

giản

- Khái quát về app

Timesheet app là một ứng dụng dùng để quản lý những công việc đang làm trong thời gian phát triển của dự án

Ở đây, trainer yêu cầu timesheet phải quản lý được các project có trong timesheet

có thể thêm, xóa, sửa hoặc yêu cầu cập nhật nếu cần thiết Ngoài ra còn có thể quản lý được các task trong timesheet

- Giai đoạn khởi đầu:

Bắt đầu lên kế hoạch phân chia công việc để có thể hoàn thành project Timesheet đúng hạn Khởi đầu với những kiến thức cơ bản của Angular và sử dụng HTML

và SASS để có thể tạo ra UI cho project Timesheet Tìm hiểu các thư viện hỗ trợ cho công việc tạo ra các thiết kế vừa mắt nhìn cho project, các công cụ hỗ trợ làm việc như Visual studio code

- Chọn thư viện hỗ trợ:

Sử dụng thư việc hỗ trợ cho các thiết kế là Angular material Thư viện này chứa những components có sẵn có thể áp dụng ngay khi cài đặt Project timesheet bao gồm các Form như Add Form, Update Form,… và để có thể quản lý được các Form này hay validate form chúng ta phải dùng đến thư viện Form Builder của angular

- Lifecycle Hooks in Angular

Một thành phần trong angular khi khởi tạo đều có lifecycle ở các lớp, các components và nó có tính năng phát hiện thay đổi, vì Angular kiểm tra xem khi nào các thuộc tính có dữ liệu thay đổi và cập nhật chúng sau đó có thể cho chúng

ta thấy sự thay đổi ở view của các components Lifecycle kết thúc khi phá hủy chúng ngOnInit(), ngOnDestroy() là 2 thành phần cơ bản của một lifecycle

- Sharing Data between child and parent

Trong angular chúng ta có thể truyền dữ liệu từ các components cha vào các components con hoặc ngược lại nhờ cơ chế @Input() và @Output()

Parent to child:

Child to parent:

- Directives

.Là các lớp bổ sung cho các hành vi bổ sung cho các thành phần trong ứng dụng của angular

o Built–in directives là các thành phần dùng để xây dựng nên phần view cho Angular, bao gồm: ngClass (thêm hoặc xóa các thuộc tính trong lớp CSS), ngStyle (tùy chỉnh trực tiếp giao diện trên HTML), ngModel (Two-way binding)

o Attribute directives là các thành phần thay đổi giao diện hoặc hành vi của các phần tử DOM và các thành phần trong angular bằng thuộc tính như

o Structural directives là các thành phần cung cấp các câu lệnh như if else, hoặc vòng lặp có thể thay đổi bố cục DOM bằng cách thêm hoặc xóa phần

tử DOM bao gồm: ngIf, ngFor, ngSwitch…

- Dependency Injection

Dependency là services hoặc objects mà các class cần để biểu thị các function mà

nó chứa Dependency Injection (DI) là một mẫu thiết kế trong đó có một lớp yêu cầu đến dependency thay vì tạo một thêm

- Pipes

Pipes là các hàm đơn giản để sử dụng trong template expressions để chấp nhận một giá trị đầu vào và trả về một giá trị đã được chuyển đổi

Thực hiện :

- Áp dụng các kiến thức cơ bản của Angular để có thể xử lý các logic bên trong project

- Đọc thêm các tài liệu trên mạng, học trên youtube để có thể có thêm nhiều kiến thức mới hơn về Angular …

- Tìm kiếm các câu hỏi và các câu trả lời ở trên mạng

Kết quả :

- Sau 1 tháng thực tập đã có thể làm được Timesheet app bằng angular

- Timesheet có các chức năng mà trainer yêu cầu tuy không giống 100% nhưng vẫn

đã hoàn thành

2.4 Reactjs / nextjs

Nội dung : Học thêm các ngôn ngữ mới như Reactjs và next.js

- Về React:

React là một thư viện Javascript để xây dựng giao diện người dùng Nó cho phép bạn tạo ra các UI qua các components

- Về Next:

Next.js là một framework của React nó cung cấp cho người dùng build UI của một trang web một cách nhanh chóng, dễ dàng

Chúng ta có thể sử dụng React để xây dựng các giao diện người dùng sau đó áp dụng từng bước các tính năng của Next.js để giải quyết các yêu cầu ứng dụng phổ biến như routing, integrations, data fetching,… để cải thiện những yêu cầu về mặt

UI thì next,js là một lựa chọn không tồi khi có thể kết hợp với cả tailwind để style cho giao diện

- Lập trình một số ứng dụng với React và next.js

Theo như sự hướng dẫn của trainer, mỗi ngôn ngữ mới, mỗi framework mới em từng tiếp xúc thì phải làm ra một app nhỏ để có thể hiểu được cách sử dụng cũng như nắm thêm được kiến thức Do đó, trong quá trình thực tập khi được tiếp xúc với những thư viện của javascript hay framework của react thì em đã tiến hành tạo

ra một app cơ bản dễ sử dụng nhất đó là todo – app để có thể áp dụng được kiến thức cũng như học thêm những cách áp dụng mới để có thể có kinh nghiệm sử dụng trong các dự án sau này

Thực hiện :

- Mỗi tuần đều sẽ report những gì mình đã làm được cho trainer và tiến độ công việc đã và đang hoặc chưa hoàn thành

- Tạo ra những ứng dụng cơ bản để có thể áp dụng những kiến thức đã học

Kết quả:

- Đã có thể nắm được những thứ cơ bản của ngôn ngữ mới nhưng vẫn thiếu kinh nghiệm trong những khâu xử lý liên quan đến UI hay logic

3 Thực hiện project

Sau hai tháng đượ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ề Angular, React, next.js Trong tháng thứ ba, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project web của công ty

Vì do là dự án của công ty nên chỉ có thể sơ lược một số thứ em làm được trong đây Chi tiết những gì em đã làm được sẽ được báo cáo chi tiết ở phần sau

độ hoàn thành

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ị Nhung

100%

2

- Tìm hiểu ngôn ngữ Angular

- Thực hiện tạo một

số app đơn giản như todo – app để áp dụng kiến thức

Anh Bùi Minh Thái

3

- Tìm hiểu về Angular material

UI để áp dụng tạo

UI cho app timesheet

Anh Bùi Minh Thái

4

- Bắt đầu code UI và

xử lý các logic cơ bản như Sign in và Sign up

Anh Bùi Minh Thái

5 - Tiếp tục code

timesheet app

Anh Bùi Minh Thái

6

- Hoàn thành những chức năng cơ bản của Timesheet app

và fix một số bug

- Học cách áp dụng clean code vào trong Timesheet app

Anh Bùi Minh Thái

7 - Tiếp tục fix các lỗi

và cải thiện

Anh Bùi Minh Thái

Timesheet App

- Hoàn thành Timesheet app

- Bước sang giai đoạn mới, bắt đầu với React và next.js

8

- Làm một số app đơn giản để áp dụng kiến thức đã học

- Báo cáo tiến độ công việc và sẵn sàng để tham gia vào dự án

Anh Bùi Minh Thái

9

- Tham gia vào dự án của công ty

- Sẵn sàng với các kiến thức đã được học để có thể áp dụng vào dự án

- Bắt đầu làm UI đơn giản cho dự án

Anh Trịnh Đức Đại

10

- Tiếp tục code Front-end cho dự án trong công ty

- Tìm hiểu thêm nhiều cách để có thể

xử lý UI một cách mượt mà

- Nhận Task làm phần Register của dự án

Anh Trịnh Đức Đại

11

- Hoàn thành task Register của dự án

- Chuyển sang nhận

Anh Trịnh Đức Đại

Chương 3: Chi tiết về project

1 Giới thiệu về project Timesheet

1.1 Kế hoạch

Như đã nói ở trên phần giới thiệu về ngôn ngữ Angular Sau khi training ngôn ngữ Angular theo yêu cầu của trainer, em đã bắt đầu tham khảo các giao diện cơ bản của app Timesheet mà trainer đã cung cấp

Giai đoạn khởi đầu:

- Hoàn thành các giao diện của Timesheet như đăng nhập, đăng ký

- Sử dụng Back-end server có sẵn do trainer cung cấp gọi API Login

- Hoàn thành Login UI và đã có thể lấy được accessToken

- Tạo giao diện Homepage cơ bản để redirect khi login success

- Áp dụng Auth guard để xử lý login failed

- Áp dụng protected router trong Angular khi không login

Kết quả:

- Hầu hết các xử lý logic cơ bản đều đã hoàn thành

Giai đoạn quản lý task:

- Hoàn thành giao diện quản lý task

- Hoàn thành các thao tác cơ bản CRUD của task

Kết quả:

- Đã hoàn thành hầu hết những gì trainer yêu cầu

Giai đoạn quản lý project:

- Hoàn thành các giao diện của phần quản lý project

- Có thể filter, search theo tên project