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

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH 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 năm 2022 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp LỜI MỞ ĐẦU Công nghệ thông tin phát triển sơi động tồn cầu Trên thực tế, ngành nghề có nhu cầu ứng dụng công nghệ thông tin tự động hoá, tối ưu hoá, đồng hoá nghiệp vụ họ Có thể thấy nhu cầu sản xuất mở rộng dự án phần cứng, phần mềm vơ cần thiết Đây điều kiện đời phát triển công ty outsource lĩnh vực cơng nghệ thơng tin nói chung Sau cân nhắc tìm hiểu kỹ lưỡng thị trường outsource, em nhận thấy công ty TNHH Phần mềm FPT nơi lý tưởng để thân tiếp tục trau dồi học tập Công ty không đáp ứng định hướng em phát triển phần mềm mà cịn đem đến mơi trường làm việc chun nghiệp với mơ hình chặt chẽ, hiệu quả, đề cao tính sáng tạo, rèn luyện kết nối thành viên cơng ty Do đó, với tảng kiến thức tích luỹ sau ba năm học tập Đại học Công nghệ thông tin, với kiến thức quý báu sau trình làm việc thầy cô, bạn bè, em định trau dồi kinh nghiệm thực tế công ty Phần mềm FPT Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp 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ó hội thực trình thực tập cơng ty, qua đó, em có hội trở thành thành viên thức cơng ty Em xin gửi lời cảm ơn đến anh mentor bạn, anh chị khố training có hỗ trợ nhiệt tình Điều khơng giúp em hoàn thiện thân mặt kiến thức kỹ năng, mà cịn giúp em hồ nhập tốt với mơi trường văn hố chun nghiệp Cũng xin cảm ơn thầy cô bạn bè 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áo cáo Mặc dù cố gắng hoàn thành báo cáo với tất nỗ lực song kết em chắn không tránh khỏi thiếu sót, em mong nhận thơng cảm góp ý chân thành từ 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 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp NHẬN XÉT CỦA KHOA Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA MỤC LỤC CHƯƠNG - GIỚI THIỆU CƠNG TY 1.1 Giới thiệu cơng ty FPT Software 1.2 Sản phẩm công ty CHƯƠNG - NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty cài đặt kênh thơng tin 2.2 Tìm hiểu kiến thức kỹ 2.3 Nghiên cứu công nghệ xây dựng project demo 2.3.1 Angular 2.3.2 NgRx - state management framework 11 2.3.3 ASP.NET Core 12 2.4 Review code nộp sản phẩm cuối khoá CHƯƠNG - CHI TIẾT VỀ PROJECT 3.1 Giới thiệu dự án 13 14 14 3.1.1 Tổng quát 14 3.1.2 Một số chức 14 3.2 Sản phẩm hồn chỉnh 15 CHƯƠNG - TỔNG KẾT 18 TÀI LIỆU THAM KHẢO 19 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp CHƯƠNG - GIỚI THIỆU CÔNG TY 1.1 Giới thiệu công ty FPT Software Công ty FPT Software, tên gọi khác công ty Phần mềm FPT, thành lập năm 1999, công ty thành viên FPT, Tập đồn Cơng nghệ hàng đầu Việt Nam Sau 17 năm thành lập FPT Software công ty phần mềm lớn Việt Nam đứng Top 100 Nhà cung cấp dịch vụ Outsourcing toàn cầu 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 hãng phần mềm nước, công ty lớn nước tham vọng xuất phần mềm toàn giới cho cơng ty nước ngồi biết đến tập đồn FPT, mục đích vươn đến tầm cao thông qua công nghệ nhằm nâng cao suất lao động Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp 1.2 Sản phẩm công ty Là công ty chuyên xuất dịch vụ phần mềm, FPT Software cung cấp dịch vụ phát triển phần mềm 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… nhiều lĩnh vực như: Tài 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 tập trung nghiên cứu phát triển dịch vụ công nghệ thông tin dựa tảng công nghệ IoT, S.M.A.C, cho 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 phạm vi tồn cầu Cơng ty cung cấp dịch vụ cho khoảng 450 khách hàng tập đoàn lớn giới, có 43 khách hàng nằm danh sách Fortune Global 500 Một số đối tác lớn công ty bao gồm: Hitachi, NEOPOST, Petronas, Deutsche Bank, Unilever Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp CHƯƠNG - NỘI DUNG THỰC TẬP 2.1 Tìm hiểu công ty cài đặt kênh thông tin ● Thời gian: ngày (onboarding) ● Nội dung chính: Học khố học dayone bắt buộc cơng ty: + Giới thiệu công ty, mục tiêu, sứ mệnh, lịch sử phát triển thành tựu mà công ty đạt + Cơ cấu tổ chức trách nhiệm đơn vị, nhân công ty + Nội quy công ty, quy định quyền lợi nghĩa vụ nhân viên + Các khố học quy trình nghiệp vụ hành cơng ty, hướng dẫn sử dụng tool nội + Các khố học an tồn bảo mật thông tin công ty Kết + Hiểu đảm bảo tuân thủ quy tắc mà công ty yêu cầu, đồng thời nắm rõ quyền lợi hội phát triển thân công ty 2.2 Tìm hiểu kiến thức kỹ ● ● + + + Thời gian: ngày (fundamental training) Nội dung chính: Tham gia khố học nội dành cho nhân viên phát triển phần mềm Cách sử dụng cài đặt máy ảo làm việc nhà Hướng dẫn cài đặt sử dụng development tools Visual Studio, Visual Studio Code, Gitbash, Postman, Microsoft SQL Server + Khoá học Cloud essential giới thiệu sơ tảng AWS dịch vụ liên quan + Khố học mơ hình phát triển phần mềm ● + + + Kết Biết vận dụng cách quản lí mã nguồn Git CLI Cài đặt thành công môi trường làm việc máy ảo Hiểu sẵn sàng bước vào dự án với cách mơ hình huấn luyện, tập trung chủ yếu vào mơ hình Scrum-Agile Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp 2.3 Nghiên cứu công nghệ xây dựng project demo ● Thời gian: tháng (technical training) ● Nội dung chính: nghiên cứu cơng nghệ, kĩ thuật để tham gia project thực tế Với kiến thức tảng 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 thân với công nghệ sau đây: 2.3.1 Angular Angular open-source framework chuyên dùng cho việc thiết kế phát triển front end cho ứng dụng web Angular phát triển trì thường xuyên Google Angular biết đến những frameworks front end mạnh mẽ nhất, thích hợp cho việc build nhanh website dạng Single Page Application (SPA) Tại chương trình đào tạo công ty, em tiếp xúc với phiên Angular (AngularJS) Angular 12, để thích ứng tốt với tất dự án có đơn vị quản lý Nhờ thế, em thấy điểm cải tiến mặt cấu trúc, thiết kế phiên Angular 2+ so với AngularJS Các tính khái niệm trọng tâm Angular: + Module: Module cho pháp gom nhóm directive service tương đồng mặt chức hay ngữ nghĩa, qua sử dụng lại nhiều nơi project thông qua việc import export module Mỗi chương trình Angular có root module đại diện cho toàn ứng dụng Để khai báo module 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 module Angular Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp + Directive: Directive tất loại cú pháp đặc biệt Angular đính kèm lên DOM, qua đó, Angular nhận biết áp dụng logic đặc biệt lên DOM data binding, DOM structuring,… có lại directives Angular: + Component directives: cho phép gọi component trực tiếp template component khác dễ dàng thông qua cú pháp quen thuộc markup language Code minh hoạ sử dụng component directive “select-start-rating” HTML + Structural directives: loại directive dùng để thay đổi cấu trúc DOM, ví dụ: ngIf, ngSwitch, ngFor + Attribute directives: loại direcive dùng để thuận tiện thay đổi, tuỳ chỉnh giá trị html attribute theo cú pháp riêng Một số attribute directive bao gồm: ngStyle, ngClass + Component: Là đơn vị để xây dựng UI Component bao gồm template HTML để thể thứ hiển thị lên UI, TypeScript class để xử lý logic cho component Để khởi tạo component class, ta dùng hàm decorator Component Các public field class truy cập trực tiếp từ template Khi field class thay đổi, component view tự động cập nhật theo Đặc biệt, hàm decorator Input cho phép tạo field nhận liệu động từ component cha hàm decorator Output cho phép gửi 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 = 5; @Input('star-size') starSize: number = 30; @Output('on-value-change') onValueChange = new EventEmitter(); Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp private _pointedValue: number | null = null; private _value: number | null = null; get value() { return this._value; } @Input('value') set value(newValue) { if (this.value !== newValue) this.onValueChange?.emit(newValue) }; constructor() { this._numberArray = this.createNumberArray(this.maxStars); } // } Code minh hoạ cách tạo class cho component + Dependency Injection: Là design pattern Angular sử dụng để khởi tạo thành phần chương trình Để sử dụng dependency injection, ta cần đăng ký class cần khởi tạo vào module chịu trách nhiệm khởi tạo Sau Angular dựa vào constructor class để cung cấp đối tượng cần thiết cho class + Data binding: Là chế cập nhật liệu tự động view (mô tả template) viewmodel (mơ tả class component) Angular có kiểu data binding (bảng bên dưới) Loại Cú pháp Phân loại {{expression}} Interpolation One-way từ data source lên [target]="expression" Property view Attribute Class Style (target)="statement" Event One-way từ view data source [(target)]="expression" Two-way Two-way Bảng phân loại loại data binding Angular + Pipe: hàm hỗ trợ thay đổi giá trị dạng hiển thị liệu thuận tiện template Ngoài pipe có sẵn Angular, ta tạo custom pipe hàm decorator Pipe import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'flat', 10 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp }) export class FlatPipe implements PipeTransform { transform(value: any[][], args: string[]): any[] { return value.flat(); } } Code minh hoạ cách tạo pipe + Service: Service nơi đóng gói số nghiệp vụ, chức liên quan đến nhau, qua tái sử dụng hàm chức nhiều component khác thông qua dependecy injection Để khởi tạo 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 service 2.3.2 NgRx - state management framework NgRx framework để quản lí trạng thái ứng dụng Angular cách hiệu cung cấp cho tác vụ isolation of side effects, entity collection management Với NgRx, xây dựng Angular app với khả trì mở rộng cao NgRx lấy cảm hứng từ Redux (một state management library phổ biến cộng đồng React cho việc quản lý state theo Flux Architect) để giải vấn đề tương tự 11 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp cho Angular Ngoài ra, NgRx đưa Reactive programming vào thiết kế, kết hợp observer pattern với functional programming + + + + + Các thành phần NgRx là: Store: nơi chứa State Action: thể hành động ,thao tác muốn thay đổi State Reducer: thực việc chuyển đổi State từ trạng thái sang trạng thái khác Selector: thể vùng chọn State lưu trữ Store Effect: nơi thực side effect thay đổi state call API Quy trình hoạt động thể sơ đồ Sơ đồ hoạt động việc quản lí state Angular với NgRx 2.3.3 ASP.NET Core ASP.NET Core open-source framework đa tảng (cross-platform) cho việc xây dựng ứng dụng đại dựa kết nối đám mây, giống web apps, IoT backend cho mobile Ứng dụng ASP.NET Core chạy mơi trường NET Core phiên đầy đủ NET Framework Nó thiết kế để cung cấp tối ưu development 12 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp framework cho dụng mà triển khai đám mây (clound) chạy onpromise Nó bao gồm thành phần theo hướng module nhằm tối thiểu tài nguyên chi phí phát triển, bạn giữ lại mềm giẻo việc xây dựng giải pháp bạn Ta phát triển chạy ứng dụng ASP.NET Core đa tảng Windows, Mac Linux + + + + + + + Kiến trúc ASP.NET thường bao gồm phần sau: Controller: định nghĩa điểm gọi API server Service: chứa business logic, hàm nghiệp vụ Repository: cung cấp interface đơn giản để truy vấn liệu Data Context: chứa ràng buộc, khai báo sở liệu (thông qua data annotation fluent API) đại diện cho sở liệu cho repository Unit of Work: tập hợp repository nhằm đồng liệu data context Model: Bao gồm class định nghĩa liệu Data transfer object: Bao gồm class định nghĩa liệu nhập xuất (request models response models) 2.4 Review code nộp sản phẩm cuối khoá ● ● + + ● + Thời gian: ngày Nội dung chính: Được senior review góp ý sản phẩm làm Nộp sản phẩm cuối Kết Bài làm đánh giá tốt sẵn sàng tham gia dự án thức 13 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp CHƯƠNG - CHI TIẾT VỀ PROJECT 3.1 Giới thiệu dự án 3.1.1 Tổng quát Tên dự án: Product management Yêu cầu: Yêu cầu backend dự án luyện tập - Xây dựng website cho phép người dùng (VD: người bán hàng) quản lý sản phẩm họ Một sản phẩm thuộc tối đa nhà cung cấp (supplier) thuộc nhiều phân loại (category) khác Ngoài website cần cung cấp hệ thống authentication authorization, phân quyền người dùng cho chức tạo/sửa sản phẩm - Yêu cầu 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 + Create a product: Thêm sản phẩm (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 sản phẩm (người dùng cần đăng nhập) + Delete a product: Xoá 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 + Sign in: Đăng nhập tài khoản tạo 14 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp + Sign out: Đăng xuất khỏi tài khoản đăng nhập + Guard routes: Phân quyền truy cập số trang (VD: trang tạo/chỉnh sửa sản phẩm) Và số chức khác 3.2 Sản phẩm hoàn chỉnh Form đăng ký tài khoản Form đăng nhập 15 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp Trang danh sách tìm kiếm sản phẩm 16 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp Form nhập chỉnh sửa sản phẩm 17 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp CHƯƠNG - TỔNG KẾT Đối với cá nhân em, tháng thực tập cơng ty trải nghiệm thú vị, hành trang quý báu trước thức bước chân vào nghiệp lập trình Em cảm thấy thật may mắn quý công ty FPT Software cho em hội lại đóng góp vào dự án công ty với tư cách người nhân viên thức Về kiến thức tích luỹ được, tập cho em hội học tập sử dụng công nghệ đại theo xu hướng thị trường, bao gồm Angular 2+ ASP.NET Core Tuy chưa có nhiều kinh nghiệm làm việc thực tế, với lượng kiến thức sẵn có, em nói sẵn sàng bước chân vào dự án thức! Bên cạnh đó, yếu tố người quan trọng trình phát triển thân em Lời em xin cảm ơn anh project manager Trần Việt Hùng đưa định hướng học tập theo dõi trình rèn luyện em, người tin tưởng giao cho em vị trí làm việc thức Em biết ơn anh Nguyễn Thanh Tùng – trainer thức em, anh Tùng khơng ngại dành nửa tiếng ngày để đưa lời nhận xét, góp ý bổ ích cho cá nhân phát triển kỹ tư lập trình Cuối cùng, em xin cảm ơn tất bạn trainee khoá tạo môi trường học tập lành mạnh không ngại giúp đỡ lẫn Em xin chia sẻ số hạn chế khó khăn sau tập Em cho việc phải làm việc online dịch bệnh điều thiệt thịi to lớn Điều tạo rào cản em cần trao đổi trực tiếp với người cơng ty, đó, người chưa thực xây dựng gắn kết Bên cạnh đó, việc liên tục bổ sung kiến thức khiến thời gian làm việc em không cân Em cho nguyên thiếu kinh nghiệm thân, song em tự tin cải thiện điều tương lai Em xin chân thành cảm ơn quý thầy cô khoa Công nghệ phần mềm dành thời gian đọc báo cáo em Em mong lắng nghe ghi nhận góp ý chia sẻ từ q thầy Em xin kết thúc báo cáo ạ! 18 Quản Tiến Nghĩa - 18520111 - Thực tập tốt nghiệp TÀI LIỆU THAM KHẢO [1] Agile Manifesto, https://agilemanifesto.org/ [2] Angular - The Complete Guide, Udemy course: https://www.udemy.com/course/thecomplete-guide-to-angular-2/ [3] Material document: https://material.angular.io/guide/getting-started [4] Angular document: https://angular.io/guide/what-is-angular [5] NgRx document: https://ngrx.io/docs 19 ... state Angular với NgRx 2.3.3 ASP.NET Core ASP.NET Core open-source framework đa tảng (cross-platform) cho việc xây dựng ứng dụng đại dựa kết nối đám mây, giống web apps, IoT backend cho mobile Ứng. .. chương trình đào tạo cơng ty, em tiếp xúc với phiên Angular (AngularJS) Angular 12, để thích ứng tốt với tất dự án có đơn vị quản lý Nhờ thế, em thấy điểm cải tiến mặt cấu trúc, thiết kế phiên Angular. .. trạng thái ứng dụng Angular cách hiệu cung cấp cho tác vụ isolation of side effects, entity collection management Với NgRx, xây dựng Angular app với khả trì mở rộng cao NgRx lấy cảm hứng từ Redux