báo cáo thực tập lập trình ứng dụng WEB với REACTJS

Chương 2: Nội dung thực tậpTrong kỳ thực tập này, em phối hợp cùng 3 bạn khác 2 bạn back-end, và một bạn cùng emlàm phát triển ứng dụng web phát triển giai đoạn 1 cho dự án ứng dụng we

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

TP Hồ Chí Minh, tháng 01 năm 2021

Hàng triệu doanh nghiệp sử dụng Internet như một kênh truyền thông giúp tiết kiệm chiphí Nó cho phép doanh nghiệp trao đổi thông tin với thị trường mục tiêu của mình và thực hiệncác giao dịch một cách nhanh chóng, an toàn Tuy nhiên, các hoạt động này chỉ trở nên hiệu quảkhi doanh nghiệp có thể nắm bắt và lưu trữ tất cả các dữ liệu cần thiết và có phương tiện xử lýtoàn bộ các thông tin này, sau đó tiến hành trình bày kết quả cho người dùng Từ đó xuất hiệnWeb app là những ứng dụng chạy trên web Thông qua web app, người dùng có thể thực hiện

một số công việc: tính toán, chia sẻ hình ảnh, mua sắm … Tính tương tác của web app cao hơn website rất nhiều Bên cạnh đó, các tập đoàn lớn như Google, Facebook ra mắt những

framework hỗ trợ lập trình viên xây dựng các ứng dụng web như ReactJS, Angular với nhiềuphiên bản khác nhau

Cùng với xu thế đó, Công ty Cổ phần Codosa Holing , cụ thể hơn là mảng Codosa Techchọn tập trung nghiên cứu và xây dựng các ứng dụng theo Framework ReactJS Và thực tậpsinh được trực tiếp tham gia vào quá trình dưới sự hướng dẫn, định hướng của công ty

Sau ba năm học tập trên trường, với mong muốn có thêm kinh nghiệm thực tế, cũng nhưđược tham gia phát triển ứng dụng di động trong một môi trường chuyên nghiệp, nên em đãquyết định chọn Codosa nơi giúp em thực hiện những dự định này

Quá trình thực tập tại công ty đã giúp em học hỏi được rất nhiều, từ tác phong, thái độlàm việc đến các vấn đề kỹ thuật, từng bước hoàn thiện sản phẩm… Xin cảm ơn tất cả mọingười đã động viên, giúp đỡ và chia sẻ những kinh nghiệm quý báu, giúp em có những trảinghiệm tuyệt vời trong thời gian tại công ty.

Võ Phi Nhật Duy

TP HCM, ngày 14 tháng 01 năm 2021

MỤC LỤC

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

MỤC LỤC 5

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

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

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

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

3 Thực hiện project 11

4 Lịch làm việc 11

Chương 3: Chi tiết về quá trình thực tập 14

1 Giới thiệu PawnVn 14

2 Thực hiện 19

TÀI LIỆU THAM KHẢO 20

TỔNG KẾT 21

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

1 Giới thiệu công ty CodosaHolding

Tên công ty: Codosa Holding

Địa chỉ: 74/43/8 Đường số 20, Khu phố 1, Phường Long Thạnh Mỹ, Quận 9, TP Hồ

Chí Minh

Email: codosaholding@gmail.com

Điện thoại: 0931 78 00 31 - 0936 04 72 39

Codosa Holding là một công ty cổ phần kinh doanh trên các lĩnh vực:

Codosa Tech - Cung cấp các giải pháp công nghệ 4.0 phục vụ cộng đồng :Blockchain, Smart Contract, Web ( Sàn thương mại điện tử, thanh toán điện tử,Fintech, … ), Ứng dụng di động, Sàn giao dịch Forex & Crypto, … Codosa Tech lànền tảng chủ đạo để phát triển hệ sinh thái Codosa Holding

Codosa Land - Hoạt động kinh doanh bất động sản tại TP Hồ Chí Minh và cáctỉnh miền Đông Nam Bộ

Codosa Auto - Dự án cổng thông tin giao dịch các loại ô tô trên thị trường ViệtNam, bao gồm mua bán ô tô, xe máy mới cũ, cho thuê xe ô tô trên nền tảng côngnghệ 4.0 Đội ngũ công nghệ đang phát triển sản phẩm ứng dụng để khai thác thịtrường rất lớn và tiềm năng.

Codosa Mart - Dự án xây dựng chuỗi liên kết giữa nhà nông và cung cấp trực tiếpđến tay người tiêu dùng theo quy trình khép kín

