BÁO CÁO THỰC TẬP THỰC TẬP TỐT NGHIỆP - SE501.M21 LẬP TRÌNH ỨNG DỤNG WEB VỚI ANGULAR VÀ ASP.NET CORE

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 THỰC TẬP TỐT NGHIỆP - SE501.M21 LẬP TRÌNH ỨNG DỤNG WEB VỚI ANGULAR VÀ ASP.NET CORE Công ty thực tập: Công ty

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 THỰC TẬP TỐT NGHIỆP - SE501.M21

LẬP TRÌNH ỨNG DỤNG WEB VỚI ANGULAR VÀ ASP.NET CORE

Công ty thực tập: Công ty TNHH FPT software Người phụ trách: Trần Việt Hùng

Thực tập sinh: Quản Tiến Nghĩa - 18520111

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

LỜI MỞ ĐẦU

Công nghệ thông tin đã và đang phát triển sôi động trên toàn cầu Trên thực tế, bất cứ ngành nghề nào hiện nay đều có nhu cầu ứng dụng công nghệ thông tin trong tự động hoá, tối ưu hoá, đồng bộ hoá nghiệp vụ của họ Có thể thấy nhu cầu sản xuất và mở rộng các dự

án phần cứng, phần mềm là vô cùng cần thiết Đây chính là điều kiện ra đời và phát triển của các công ty outsource trong lĩnh vực công nghệ thông tin nói chung

Sau khi cân nhắc và tìm hiểu kỹ lưỡng về thị trường outsource, em nhận thấy công ty TNHH Phần mềm FPT chính là một nơi lý tưởng để bản thân tiếp tục trau dồi và học tập Công ty không chỉ đáp ứng đúng định hướng của em về phát triển phần mềm mà còn đem đến một môi trường làm việc chuyên nghiệp với mô hình chặt chẽ, hiệu quả, đề cao tính sáng tạo, rèn luyện và kết nối giữa các thành viên trong công ty

Do đó, với nền tảng kiến thức đã tích luỹ được sau ba năm học tập tại Đại học Công nghệ thông tin, với những kiến thức quý báu sau quá trình làm việc cùng thầy cô, bạn bè, em quyết định trau dồi những kinh nghiệm thực tế đầu tiên tại công ty Phần mềm FPT

LỜI CẢM ƠN

Em trân trọng gửi lời cảm ơn đến Quý công ty TNHH Phần mềm FPT đã tạo điều

kiện cho em có cơ hội được thực hiện quá trình thực tập ở công ty, qua đó, em có cơ hội trở

thành thành viên chính thức của công ty

Em xin gửi lời cảm ơn đến anh mentor và các bạn, các anh chị cùng khoá training đã

có những sự hỗ trợ hết sức nhiệt tình Điều đó không chỉ giúp em hoàn thiện bản thân về mặt

kiến thức và kỹ năng, mà còn giúp em hoà nhập tốt nhất với môi trường và văn hoá chuyên

nghiệp

Cũng xin cảm ơn thầy cô và bạn bè trong khoa Công nghệ phần mềm đã nhiệt tình hỗ

trợ, tạo điều kiện cho em làm bài báo cáo này

Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song kết quả của em chắc

chắn không tránh khỏi những thiếu sót, em rất mong nhận được sự thông cảm và góp ý chân

thành từ các thầy cô Em xin chân thành cảm ơn

Thành phố Hồ Chí Minh, ngày 18 tháng 12 năm 2021

Quản Tiến Nghĩa

NHẬN XÉT CỦA KHOA

MỤC LỤC

2.1 Tìm hiểu về công ty và cài đặt các kênh thông tin 7

2.2 Tìm hiểu các kiến thức và kỹ năng cơ bản 7

2.3 Nghiên cứu công nghệ và xây dựng project demo 8

CHƯƠNG 1 - GIỚI THIỆU CÔNG TY 1.1 Giới thiệu về công ty FPT Software

Công ty FPT Software, tên gọi khác của công ty Phần mềm FPT, thành lập năm

1999, là công ty thành viên của FPT, Tập đoàn Công nghệ hàng đầu của Việt Nam Sau 17

năm thành lập FPT Software hiện đang là công ty phần mềm lớn nhất của Việt Nam và đứng trong Top 100 Nhà cung cấp dịch vụ Outsourcing toàn cầu do International Association of Outsourcing Professionals (IAOP) đánh giá

FPT Software theo đuổi mục tiêu gia công phần mềm để đáp ứng cho nhu cầu phát triển công nghệ thông tin của các hãng phần mềm trong nước, các công ty lớn trong nước và tham vọng hơn là xuất khẩu phần mềm trên toàn thế giới cho các công ty nước ngoài biết đến tập đoàn FPT, mục đích chính là vươn đến tầm cao mới thông qua công nghệ nhằm nâng cao năng suất lao động

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

