Báo cáo thực tập lập trình angular và xây dựng ứng dụng quản lý quan hệ khách hàng

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 ANGULAR VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUAN HỆ KHÁCH HÀNG Công ty thực tập TNHH ASSURE VIETNAM GROUP Người phụ[.]

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 ANGULAR VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ QUAN HỆ

KHÁCH HÀNG

Công ty thực tập TNHH ASSURE VIETNAM

GROUP Người phụ trách Trần Khánh Toàn Thực tập sinh Trương Thành Quang

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

LỜI MỞ ĐẦU

Ngày nay, lập trình web 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ẽ, ngành lập trình web đã 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

Ngành lập trình web được sinh ra là do nhu cầu sử dụng Internet ngày càng phổ biến bằng những thiết bị công nghệ mới nhất Đồng thời Angular Framework là framework phổ biến, được phát triển bởi Google Vì lý do này, em quyết định chọn lập trình web làm định hướng cho việc học tập cũng như việc làm sau này của mình

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 việc trong một môi trường chuyên nghiệp, em có dự định là sẽ thực tập vào khoảng thời gian cuối kì học thứ 5 và đầu kì học thứ 6 Vì vậy, sau khi tham gia phỏng vấn ở một số công ty, em quyết định chọn công ty Assure Global Group - một môi trường lý tưởng, hiện đại, chuyên nghiệp, trẻ trung - 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 Assure Global Group đã 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ể làm được một ứng dụng web hoàn chỉnh 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 Trần Khánh Toàn đã training về Angular Framework, 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ũ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

Trương Thành Quang TP.HCM, ngày tháng 12 năm 2022

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Mục lục

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

1.1 Giới thiệu công ty TNHH ASSURE VIETNAM GROUP

Công ty TNHH Assure VietNam Group là công ty phát triển phần mềm outsourcing được thành lập năm 2020, công ty có trụ sở tại Toroton, Canada Công ty chuyên về các dự án làm bằng Angular Framework

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

Khách hàng của công ty chủ yếu đến từ Canada Sản phẩm do công ty phát triển đa dạng từ ứng dụng web, cho tới ứng dụng mobile, các dịch vụ kiểm thử, …

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

Đợt thực tập với chủ đề “Lập trình Angular Framework” 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 Angular Framework trong xây dựng ứng dụng 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 làm việc chuyên nghiệp

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

2.1.1.1 Thời gian

Ngày 22 tháng 08 năm 2022

2.1.1.2 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…

2.1.1.3 Kết quả

Hiểu thêm về công ty THNN Assure VietNam Group, 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.2 Nghiên cứu kỹ thuật

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

2.2.1.1 Thời gian

Ngày 22 tháng 08 năm 2022

2.2.1.2 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ư GIT - sử dụng trong làm việc nhóm

2.2.1.3 Thực hiện

Thực hành sử dụng các phần mềm đã nêu trên

2.2.1.4 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, tiếp cận với các công nghệ đang được sử dụng thực tế ở công ty

2.2.2 Tìm hiểu ngôn ngữ TypeScript và các vấn đề nâng cao

2.2.2.1 Thời gian

Từ ngày 22 tháng 08 năm 2022 đến ngày 29 tháng 08 năm 2022

2.2.2.2 Nội dung

Được training về các kỹ thuật nâng cao của TypeScript, những kiến thức quan trọng cho việc tối ưu phía front-end

● Lập trình hướng đối tượng

Các kiến thức về lập trình hướng đối tượng như khái niêm, các đặc tính như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngoài ra, thực tập sinh còn được hướng dẫn về cách thiết kế lớp cho các đối tượng trong dự án

● Dependency Injection

Thực tập sinh sẽ được hướng dẫn về lí do sử dụng, cách triển khai Dependency Injection cũng như nguyên lí Dependency Inversion trong Angular

● Clean Architecture

Cách xây dựng một ứng dụng dựa trên kiến trúc Clean Architecture

2.2.2.3 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

2.2.2.4 Kết quả:

● Nâng cao kỹ năng lập trình với ngôn ngữ TypeScript

● 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.2.3 Lập trình giao diện với Angular và thư viện Lightning System

Design

2.2.3.1 Thời gian

Từ ngày 29 tháng 08 năm 2022 đến ngày 05 tháng 09 năm 2022

2.2.3.2 Nội dung:

Các kiến thức cơ bản về Angular để có thể tạo ra phía giao diện của ứng dụng web Đồng thời sử dụng thư viện Lightning System Design để tinh chỉnh giao diện

● Các khái niệm cơ bản về RxJS, Angular

Nắm được các khái niệm cơ bản về RxJS, Angular Angular được xem là một open source (mã nguồn mở) hay frameworks miễn phí chuyên dụng cho công việc thiết kế web Angular được phát triển từ những năm 2009 và được duy trì bởi Google