SUMVIET là một công ty startup trực thuộc công ty CODOSA HOLDING đượcthành lâp từ năm 2017, là một công ty phát triển các sản phẩm công nghệ:Blockchain, Smart Contract, sàn thương mại điện tử, ví điện tử, … trên các nền tảngWeb, Android, IOS

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

Codosa Tech hiện tại đã và đang cung cấp các sản phẩm công nghệ từ website(Thương mại điện tử, Fintech, … ), ứng dụng di động (Ví điện tử, … ) đến game, sàntrade dựa trên các nền tảng như Binary Option, MT4 & MT6 Platform, trade Forex,Crypto, …

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

Trong kỳ thực tập này, em phối hợp cùng 3 bạn khác ( 2 bạn back-end, và một bạn cùng emlàm phát triển ứng dụng web ) phát triển giai đoạn 1 cho dự án ứng dụng web siêu thị cầm đồ -

hỗ trợ các doanh nghiệp nhỏ và siêu nhỏ có bước phát triển đột phá trong lĩnh vực cầm đồ ứngdụng công nghệ tìm khách hàng mục tiêu để nhanh chóng đạt hiệu quả kinh doanh Nhóm bắtđầu dự án với các bản giới thiệu và mô tả sản phẩm từ phía công ty, cùng với sự chỉ dẫn giúp đỡcủa các anh chị hướng dẫn, đến thời điểm em viết báo cáo này, nhóm đã hoàn thành cơ bảnmodule chức năng giai đoạn 1 và đang xúc tiến giai đoạn 2 đồng thời tiếp tục hoàn thiện giaiđoạn 1 ( Chi tiết dự án sẽ được mô tả ở phần sau và giới hạn theo quy định của công ty )

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ủacô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 tynhư 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ôngviệc…

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

- sử dụng trong làm việc nhóm, VScode - một editor để xây dựng ứng dụng

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

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

Nội dung : Ôn tập về các kiến thức javascript căn bản, javascript ES6 ( arrow

functions, async, await, promise, … ) và training về các kỹ thuật js nâng cao Sự khácnhau của typescript và javascript, sử dụng typescript với framework Express để xâydựng và phát triển server

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 cho việc lập trình game mobile 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

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

Nội dung: Các kiến thức cơ bản về RESTfulAPI và React JS

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứngdụng web (thiết kế Web services) để tiện cho việc quản lý các resource Nó chútrọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệuđộng…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải quaHTTP.

- Framework React JS

React JS là một framework Javascript do công ty công nghệ nổi tiếngFacebook phát triển nhằm mục đích xây dựng giao diện người dùng có tính tươngtác cao, có trạng thái và có thể tái sử dụng được Thư viện này không chỉ hoạtđộng ở phía client mà còn được render trên server và có thể kết nối với nhau.Thực tập sinh lập trình di động được training cơ bản về framework, các khái niệmcomponent lifecycle, props, state, react redux, redux-thunk, redux-saga, axios, …

Thực hiện :

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

- Tự đọc thêm tài liệu, nghiên cứu thêm về các library, luyện tập thêm về cách càiđặt, sử dụng các library

Kết quả :

- Làm quen, hiểu được kiến trúc cơ bản của các thành phần trong React JS

- Thành thạo việc cài đặt, config và sử dụng các thư viện cần dùng cho project

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

Nội dung: Các kiến thức cơ bản về Redux và Redux-saga

- Cơ bản về Redux

Redux là một thư viện quản lý state cho các ứng dụng Javascript Redux ra

đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và Flux của Facebook Lý do để

tìm hiểu redux là vì: các ứng Javascript ngày càng trở nên phức tạp thì việc quản

lý các state trở nên khó khăn hơn nên việc áp dụng Redux thì các state sẽ nằmtrong một “store” và chúng ta có lấy ra dễ dàng bất cứ state nào chúng ta muốn

- Redux-saga

Redux-saga là một thư viện được sử dụng để xử lý các side effectstrong redux Khi bạn gọi một action mà làm thay đổi state của ứng dựng và bạn cóthể muốn làm điều gì đó với sự thay đổi của state

Thực hiện :

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

- Tự đọc thêm tài liệu, nghiên cứu thêm về các library, luyện tập thêm về cách càiđặt, sử dụng các library

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

4. Lịch làm việc

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

-Tìm hiểu nội quy của công ty, quy chế đối vớithực tập sinh

