Báo cáo thực tập lập trình ứng dụng WEB với REACT và NODE

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA 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 REACT VÀ NODE Công ty thực tập : Công ty cổ phần SaveMoney Người phụ trách : Lê Xuâ

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 REACT VÀ NODE Công ty thực tập : Công ty cổ phần SaveMoney

Người phụ trách : Lê Xuân Hải

Thực tập sinh : Nguyễn Duy Cương

TP Hồ Chí Minh, tháng 07 năm 2020

LỜI MỞ ĐẦU

Chúng ta biết rằng trang web đầu tiên được ra mắt vào tháng 8 năm 1991 bởiTim Berners-Lee Số lượng trang web đã tăng lên kể từ đó, trước khi phát triển lênhàng triệu trang mới được thêm trước năm 2000 Ngày nay, có hơn 1,7 tỷ trang webtrên toàn thế giới và đếm (Internet Live Stats, 2020) Ngày nay với sự phát triển mạnh

mẽ của internet và cơ sở hạ tầng viễn thông, ngành công nghiệp “không khói” webkhẳng định vai trò và vị thế to lớn của mình Nhu cầu phát triển web phục vụ cho kinh

tế, thương mại, giáo dục, văn hoá, rất lớn, đây là thị trường rất “béo bở” cho cáccông ty, tổ chức, cá nhân trong ngành lập trình web.Cũng xin cảm ơn thầy cô trongkhoa

Bản thân là một người đam mê công nghệ và mong muốn áp dụng công nghệ

để làm cho cuộc sống tốt hơn, em luôn luôn học hỏi, trau dồi thêm các kiến thức, kỹnăng cuộc sống và một vốn công nghệ cần thiết để phục vụ nhu cầu của bản thân.Web là một trong số các công nghệ em đã và đang theo đuổi Em đã bắt đầu học lậptrình web từ năm thứ ba của đại học và vẫn đang tiếp tục cho đến ngày hôm nay lànăm thứ tư

Thời điểm học kỳ hai của năm tư đại học, nhận thấy đây là thời điểm thích hợp

để bản thân đi học hỏi kỹ năng, kinh nghiệm làm dự án thực tế em bắt đầu lên kếhoạch đi thực tập doanh nghiệp Bản thân em sau nhiều ngày suy nghĩ, đắn đo đãquyết định lựa chọn công ty cổ phần Save Money là nơi thực tập chính thức của bảnthân Đây là công ty có môi trường trẻ, nhiệt huyết, phù hợp cho em học tập và pháttriển

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn sâu sắc đến quý Công ty cổ phần SaveMoney,anh Trần Quang Ninh - CEO công ty đã tạo điều kiện cho em có cơ hội được học tập

và trải nghiệm trong môi trường chuyên nghiệ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ó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 một website Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiềuthờ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

em xin gửi lời cảm ơn đặc biệt đến anh Lê Xuân Hải - Technical Lead công ty đã chânthành chia sẻ cho những kiến thức, kinh nghiệm trong công việc và cuộc sống, nhữnglời khuyên bổ ích để em tiến bộ, phát triển hơn

Cuối cùng em xin gửi lòng biết ơn đến các thầy cô khoa Công nghệ Phần mềm,trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh đãnhiệt tình hỗ trợ, tạo điều kiện để em hoàn thành tốt môn thực tập doanh nghiệp này

Sinh viên thực hiệnNguyễn Duy Cương

TP Hồ Chí Minh, ngày 01/07/2020

NHẬN XÉT CỦA KHOA

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

……….………

………

Tìm hiểu công ty và các quy định đối với nhân viên 10

Tìm hiểu ngôn ngữ JavaScript 11Lập trình web front-end với React 11Lập trình web back-end với Node 12

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

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

1 Giới thiệu công ty cổ phần SaveMoney

SaveMoney là một công ty công nghệ bảo hiểm chuyên xây dựng nền tảng bảo hiểm kỹ thuật số cho các ngân hàng, bệnh viện và nhà mạng viễn thông dựa trên sự hợp tác chiến lược để chia sẻ lợi ích kinh tế bền vững Mục tiêu của công ty là phục vụ hàng triệu người Việt Nam hiện chưa có bảo hiểm