Frameworks này được xem là frameworks front end mạnh mẽ nhất chuyên dụng bởi các lập trình viên cắt HTML cao cấp

Thư viện Lightning Design System cung cấp một tập hợp các thành phần UIđơn giản, dễ dàng tinh chỉnh và truy cập

Ngoài ra, trainer còn cung cấp cho thực tập sinh những khái niệm cơ bản trong Angular như Angular Lifecycle Hooks, RxJS, Form (Reactive Form), …, là những khái niệm rất cơ bản và quan trọng trong lập trình Angular

● Angular Lifecycle Hooks

Hooks cho phép chèn thêm những tác vụ cần thiết trong những khoảnh khắc quan trọng trong quá trình khởi tạo cho đến khi phá hủy các component Chúng ta có thể

khai thác những khoảnh khắc quan trọng trong vòng đời đó bằng cách triển khai một hoặc nhiều interfaces trong thư viện lõi Angular

● RxJS

RxJS là 1 thư viện rất tiện lợi cho việc xư lý bất đồng bộ (bao gồm cả việc xư lý dựa trên sự kiện như 1 cú click chuột) Tất nhiên thì nói 1 cách đơn giản là 1 thư viện

"rất tiện lợi" nhưng mà ko hẳn là như vậy Nếu tìm hiểu sâu hơn 1 chút, các bạn sẽ có cảm giác thư viện này mang màu sắc "đổi mới, cách tân" chứ chỉ ko dừng ở khía cạnh

"tiện lợi"

● Reacctive Form

Phương pháp này tránh việc sử dụng các directive như là ngModel, required thay vào đó tạo các Object Model ở trong Component, rồi tạo ra form từ chúng

2.2.3.3 Thực hiện

● Tham gia đầy đủ các buổi trainning

● Xây dựng giao diện sử dụng Angular và áp dụng thư viện Lightning Desgin System

● Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

2.2.3.4 Kết quả

● Hiểu được những khái niệm cơ bản trong lập trình giao diện với Angular

● Hiểu được cách áp dụng Lightning Design System với Angular

● Xây dựng thành công giao diện cho ứng dụng web có áp dụng RxJS và Reactive Form

2.3 Tham gia dự án

Sau hai tuần đượ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ề TypeScript, Angular Trong một tháng tiếp theo, thực tập sinh được tham gia vào dự án xây dựng giao diện bằng Angular Một tháng rưỡi cuối cùng, thực tập sinh được tham gia xây dựng ứng dụng hỗ trợ nhân sự của công ty sử dụng Lightning Desgin System và Angular

2.4 Lịch làm việc

dẫn

Mức độ hoàn thành

Nhận xét của người 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

2

- Tìm hiểu ngôn ngữ lập trình

TypeScript và các kiến thức nâng cao

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

và framework Angular

- Làm bài test về Angular

Anh Kha, Anh Toàn

100%

- Tham gia dự án sử dụng

Angular để phát triển giao

diện

Anh Kha, Anh Toàn

100%

4

- Tham gia dự án sử dụng

Angular để phát triển giao

diện

Anh Kha, Anh Toàn

100%

5

- Tham gia dự án sử dụng

Angular để phát triển giao

diện

Anh Kha, Anh Toàn

100%

6

- Tham gia dự án sử dụng

Angular để phát triển giao

diện

Anh Kha, Anh Toàn

100%

7

- Lên ý tưởng, đề xuất yêu cầu,

công nghệ để tham gia xây

dựng ứng dụng quản lý quan

hệ khách hàng

Anh Kha, Anh Toàn

100%

Anh Toàn

100%

9

- Xây dựng khung giao diện

- Triển khai các tính năng đã đề

xuất

Anh Kha, Anh Toàn

100%

10 - Tiếp tục triển khai các tính

năng

Anh Kha, Anh Toàn

90%

11 - Tiếp tục triển khai các tính

năng

Anh Kha, Anh Toàn

100%

12 - Sửa lỗi và chuẩn bị demo

- Thuyết trình sản phẩm

Anh Kha, Anh Toàn

100%

Chương 3 Chi tiết về dự án

3.1 Giới thiệu về ứng dụng

Nhận thấy rằng việc quản lý thông tin nhân viên trong công ty khách hàng còn thiếu sót và thủ công, đồng thời việc xin nghỉ phép của nhân viên còn rườm rà, khó ghi nhớ thời gian nghỉ phép Ứng dụng hỗ trợ nhân sự giúp theo dõi thông tin làm việc của nhân viên, đồng thời giúp cho nhân viên xin nghỉ phép một cách dễ dàng hơn

3.2 Thực hiện

Nhóm thực tập bao gồm 1 thành viên:

● Trương Thành Quang

Và sự giúp đỡ tận tình của các anh chị trong công ty TNHH Assure VietNam Group

3.3 Kế hoạch và triển khai

3.3.1 Giai đoạn lên ý tưởng và đề xuất tính năng