Là công ty chuyên xuất khẩu dịch vụ phần mềm, FPT Software cung cấp các dịch vụ phát triển phần mềm và bảo trì, triển khai ERP, QA, chuyển đổi ứng dụng, hệ thống nhúng, điện toán di động, điện toán đám mây… trong nhiều lĩnh vực như: Tài chính ngân hàng, Viễn thông, Y tế, Chế tạo, Công nghiệp xe hơi, Dịch vụ công… Hiện FPT Software đang tập trung nghiên cứu và phát triển dịch vụ công nghệ thông tin dựa trên những nền tảng công nghệ mới như IoT, S.M.A.C, cho các lĩnh vực sản xuất máy bay, sản xuất ô tô, ngân hàng, truyền hình vệ tinh, viễn thông trên phạm vi toàn cầu Công ty hiện đã và đang cung cấp dịch

vụ cho khoảng 450 khách hàng là các tập đoàn lớn trên thế giới, trong đó có 43 khách hàng nằm trong danh sách Fortune Global 500

Một số đối tác lớn của công ty bao gồm: Hitachi, NEOPOST, Petronas, Deutsche Bank, và Unilever

CHƯƠNG 2 - NỘI DUNG THỰC TẬP 2.1 Tìm hiểu về công ty và cài đặt các kênh thông tin

● Thời gian: 2 ngày (onboarding)

● Nội dung chính:

Học khoá học dayone bắt buộc của công ty:

+ Giới thiệu về công ty, mục tiêu, sứ mệnh, lịch sử phát triển và những thành tựu mà công ty đã đạt được

+ Cơ cấu tổ chức và trách nhiệm của các đơn vị, nhân sự chính trong công ty

+ Nội quy công ty, các quy định về quyền lợi và nghĩa vụ của nhân viên

+ Các khoá học về quy trình nghiệp vụ và hành chính trong công ty, hướng dẫn sử dụng các tool nội bộ

+ Các khoá học về an toàn và bảo mật thông tin của công ty

Kết quả

+ Hiểu và đảm bảo tuân thủ các quy tắc mà công ty yêu cầu, đồng thời nắm rõ các quyền lợi và cơ hội phát triển bản thân ở công ty

2.2 Tìm hiểu các kiến thức và kỹ năng cơ bản

● Thời gian: 4 ngày (fundamental training)

● Nội dung chính:

+ Tham gia các khoá học nội bộ dành cho nhân viên phát triển phần mềm

+ Cách sử dụng và cài đặt máy ảo làm việc tại nhà

+ Hướng dẫn cài đặt và sử dụng các development tools như Visual Studio, Visual Studio Code, Gitbash, Postman, Microsoft SQL Server

+ Khoá học Cloud essential giới thiệu sơ bộ về nền tảng AWS và các dịch vụ liên quan + Khoá học về các mô hình phát triển phần mềm

● Kết quả

+ Biết vận dụng cách quản lí mã nguồn bằng Git CLI

+ Cài đặt thành công môi trường làm việc trên máy ảo

+ Hiểu và sẵn sàng bước vào các dự án với cách mô hình đã được huấn luyện, trong đó tập trung chủ yếu vào mô hình Scrum-Agile

2.3 Nghiên cứu công nghệ và xây dựng project demo

● Thời gian: 2 tháng (technical training)

● Nội dung chính: nghiên cứu các công nghệ, kĩ thuật để tham gia project thực tế

Với kiến thức nền tảng là C# NET core, Javascript, Typescript, NodeJS, SQL Server, HTML, CSS, khoá đào tạo đã tạo điều kiện cho em mở rộng kiến thức cho bản thân với những công nghệ mới sau đây:

2.3.1 Angular

Angular là một open-source framework chuyên dùng cho việc thiết kế và phát triển front end cho ứng dụng web Angular được phát triển và duy trì thường xuyên bởi Google Angular được biết đến như một trong những những frameworks front end mạnh mẽ nhất, thích hợp cho việc build nhanh các website dạng Single Page Application (SPA)

Tại chương trình đào tạo ở công ty, em được tiếp xúc với 2 phiên bản Angular 1 (AngularJS) và Angular 12, để thích ứng tốt nhất với tất cả dự án đang có tại đơn vị quản lý Nhờ thế, em thấy được những điểm cải tiến về mặt cấu trúc, thiết kế của các phiên bản Angular 2+ so với AngularJS

Các tính năng và khái niệm trọng tâm của Angular:

+ Module: Module cho pháp gom nhóm các directive và service tương đồng về mặt

chức năng hay ngữ nghĩa, qua đó có thể sử dụng lại ở nhiều nơi trong và ngoài project thông qua việc import và export module Mỗi chương trình Angular có đúng 1 root module đại diện cho toàn bộ ứng dụng Để khai báo 1 module mới trong Angular, ta

sử dụng hàm decorator NgModule

@NgModule({

declarations : [ ] ,

imports : [ ] ,

providers : [ ] ,

bootstrap : [ ] ,

} )

export class AppModule {}

Code minh hoạ cách khai báo 1 module trong Angular

+ Directive: Directive là tất cả những loại cú pháp đặc biệt của Angular được đính kèm

lên DOM, qua đó, Angular có thể nhận biết và áp dụng các logic đặc biệt lên DOM như data binding, DOM structuring,… có 3 lại directives trong Angular:

+ Component directives: cho phép gọi 1 component trực tiếp trong template của

1 component khác dễ dàng thông qua cú pháp quen thuộc của markup language

< select-star-rating

[max-stars]="5

[value]="form get(' rating ' ! value ?? "

class=" col-12 "

(on-value-change)="handleRatingChange($event)

></ select-star-rating >

Code minh hoạ sử dụng component directive “select-start-rating” trong HTML

+ Structural directives: loại directive dùng để thay đổi cấu trúc của DOM, ví dụ: ngIf, ngSwitch, ngFor

+ Attribute directives: loại direcive dùng để thuận tiện thay đổi, tuỳ chỉnh giá trị của các html attribute theo cú pháp riêng Một số attribute directive bao gồm: ngStyle, ngClass

+ Component: Là 1 đơn vị để xây dựng UI Component bao gồm 1 template HTML để

thể hiện những thứ sẽ hiển thị lên UI, và 1 TypeScript class để xử lý logic cho

component đó Để khởi tạo component class, ta dùng hàm decorator Component Các

public field trong class này có thể được truy cập trực tiếp từ template Khi các field trong class thay đổi, component view cũng được tự động cập nhật theo Đặc biệt, hàm

decorator Input cho phép tạo 1 field có thể nhận dữ liệu động từ component cha và hàm decorator Output cho phép gửi các sự kiện đến component cha

@Component(

selector : ' select-star-rating ',

templateUrl : /select-star-rating.component.html ',

styleUrls : [ ' /select-star-rating.component.css ' ]

providers : [

{ provide : MatFormFieldControl , useExisting : SelectStarRatingComponent }, ] ,

} )

export class SelectStarRatingComponent implements OnChanges

@Input( max-stars ' ) public maxStars : number ;

@Input( star-size ' ) starSize : number = 30 ;

@Output(' on-value-change ' ) onValueChange = new EventEmitter < number |

null > () ;

private _pointedValue : number | null = null ;

private _value : number | null = null ;

get value () { return this _value ; }

@Input( value ' ) set value ( newValue )

};

constructor ()

}

//

}

Code minh hoạ cách tạo class cho 1 component

+ Dependency Injection: Là design pattern chính được Angular sử dụng để khởi tạo

các thành phần trong chương trình Để sử dụng được dependency injection, ta cần đăng ký các class cần được khởi tạo vào module chịu trách nhiệm khởi tạo Sau đó Angular sẽ dựa vào constructor của từng class để cung cấp các đối tượng cần thiết cho class đó

+ Data binding: Là các cơ chế cập nhật dữ liệu tự động giữa view (mô tả bởi template)

và viewmodel (mô tả bởi class component) Angular có 3 kiểu data binding (bảng bên dưới)

Interpolation

Property

Attribute

Class

Style

[target]="expression " One-way từ data source lên view

Event (target)="statement " One-way từ view về data

source Two-way [(target)]="expression " Two-way

Bảng phân loại các loại data binding trong Angular

+ Pipe: là các hàm hỗ trợ thay đổi giá trị hoặc dạng hiển thị của dữ liệu thuận tiện ngay

trên template Ngoài các pipe có sẵn của Angular, ta cũng có thể tạo một custom pipe

bằng hàm decorator Pipe

import Pipe , PipeTransform from @angular/core ';

@Pipe({

} )

export class FlatPipe implements PipeTransform {

transform ( value : any[][] , args : string[] ): any[] {

return value flat();

}

}

Code minh hoạ cách tạo pipe

+ Service: Service là nơi đóng gói một số nghiệp vụ, chức năng liên quan đến nhau, qua

đó có thể tái sử dụng các hàm chức năng này ở nhiều component khác nhau thông qua

dependecy injection Để khởi tạo một service, ta sử dụng hàm decorator Injectable

@Injectable({

providedIn : ' root ',

} )

export class DataApiService {

constructor (

@Inject(String) protected url : string ,

protected http : HttpClient,

protected tokenProvider : LocalstorageTokensProviderService

) {}

//

}

Code minh hoạ cách tạo ra 1 service

2.3.2 NgRx - state management framework

NgRx là 1 framework để quản lí trạng thái trong ứng dụng Angular một cách hiệu quả

vì cung cấp cho chúng ta các tác vụ như isolation of side effects, entity collection management Với NgRx, chúng ta có thể xây dựng 1 Angular app với khả năng duy trì và

mở rộng rất cao

NgRx lấy cảm hứng từ Redux (một state management library cực kỳ phổ biến trong

cộng đồng React cho việc quản lý state theo Flux Architect) để giải quyết vấn đề tương tự

cho Angular Ngoài ra, NgRx đưa Reactive programming vào thiết kế, kết hợp observer

pattern cùng với functional programming

Các thành phần của NgRx là:

+ Store: nơi chứa các State

+ Action: thể hiện các hành động ,thao tác khi muốn thay đổi State

+ Reducer: thực việc chuyển đổi State từ trạng thái này sang trạng thái khác

+ Selector: thể hiện vùng chọn của các State được lưu trữ trong Store

+ Effect: nơi thực hiện các side effect khi thay đổi state như call API

Quy trình hoạt động của nó được thể hiện bằng sơ đồ dưới đây

Sơ đồ hoạt động của việc quản lí state trong Angular với NgRx

2.3.3 ASP.NET Core

ASP.NET Core là một open-source framework đa nền tảng (cross-platform) cho việc xây dựng những ứng dụng hiện đại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile

Ứng dụng ASP.NET Core có thể chạy trên môi trường NET Core hoặc trên phiên bản

framework cho những dụng cái mà được triển khai trên đám mây (clound) hoặc chạy on-promise

Nó bao gồm các thành phần theo hướng module nhằm tối thiểu tài nguyên và chi phí phát triển, như vậy bạn giữ lại được sự mềm giẻo trong việc xây dựng giải pháp của bạn Ta

có thể phát triển và chạy những ứng dụng ASP.NET Core đa nền tảng trên Windows, Mac và Linux

Kiến trúc của ASP.NET thường bao gồm các phần sau:

+ Controller: định nghĩa các điểm gọi API của server

+ Service: chứa các business logic, các hàm nghiệp vụ

+ Repository: cung cấp 1 interface đơn giản để truy vấn dữ liệu

+ Data Context: chứa các ràng buộc, khai báo cơ sở dữ liệu (thông qua data

annotation hoặc fluent API) và đại diện cho cơ sở dữ liệu cho repository

+ Unit of Work: tập hợp các repository nhằm đồng bộ dữ liệu trên cùng 1 data context + Model: Bao gồm các class định nghĩa dữ liệu

+ Data transfer object: Bao gồm các class định nghĩa dữ liệu nhập xuất (request

models và response models)

2.4 Review code và nộp sản phẩm cuối khoá

● Thời gian: 1 ngày

● Nội dung chính:

+ Được các senior review và góp ý trên sản phẩm đã làm

+ Nộp sản phẩm cuối cùng

● Kết quả

+ Bài làm được đánh giá tốt và đã sẵn sàng tham gia dự án chính thức

CHƯƠNG 3 - CHI TIẾT VỀ PROJECT 3.1 Giới thiệu về dự án

3.1.1 Tổng quát Tên dự án: Product management

Yêu cầu:

Yêu cầu về backend tại dự án luyện tập

- Xây dựng 1 website cho phép người dùng (VD: người bán hàng) quản lý các sản phẩm của họ Một sản phẩm thuộc về tối đa 1 nhà cung cấp (supplier) và có thể thuộc nhiều phân loại (category) khác nhau Ngoài ra website cũng cần cung cấp hệ thống authentication và authorization, phân quyền người dùng cho các chức năng tạo/sửa sản phẩm

- Yêu cầu về tech stack:

o Back end: ASP.NET Core, JWT, Entity framework, SQL Server

o Front end: Angular 2+, NgRx, Angular Material, Bootstrap

3.1.2 Một số chức năng chính

+ Create a product: Thêm 1 sản phẩm mới (người dùng cần đăng nhập)

+ Search products: Tìm kiếm sản phẩm

+ Edit a product: Chỉnh sửa 1 sản phẩm (người dùng cần đăng nhập)

+ Delete a product: Xoá 1 sản phẩm (người dùng cần đăng nhập)

+ Register account: Đăng ký tài khoản người dùng mới