HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA AN TOÀN THÔNG TIN
---------
BÁO CÁO
THỰC TẬP TỐT NGHIỆP
Đơn vị thực tập: Công Ty Cổ Phần Nccplus Việt Nam
Giảng viên hướng dẫn: TS. Đinh Trường Duy
Sinh viên thực hiện: Bùi Minh Hoàng
Mã sinh viên: B18DCAT096
Lớp: B18CQAT04-B
Hà Nội 2022
LỜI MỞ ĐẦU
Thực hiện nhiệm vụ học tập của nhà trường trong đợt thực tập tốt nghiệp, được
sự đồng ý của ban lãnh đạo Khoa đào tạo và công ty NccPlus. Trong quá trình thực tập
em đã được trau dồi thêm kiến thức về lập trình FontEnd cũng như cơ cấu và tình hình
hoạt động của công ty.
Được sự tận tình giúp đỡ hướng dẫn của PM anh Bùi Minh Thái cùng với sự giúp
đỡ của giáo viên hướng dẫn Ts.Đinh Trường Duy và nỗ lực trong học tập, tìm tòi học
hỏi, em đã hoàn thành báo cáo thực tập tốt nghiệp của mình.
Báo cáo này gồm 2 phần chính:
-
Phần I: Báo cáo thực tập tại công ty
-
Phần II: Báo cáo kết quả công việc
Trong quá trình thực hiện báo cáo, tuy đã cố gắng nhưng em vẫn còn những hạn
chế về thời gian tìm hiểu, kiến thức cũng như là kinh nghiệm và vẫn còn nhiều sai sót.
Em rất mong được nhận những ý kiến đóng góp và nhận xét của các thầy cô và ban lãnh
đạo khoa để em có thể hoàn thiện hơn.
2
LỜI CẢM ƠN
Để hoàn thành được báo cáo thực tập tốt nghiệp này thì em xin cảm ơn tới phía
ban lãnh đạo Công Ty Cổ Phần Nccplus Việt Nam đã tạo điều kiện cho em được thực
tập tại đây. Ngoài ra, em cảm ơn anh Bùi Minh Thái đã luôn nhiệt tình chỉ dẫn, giảng
dạy cho em những kiến thức về FontEnd để em có thể hoàn thiện hơn.
Em xin gửi lời cảm ơn tới ban lãnh đạo Học viện, Khoa đào tạo đã thiết lập khung
chương trình có môn học “Thực tập” để em có thể vận dụng những kiến thức học được
trên giảng đường áp dụng vào công việc và được tham quan, tìm hiểu về môi trường
doanh nghiệp.
Em xin gửi lời cảm ơn sâu sắc và chân thành tới giảng viên hướng dẫn TS. Đinh
Trưởng Duy. Nhờ thầy luôn dìu dắt, giúp đỡ và chỉ bảo tận tình cho em để hoàn thành
tốt Thực tập.
Em xin chân thành cảm ơn!
Hà Nội, ngày 10 tháng 8 năm 2022
Sinh viên thực hiện
Bùi Minh Hoàng
3
NHẬN XÉT KẾT QUẢ THỰC TẬP
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
.................................................................................................................................
4
MỤC LỤC
LỜI MỞ ĐẦU ......................................................................................................................................... 2
LỜI CẢM ƠN ......................................................................................................................................... 3
NHẬN XÉT KẾT QUẢ THỰC TẬP ..................................................................................................... 4
PHẦN I: BÁO CÁO THỰC TẬP TẠI CÔNG TY ................................................................................. 6
CHƯƠNG I: TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP .......................................................................... 6
1.Giới thiệu về đơn vị thực tập ............................................................................................................ 6
2. Công việc, nhiệm vụ được giao....................................................................................................... 6
CHƯƠNG II: NỘI DUNG THỰC TẬP ................................................................................................. 7
1.Tìm hiểu về công ty và kỹ năng sử dụng git cơ bản......................................................................... 7
2. Tìm hiểu hiểu các kiến thức căn nâng cao về TypeScript ............................................................... 8
2.1 TypeScript Data Type ............................................................................................................... 8
2.2 TypeScript Advanced Type ....................................................................................................... 9
3. lập trình web với Angular v14 ........................................................................................................ 9
3.1 Giới thiệu về Angular: ............................................................................................................... 9
3.2: Component ............................................................................................................................. 10
3.3:Binding .................................................................................................................................... 10
3.4:To-way binding ....................................................................................................................... 10
3.5.Xử lý sự kiện ........................................................................................................................... 10
3.5.ngModule ................................................................................................................................ 10
3.7.Service ..................................................................................................................................... 11
3.8.Router ...................................................................................................................................... 12
PHẦN II: BÁO CÁO KẾT QUẢ CÔNG VIỆC ................................................................................... 13
CHƯƠNG III: BÁO CÁO KẾT QUẢ CÔNG VIỆC ĐƯỢC GIAO .................................................... 13
1 Mô tả công việc được giao: ............................................................................................................ 13
2 Cấu trúc thư mục: ........................................................................................................................... 13
3 Hình ảnh minh chứng kết quả ........................................................................................................ 14
KẾT LUẬN CHUNG ............................................................................................................................ 16
TÀI LIỆU THAM KHẢO ..................................................................................................................... 16
5
PHẦN I: BÁO CÁO THỰC TẬP TẠI CÔNG TY
CHƯƠNG I: TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP
1.Giới thiệu về đơn vị thực tập
- Tên đơn vị: Công ty Cổ Phần NCCPLUS Việt Nam.
- Tên viết tắt: NCC
- Văn phòng HN1: Tầng 5 Tòa Ecolife, số 58 Tố Hữu, quận Nam Từ Liêm, Hà
Nội
- NCC là một mạng lưới các kỹ sư phần mềm được kết nối, trẻ và đầy nhiệt huyết.
Công ty chúng tôi 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.
2. Công việc, nhiệm vụ được giao
Thực hiện tìm hiểu framewok Angular qua việc hoàn thiện bài tập todo App.
Bên cạnh đó thực sử dụng các công cụ như git , devops . Thực hiện các yêu cầu,
sửa đồi của PM khi được review code.
6
CHƯƠNG II: NỘI DUNG THỰC TẬP
Sau khi trải qua 6 tuần được học tập và làm việc tại công ty. Em đã học được
rất nhiều kiến thức về lập trình FontEnd web. Đợt thực tập với chủ đề lập trình
Font-end web với Angular framework nhằm mục đích giúp sinh viên ứng dụng
những kiến thức được học ở trường của mình vào thực tiễn, tìm hiểu và sử dụng
những công nghệ được sử dụng tại công ty. Đồng thời rèn luyện những kỹ năng
như tư duy, làm việc nhóm, thuyết trình, giao tiếp.
Tại công ty, sinh viên phải chấp hành các quy định của công ty như nhân
viên chính thức, sinh viên có cơ hội được phép sai và sửa sai, được các anh chị đi
trước review code và khắc phục những lỗi sai cơ bản như đặt tiên biến, sử dụng
any không hợp lý, frommat trước khi nộp, code chứa consolog ...
1.Tìm hiểu về công ty và kỹ năng sử dụng git cơ bản
- Thời gian: 1 ngày
- Nội dung : giới thiệu về công ty, các quy định phải chấp hành của công ty, đọc
tài liệu về việc sử dụng git căn bản
+ Được nghe chị HR giới thiệu về công ty, các cơ sở khác của công ty, các phòng
ban, các khu làm việc của các phòng ban đó.Thực tập sinh được được giới thiệu
về các quy định làm việc và văn hóa của công ty như: thời gian làm việc, quy định
xin nghỉ, công cụ làm việc giao tiếp chủ yếu ( discord) , quy định về việc tăng
level, văn hóa tập thể dục trước mỗi buổi chiều,…
+ Đọc các kiến thức về git : tạo repository, tạo branch, push , xử lý conflict trong
khi merge
+Áp dụng: tạo một nhánh chính cho riêng mình từ nhánh master. Tạo nhánh phụ
theo feature . Pull code sau mỗi ngày làm việc. Thực tập sinh sẽ được review code
sau mỗi cuối tuần hoặc khi xong 1 chức năng được yêu cầu
7
2. Tìm hiểu hiểu các kiến thức căn nâng cao về TypeScript
- Thời gian : 4 ngày ( 1 tuần)
- Nội dụng: đọc tài liệu và xem các video hướng dẫn về TypeScript nâng cao
2.1 TypeScript Data Type
- TypeScript là gì? : TS là một superset của JavaScript (JS). Khi các bạn cài đặt
TS vào hệ thống của mình, các bạn sẽ có quyền truy xuất đến được 1 Command
Line Interface (CLI) gọi là TypeScript Compiler (tsc). Nhiệm vụ của tsc chính là
compile code TS về JS để trình duyệt (hoặc runtime environment như NodeJS) có
thể hiểu và xử lý được.
- Lợi ích của TS: TS giúp developers phát triển phần mềm một cách tường minh
hơn với những type definition mà TS cũng như các thư viện dùng cho TS cung
cấp. Với khả năng áp dụng tính thừa kế với những syntax quen thuộc trong OOP
như: abstract, class, và type parameter <T>, TS giúp developers có thể phát triển
ứng dụng một cách nhanh, tường minh, chính xác, dễ bảo trì và mở rộng hơn.
- Các Default Types :
let someString: string;
let someNumber: number;
let someBoolean: boolean;
let something: any; // có thể gán sang cho bất kỳ kiểu dữ liệu nào khác
let someStringArray: string[ ]; // tương tự cho number[ ], boolean[ ], any[]
let someObject: object;
let someNull: null;
let someUndefined: undefined;
let someUnknown: unknown;
let someNever: never; // ví dụ như một hàm throw exception
let someTuple: [string, number];
let someVoidFunction: () => void; // một hàm không trả về giá trị gì sau khi thực thi
let someFunction: () => string; // một hàm trả về giá trị có type "string" sau khi thực
thi
8
- Interface/Type: TS cung cấp Interface và Type để có thể định nghĩa
được type cho một đối tượng (object) Interface và Type trong nhiều trường hợp
có thể sử dụng qua lại được. Tuy nhiên, nên chọn 1 trong 2 và giữ chuẩn này trong
toàn bộ dự án của mình.
- Generics : Generics là một trong những tính năng cực kỳ tốt mà TS mang
lại. Generics sẽ giúp viết code theo hướng Abstraction dễ dàng hơn, theo sát
hơn SOLID Principles (SOLID)
2.2 TypeScript Advanced Type
- Union Type : là những types mang tính chất: EITHER OR (tạm dịch là Hoặc cái
này Hoặc cái kia). Để viết Union Type, chúng ta dùng Pipe Symbol (|).
- Intersection Type là type mà kết hợp nhiều type lại với nhau. Nói cách
khác, Intersection Type là type có tính chất: AND.
- Conditional Type : có mặt trong TS từ version 2.8 và có thể nói đây là một trong
những tính năng nổi bật nhất của TS. Conditional Type, đúng như tên gọi của nó,
giúp cho chúng ta có thể tạo ra những type theo điều kiện. Điều này dẫn đến 1 hệ
thống type cực kỳ linh hoạt (robust) mà TS mang lại cho người dùng.
3. lập trình web với Angular v14
- Thời gian : 5 tuần
- Nội dung : tìm hiểu các kiến thức cơ bản về angular qua việc hoàn thiện bài tập
todo.
3.1 Giới thiệu về Angular:
Angular là một javascript framework do google phát triển để xây dựng các
Single Page Application (SPA) bằng JavaScript , HTML và TypeScript . Angular
cung cấp các tính năng tích hợp cho animation , http service và có các tính năng
như auto-complete , navigation , toolbar , menus ,… Code được viết bằng
TypeScript , biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt.
9
3.2. Component
Components là một khối code trong app Angular. Nó là sự kết hợp của bộ
template html và nhúng kèm code TypeScript (hoặc Javascript). Các components
là độc lập với nhau và độc lập với hệ thống. Nó có thể được cài vào hoặc tháo ra
khỏi hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình
hiển thị, gồm giao diện html và code logic xử lý sự kiện đi kèm control đó. Một
component cũng có thể to lớn như là cả 1 màn hình chứa nhiều control hoặc một
nhóm nhiều màn hình. Tức là là một component cũng có thể chứa và gọi được
nhiều component khác nối vào.
3.3. Binding
Angular có cách code Binding (kết nối giữa html và data) dữ liệu theo kiểu 2
chiều, nghĩa là html input thay đổi thì biến javascript sẽ ngay lập tức nhận được
giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html
thay đổi theo.Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng
2 dấu ngoặc nhọn {{TenBien}}.
3.4. To-way binding
Từ khóa ngModel lúc này không phải là thuộc tính html mà nó là từ khóa của
Angular. Khi chúng ta viết [(ngModel)] chúng ta sẽ gắn chặt giá trị của input html
với biến title.Dẫn đến người dùng gõ vào ô input thì thẻ h1 sẽ nhận giá trị tương ứng
của title.
3.5. Xử lý sự kiện
Để gắn 1 sự kiện của control html với một hàm javascript. Khi chúng ta muốn
(click) tức là muốn bind sự kiện click chuột của người dùng ở control này gọi là goBack().
3.5. ngModule
10
Module là một khái niệm rộng nhất của Angular. Một module có thể bao gồm
chứa các components, directives, pipes, v.v.
Module có thể được biên dịch (compile) dưới dạng ahead-of-time (AoT).
Nghĩa là biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời
gì từ đầu. Hãy tưởng tượng component có html và js viết riêng, khi load trang thì
2 thứ này mới nhào nặn chung để hiển thị html+data lên màn hình. AoT là thứ
html+data đã nhào sẵn.
Module cũng có thể gọi module con và bắt tay được với các module khác.
3.7. Service
Để tạo ra một service thì chúng ta cần import và mô tả một class với từ
khóa @injectable lấy từ @angular/core module.
Nếu muốn dùng chung service mà không muốn khao báo nhiều lần,component nào
cũng phải tiêm nó vào.Thì lúc này có thể khai báo service ở phần providers của
component hoặc module
11
3.8. Router
- Router Outlet :Mỗi một Router sẽ có một URL để load component. Và để biết
được là component sẽ render ra chỗ nào thì chúng ta viết đoạn code sau vào khung
html cần chèn.
- Cài đặt Route cho ứng dụng Angular: Để cài đặt toàn bộ Router cho một ứng
dụng Angular thì chúng ta cần tạo ra một đối tượng JSON chứa các thuộc tính như
sau:
path: Đường dẫn URL của component hiện tại.
component: Ứng với đường dẫn bên trên thì load component nào.
redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng. Ví
dụ, khi người dùng gõ URL linh tinh, chúng ta muốn chuyển hướng và load trang
Home hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Home hoặc 404 vào
redirectTo.
pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào. khi giá trị là full
thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong bộ JSON
Router. Còn khi giá trị là prefix thì chuỗi đầu tiên của url (dấu sược đầu tiên) sẽ
được kiểm tra. Mặc định nếu không nói gì thì prefix sẽ được chọn.
12
PHẦN II: BÁO CÁO KẾT QUẢ CÔNG VIỆC
CHƯƠNG III: BÁO CÁO KẾT QUẢ CÔNG VIỆC ĐƯỢC GIAO
1 Mô tả công việc được giao:
- TodoApp: sử dụng Angular Framewok
- Với các chức năng như thêm sửa xóa
- Sử dụng Reactive Form
- Filter các trạng thái: All/Completed/Active
- Đếm số lượn cho mỗi trạng thái . Ví dụ All: 3 active items / 10 items; Completed:
7 completed items / 10 items, Active: 3 active items / 10 items.
-Chỉ sử dụng scss không sử dụng các thư viện như Material, NgZorro...
-Thêm thời gian cho mỗi Items. Thông báo khi đến hạn trước 1h
-Giao diện đẹp
-BE: gọi aip mockapi của bạn
2 Cấu trúc thư mục:
Hình 1: cấu trúc thư mục todoApp
13
3 Hình ảnh minh chứng kết quả
Hình 2: giao diện todoApp
Hình 3: chức năng thêm todo
14
Hình 4: lọc và đếm todo theo fillter
Hình 5: chức năng thông báo theo thời gian
15
KẾT LUẬN CHUNG
Sau 6 tuần thực tập tại công ty , em đã hoàn thành tất cả các yêu cầu được
giao qua đó nắm được cơ bản về Angular.
Trong quá trình thực tập, có rất nhiều những khó khăn khi tìm hiểu một kiến
thức mới.Em đã tìm hiểu qua tài liệu được công ty cung cấp kết hợp với tự tìm
hiểu trên internet, tích cực hỏi các anh chị đi trước để có thể giải đáp được rất
nhiều những vấn đề được đưa ra. Đây là nền tảng để em tìm hiểu sâu hơn về
Angular và các Framewok khác để phục vụ cho công việc sau này.
TÀI LIỆU THAM KHẢO
https://angular.io/docs
https://github.com/angular-vietnam/100-days-of-angular
https://github.com/nccasia/ncc-angular
16