3.3.1.1 Nội dung

● Đề xuất yêu cầu functional và non-functional Yêu cầu về công nghệ và hình ảnh giao diện mẫu

● Đề xuất các tính năng cốt lõi của ứng dụng và trình bày, giải thích

3.3.1.2 Kết quả:

● Đưa ra danh sách các user story của ứng dụng

● Hình dung luồng hoạt động của ứng dụng

● Xây dựng các bản vẽ tay cho giao diện.

3.3.2 Giai đoạn xây dựng khung sườn cho ứng dụng

3.3.2.1 Nội dung

● Xây dựng khung ứng dụng phía front-end bằng Angular và tinh chỉnh giao diện bằng thư viện Lightning Design System

● Xây dựng việc kết nối ứng dụng với API có sẵn

● Hoàn thiện bản thiết kế giao diện

3.3.2.2 Kết quả

● Có thể tinh chỉnh giao diện bằng Lightning Design System và sử dụng các thành phần của Angular

● Hoàn thành kết nối với API

● Hoàn thành bản thiết kế giao diện trên Figma

● Hoàn thành sơ bộ cơ sở dữ liệu bao gồm các bảng quan trọng

3.3.3 Giai đoạn triển khai tính năng

3.3.3.1 Giai đoạn 1 – Các tính năng cơ bản

1 Đăng nhập, dăng Cho phép nhân viên Liên kết với cơ sở dữ liệu

xuất đăng nhập

2 Thông tin nhân

viên

Hiển thị thông tin cá nhân nhân viên Hiển thị thông tin làm việc

Hoàn thành việc hiển thị thông tin nhân viên Hoàn thành hiển thị số ngày phép còn lại, số ngày phép đã dùng

3 Danh sách nghỉ

phép, chấm công

Hiển thị nơi chấm công cho nhân viên

Hiển thị danh sách nghỉ phép theo loại

Hiển thị chi tiết thông tin nghỉ phép

Hoàn thành phương thức chấm công

Hoàn thành hiển thị danh sách nghỉ phép theo loại phép hằng năm và phép không lương

Hiển chị những thông tin quan trọng của đơn nghỉ phép

4 Lưu hình ảnh và

file

Lưu hình ảnh và file lên

cơ sở dữ liệu

Xử lý hình ảnh, file và lưu trữ trên cơ sở dữ liệu thành công

3.3.3.2 Giai đoạn 2 – Tính năng cốt lõi

1 Danh sách nghỉ

phép

Hiển thị danh sách nghỉ phép theo loại, theo

Hoàn thành hiển thị danh sách các loại khác

2 Tạo đơn nghỉ

phép

Tạo đơn nghỉ phép và gửi tới người cấp trên trực tiếp và phê duyệt

Tạo mới đơn nghỉ phép có đính kèm và gửi tới người quản lý và phê duyệt

3 Ký file pdf Cho nhân viên ký lên

file pdf

Tạo và lưu trữ file pdf trước và sau khi kí

3.3.4 Giai đoạn nghiệm thu kết quả và báo cáo

Dựa trên các yêu cầu về tính năng, công nghệ, kiến trúc hệ thống, … sau hơn 1 tháng thực hiện dự án, nhóm thực tập đã hoàn thành sơ bộ các tính năng cốt lõi đã đề ra:

● Thông tin chi tiết nhân viên

● Danh sách các đơn xin nghỉ phép

● Tạo mới đơn xin nghỉ phép

● Theo dõi đơn nghỉ phép của nhân viên và xét duyệt

● Tạo tính năng ký file pdf

Ngoài ra, nhóm cũng đề xuất một vài tính năng để phù hợp với quy trình làm việc của công ty để thực hiện trong tương lai Sau quá trình thực tập 3 tháng, nhóm thực tập

có một buổi trình bày về quá trình thực tập, về dự án đã thực hiện trong quá trình thực tập với những anh chị cấp trên

Chương 4.Tổng kết

Như vậy, chỉ trong vòng hơn một tháng ngắn ngủi, nhóm đã kịp hoàn thành một ứng dụng chạy trên nền tảng web Ứng dụng đã có khá đầy đủ các tính năng đã đề ra ban đầu Do thời gian có hạn nên giao diện ứng dụng còn đơn giản, hình ảnh chưa được đẹp như mong đợi Nhưng do ứng dụng phát triển theo kiến trúc có tính kế thừa,

dễ dàng mở rộng nên sau này khi có thời gian sẽ có thể phát triển lên mức cao hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty TNHH Assure VietNam Group, sự nỗ lực của nhóm thực tập để có thể hoàn thành dự án

TÀI LIỆU THAM KHẢO

Tài liệu tiếng Anh

[1

]

Angular [Online] Available: Angular

[2

]

Lightning Desgin System [Online] Available: Lightning Design System

[3

]

RxJS , "Overview" [Online] Available: RxJS - Introduction