Báo cáo thực tập lập trình react js và xây dựng ứng dụng quản lý chiến dịch doanh nghiệp

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 REACT.JS VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ CHIẾN DỊCH DOANH NGHIỆP Công ty thực tập : Tisoha Software Solu

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 REACT.JS VÀ XÂY DỰNG ỨNG DỤNG QUẢN LÝ

CHIẾN DỊCH DOANH NGHIỆP

Công ty thực tập : Tisoha Software Solutions Người phụ trách : Đỗ Công Bá

Thực tập sinh : Lê Hoàng Phú

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

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển nhanh chóng của xã hội, công nghệ thông tin trở thành một phần không thể thiếu đối với cuộc sống của mỗi con người và lập trình web là một trong số đó.

Lập trình web là một trong những lựa chọn nghề nghiệp xu hướng, phổ biến với các bạn học khoa học máy tính hoặc kỹ thuật phần mềm, công nghệ thông tin nói chung Lập trình viên web được coi là một vị trí việc làm nhiều triển vọng do nhu cầu tuyển dụng được dự đoán sẽ tiếp tục tăng lên trong tương lai Và đây cũng chính là lý do để em đưa ra quyết định đầu tiên cố gắng học chuyên sâu lập trình web và biến nó thành một cái nghề của mình.

Trải qua quá trình học tập trên trường, em đã hiểu rõ hơn về quá trình phát triển phần mềm, tư duy thuật toán và giải quyết vấn đề Tuy những kiến thức ấy là quý báu, nhưng để nó thực tế hơn thì bản thân em cần phải trải nghiệm và ứng dụng được chúng Chính quyết định ấy, em đã bắt đầu tìm kiếm công ty để mình bắt đầu hành trình thực tập

đầu tiên và TISOHA SOFTWARE SOLUTIONS chính là lựa chọn tốt nhất đối với em,

là nơi sẽ giúp em có những trải nghiệm đầy thú vị trong môi trường làm việc thực tế.

Đặc biệt, em xin chân thành gửi lời cảm ơn đến anh Đỗ Công Bá đã hướng dẫn cho emquy trình và cách thức để chúng ta có thể xây dựng nên một ứng dụng web hoàn chỉnh, cũngnhư là người truyền cảm hứng để em có thể biết mình đang ở đâu và nên làm gì trên con đườngphía trước Ngoài ra, em xin gửi lời cảm ơn đến các anh, cũng như các bạn đồng nghiệp đã nhiệttình hướng dẫn giải quyết những vấn đề mà em gặp trong quá trình hoàn thiện dự án.

Em xin trân thành cảm ơn quý thầy cô khoa Công Nghệ Phần Mềm đã tạo điều kiện mônhọc để em có thể trải nghiệm thực tế với doanh nghiệp, cũng như đã dành thời gian quý báo củamình để lắng nghe em báo cáo về quá trình thực tập của mình

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

Lê Hoàng Phú

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 1

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

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

Chương 2 NỘI DUNG THỰC TẬP 3

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

2.2 Nghiên cứu kỹ thuật 3

2.2.1 Các công cụ làm việc 3

2.2.2 Tìm hiểu Framework React.js 4

2.2.3 Tìm hiểu về VueXY Admin Template – React Admin Template 5

2.3 Thực hiện project 6

2.4 Lịch làm việc 6

Chương 3 CHI TIẾT VỀ PROJECT 9

3.1 Giới thiệu về ứng dụng 9

3.2 Thực hiện 9

3.2.1 Giai đoạn lên ý tưởng, đề xuất tính năng và so sánh với yêu cầu từ khách hàng 9

3.2.2 Giai đoạn xây dựng khung sườn cho ứng dụng web 9

3.2.3 Giai đoạn triển khai ứng dụng web 10

TÀI LIỆU THAM KHẢO 14

TỔNG KẾT 16

Chương 1 GIỚI THIỆU CÔNG TY THỰC TẬP

