Báo cáo thực tập lập trình ứng dụng web với reactjs và angular

Page | 2 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 ỨNG DỤNG WEB VỚI REACTJS VÀ ANGULAR Công ty thực tập Công ty TNHH Giải Pháp ECR Việt Nam Người phụ trách[.]

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

BÁO CÁO THỰC TẬPLẬP TRÌNH ỨNG DỤNG WEB VỚI REACTJS VÀ ANGULAR

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

LỜI MỞ ĐẦU

Ứng dụng web ngày nay có sức lan tỏa mạnh mẽ trong cuộc sống của con người Nó đãtrở thành một phần tất yếu của họ Mọi người sử dụng nó để giải trí, mua sắm, chia sẻ ảnh, v.v.Ngoài ra, các công ty, doanh nghiệp sử dụng nó để quảng cáo thương hiệu, sản phẩm, dịch vụ,

hỗ trợ hoạt động kinh doanh và thúc đẩy bán hàng Do nhu cầu tương đối cao đối với các ứngdụng web, nhiều thư viện đã được phát triển để hỗ trợ phát triển web nhanh hơn và dễ dàng hơn,chẳng hạn như Reactjs, Angular

Ngày nay, ứng dụng web đóng vai trò tất yếu trong cuộc sống con người Mọi người cóthể sử dụng web để kết nối với người khác, mua sắm, giải trí Bên cạnh đó, các doanh nghiệpcũng dần lựa chọn môi trường web để phát triển phần mềm theo nhu cầu của họ Và với nhu cầungày một tăng cao, nhiều thư viện đã được ra đời để giúp việc phát triển web nhanh chóng vàhiệu quả hơn, trong đó có một thư viện khá là phổ biến, nhu cầu việc làm cao, đó là Reactjs,Angular

 Reactjs là một thư viện javascript giúp xây dựng UI cho website, với các ưu điểm về hỗtrợ xây dựng giao diện nhanh, cải thiện hiệu năng, hạn chế lỗi trong quá trình code, tái sử dụngcác component, Reactjs đã nhanh chóng trở thành công cụ phát triển web hot nhất hiện nay,được nhiều công ty ưa dùng

Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng một trang sử dụngHTML và TypeScript Angular được viết bằng TypeScript Nó triển khai chức năng cốt lõi vàchức năng tùy chọn như một tập hợp các thư viện TypeScript mà bạn import vào các ứng dụngcủ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ư

cố nâng cao kiến thức của mình trong một môi trường chuyên nghiệp, em đã quyết định thực tậptrong kì này Vì vậy, em quyết định chọn ECR -  một môi trường lý tưởng, hiện đại, chuyênnghiệ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 Giải Pháp ECR 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 nhóm trainer, nhómthực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể hòa nhập, cũng nhưphát triển những kỉ năng về lập trì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 Quang Khải nói riêng và mọi người trong công ty nói chung

đã training, 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ữngkhó 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ềukiện em làm bài báo cáo này

Đinh Việt HàoTPHCM, ngày 23 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 6

1 Giới thiệu công ty TNHH Giải Pháp ECR Việt Nam: 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ữ Javascript, Typescript 8

2.3 Lập trình ReactJS với MobX 9

2.4 Git, Gitlab: 10

2.5 Lập trình với Angular 10

3 Thực hiện project 11

4 Lịch làm việc 11

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

1 Dự án Click-Bluezinc 14

1.1 Đặt lịch khám, đặt cuộc hẹn, tạo lịch: 14

1.2 Tạo mới một route, tính năng mới 15

2 Dự án Stock-Ticketing 16

2.1 Cổng thanh toán Stripe, Opayo, Wordpay: 16

2.2 Thực hiện đặt ghế, đặt chỗ ngồi: 18

Chương 4: Tổng kết 20

1 Kết quả thu được: 20

2 Các điểm yếu của bản thân: 20

3 Cảm nhận về công ty: 20

TÀI LIỆU THAM KHẢO 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 ECR Việt Nam:

ECR cung cấp hệ thống bán vé và đặt chỗ cho Big Bus Tours, National Express, Hội đồngthành phố Bournemouth (BCC) và Auckland Explorer ECR Việt Nam đã đóng vai trò quantrọng trong việc phát triển TicketPoS