Mô hình kinh doanh chính của SaveMoney là phát triển và xây dựng dịch vụ tài chính tiêu dùng cá nhân cho một công ty sở hữu tập dữ liệu khách hàng lớn SaveMoney là một trung gian kết nối các công ty sở hữu bộ dữ liệu với các nhà cung cấp dịch vụ tài chính và bán lẻ Ra đời vào tháng 8 năm 2013, Savemoney mong muốn đóng góp cho nền tảng công nghệ Việt Nam, tập trung vào công nghệ AI cho phép các hệ thống máy tính thực hiện các nhiệm vụ đặc biệt đòi hỏihành vi thông minh của con người

SaveMoney cung cấp các giải pháp nền tảng bảo hiểm kỹ thuật số cho các ứng dụng dữ liệu lớn từ viễn thông, ngân hàng, công ty, mạng xã hội và các công ty siêu ứng dụng Hiện tại, chúng tôi đã triển khai thành công cho 35 triệu thuê baovinaphone có thể mua bảo hiểm dễ dàng bằng cách nhắn tin trên điện thoại, cách bạn mua bảo hiểm cũng giống như mua dịch vụ gói 3G hoặc 4G có thể được thanh toán hàng tháng

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

Bwinwin Agent ("BWW"): một ứng dụng di động hỗ trợ kết nối thương mại Đây

là một nền tảng để các nhà cung cấp có thể quảng bá sản phẩm và dịch vụ của

họ Các nhà cung cấp sau khi đăng ký trên BWW có thể đăng các sản phẩm, dịch vụ và ưu đãi của họ trên ứng dụng BWW hiện đang cung cấp các sản phẩm trên nhiều lĩnh vực khác nhau: du lịch, tiêu dùng, sức khỏe và sắc đẹp, dịch vụ tài chính

VinaCare: mua bảo hiểm dễ dàng thông qua nhà mạng Vinaphone

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

Đợt thực tập với chủ đề “Lập trình ứng dụng web với React và Node” 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 web sử dụng công nghệ React và Node, đồ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 phần mềm chuyên

nghiệp

1 Tìm hiểu công ty và các quy định đối với nhân viên

Thời gian: 1 ngày

Nội dung: Giới thiệu về công ty, nhân sự và các quy định đối với nhân viên

- Được 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, các sản phẩm, thành quả đạt được và hướng đi của công ty trong tương lai

- Ngoài ra được giới thiệu về bộ phận nhân sự của công ty, nắm được các quy định đối với nhân viên, hiểu được văn hoá và tham gia vào các hoạt động, phong trào hàng ngày, hàng tuần trong công ty

Kết quả: Hiểu hơn về công ty cổ phần SaveMoney, các đồng nghiệp, văn hoá

và môi trường làm việc Từ đó dễ dàng thích nghi hơn với môi trường mới để đạt được năng suất cao trong công việc

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

- Công cụ trao đổi, giao tiếp: Slack, Telegram, Skype

- Công cụ quản lý dự án: Jira

- Công cụ quản lý phiên bản phần mềm: Git, GitLab

- Công cụ liên quan lập trình: WebStorm, DockStation, DataGrip.

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, biết được công dụng và cách sử dụng các công cụ phục

vụ công việc

2.2 Tìm hiểu ngôn ngữ JavaScript

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

Nội dung: Tìm hiểu các kiến thức cơ bản và nâng cao của JavaScript

- Lập trình hướng chức năng (Functional Programming)

- Các kiến thức cơ bản về DOM, Strings, Arrays, Objects, Variables,

Functions, Scopes, Browser Storage, HTTP

- ES6, ES7, ESNext và các vấn đề hạn chế của JavaScript

- Tìm hiểu về TypeScript, npm và publish package đầu tiên lên npm

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

- Có được những kiến thức quan trọng về TypeScript, npm

- 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 và dễ hiểu

2.3 Lập trình web front-end với React

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

Nội dung: Các kiến thức và kinh nghiệm lập trình front-end với React

- Khái niệm cơ bản về React, JSX, State, Props, Lifecycle Hooks, Styles

- Sử dụng thư viện Axios để tương tác với API

- Lập trình React với TypeScript, Hooks

- Sử dụng scss, less và styled-components

- Tìm hiểu về kiến trúc Flux và áp dụng Redux, Redux-Saga.

- Viết unit testing với Jest, Enzyme

- Triển khai ứng dụng React lên server sử dụng Heroku

Thực hiện:

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

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- 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 trong lập trình front-end với React

- Biết cách sử dụng Redux, Redux Saga, Jest và các thư viện hỗ trợ React

- Nắm được cách triển khai ứng dụng React với Heroku