1.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ào10/2020 đến nay đã hoạt động được gần 2 năm Trong thời gian hoạt động, công ty đã nhậncung 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áttriể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ấtlượ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

Chương 2 NỘI DUNG THỰC TẬP

Thực tập với chủ đề “Lập trình React.js và xây dựng ứng dụng quản lý chiến dịch doanhnghiệp” nhằm giúp sinh viên thực tập tiếp cận được với dự án thực tế, đặc biệt là trao dồi kỹnăng lập trình Front-end, ngoài ra giúp sinh viên rèn luyện các kỹ năng khác như kỹ năng làmviệc nhóm, kỹ năng thuyết trình trước đám đông và kỹ năng đề xuất kế hoạch phát triển cho dự

án Khi làm việc tại công ty, sinh viên sẽ có cơ hội học tập, khám phá và làm việc trong mộtmôi trường phát triển web chuyên nghiệp

2.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ểnquy 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áchbáo cáo tiến độ dự án, cách theo dõi kênh thông tin từ dự án,…

Kết quả: Giúp sinh viên hiểu thêm về công ty Tisoha Software Solutions, 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.2 Nghiên cứu kỹ thuật

2.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à

4quả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átcác vấn đề của dự án, Visual Studio Code – Trình chỉnh sửa mã nguồn, Git – Hệ thốngquả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ả: Sử dụng tốt trong quá trình phục vụ cho công việc.

2.2.2 Tìm hiểu Framework React.js

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

Nội dung: Được training về React.js.

- Tìm hiểu lại các kiến thức về HTML, CSS và Javascript

- Tìm hiểu về các tính năng của Javascript ES6

- Tìm hiểu về Nodejs

- Tìm hiểu các kiến thức cơ bản của React.js

- Tìm hiểu về React Router – Bộ định tuyến React

- Tìm hiểu về Redux và Redux Toolkit

- Tìm hiểu về Validate – Yup library

- Tìm hiểu về cách cấu hình Axios

Thực hiện:

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

- Nghiên cứu tài liệu, làm các bài thực hành

Kết quả:

- Nắm được các kiến thức cơ bản của React.js

- Có thể tạo ra một ứng dụng nhỏ bằng React.js

2.2.3 Tìm hiểu về VueXY Admin Template – React Admin Template

Nội dung: Tìm hiểu về kiến trúc có trong template, cách thức vận hành, định dạng lại các

thành phần có sẵn, cách phân quyền, xác thực dữ liệu trước khi gửi lên, cách tổ chứcsource code, redux toolkit, các service, thiết lập ban đầu,…

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

Vuexy là mẫu bảng điều khiển quản trị kết hợp của Vuejs, React, Angular, HTML

& Laravel Đây là Mẫu bảng điều khiển dành cho quản trị viên thân thiện với nhàphát triển nhất và có thể tùy chỉnh cao dựa trên Bootstrap 4, Bootstrap Vue &Reactstrap

- Khái niệm cơ bản về Redux toolkit.

Redux-toolkit là một package được sinh ra nhằm giải quyết phần lớn những vấn

đề kể trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code reduxnhanh gọn, hoàn chỉnh theo một quy chuẩn thống nhất

- Khái niệm về ACL.

Access Control List (ACL) là danh sách tuần tự các câu lệnh dùng để quản lý lưulượng truy cập đến hoặc đi, xác định cách chuyển tiếp hoặc ngăn chặn một gói tin(packet) trên một thiết bị, được áp dụng trên một Interface nào đó, và trên bộ đệm vàohoặc ra, điều khiển Router thực hiện các hành động tương ứng là cho phép (allow)hoặc từ chối (deny)

ACL giống như loại Tường lửa Stateless, chỉ hạn chế, chặn hoặc cho phép các góitin đang truyền từ nguồn đến đích

- Khái niệm về Yup.

6Yup là một Javascript object schema validator Cùng lấy một ví dụ đơn giản đểhiểu hơn về yup nhé Cùng hướng tới một form đăng nhập bao gồm các trường'username' và 'password' Trước khi gửi request chúng ta cần kiểm tra xem end-user