-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àmviệc qua Email và Zalo

-Tìm hiểu, ôn tập vềJavascript

Anh Nguyễn Vĩnh

3

-Tìm hiểu về RESTful API

-Cơ bản thiết kế và sửdụng

Anh Trần Quốc

-Tìm hiểu nắm bắt thông tin dự án-Cài đặt, nghiên cứu sửdụng framework và cáclibrary khác như react-redux, redux-thunk,redux-saga, ant-design,react-native-vector-icon,

Khiêm

5

Tiến hành dự án PawnVn, giai đoạn 1-Lên kế hoạch

-Lên ý tưởng thiết kếgiao diện các màn hìnhđăng ký, đăng nhập, xácthực người dùng quasms

-Gắn API vào chứcnăng

Anh Trần QuốcKhánh

100%

8 -Fix bug, cải thiện

performance

Anh Trần QuốcKhánh

100%

9 & 10

-Tìm hiểu CI/CD, docker giúp triển khai ứng dụng liên tục

- Xây dựng giao diện thông tin của người dùng

- Găn API vào các chức

Anh Nguyễn VĩnhKhiêm

100%

- Phân công công việc cho các thành viên trongnhóm

- Tham gia vào các hoạt động nghiên cứu, cuộc thi và team building củacông ty

Chương 3: Chi tiết về quá trình thực tập

Theo quy chế đối với thực tập sinh, trích dẫn:

Điều 5: Bảo mật thông tin

Phần a.Thông tin của khách hàng: … Bảo mật thông tin khách hàng ( họ tên, địa chỉ,điện thoại, sản phẩm, doanh thu, dữ liệu, …)

Phần b.Thông tin của công ty: … Đảm bảo an toàn thông tin về sản phẩm, dự án đangtrong giai đoạn kế hoạch, phát triển sản phẩm hoặc chưa được phép công bố

Nên phần này sẽ mô tả giới hạn về quá trình thực tập

1 Giới thiệu PawnVn

Ứng dụng PawnVn được giới thiệu là ứng dụng theo mô hình P2P được xem lànơi trung gian của các khách hàng có nhu cầu cầm đồ, cho vay và muốn thanh lýsản phẩm, ý tưởng này dựa trên các sàn thương mại điện tử hiện có Định hướng

hỗ trợ các doanh nghiệp đồng thời đem lại lợi ích không nhỏ cho người sử dụng

Ứng dụng được xây dựng bằng React JS, với mục đích tiết kiệm chi phí khi pháttriển ứng dụng

Các thư viện sử dụng để phát triển ứng dụng:

• Redux: Thư viện giải quyết vấn đề liên quan đến quản lý các state trongReact

• Redux-saga: Thư viện được sử dụng để xử lý các side effects trong redux

• React Native Vector Icon: Thư viện với hàng chục ngàn vector icons dùngcho giao diện, dễ dàng sử dụng và tùy chỉnh, đặc biệt hỗ trợ tạo các custom icon

từ các file svg, png

• Ant Design: Thư viện UI với nhiều components thiết yếu như Header,Button, Avatar, Image, …

Ngoài những thư viện chính trên, trong quá trình phát triển còn sử dụng gần 30thử viện khác để thực hiện nhiều công việc khác nhau

Tới thời điểm viết báo cáo này, ứng dụng bao gồm các tính năng

Một số giao diện

Tính năng đăng nhập

Tính năng đăng ký

Tính năng xác thực OTP

Tính năng quản lý quyền

2 Thực hiện

4 thành viên của team fresher PawnVn:

- Trương Viết Huy Phong

TÀI LIỆU THAM KHẢO

TỔNG KẾT

Sau 7 tháng thực tập tại công ty, em đã học được rất nhiều đều, không chỉ kiến thức riêng

về lập trình mà còn về quy chuẩn làm việc tại công ty, để biết được rằng hiện tại những doanh nghiệp đang làm việc như thế nào, phối hợp nhân lực ra sao

Hơn nữa, em còn được tiếp thu những kinh nghiệp quý báu từ các anh chị và đồng

nghiệp, góp phần giúp em hoàn thiện kiến thức, kỹ năng của mình và đạt được một số thành công nhất định trong quá trình thực tập tại công ty

Về tư tưởng của bản thân, em biết được làm sao để trở thành một lập trình viên, các những lập trình viên khác giải quyết vấn đề, về nghề nghiệp sẽ làm trong tương lai, định hướng nghề nghiệp