Báo cáo thực tập lập trình front end và isb platform

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các anh chị, leader trong team, 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 th

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 FRONT-END

VÀ ISB PLATFORM

TP Hồ Chí Minh, tháng 10 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ẽ, các ứng dụng trên 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ông nghệ Web, hay công nghệ sản xuất các trang web đã và đang phục vụ hầu hết các nhu cầu của con người từ bán hàng, dạy học đến thông tin liên lạc, Hiện nay đã có đến hơn 1.7

tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm

Lập trình web là những thứ không thể thiếu hiện nay Bạn muốn quảng bá công ty của mình để mọi người ở đâu cũng biết? Cách tiếp cận nhanh nhất là lập trình web Vì lý do này, em quyết định chọn vị trí front-end trong lập trình web làm định hướng cho việc học tập của mình

Bên cạnh thời gian 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 game trong một môi trường chuyên nghiệp, em có dự định

là sẽ thực tập trong hè Vì vậy, em quyết định chọn Tisoha - 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 Tisoha Việt Nam đã 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 các anh chị, leader trong team, 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 thể tự xây dựng một trang web hay một ứng dụng di động cơ bản Chân thành cảm ơn các anh chị trong nhóm đã 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 Đỗ Công Bá, người đã hết mình với em, đã tạo điều kiện, 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, những khó khăn việc

làm quen với môi trường mới đến những khó khăn gặp phải trong cuộc sống; cảm ơn anh Trần Nhật An, Nguyễn Văn Biên đã rất hòa đồng, training cho em về Flutter, hỗ trợ chúng em rất nhiều về các vấn đề kỹ thuật và kiến trúc của ứng dụng di động; cảm ơn bạn Võ Hoàng Đức Khoa, đã chỉ dẫn chúng em rất nhiệt tình về công nghệ Angular, đã lên kế hoạch, tạo nội dung

và bài tập trong lúc em học tập về Angular; Và cảm ơn tất cả mọi người trong nhóm, những người đã đồng hành cùng mình trải qua bao nhiêu kỉ niệm, giúp cho em thay đổi một cách ngoại mục cả về kỹ năng lẫn lối sống, giúp em học được nhiều điều 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

Nguyễn Văn Dũng TpHCM, ngày 20 tháng 10 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 5

1 Giới thiệu công ty Tisoha 6

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

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

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

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

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

2.2 Tìm hiểu ngôn ngữ TypeScript 9

2.3 Lập trình front-end với Angular 9

2.4 Nghiên cứu về thư viện Rxjs 11

2.5 Nghiên cứu về thư viện Rxjs 12

3 Thực hiện project 12

4 Lịch làm việc 12

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

1 Giới thiệu về project 14

2 Các công việc đã thực hiện 14

2.1 Cài đặt, chạy thử dự án 14

2.2 Xây dựng agent card 14

2.3 Xây dựng property card 15

2.4 Xậy dựng single property page 16

Chương 4 TÀI LIỆU THAM KHẢO 18

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

Công ty TNHH Giải pháp phần mềm TISOHA là một doanh nghiệp được thành lập vào 10/2020 đến nay đã hoạt động được gần 2 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ỹ, Malta, Ú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

TISOHA đ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

Tisoha có văn phòng chính đặt tại Quận 1 thành phố Hồ Chí Minh, và một vài văn phòng khác ở trên các quận của thành phố

Trang web giới thiệu về công ty: tisoha.com

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ề chi phí

Tuy mới là công ty start up chưa thu hút được nhiều công ty lớn tham gia nhưng sản phẩm của công ty cũng đã có mặt ở một số nước như: Canada, India, Australia,

Mỹ, Malta… và hiển nhiên trong đó có Việt Nam

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

Đợt thực tập đầu tiên với chủ đề “Lập trình web” 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 tạo ra một ứ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 năng động, hăng hái, tích cực

Thời gian : 2 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 anh Đỗ Công Bá 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 Tisoha, 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.1 Các công cụ làm việc

Thời gian : 4 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, người phụ trách đã 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ư Slack – Phần mềm chat, report công việc hàng ngày của công ty, Jira – Ứng dụng theo dõi và quản lý quy trình phát triển phần mềm, Redmine – Công cụ quản lý và theo dõi, kiểm soát các vấn đề của dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, GitLab – quản lý file giữa các thành viên trong nhóm và trong công ty

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, giúp quản lý công việc và các file tốt hơn

- TypeScript là một ngôn ngữ lập trình được phát triển và duy trì bởi Microsoft Nó

là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng kiểu tĩnh tùy chọn vào ngôn ngữ

- Kiểu dữ liệu và khai báo biến trong Typescript

- Các toán tử trong Typescript

- Các cấu trúc điều kiện và vòng lặp trong Typescript

- Hàm, Class và Mô-đun trong Typescript

- Lập trình hướng đối tượng trong Typescript

- Ngoài ra còn có các case-study nâng cao như: generic, union and intersection type, anonymous function …

Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

- Nghiên cứu, kết hợp các tài liệu mà công ty, anh chị trong nhóm cung cấp

Kết quả :

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

- 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 Lập trình front-end với Angular

Thời gian : 12 ngày (2 tuần)

Nội dung: Tìm hiểu về framework Angular.

- Angular là gì

Angular là một nền tảng phát triển, được xây dựng trên TypeScript Angular bao gồm:

 Khung dựa trên thành phần để xây dựng các ứng dụng web có thể mở rộng

 Các thư viện được tích hợp tốt bao gồm nhiều tính năng khác nhau, bao gồm routing, quản lý form, giao tiếp client-server, v.v

 Một bộ công cụ dành cho nhà phát triển để giúp bạn phát triển, xây dựng, thử nghiệm và cập nhật code của mình

- Component:

Là thành phần cấu tạo chính xây dựng nên một ứng dụng Angular Nó bao gồm (1 HTML template, 1 typescript class và 1 CSS selector

Component có thể là các trang trong trang web, có thể là các thành phần con trong trang web đó (Nó gần giống như Widget trong flutter)

- Template

Ta có thể hiểu đơn giản đó là một bản thiết kế UI Template được viết bằng HTML với cú pháp sẵn có hoặc đặc biệt do Angular cung cấp

Vì vậy HTML template hiển thị chế độ xem hoặc giao diện người dùng trong trình duyệt giống như HTML thông thường, nhưng có nhiều chức năng hơn

- Directive

Là một lớp bổ sung các hành vi cho các thành phần trong một ứng dụng Angular

Sử dụng directive để: quản lý form, danh sách, style và những gì người dùng nhìn thấy

Có 2 loại directive: attribute directives và structural directives

- Dependency injection

Phần này khá là triều tượng, nhờ có mấy anh chị hướng dẫn nên em mới có thể hiểu sơ sơ rằng, nó giúp cho Angular tạo ra các phụ thuộc mà Components, Directives, Pipes, and Injectables cần, sau đó “injector” chúng ở đâu, tùy thuộc vào yêu cầu của người code

- Form

Quản lý các nội dung người dùng nhập liệu một cách dễ dàng khi sử dụng form

- Routing

Một phần khá quan trọng trong Angular, nó giúp navigation và gửi dữ liệu giữa các trang (page) với nhua

- Thư viện Rxjs

Là một thư viện cực kỳ quan trọng trong Angular

Nó cung cấp các chức năng giúp chúng ta xử lý dữ liệu bất động bộ ( từ API, Form hay từ các nguồn bất động bộ khác)

Nó áp dụng Obsever pattern

- Làm các bài tập thực hành như tạo ứng dụng todo web đơn giản.

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

Kết quả :

- Hiểu được những khái niệm, nội dung cơ bản trong angular

- Tạo được ứng dụng cơ bản bằng Angular

2.4 Nghiên cứu về thư viện Rxjs

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

Nội dung : Các tính năng trong thư viện Rxjs

- Các đối tượng trong rxjs

Observable : Đại diện cho ý tưởng về một tập hợp các giá trị hoặc các sự kiện

trong tương lai Khi các giá trị hoặc sự kiện phát sinh trong tương lai, Observable

sẽ điều phối nó đến Observer

Observer là một tập hợp các callbacks tương ứng cho việc lắng nghe các giá trị

(next, error, hay complete) được gửi đến bởi Observable

Subscription là kết quả có được sau khi thực hiện một Observable, nó thường

dùng cho việc hủy việc tiếp tục xử lý

- Rxjs creation:

Khởi tạo một Observable Chúng ta có các hàm như (of, from, interval, )

- RxJS Filtering:

Đúng với nghĩa của từ filter, những hàm này sẽ giúp chúng ta lọc các giá trị được emit từ Observable gốc (filter, first, last, take…)

- RxJS Combination:

Kết hợp nhiều Observable lại với nhau để xứ lý một số trường hợp như:

 Muốn cùng lúc trả về 2 API

 Đợi API này trả về xong API mới thực hiện

 Đợi 2 API cùng trả về mới emit

- RxJS Error Handling:

Bắt error khi có lỗi phát sinh

- Một số khái niệm nâng cao khác

RxJS Higher Order Observables, Rxjs Subject, Muticast,

Thực hiện :

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

- Tìm kiếm thêm các tài liệu trên mạng

- Nâng cấp todo web có sử dụng Rxjs

Kết quả:

- Nâng cấp thanh công todo web có sử dụng rxjs

2.5 Nghiên cứu về thư viện Rxjs

Thời gian: 1 tháng.

Nội dung: Thực hành các kiến thức đã học và tìm hiểu được để xây dụng một những

component trong một trang web (ISB) theo yêu cầu của người hướng dẫn

Kết quả: Hoàn thành được những yêu cầu đặt ra.

Sau một tháng đượ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, thư viện Rxjs Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực chiến một dự án của công ty

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

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

Anh Trần Nhật

An, Đỗ Công Bá, bạn Lê Thành

- Học cách trao đổi,

làm việc qua email,

slack, jira

2

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

lập trình typescript

- Thực hành typescript

- Tìm hiểu về

Angular

Bạn Võ Hoàng Đức Khoa

3 - Tìm hiểu vềAngular

- Xây dựng to do web

Bạn Võ Hoàng Đức Khoa

4 - Tìm hiểu về Rxjs- Gắn rxjs vào todo

web

Bạn Võ Hoàng Đức Khoa

5

ISB platform, giai đoạn

1:

- Đọc tài liệu, đọc mã

nguồn dự án

- Tham gia Meeting

- Chạy thử dự án

- Tạo các component

nhỏ

Bạn Võ Hoàng Đức Khoa

6

ISB platform, giai đoạn

2:

- Viết component

property card

Bạn Võ Hoàng Đức Khoa

7

ISB platform, giai đoạn

3:

- Viết component agent

card

- Xây dựng single

property page

Bạn Võ Hoàng

Nguyễn Văn Đức

8

ISB platform, giai đoạn

4:

- Hoàn thành single

property page

- Testing gửi email

- Báo cáo cuối đợt

thực tập

Bạn Võ Hoàng Đức Khoa

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

ISB platform là một dự án về thương mại điện tử dùng để giới thiệu quảng bá, bán những ngôi nhà, biệt thự thông qua liên hệ các phân quyền Giữa những chủ sở hữu, những nhà mô giới và những đại lý với nhau ISB platform được xây dựng trên công nghệ Angular và NET

2.1 Cài đặt, chạy thử dự án

Nội dung: Clone source code và chạy thử dự án.

Thực hiện:

- Cài đặt đúng phiên bản Node (12.16.3)

- Đọc tài liệu về dự án và tài liệu hướng dẫn.

- Cài đặt angular, angular-cli Và cài đặt node-module (npm install).

2.2 Xây dựng agent card

Nội dung: Xây dựng thẻ hiển thị thông tin của đại lý

Thực hiện:

- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng.

- Tạo model, tạo component, viết query API.

- Đưa dữ liệu vào thẻ HTML.

- Kiểm tra dữ liệu có hiển thị đúng không, debug nếu có.

Kết quả:

2.3 Xây dựng property card

Nội dung: Xây dựng thẻ hiển thị nội dung của sản phẩm

Thực hiện:

- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng.

- Tạo model, tạo component, viết query API.

- Đưa dữ liệu vào thẻ HTML.

- Kiểm tra dữ liệu có hiển thị đúng không, debug nếu có.

-Kết quả:

2.4 Xậy dựng single property page

Nội dung: Xây dựng trang hiển thị nội dung chi tiết của sản phẩm

Thực hiện:

- Đọc tài liệu, tham khảo giao diện, style css của ứng dụng, tìm kiếm thêm trên mạng.

- Tạo model, tạo cái component con, truyền dữ liệu từ component cha sang con và ngược lại, viết query API.

- Đưa dữ liệu vào thẻ HTML.

- Kiểm tra dữ liệu có hiển thị đúng không, debug nếu có.

Kết quả:

Chương 4 TÀI LIỆU THAM KHẢO

For Typescript

https://www.w3schools.com/typescript/

https://www.typescripttutorial.net/

For Angular

100 day of Angular

Angular docs

For HTML, CSS

https://developer.mozilla.org/en-US/docs/Web/HTML

https://www.w3schools.com/html/

https://www.tutorialspoint.com/html/index.html

Như vậy, sau 2 tháng thực tập tại TISOHA, em đã học được nhiều kinh nghiệm bổ ích về lập trình front-end web với Angular cùng typescript và hoàn thành các nhiệm vụ được giao Nhờ

đó, em đã hiểu được quy trình phát triển của một dự án, đồng thời hiểu được trải nghiệm làm dự

án thực tế, tăng kĩ năng giao tiếp, xử lí tình huống

Chân thành cảm ơn Công ty TNHH Giải pháp Phần mềm TISOHA đã tạo điều kiện cho em được thực tập tại công ty Đặc biệt cảm ơn sự giúp đỡ của các anh Đỗ Công Bá và bạn Võ Hoàng Đức Khoa đã giúp đỡ tận tình cho em trong thời gian thực tập tại công ty