đã nhập đầy đủ thông tin và đúng kiểu dữ liệu hay không

Thực hiện:

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

- Làm các bài tập thực hành như thiết kế trang quản lý thông tin nhân sự với Fake API

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

Kết quả:

- Hiểu được kiến trúc có trong VueXY Template

- Nắm rõ hơn về kiến thức React.js, xây dựng thành công trang quản lý nhân sự với FakeAPI

1 Tìm hiểu về công ty, Anh Võ Hoàng 100%

7cách tổ chức của công ty.

Làm quen với cáccông cụ làm việc trongcông ty

Học cách trao đổi,làm việc qua email, Slack,Jira

Đức Khoa, Đỗ Công Bá

2

Tìm hiểu các kiếnthức cơ bản trong lập trìnhweb và FrameworkReactJs

Anh Võ Hoàng Đức Khoa, Đỗ Công Bá

100%

3

Tìm hiểu các kiếnthức cơ bản về các packagenhư Yup, React Toolkit

Anh Võ Hoàng Đức Khoa, Đỗ Công Bá

100%

4

Thiết kế UI hai mànhình đăng nhập, đăng ký,màn hình đại lý (danh sách,thêm, xóa, sửa)

Thiết kế UI mànhình quản lý chiến dịch(danh sách, thêm, xóa, sửa)

Anh Đỗ Công Bá 100%

5

Xây dựng các storelưu trữ dữ liệu cho các tínhnăng, thiết lập API, cácdịch vụ cho tính năng quản

lý đại lý

Anh Đỗ Công Bá 100%

6

Xây dựng các storelưu trữ dữ liệu cho các tínhnăng, thiết lập API, cácdịch vụ cho tính năng quản

Anh Đỗ Công Bá 100%

 Thống nhất được quy trình xử lý các nghiệp vụ từ khách hàng.

 Thống nhất đươc các tính năng và giao diện

3.2.2 Giai đoạn xây dựng khung sườn cho ứng dụng web

- Nội dung:

 Xây dựng các router cho trang web

 Xây dựng layout chung cho các tính năng

 Xây dựng thanh điều hướng cho trang web

 Cấu hình axios và các end point

- Kết quả:

 Xây dựng đầy đủ các router cho một trang web

 Xây dựng được các khung giao diện chung, màu sắc và thanh điều hướng cho trang

3.2.3 Giai đoạn triển khai ứng dụng web

- Nội dung:

 Xây dựng tính năng đăng nhập, đăng ký

 Xây dựng tính năng quản lý đại lý

 Xây dựng tính năng quản lý chiến dịch

 Xây dựng tính năng quản lý nhà phân phối

- Kết quả:

 Tính năng đăng nhập, đăng ký

 Tính năng quản lý nhà phân phối

 Tính năng quản lý đại lý

13

 Tính năng quản lý chiến dịch

TÀI LIỆU THAM KHẢO

1. Lý thuyết cơ bản về React.js: https://reactjs.org/docs/getting-started.html [Truy cập lần cuối 01/11/2022]

2 Khóa học React.js miễn phí tại F8: https://fullstack.edu.vn/ [Truy cập lần cuối

25/10/2022]

3 Tìm hiểu cơ bản về VueXY: https://tinyurl.com/5ckaywy2 [Truy cập lần cuối

01/11/2022)]

TỔNG KẾT

Sau hơn 2 tháng thực tập tại Công ty TNHH Giải pháp Phần mềm TISOHA, em đã trang

bị cho mình thêm nhiều kiến thức mới trong mảng lập trình web để từ đó vững bước hơn trong

sự nghiệp sau này Ngoài ra, em còn học hỏi thêm được nhiều thứ khác về văn hóa công ty,cách thức làm việc, triển khai dự án, và các mối quan hệ khác

Cuối cùng, em xin 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 các anh và các bạn đồng nghiệp

đã tận tình giúp đỡ cho em trong thời gian thực tập tại công ty