Báo cáo thực tập lập trình WEB với ANGULAR

Ngành lập trình Web được sinh ra là do nhu cầu truy cập, tìm kiếm thông tin cũng như các nhu cầu khác.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ủa m

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH WEB VỚI ANGULAR

Công ty thực tập : Công ty TNHH MTV Tháng Chín Người phụ trách :

Thực tập sinh : Lê Minh Phúc– MSSV: 17520902

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

LỜI MỞ ĐẦU

Trong thời đại như hiện nay, công nghệ và Internet trở nên phổ biến và không

ngừng phát triển trong mọi lĩnh vực Chính vì thế, phát triển Web đang trở thành một

yếu tố không thể thiếu trong chiến lược truyền thông của mọi doanh nghiệp trên thế

giới

Cùng với xu thế 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 ứng dụng web ở Việt Nam đã và đang phát triển mạnh

mẽ trong mọi lĩnh vực về thương mại, quảng cáo, giáo dục, Ngành lập trình Web

được sinh ra là do nhu cầu truy cập, tìm kiếm thông tin cũng như các nhu cầu khác.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ủ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 lập trình web trong một môi trường chuyên nghiệp,

em có dự định là sẽ thực tập Vì vậy, em quyết định chọn Tháng Chín - 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 TNHH MTV Tháng Chín đã 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 team mà em

đã có thể tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng

web Chân thành cảm ơn các anh chị trong team đã bỏ ra nhiều thời gian,công sức để

hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Trần Ngọc Huy Tưởng, giám đốc công ty, đã cho em cơ

hội được thực tập tại công ty cũng như cơ hội được học hỏi và phát triển Xin cảm ơn

anh Trần Hoài Hưng, team leader, đã giúp em làm quen với môi trường mới cũng như

phân công và hướng dẫn em trong các công việc được giao Xin cảm ơn anh Phan

Hoàng Minh, đã trực tiếp training kiến thức lập trình giao diện website với Angular,

hướng dẫn, giúp đỡ cho em tận tình cả những khó khăn trong công việc, đến những

khó khăn trong việc làm quen với môi trường mới Bên cạnh đó, em không quên gửi

lời cảm ơn đến toàn bộ các anh chị trong công ty, đã luôn tận tình quan tâm giúp đỡ

em

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

Lê Minh Phúc

TP HCM, ngày 16 tháng 06 năm 2022

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

… ………

……… ………

……… ………

……… ………

……… ………

……… ………

… ………

… ………

……… ………

……… ………

……… ………

……… ………

……… ………

……… ………

……… ………

MỤC LỤC

LỜI MỞ ĐẦU 2

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

1 Giới thiệu công ty Tháng chín 6

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

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

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

2 Nghiên cứu kỹ thuật 7

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

2.2 Tìm hiểu về Angular 8

2.3 Tìm hiểu về project của team và quy trình làm việc 12

3 Thực hiện project 13

4 Lịch làm việc 14

Chương 3: Chi tiết về tham gia dự án 16

1 Giới thiệu về Web PinLearn 16

2 Chi tiết công việc và kế hoạch thực hiện 16

2.1 Tạo trang User Profile 16

2.2 Tạo trang My Lesson List và My Lesson Detail 17

2.3 Tạo trang Course create 19

2.4 Tạo trang course detail 23

TÀI LIỆU THAM KHẢO 26

TỔNG KẾT 27

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

1 Giới thiệu công ty Tháng chín

Công ty TNHH MTV Tháng chín được thành lập vào 09/2016 đến nay đã hoạt

động được gần 5 năm Trong thời gian hoạt động, công ty đã nhận cung cấp dịch

vụ cho nhiều khách hàng tại Mỹ, Châu Âu, Úc và Singapore nơi tập trung phát

triển ứng dụng trên nền web và lập trình ứng dụng cho điện thoại thông minh

Tháng Chín đem lại cho khách hàng những dịch vụ lập trình, gia công phần mềm

uy tín chất lượng với độ an toàn cao, khả năng mở rộng và tiết kiệm chi phí cho

khách hàng

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

Sản phẩm của công ty chủ yếu là các dự án outsource về giáo dục, giải trí, thương

mại

Công ty luôn mang đến cho khách hàng dịch vụ phát triển, gia công phần mềm

hoàn hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển các ứng dụng, phần mềm một cách

toàn diện Các sản phẩm và giải pháp do công ty triển khai được đảm bảo mức độ

an toàn cao, có khả năng mở rộng, mang lại sự hài lòng về chất lượng và thỏa mãn

về tiết kiệm chi phí

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

Đợt thực tập với chủ đề “Lập trình web với Angular” 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 ứng dụng web với framework

Angular, đồ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 game 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 Tháng Chín, 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

Thời gian : 2 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, team leader đã 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ư Trello - sử dụng trong quản lý công việc và làm việc nhóm,

Freshdesk – Phần mềm giao tiếp với khách hang, BitBucket và sourcetree –

quản lý source code

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

Thời gian: 5 ngày (1 tuần)

Nội dung: Được training về framework angular, các kỹ thuật sử dụng trong

angular

- Tìm hiểu cơ bản về 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

Angular được ứng dụng rộng rãi với mục đích xây dựng project Single Page

Application (SPA) Hiện tại, Version stable của Angular là Angular 9

(released on February 7, 2020) với TypeScript 3.6 và 3.7

Lợi ích khi sử dụng Angular:

• Angular giúp nâng cao năng suất của các lập trình viên

• Cấu trúc phát triển rõ rang

• Extension Binding

• Hỗ trợ đầy đủ tính năng điều hướng (routing)

• Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng

• Document và cộng đồng (community)

- Ngôn ngữ Typescript:

Tìm hiểu về các kiến thức lập trình cơ bản vói Typescript như kiểu dữ liệu,

khái báo biến, vòng lặp, huớng đối tượng, bất đồng bộ…

- Component trong Angular:

Component là một lớp nó thường hiểu như là controller tương tác giao diện

người dùng Một component thường có 3 thành phần chính là code

TypeScript, template HTML và CSS

• Selector: Định nghĩa một CSS selector mà Component sẽ chèn nội dung vào HTML Nếu đặt tên như trên, thì sẽ chèn nội dung

Component nếu gặp thẻ <your-selector></your-selector>, nếu

muốn chỉ định như là một lớp CSS thì đặt tên ví dụ your-selector thì

nó có thể tìm đến phần tử <div class="your-selector"></div> để chèn nội dung Component

• templateUrl: Chỉ ra file HTML làm template cho Component, nội dung File HTML này như là view của Component, nó chứa các phần

tử HTML để hiện thị, nhập xuất dữ liệu

• styleUrls: Chỉ ra file css cho template của component

- Data binding: Angular hỗ trợ 2 kiểu data binding:

• One way binding thì dữ liệu được truyền 1 chiều Có thể từ view sang component hoặc ngược lại từ component sang view

• Two way binding có nghĩa là thay đổi dữ liệu từ component qua view và ngược lại từ view chúng ta thay đổi dữ liệu

- Xử lí sự kiện

• Xử lí thao tác người dùng

• Xử lí sự kiện binding 2 chiều

- Sử dụng NgModel: ngModel là một Directive dùng để liên kết dữ liệu với

client, nghĩa là nó thường được dùng để cho người dùng nhập liệu nên ta hay

sử dụng trong form html Nhiệm vụ của ngModel: Liên kết View trong

model và một số directives khác như input, textarea hoặc select; cung cấp

các thao thác validate dữ liệu như kiểm tra kiểu dữ liệu có phải là số, là

email, ;Kiểm soát thông tin từ client nhập vào có hợp lệ hay không và xuất

thông báo lỗi

- NgModule: 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 Các thuộc tính

của module được định nghĩa như sau:

• imports: Định nghĩa sự phụ thuộc (Dependency) của module này, module phụ thuộc sẽ được load trước rồi module này mới load

• declarations: Định nghĩa tất cả các component sẽ được dùng trong module này Nếu chưa định nghĩa thì các component trong module

sẽ không thể gọi nhau vì không tìm thấy nhao

• bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module này sẽ có một component gốc chứa layout gốc sẽ được render ra ở file index.html

- Services: Một service là một đoạn code trong ứng dụng Angular mà phục vụ

cho tác vụ gì đó, xử lý code logic gì đó Ví dụ handle (xử lý) data gửi nhận

từ/đến một API, hoặc cung cấp hàm authenticate

- Directives: Directives có thể hiểu như là các đoạn mã typescript (hoặc

javascript) kèm theo cả html và khi gọi thì gọi như là html luôn Các loại

directives:

• Components: Không có nghi ngờ gì khi gọi component là directive cũng được, vì rõ ràng là component cho phép định nghĩa selector và gọi ra như một thẻ html tag (<component-name></component-name)

• Structural directives: Là directive cấu trúc, dùng để vẽ html, hiển thị

data lên giao diện html Ví dụ ngFor, ngIf

• Attribute directives: Thêm các thuộc tính động cho element html, ví

dụ ngStyle

- Router: Router là một module được đặt tại @angular/router, cung cấp cho

ứng dụng Angluar của chúng ta khả năng điều hướng và hiển thị nội dung

phù hợp với địa chỉ URL Tìm hiểu về Router:

• Định nghĩa và load các routes vào app dùng Routes và RouterModule

• Setting Route trong view sử dụng RouterLink, RouterLinkActive

• Load dữ liệu từ url thông qua ActivatedRoute

• Chuyển trang (navigate) thông qua Router

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 Angular

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

Thời gian: 3 ngày

Nội dung : Tìm hiểu về project hiện tại của team bao gồm thông tin vể

project, source code và cài đặt môi trường Tìm hiểu về quy trình và phân

công công việc

- Project tham gia: Website dạy và học online PinLearn, sử dụng Angular

cho frontend và express.js cho backend

- Source code: Tìm hiểu về cấu trúc thư mục, thao tác với git và sourcetree

- Cài đặt môi trường: Cài đặt các thư viện, IDE cần thiết

- Quy trình làm việc:

Làm việc theo mô hình Agile Scrum: Là phương pháp phát triển phần mềm linh hoạt dể làm sao đưa sản phẩm đến tay người dùng càng nhành càng tốt càng sớm càng tố Scrum là 1 dạng của mô hình Agile và là Framework phổ biến nhất khi thực hiện mô hình agile Scrum là mô hình phát triển phần mềm lặp đi lặp lại Những khoảng lặp cố định thường kéo dài 1,2 tuần được gọi lại Sprint hoặc Iteration

Mỗi sprint sẽ kéo dài 2 tuần, mỗi sprint team leader sẽ phân công các task cho các thành viên trong team, sau đó ước lượng thời gian, mỗi ngày sẽ

có buổi họp 30 phút để báo cáo những gì đã làm được, những gì có vấn đề

và những gì sẽ được làm

Thực hiện :

- Tham gia đầy đủ các buổi training

- Tạo ra những ứng dụng cơ bản, lập trình OpenGL ES trên Windows rồi

nhúng nó vào Android

Kết quả:

- Hiểu được cách bố trí trong một project cho một dự án lớn Trình tự thực

hiện công việc trong một sprint

- Nâng cao kiến thức trong sử dụng Git để quản lý mã nguồn

3 Thực hiện project

Sau 2 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ề Angular, project cần tham gia cũng như quy trình làm việc

Trong thời gian còn lại, thực tập sinh được tham gia dự án đã tìm hiểu với tư

cách một lập trình viên frontend

Chi tiết đồ án sẽ được nói ở phần sau

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

Anh Trần Hoài Hưng

2

- Tìm hiểu về lập trình Angular

- Tìm hiểu về dự

án tham gia và quy trình làm việc

Anh Trần Hoài Hưng

3

Tham gia dự án với task công việc: Tạo trang user Profile

Anh Phan Hoàng Minh

4, 5

Tham gia dự án với task công việc: tạo trang My Lesson Lisst và My Lesson

Anh Phan Hoàng Minh

Detail

6

Tham gia dự án với task công việc: Tạo trang Course create

Anh Phan Hoàng Minh

7, 8

Tham gia dự án với task công việc: Tạo trang course Detail

Anh Phan Hoàng Minh

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

1 Giới thiệu về Web PinLearn

Pinlearn là website cho phép dạy và học online với 2 loại người dùng là Giáo viên và

Học sinh, gồm các chức năng chính:

- Tạo hội thảo (webinar)

- Đăng ký tham gia hội thảo

- Tạo lớp học gia sư ( 1 on 1 class)

- Đăng ký lớp học gia sư

- Tạo khóa học (course)

- Mua khóa học

- Quản lý lớp học, khóa học, giao dịch,…

2 Chi tiết công việc và kế hoạch thực hiện

2.1 Tạo trang User Profile

- Nội dung công việc: Sau khi người dùng tạo tài khoản thành công, mọi

thông tin của người dùng sẽ được hiển thị ở trang Profile Người dùng có thể

chỉnh sửa thông tin cá nhận ở đây

- Thực hiện:

- Thiết kế giao diện theo yêu cầu

- Show thông tin cá nhân user

- Cập nhật thông tin

- Kiểm thử lại

- Push code và báo cáo hoàn thành

- Kết quả: Tạo trang thành công, thay đổi cập nhật thông tin thành công

Hình 1 Trang user profile

2.2 Tạo trang My Lesson List và My Lesson Detail

• Nội dung công việc: Sau khi học sinh đăng ký lớp học, học sinh sẽ được

danh sách các lớp học mình đã đăng ký ở trang My Lesson list và xem chi

tiết ở trang My Lesson Detail

- My Lesson List: Các nội dung hiển thị bao gồm: Tên Giáo viên (Tutor

name), Tên lớp học (Subject / Group class), Kiểu đăng ký (Enroll Type), Kiểu lớp học(Lesson Type), Đã thanh toán (Paid), Thời gian bắt đầu (Start Time), Thời gian kết thúc (To Time), Ngày đăng ký (Created At), Trạng thái lớp học (Status) Ngoài ra học sinh còn có thể tìm kiếm theo