2.4 Lập trình web back-end với Node

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

Nội dung: Sử dụng Node trong lập trình web back-end

- Kiến thức cơ bản về Server, giao thức HTTP, kiến trúc cơ bản của end

back Sử dụng File System, Error, Hash

- Tìm hiểu về Express và thực hiện một trong web theo mô hình MVC

- Sử dụng Sequelize và Mongoose cho database

- Viết một web api sử dụng MERN stack và PERN stack

- Viết API testing và unit testing cho ứng dụng Node

Thực hiện:

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

- Tạo ra ứng dụng đầu tiên viết bằng Express, sử dụng mô hình MVC

- Viết ứng dụng thứ hai, áp dụng MERN stack.

- Viết ứng dụng thứ ba, áp dụng PERN stack

Kết quả:

- Nắm được kiến thức cơ bản về back-end và những kiến thức phụ trợ

- Biết cách sử dụng Express, MongoDB, Postgresql, Mongoose, Sequelize

và các thư viện hỗ trợ việc kiểm thử

- Biết cách áp dụng mô hình MVC, MERN stack và PERN stack vào các ứng dụng web back-end

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ề JavaScript, React, Node Trong tháng thứ hai, người hướngdẫn đã yêu cầu thực tập sinh áp dụng những kiến thức đã học để thực hiện một ứng dụng web ứng dụng hai công nghệ là React và Node

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

4 Lịch làm việc

Người hướng dẫn

Mức độ hoàn thành

Nhận xét của người hướng dẫn

1 - Giới thiệu về công ty,

nhân sự và các quy định đối với nhân viên

- Tìm hiểu về các công cụ

sẽ được sử dụng trong quá trình làm việc

Anh Lê Xuân Hải

09 / 10 Thích nghi nhanh

với môi trường mớicủa công ty, tích cực trong việc hỏi đáp các vấn đề còntrở ngại, vướng

2

Tìm hiểu các kiến thức cơ bản

và nâng cao của JavaScript

Anh Lê Xuân Hải

10 / 10 Có kiến thức tốt và

JavaScript và TypeScript Hỗ trợ tốt các thành viên cùng học tập, phát triển

3, 4

Các kiến thức và kinh nghiệm lập trình front-end với React

Anh Lê Xuân Hải

10 / 10 Có kinh nghiệm và

kỹ năng tốt về React, Redux, Redux-Saga Hỗ trợ tốt mọi người

5, 6

Sử dụng Node trong lập trình web back-end

Anh Lê Xuân Hải

10 / 10 Thành thạo Node

và GraphQL Hỗ trợ team trong quá trình nghiên cứu, tìm giải pháp công nghệ

7, 8, 9

Giai đoạn alpha:

- Lên kế hoạch

- Tìm hiểu nghiệp vụ chung

- Viết codebase cho front-end

sử dụng React, Ant Design, GraphQL client

- Viết codebase cho back-end

sử dụng Node, GraphQL server

- Tích hợp Docker và Kubernetes cho trường

Anh Lê Xuân Hải

10 / 10 Nắm bắt tốt nghiệp

vụ của dự án Chủ động nêu ý kiến, quan điểm, giải pháp để cải thiện kết quả công việc, sản phẩm Có kiến thức tốt về Docker, Kubernetes, hỗ trợ tốt team DevOps trong quá trình triển

10, 11,

12

Giai đoạn beta:

- Viết api và unit testing cho các API bên back-end

- Triển khai giao diện trang web từ thiết kế Figma theo từng màn hình, component

- Viết các xử lý logic cho các màn hình,

component

- Kết nối các API từ end cho từng màn hình, component

back Kết nối logic giữa các màn hình

- Viết unit testing cho end

front Tối ưu css và image cho trang web

- Build source code và triểnkhai lên server

- Fix các bug bị test thất bại

Anh Lê Xuân Hải

09 / 10 Làm việc hiệu quả

với team Design và

QC Hỗ trợ tốt Product Owner trong việc hoàn thành tài liệu cho

dự án

từ bộ phận QC.

- Hoàn thành các tài liệu về

dự án

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

1 Giới thiệu về dự án:

Tên dự án: Tích hợp kênh bán bảo hiểm trên ứng dụng banking của ngân hàng Nam Á

1.1 Ý tưởng

SaveMoney là một platform lớn chuyên về mảng bảo hiểm kỹ thuật số,