ECR Việt Nam đã làm việc với một số công ty phà như: Công ty Thuyền Ngọc Mỹ & PhàHuế Chúng tôi coi ECR Việt Nam là cơ hội để mở rộng danh mục đầu tư toàn cầu của ECRvới một ngành dọc mới Việc mua lại sẽ cho phép cả hai bên đóng góp vào việc cung cấp chokhách hàng phà những khả năng mới và sáng tạo như; ứng dụng tiến bộ và nhật ký cổngthông tin thành viên

Đến nay, nhóm phát triển Việt Nam đã tạo ra một số giải pháp bán vé mới sáng tạo nhấtcủa ECR Với nhiều dự án mới đang được triển khai hơn bất kỳ năm nào trước đó, công tytiếp tục mở rộng dấu ấn của mình tại thị trường bán lẻ và bán vé di động

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

ECR cung cấp nhiều loại công cụ bao gồm các ứng dụng có thương hiệu, lập kế hoạchhành trình, thanh toán di động, phân tích chi tiết, chuyển tuyến theo yêu cầu và được lên lịchtrước Bao gồm bất kỳ loại dịch vụ vận chuyển nào, trên bất kỳ số lượng nhà khai thác nào,nền tảng của chúng tôi vượt trội về tính linh hoạt và hiệu suất

Trong các giải pháp bán vé và quản lý khách truy cập hoàn toàn trên thiết bị di động ECRmang đến cho bạn khả năng hiển thị và kiểm soát tốt nhất chưa từng có trong thời gian thựcvới hệ thống mạnh mẽ nhất của chúng tôi cho đến nay Độ tin cậy, tính linh hoạt và tính môđun trong nhiều ứng dụng đa dạng nhất thông qua bán vé, quản lý khách truy cập, CRM, sựkiện, bán lẻ và đặt chỗ

Chúng tôi đã phát triển các giải pháp riêng cho TOC trên khắp Vương quốc Anh và Châu

Âu RailPoS, chạy trên thiết bị đầu cuối cầm tay Go2 tất cả trong một duy nhất, cung cấp mộtgiải pháp hợp lý và đã được chứng minh để mang lại hiệu quả tốt nhất trong bán lẻ trên tàu,kiểm soát hàng tồn kho và hậu cần, quản lý phi hành đoàn và bán vé

LeisurePoS qua nhiều lần phát triển, giải pháp của chúng tôi có thể bao gồm mọi khía cạnhtrong hoạt động của bạn Được sử dụng trên khắp châu Âu cho các công ty dẫn đầu thị trườngbao gồm David Lloyd Leisure, Audley Villages và BUPA, LeisurePoS mang đến cho bạntính mô đun, khả năng mở rộng và khả năng kiểm chứng trong tương lai Chuyển đổi từ các

hệ thống cũ được thực hiện dễ dàng Thêm chức năng, trang web bổ sung và địa điểm bánhàng, mở rộng quy mô để phù hợp với nhu cầu phát triển của bạn Dữ liệu thời gian thựccung cấp cho bạn khả năng hiển thị và kiểm soát đầy đủ trên nhiều khía cạnh của doanhnghiệp Từ đặt chỗ spa đến sân cắm trại, phục vụ ăn uống, cửa hàng bật lên, thuê và đặt địađiểm, sự kiện cho đến tư cách thành viên Chúng tôi điều chỉnh hệ thống của chúng tôi theonhu cầu của bạn

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

Đợt thực tập với chủ đề “Front-end Web Developer” nhằm mục đích giúp sinh viên thực tậpđược đào tạo toàn diện về việc lập trình Web, giao diện, UI/UX, đồ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ọctập, khám phá và làm việc trong một môi trường phát triển chuyên nghiệp, đa quốc gia

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 :

Tham gia những buổi sharing chung về giới thiệu công ty, quá trình phát triển,những quy tắc, quy định về bảo mật, an toàn thông tin, văn hóa, sự kiện, cách làm

việc, v.v

Kết quả : Hiểu thêm về công ty ECR, 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áchnhiệ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 : 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, 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ư:

o Gitlab - Công cụ quản lý code, nhiệm vụ

o Jira - sử dụng trong làm việc nhóm

o Bitbucket – dùng để quản lý mã nguồn

o RocketChat - phần mềm để giao tiếp nội bộ

o 1Office - sử dụng để chấm công, xem bảng lương, quản lý nhân sự

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

2.2 Tìm hiểu ngôn ngữ Javascript, Typescript

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

Nội dung :

- Được training về các kỹ thuật Javasciprt, Typescript nâng cao cùng với đó là cáccông cụ hỗ trợ khác như VS Code, ESLint và những kiến thức quan trọng cho việchọc các framework.

- Lập trình đồng bộ, bất đồng bộ: Hiểu rõ về lập trình bất đồng bộ trong javascript

- VS Code: Hiểu được các cú pháp, ứng dụng các tiện ích mở rộng để tăng hiệu suấtlàm việc

- Typescript: Hiểu được cách khởi tạo vùng dữ liệu cho biến, các loại type,interface

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 ngôn ngữ Javascript, Typescript

- 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 đúngchuẩn, dễ đọc, dễ hiểu

2.3 Lập trình ReactJS với MobX

Nội dung: Các kiến thức cơ bản về ReactJS cũng như công cụ quản lý state Mobx để

có thể tham gia vào dự án công ty

- Khái niệm cơ bản về ReactJS:

React là 1 thư viện JavaScript được tạo ra bởi facebook và instagram, nó hỗ trợchúng ta trong việc thiết kế giao diện người dùng (UI) giống như là phần View trong

mô hình MVC vậy nhưng thực tế thì nó còn hơn như vậy nhiều

- MobX:

Mobx là 1 thư viện Javascript dùng để quản lý state của ứng dụng Mobx có thể sửdụng được với Javascript thuần và với cả các modern framework như Angular, Vuehay React Đằng sau Mobx là cả 1 tư tưởng lớn về Reactive Programming

Flow hoạt động của Mobx sẽ gồm 4 bước chính như sau:

o Các event từ UI sẽ gọi đến những actions trong store của Mobx

o Các actions này sẽ thay đổi trực tiếp (mutate) các observable state trongstore.

o Những observable state sau khi thay đổi sẽ được truyền đến các cập nhậtlại những computed value (những giá trị được tính toàn và trả về bởimethod getter)

o Cuối cùng, các side-effect (như render component) sẽ được trigger đểrender component với state mới

Thực hiện :

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

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

Kết quả :

- Vì đã có kiến thức nền tảng từ trước nên việc học khá nhanh

2.4 Git, Gitlab:

Nội dung : Các kỹ thuật cơ bản về việc sử dụng git Cũng như làm quen giao diện,

luồng đi trong gitlab

- Học các lệnh git cơ bản:

Được các trainer hướng dẫn dùng các lệnh cơ bản cho việc làm nhóm nhưcommit, pull, push, status, clone

- Học các lệnh git nâng cao, fix conflict:

Được các trainner hướng dẫn dùng các lệnh nâng cao như reset, cherry-pick,stash, stash pop tùy vào từng trường hợp cụ thể, hướng dẫn fix conflict đúng cách

Thực hiện :

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

- Tìm hiểu thêm tài liệu ở trang chủ của git, gitlab

Kết quả:

- Đã có thể sử dụng git hiệu quả theo chuẩn của team, cũng như đã quen với luồnglàm việc trên gitlab

2.5 Lập trình với Angular

Nội dung : Các kỹ thuật cơ bản về lập trình với Angular

- Khái niệm về Angular:

Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng một trang sửdụng HTML và TypeScript Angular được viết bằng TypeScript Nó triển khai chứcnăng cốt lõi và chức năng tùy chọn như một tập hợp các thư viện TypeScript mà bạnimport vào các ứng dụng của mình

Angular là một javascript framework do google phát triển để xây dựng các SinglePage Application (SPA) bằng JavaScript , HTML và TypeScript Angular cung cấpcác tính năng tích hợp cho animation , http service và có các tính năng như auto-complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biêndịch thành JavaScript và hiển thị tương tự trong trình duyệt

Thực hiện :

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

