Báo cáo thực tập lập trình front end bằng angular cho franksalt epic

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 BẰNG ANGULAR CHO FRANKSALT EPIC Công ty thực tập : Công ty TNHH Giải pháp Phần mềm TIS

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 BẰNG ANGULAR

CHO FRANKSALT EPIC

Công ty thực tập : Công ty TNHH Giải pháp Phần mềm TISOHA

Người phụ trách : Võ Hoàng Đức Khoa

Thực tập sinh : Nguyễn Tấn Tiến

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

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

Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình thức và nội dung Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọn thực tập với vị trí Front-End là định hướng cho việc học tập và nghiên cứu sâu hơn trong quy trình sản xuất web

Angular là một framework do google tạo ra để xây dựng các ứng dụng một trang (SPA) bằng javascript, html và typescript, ra đời vào nằm 2009 với phiên bản đầu tiên là AngularJS, qua tới Angular 2 năm 2015 thì chuyển thành TypeScript, vì ra đời lâu nên angular có cộng đồng người dùng đông đảo, có hỗ trợ đầy đủ cũng như các tài liệu học tập rất nhiều, nhiều người nói học angular không dễ, vì nó là một framework rất mạnh mẽ, nhưng không vì thế mà

em từ bỏ, với sự ham học hỏi, em mong mình có thể nắm được các kiến thức nâng cáo trong angular, từ đó áp dụng được nó vào đồ án thực tế

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

sẽ thực tập trong kì này Vì vậy, em quyết định chọn công ty TISOHA là nơi sẽ giúp em thực hiện được dự định này

Đặc biệt cảm ơn anh Nguyễn Văn Dũng, đã training về Angular, hướng dẫn, hỗ trợ em rất nhiều từ các vấn đề kỹ thuật đến những khó khăn trong công việc; cảm ơn anh Võ Hoàng Đức Khoa, đã giúp đỡ cho em tận tình những khó khăn việc làm quen với môi trường mới Cảm

ơn anh Đỗ Công Bá đã tạo văn hóa công ty lành mạnh, chuyên nghiệp, đầy năng động giúp em hoàn thành thực tập và có thêm niềm đam mê, nhiệt huyết với lập trình Web

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

Phạm Xuân Bách TpHCM, ngày 17 tháng 12 năm 2022

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 6

CHƯƠNG 1 GIỚI THIỆU CÔNG TY THỰC TẬP 7

1 GIỚI THIỆU CÔNG TY TNHHGIẢI PHÁP PHẦN MỀM TISOHA 7

2 SẢN PHẨM CỦA CÔNG TY 7

CHƯƠNG 2 NỘI DUNG THỰC TẬP 9

1 TÌM HIỂU CÔNG TY VÀ CÁC KỸ NĂNG CƠ BẢN TRONG CÔNG TY 9

2 NGHIÊN CỨU KỸ THUẬT 9

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

2.2 Tìm hiểu ngôn ngữ TypeScript, HTML, CSS 10

2.3 Nghiên cứu tài liệu và những kỹ thuật về Angular 11

2.4 Nghiên cứu tài liệu và những kỹ thuật về RXJS 12

2.5 Thực hành xây dựng máy chủ API cho dự án FrankSalt Epic Platform 14

3 THỰC HIỆN PROJECT 14

4 LỊCH LÀM VIỆC 14

CHƯƠNG 3 CHI TIẾT VỀ PROJECT 16

1 GIỚI THIỆU VỀ PROJECT 16

2 CÁC CÔNG VIỆC ĐÃ LÀM 17

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

2.2 Tạo trang Property-orther-detail 18

2.3 Tạo trang Agreement-search Error! Bookmark not defined 2.4 Một số công việc khác 19

3 KẾT QUẢ 19

TÀI LIỆU THAM KHẢO 21

TỔNG KẾT 22

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

1 Giới thiệu Công ty TNHH Giải pháp Phần mềm TISOHA

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

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ề 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 Front-End bằng Angular cho FrankSalt Platform” 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 Front-end, đồ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 web 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: 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 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, cách ước tính thời gian hoàn thành công việc, sử dụng các phần mềm chuyên nghiệp cho 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, các phần mềm 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

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, Git – Hệ thống quản lý các phiên bản mã nguồn phân tán, Gitlab – Phần mềm quản lý kho mã nguồn Git,…

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àm quen và sử dụng được những phần mềm đã nêu trên

2.2 Tìm hiểu ngôn ngữ TypeScript, html và css

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

Nội dung: Được training về TypeScript, HTML và CSS

- TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các ứng dụng lớn và phức tạp Nó kế thừa nhiều khái niệm từ Java và C#, TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type Nó còn được bổ sung thêm lớp hướng đối tượng mà điều này không có ở Javascript

- HTML và CSS là 2 ngôn ngữ được dùng nhiều nhất trong lập trình web, với html là khung sườn của 1 trang web, là nơi là ta dùng để “vẽ” ra kết cấu, layout của trang web bằng các thẻ html, và CSS là lớp sơn, lớp tragn điểm để ta có thể tuỳ chỉnh giao diện, màu sắc, hình ảnh bằng các class, rồi áp dụng class đó vào các thẻ của HTML

- 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

- Các thẻ cở bản trong html và cách để áp dụng thuộc tính css vào html

- Các thuộc tính css cơ bản

- Ngoài ra còn có các case-study nâng cao để sinh viên thực tập tìm hiểu thêm như Decorators, Error Handling, Generators, Testing,…

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 thực hành tài liệu mà công ty cung cấp

Kết quả:

- Nắm được kiến thức TypeScript, HTML và CSS cơ bản

2.3 Nghiên cứu tài liệu và những kỹ thuật về Angular

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

Nội dung: Các kiến thức cơ bản về Angular framework

- Data Biding, flow chạy của một project Angular

Tìm hiểu về luồng chạy của một project Angular, cách data binding trong project

- Template-driven Forms: Cơ chế hoạt động của dạng forms này sẽ chủ yếu dựa vào các directives trên template như NgForm, NgModel, required, etc; để làm việc

Form dạng này sử dụng Two-way binding để update data model giữa template và component

- Reactive Forms: Chúng ta sẽ xây dựng form từ các model, là các object có một số chức năng đặc biệt để quản lý được các form input Nó cũng sử dụng một số (nhưng rất ít) các directives

- Router

Trong Angular 2, 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 Với các ứng dụng web thông thường, việc điều hướng theo URL thường sẽ do phía server đảm nhiệm

Thực hiện:

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

- Làm các bài tập thực hành từ hướng dẫn của tài liệu

- 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 cơ bản về Directive, Template, Form, Router

- Xây dựng được một trang web cơ bản với Angular

- Hiểu hơn về lập trình Web Front-end

2.4 Nghiên cứu tài liệu và những kỹ thuật về RXJS

Thời gian: 5 ngày

Nội dung: Các kiến thức cơ bản về 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

- Tương tự như Promise, coi mọi thứ là các steam

- Có thể handle nhiều value asynchronous

- Có thể biến đổi value thành các dạng mong muốn ở cuối stream

- Error Handling và Conditional operator

- Higher Order Observable và Ultility Operator

Thực hiện:

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

- Thực hành lấy, sử lý và quản lí dữ liệu từ api

- Áp dụng các operator để tối ưu hoá việc lấy dữ liệu

Kết quả:

- Nắm được các kiến thức cơ bản về RXJS

- Biết cách xử lí việc lấy dữ liệu từ api

2.5 Thực hành tạo page front-end cho dự án FrankSalt Platform

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 trang Web theo

yêu cầu của người hướng dẫn

Kết quả: Xây dựng được một trang web đáp ứng được những yêu cầu đặt ra

3 Thực hiện project

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ề API, Python, FastAPI, Docker 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 để tham gia thực chiến dự án mới của công

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, Slack, Jira

Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng

2

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

TypeScript, html, css nâng cao

TypeScript, html, css

- Làm ứng dụng demo

Anh Nguyễn Văn Dũng

- Làm ứng dụng demo với Angular

- Tham gia Meeting

- Chạy thử dự án

- Tạo trang orther-detail

property-Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng

8

FrankSalt Epic Platform:

- Sửa lỗi ở page property-orther-detail

- Tạo page agreement

sale Báo cáo cuối đợt thực tập

Anh Võ Hoàng Đức Khoa, Nguyễn Văn Dũng, Đỗ Công Bá

Chương 3 Chi tiết về project

1 Giới thiệu về project

FrankSalt Epic Platform là một nền tảng Quản lí và buôn bán bất động sản

2 Các công việc đã làm

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 vscode, Git và đăng nhập Gitlab

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

- Cài đặt pre-commit

2.2 Tạo trang property-orther-detail

Nội dung: tạo trang property-orther-detail

Thực hiện:

- Đọc tài liệu yêu cầu của task

- Tạo model, router, property-orther-detail page

- Tạo mock data

- Testing page

2.3 Tạo trang Agreement-search

Nội dung: Tạo trang Agreement-search và filter được trên agreement-table

Thực hiện:

- Đọc tài liệu yêu cầu của task

- Tạo model, filter, filter header

- Testing filter

2.4 Một số công việc khác

- Sửa lỗi trên các page

- Phụ thêm form vào page

3 Kết quả

TÀI LIỆU THAM KHẢO

- Anular Tutorial – 100-days-of-angular/README.md at master · vietnam/100-days-of-angular (github.com) [Lần truy cập cuối: 17/12/2022]

angular RXJS Guides – Angular - The RxJS library [Lần truy cập cuối: 17/12/2022]