SaveMoney là gateway trung gian giữa các công ty kinh doanh bảo hiểm và các đối tác có chiến lược phân phối bảo hiểm đến người dùng cuối Ngân hàng Nam

Á là một trong những mắt xích quan trọng quan việc phân phối bảo hiểm đến tayngười dùng Xuất phát từ nhu cầu mua bảo hiểm cho xe máy, ô tô lớn từ người dùng, công ty cổ phần SaveMoney và ngân hàng Nam Á tiến hành hợp tác để tích hợp kênh bán bảo hiểm trên ứng dụng banking của ngân hàng này nhằm đáp ứng nhu cầu mua bảo hiểm lớn của người dùng

1.2 Các màn hình chính và tính năng

Vì các lý do liên quan đến bảo mật, bí mật kinh doanh của công ty cổ phần SaveMoney và ngân hàng Nam Á, sinh viên chỉ được trình bày một số tính năngđược cho phép từ công ty cổ phần SaveMoney

1.2.1 Màn hình Trang chủ

Màn hình Trang chủ chứa thông tin các gói bảo hiểm, các sản phẩm bảo hiểm, các đối tác cung cấp sản phẩm bảo hiểm, các bài viết và quảng cáo

1.2.2 Màn hình nhập thông tin xe

Màn hình yêu cầu khách hàng nhập các thông tin về ô tô như: mục đích sử dụng, thương hiệu, dòng xe, năm sản xuất, biển số,

1.2.3 Màn hình Trả lời câu hỏi chống trục lợi

Màn hình này sẽ hỏi người dùng một số câu hỏi nhằm chống trục lợi từ người dùng

1.2.4 Màn hình danh sách sản phẩm so sánh

Màn hình này chứa thông tin các sản phẩm bảo hiểm phù hợp với người dùng kèm theo chức năng so sánh sản phẩm

1.2.5 Màn hình so sánh bảo hiểm xe

Màn này so sánh 2 gói sản phẩm bảo hiểm xe dựa trên các tiêu chí giá cả, thời hạn sử dụng, lợi ích kèm theo,

1.2.6 Màn hình đăng ký gói bảo hiểm

Màn hình yêu cầu khách hàng nhập các thông tin liên quan đến việc đăng ký mua sản phẩm bảo hiểm

1.2.7 Màn hình đăng ký chủ sở hữu

Màn hình yêu cầu nhập các thông tin liên quan đến chủ sở hữu như: họ tên, ngày sinh, địa chỉ, CMND,

1.2.8 Màn hình xác nhận thanh toán

Yêu cầu người dùng xác nhận thông tin trước khi tiến hành thanh toán mua sản phẩm bảo hiểm

2 Thực hiện

3 thành viên của team internship:

- Nguyễn Duy Cương

- Nguyễn Lê Ngọc Thanh

- Trịnh Xuân Đức

1 thành viên mentor:

- Anh Lê Xuân Hải

3 Kế hoạch

Giai đoạn alpha:

- Lên kế hoạch

- Tìm hiểu nghiệp vụ chung

- Viết codebase cho front-end sử dụng React, Ant Design, GraphQL client

- Viết codebase cho back-end sử dụng Node, GraphQL server

- Tích hợp Docker và Kubernetes cho trường development và production

- Triển khai ứng dụng lên Azure

- Triển khai các API cho back-end

Kết quả: Hoàn thành 100% các yêu cầu đã được giao.

Giai đoạn beta:

- Viết api và unit testing cho các API bên back-end

- Triển khai giao diện trang web từ thiết kế Figma theo từng màn hình, component

- Viết các xử lý logic cho các màn hình, component

- Kết nối các API từ back-end cho từng màn hình, component

- Kết nối logic giữa các màn hình

- Viết unit testing cho front-end

- Tối ưu css và image cho trang web

- Build source code và triển khai lên server

- Fix các bug bị test thất bại từ bộ phận QC

Kết quả: Hoàn thành 100% các yêu cầu đã được giao.

TÀI LIỆU THAM KHẢO

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

Như vậy, chỉ trong vòng một khoảng thời gian ngắn 12 tuần, em đã được trải nghiệm

và học hỏi rất nhiều kỹ năng, kiến thức quan trọng để có thể thích ứng nhanh với công việc của một lập trình viên web trong tương lai

Em xin chân thành cảm ơn anh Lê Xuân Hải và các bạn trong team internship, xin cảm

ơn mọi người đã giúp đỡ em hoàn thành kỳ thực tập này