- Tìm hiểu thêm tài liệu ở trang chủ của git, gitlab

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

4 Lịch làm việc

Tuần Công việc Người hướng dẫn hoàn thành Mức độ 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ủacô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

Chị Nguyễn NgọcPhương Trâm

2,3

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

- Thực hành vớiJavascript,

Anh Phan TuấnTú

6 - Tìm hiểu về Git,Gitlab, Jira,

Bitbucket

Anh Lê Anh Đông

7,8

- Tìm hiệu vềAngular, các bài tập

cơ bản để hiểu thêm

về framework

Anh Trần QuangKhải

9,10

- Tiến hành vào dự

án, làm các task cưbản để làm quen

Anh Phan TuấnTú

15,16 - Fixbug thanh toán Anh Phan Tuấn

card, sai logic từ

scrolldown đến dữliệu cần nhập khichuyển giữa cáctrang…

Tú

17,18

- Dự án 1 chuyển quamaintain, sang dự

án mới về Angular

- Làm các task cơbản để làm quen dự

án, tiến hànhcherry-pick commitgiữa các client

Anh Trần QuangKhải

19,20

- Làm task liên quanđến 2 hệ thốngchính là bán vé, đồăn…

- Kiểm tra mặt hàng

có bị OutOfStock,

có offer bên trongsản phẩm để hiệnpopup câu hỏi, …

- Field data vào lịch,những ngày có thểđặt lịch, đặt vé

- Fix bugs

Anh Trần QuangKhải

21,22,23,24

- Tiến hành làm cácphương thức thanhtoán quốc tế nhưStrike, Opayo,WorldPay áp dụngvào website bán sảnphẩm

- Làm ma trận ghếngồi, số ghế, chữcái

- Fix bugs

Anh Trần QuangKhải

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

1 Dự án Click-Bluezinc

Là một phần mềm OMS OMS là viết tắt của Operation Management System làmột phần mềm ứng dụng được thiết kế để hỗ trợ việc quản lý vận hành

Cung cấp cho bạn các công cụ để quản lý mọi khía cạnh của doanh nghiệp từ một

hệ thống trung tâm, giảm thời gian dành cho quản trị viên để đảm bảo bạn dành nhiềuthời gian nhất có thể cho khách hàng Ví dụ như quản lý hồ sơ khách hàng, phòng, cuộchẹn, lớp học, thông tin liên lạc, báo cáo kinh doanh, tài chính, biểu mẫu, ghi chú lâmsàng,

 Các tính năng chính đã làm:

1.1 Đặt lịch khám, đặt cuộc hẹn, tạo lịch:

- Giao diện:

- Công việc chính:

o Tái cấu trúc giao diện trang đặt cuộc hẹn cho khách hang

o Kiểm tra, validate lại các giá trị nhập vào trước khi thực hiện “Save”

o Tạo, sửa, tìm kiếm “Client” và hiển thị ở phía bên phải Tăng trải nghiệm chongười dung, thuận tiện hơn trong việc chọn “Client”

- Thực hiện: 2 thành viên của team FE Reactjs

o Đinh Việt Hào

o Phạm Đình Đông

- Mentor: Anh Phan Tuấn Tú

1.2 Tạo mới một route, tính năng mới

- Giao diện:

- Công việc chính:

o Tạo mới một route, tính năng mới “Case Notes”

o Thiết kế bảng dữ liệu theo yêu cầu, theo thiết kế mới mẻ, năng động

- Thực hiện: Đinh Việt Hào

- Mentor: Anh Phan Tuấn Tú

2 Dự án Stock-Ticketing

Là một phần mềm E-Comerce kết hợp với OMS OMS là viết tắt của OperationManagement System là một phần mềm ứng dụng được thiết kế để hỗ trợ việc quản lývận hành

Phần mềm này chia làm 2 phần Phần thứ nhất sẽ là “Stock”, nơi quản lý khohàng, sản phẩm, vé bán, vận hành từ phía quản lý Phần thứ hai sẽ là “Ticketing”, nơitương tác của khách hàng tới các tính năng của phần mềm

 Các tính năng chính đã làm:

2.1 Cổng thanh toán Stripe, Opayo, Wordpay:

- Giao diện: