Lập trình web với angular (báo cáo thực tập)

Ngành lập trình Web được sinh ra là donhu 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ìn

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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ôngngừ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ànhcông nghiệp phát triển ứng dụng web ở Việt Nam đã và đang phát triển mạnh mẽ trongmọ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à donhu 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ũngnhư 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ê Minh Phúc

3

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àmquen 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ácanh 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 5 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

Lê Minh Phúc

6

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 uytí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áchhà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ệmchi phí

Lê Minh Phúc

7

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 sinhviê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ạicô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ườngphá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

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

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.

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

2.2 Tìm hiểu về Angular

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ễnphí chuyên dụng cho công việc thiết kế web Angular được phát triển từ nhữngnă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ắtHTML cao cấp

Angular được ứng dụng rộng rãi với mục đích xây dựng project Single PageApplication (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

Lê Minh Phúc

9

• 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ệnngườ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àoHTML 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ì

nội dung Component

• templateUrl: Chỉ ra file HTML làm template cho Component, nội dungFile 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

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ừ/đếnmộ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ặcjavascript) kèm theo cả html và khi gọi thì gọi như là html luôn Các loạidirectives:

• 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ợpvớ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

- 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

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

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ôngviệ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ềmlinh hoạt dể làm sao đưa sản phẩm đến tay người dùng càng nhành càng tốtcà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ầnmề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 đượcgọi lại Sprint hoặc Iteration

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

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ờigian 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ậptrì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ứccủa công ty

- Làm quen với cáccông cụ làm việctrong 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ự ántham gia và quytrì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ạotrang user Profile

Anh Phan Hoàng Minh

4, 5 Tham gia dự án với

task công việc: tạotrang My LessonLisst và My Lesson

Anh Phan Hoàng Minh

Lê Minh Phúc

15 Detail

6 Tham gia dự án với

task công việc: Tạotrang Course create

Anh Phan Hoàng Minh

7, 8 Tham gia dự án với

task công việc: Tạotrang course Detail

Anh Phan Hoàng Minh

Lê Minh Phúc

16

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 tincủa người dùng sẽ được hiển thị ở trang Profile Người dùng có thể chỉnh sửathô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

- 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 danhsá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ớphọ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ớphọc (Status) Ngoài ra học sinh còn có thể tìm kiếm theo

• Thực hiện

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

- Show thông tin theo yêu cầu

- Thực hiện phân trang

- Tìm kiếm

- 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

Lê Minh Phúc

19

Hình 2 Trang My Lessons List

Hình 3 Trang My Lesson Detail

2.3 Tạo trang Course create

• Nội dung công việc: Giáo viên có thể tạo khóa học mới ở trang tạo mới khóa học (Course create) Một khóa học bao gồm Thông tin cơ bản (Basic Info), Mục tiêu khóa học (Course Goals), Nội dung khóa học (Course Lecture) và Khuyến mãi (Coupon)

Lê Minh Phúc

20

• Thực hiện

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

- Tạo tab Thông tin cơ bản: Bao gồm các thông tin như tên, giá tiền, thể loại, lớp, video giới thiệu, ảnh đại diện, mô tả,…

- Tạo tab Mục tiêu khóa học

- Tạo tab Nội dung khóa học: Bao gồm các session, mỗi session bao gồmnhiều lecture, giáo viên có thể đăng tải video, file mp3 hoặc file pdf lênlecture

- Tạo tab coupon: Cho phép giáo viên có thể tạo mã khuyến mãi cho khóa học của mình

- 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

Lê Minh Phúc

21

Hình 4 Tạo thông tin cơ bản cho khóa học

Hình 5 Tạo mục tiêu khóa học

Lê Minh Phúc

22

Hình 6 Tạo nội dung khóa học

Hình 7 Tạo mã khuyến mãi cho khóa học

Lê Minh Phúc

23

2.4 Tạo trang course detail

• Nội dung công việc: Hiển thị thông tin các khóa học đã được quản trị viênphê duyệt, bao gồm Thông tin cơ bản, Nội dung khóa học, Mục tiêu khóa