Báo cáo thực tập xây dựng WEBS quản lý sản phẩm và khách hàng

2 LỜI MỞ ĐẦU Hiện tại, chúng ta chứng kiến sự phát triển chóng mặt của ngành công nghệ thông tin và mạng internet, hàng loạt ứng dụng của internet đã được ra đời, kéo theo đó là trào lư

Trang 1

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

XÂY DỰNG WEBSITE QUẢN LÍ SẢN PHẨM VÀ KHÁCH HÀNG

Công ty thực tập: Công ty TMA Solutions

Người phụ trách hướng dẫn: Nguyễn Thiện Huấn

Thực tập sinh: Võ Phúc Tài

MSSV: 17521003

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

Trang 2

2

LỜI MỞ ĐẦU

Hiện tại, chúng ta chứng kiến sự phát triển chóng mặt của ngành công nghệ thông tin và mạng internet, hàng loạt ứng dụng của internet đã được ra đời, kéo theo đó là trào lưu chuyển đổi các nghiệp vụ cũ sang nền tảng này Điều đó có nghĩa là không loại trừ nghiệp vụ quản lí Cần thừa nhận việc bảo mật trên internet không cao, nhưng khi tích hợp bán hàng và quản lí cùng lúc, các thông tin lưu trữ không quá nhạy cảm thì website lại trờ thành lợi thế và nhu cầu thiết yếu của mọi doanh nghiệp

Ngành lập trình web gần như được sinh ra cùng với internet, ngay cả môi trường internet cũng đang phát triển và hoàn thiện, người dùng mới vẫn liên tục gia tăng Điều đó chứng minh rằng lĩnh vực này vẫn chưa bao giờ là lỗi thời Được tiếp cận từ sớm và lớn lên với chúng, giới trẻ sẽ là nguồn nhân lực quan trọng cho sự phát triển của ngành lập trình web sau này Vì lý do này, em quyết định chọn lập trình web làm định hướng cho việc học tập của mình

Sau ba năm học tập trên trường, để 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 Vì vậy, em quyết định chọn TMA Solutions - một môi trường lý tưởng, hiện đại - là nơi sẽ giúp em thực hiện được dự định này

Trang 3

3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TMA Solutions đã 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 anh chị trong nhóm,

em đã tiếp thu được những kiến thức quan trọng để có thể đảm nhiệm được vị trí Front-end Developer cho một dự án chính thức của công ty Chân thành cảm ơn các anh chị trong nhóm đã

bỏ ra nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Nguyễn Thiện Huấn đã hướng dẫn, giúp đỡ cho em về những quy

trình cần nắm, các kiến thức nền, cách làm việc với các nhóm/phòng khác và cách giải quyết

những khó khăn trong công việc Không thể thiếu, em xin cảm ơn anh Nguyễn Hữu Vinh, người

hướng dẫn trực tiếp đã hướng dẫn, hỗ trợ em rất nhiều về các kiến thức mới, giải thích chi tiết luồng hoạt động của dự án, tận tình chỉ bảo em các điểm khó, các điểm cần lưu ý và cách giải quyết vấn đề phát sinh khi là người trực tiếp đảm nhiệm dự án; đồng thời cảm ơn các anh trong nhóm Pipeline đã chỉ dẫn em về cách làm việc hiệu quả, giúp đỡ em khi gặp kiến thức của các mảng khác để em có thể áp dụng vào dự án mà mình tham gia Mọi người cũng nhiệt tình giúp

em rèn luyện những kỹ năng mềm mà một nhân viên trách nhiệm không thể thiếu trong môi trường làm việc của mình Bên cạnh đó, em cũng cảm ơn các anh chị Developer, QC, Business,

PM trong suốt thời gian qua đã tin tưởng và nhiệt tình làm việc cùng em, chỉ bảo cho em những khiếm khuyết của mình cũng như dạy em nhiều kiến thức 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ều kiện để em hoàn thành học phần thực tập này của mình

Sinh viên thực hiện

Võ Phúc Tài

TpHCM, ngày 31 tháng 12 năm 2020

Trang 4

4

NHẬN XÉT CỦA KHOA

Trang 5

5

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

BẢNG HÌNH ẢNH 7

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

1.1 Giới thiệu Công ty TMA Solutions 8

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

1.2.1 Lĩnh vực hoạt động 8

1.2.2 Công nghệ chính 9

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

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

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

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

2.2.2 Tìm hiểu Angular 11

2.2.3 Tìm hiểu về Bootstrap 12

2.2.3 Tìm hiểu luồng chạy dịch vụ qua các requirement đã thống nhất 13

2.2.4 Tham gia vào các dự án đang được thực hiện 13

2.2.5 Tham gia vào dự án 14

2.3 Thực hiện project 15

2.3.1 Lịch làm việc 15

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

3.1 Giới thiệu về dự án 18

3.1.1 Nội dung 18

Trang 6

6

3.1.2 Một số hình ảnh giao diện của ứng dụng 19

3.2 Thực hiện 25

3.2.1 Người thực hiện 25

3.2.2 Quá trình thực hiện 25

TỔNG KẾT 27

Trang 7

7

BẢNG HÌNH ẢNH

Hình 1: Màn hình Login 20

Hình 2: Màn hình Forgot password 20

Hình 3: Màn hình User Profile 21

Hình 4: Màn hình Dashboard 21

Hình 5: Màn hình Edit User Profile 22

Hình 6: Màn hình Change Password 22

Hình 7: Màn hình Group Management 23

Hình 8: Màn hình Group Details 23

Hình 9: Màn hình Corporation Management/ Tenant 23

Hình 10: Màn hình Vỉew Corporation 24

Hình 11: Màn hình Corporation Management/ Account 24

Hình 12: Màn hình Edit Corporation information 25

Trang 8

8

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

1.1 Giới thiệu Công ty TMA Solutions

TMA Solutions (gọi tắt TMA, tiếng Việt: Công ty TNHH Giải Pháp Phần Mềm Tường Minh) là một công ty Việt Nam, kinh doanh các dịch vụ liên quan đến phát triển phần mềm TMA được thành lập từ năm 1997, hiện đang là công ty phần mềm hàng đầu Việt Nam với

2500 kỹ sư Khách hàng là những tập đoàn công nghệ cao hàng đầu thế giới đến từ 27 nước TMA hiện có 8 chi nhánh tại Việt Nam (7 tại thành phố HCM và 1 ở thành phố Quy Nhơn)

và 6 chi nhánh ở nước ngoài (Mỹ, Canada, Châu Âu, Nhật, Úc, Singapore) Phòng Trung tâm Đào Tạo TMA, Phòng Trung tâm Phát triển Sinh Viên, Phòng Trung tâm sáng tạo TMA

Cung cấp các giải pháp, dịch vụ viễn thông

Đào tạo sinh viên và nhân viên về kiến thức phần mềm và kỹ năng mềm

Dịch vụ đánh giá an toàn thông tin Kiểm tra toàn diện sự an toàn thông tin và năng lực bảo mật của doành nghiệp, tìm ra những rủi ro, đề ra giải pháp khắc phục

Trang 10

10

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

Đợt thực tập với chủ đề “Xây dựng website quản lí sản phẩm và khách hàng” 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, về cách một dự án được triển khai và hiểu về luồng chạy của ứng dụng; đồ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

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: 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ủ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…

Kết quả: Hiểu thêm về công ty TMA 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 và các công cụ giao tiếp nội bộ 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

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 hướng dẫn đã 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ư Jira – sử dụng trong quá trình quản lý công việc khi làm việc nhóm, Figma – công cụ vẽ wireframe phục vụ cho

Trang 11

11

công việc, Zimbra - sử dụng để giao tiếp nội bộ trong công ty, Gitlab – hệ thống quản lí source code, các công cụ vẽ sơ đồ và luồng online như draw.io, lucidchart,

Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên

Kết quả: Có thể dùng các công cụ để vẽ các yêu cầu đơn giản, biết sử dụng Jira để lưu trữ

các tài liệu chung khi làm việc nhóm

2.2.2 Tìm hiểu Angular

Thời gian: 2 tuần

Nội dung: Được training về các khái niệm cơ bản và tối quan trọng của Angular, sử dụng

cho việc thiết kế UI Cụ thể là làm việc với Angular 10

Angular được viết hoàn toàn bằng TypeScript và tuân theo đặc tả ECMAScript 6 Nghĩa là

nó hỗ trợ ES6 Module, class framework

Directive :

AngularJS có rất nhiều directive Một số directive được sử dụng nhiều nhất là for và

ng-if Có thể tự customize directive

Trang 12

12

Tham khảo từ những chia sẻ của mentor

Làm sản phẩm demo cuối tuần

Kết quả:

Nâng cao kỹ năng lập trình với Angular

Có được những kiến thức quan trọng cho việc lập trình frontend với angular

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

2.2.3 Tìm hiểu về Bootstrap

Thời gian: 1 tuần

Nội dung: Tìm hiểu về các kỹ thuật làm frontend với bootstrap

Bootstrap là 1 framework HTML, CSS, và JavaScript cho phép người dùng dễ dàng thiết kế website theo 1 chuẩn nhất định, tạo các website thân thiện với các thiết bị cầm tay như mobile, ipad, tablet,

Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trong bootstrap có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn

Những điểm thuận lợi khi sử dụng bootstrap:

Rất dễ để sử dụng: Nó đơn giản vì nó được tạo ra dựa trên HTML, CSS và Javascript chỉ cẩn

có kiến thức cơ bản về chúng là có thể sử dụng bootstrap tốt

Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Mobile, Tablets, và Desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo

ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

Thực hiện: Làm ra các bài thực hành, kiểm tra kiến thức đã học

Trang 13

13

Kết quả:

Nâng cao kỹ năng lập trình với ngôn ngữ HTML, CSS

Làm quen và biết được công dụng và cách sử dụng các công cụ phục vụ trong công việc

2.2.3 Tìm hiểu luồng chạy dịch vụ qua các requirement đã thống nhất

Nội dung: Tìm hiểu luồng chạy của các dịch vụ mua bán, quản lí và phân quyền tài khoản

của công ty Pipeline thông qua trải nghiệm trực tiếp trên sản phẩm và đọc tài liệu dịch vụ Nắm được các điểm chính cần lưu ý khi xây dựng một dịch vụ mới

Hiểu được luồng chạy cơ bản của dịch vụ

Tự vẽ lại được luồng của những dịch vụ đã hoàn thành

2.2.4 Tham gia vào các dự án đang được thực hiện

Nội dung: Tham gia trực tiếp vào các dự án đang được thực hiện và học hỏi kiến thức thực

tế từ team

Cách các team, bộ phận làm việc với nhau trong một dự án thực tế

Nắm được trình tự các bộ phận làm việc với nhau, từ bộ phận Business, đến Product, sang

IT từ lúc sản phẩm trên test cho đến khi sản phẩm lên production

Trang 14

14

Cách giải quyết khi có vấn đề xuất hiện trong quá trình làm việc

Cách đọc các file tài liệu mô tả dự án:

Đọc file API để biết được dịch vụ cần thể hiện những thông tin gì, cần lấy những thông tin

gì, và hiển thị lên màn hình cho người dùng như thế nào cho hợp lý

Đọc file tài liệu về đối tác để hiểu rõ quy trình nghiệp vụ của đối tác để đảm bảo sản phẩm theo đúng yêu cầu

Thực hiện:

Đóng góp ý kiến khi thấy các vấn đề xử lý nội bộ chưa hợp lý

Mạnh dạn hỏi, trao đổi và đề xuất ý kiến với các bộ phận liên quan trong team dự án

Chỉnh sửa tài liệu sau khi team đã thống nhất ý kiến và gửi cho người hướng dẫn xem xét trước khi đưa ra bản cuối cùng cho team

Kết quả:

Biết được cách đọc tài liệu hiệu quả, lưu ý được những điểm chính cần có

Hoàn thành việc chỉnh sửa tài liệu cho các dịch vụ đang thực hiện

2.2.5 Tham gia vào dự án

Nội dung: Trực tiếp tham gia lập trình các màn hình theo yêu cầu mới

Tìm hiểu API và file tài liệu về đối tác:

Đọc file API để biết các thông tin cần thể hiện lên màn hình cho người dùng

Đọc file tài liệu về đối tác để nắm nghiệp vụ của đối tác, và cách thể hiện các thông tin trong

API

Vẽ wireframe thể hiện các thông tin lên màn hình

Viết tài liệu cho dịch vụ

Trang 15

15

Lập trình các màn hình theo thiết kế đã thống nhất

Thực hiện :

Vẽ được wireframe cho dịch vụ mới trên Figma

Viết tài liệu cho dịch vụ, gửi cho người hướng dẫn xem xét và gửi mail xác nhận chính thức cho team và các developer thực hiện cài đặt dự án theo tài liệu, QC sẽ test dự án cũng theo tài liệu đã gửi

Kết quả: Đã có thể tự xây dựng các màn hình từ những bước đầu tiên

2.3 Thực hiện project

Sau hai tuần tìm hiểu về các kiến thức mới, thông qua thực hành thì thực tập sinh đã nắm được những kiến thực cơ bản về Angular Trong các tuần còn lại, trainer đã hướng dẫn thực tập sinh

áp dụng những kiến thức đã học để tham gia vào project website quản lí

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

Nguyễn Thiện Huấn 100%

Trang 16

16

4

- Lên kế hoạch

- Thực hiện dự án (demo sử dụng Core)

5 - Code dynamic filter & search bar

- Login, send email form

- Validator, Trick API

- Disabled in core

8

- Custom Master form (core)

- Weekly group sharing skills

- Enable/ Disable (corporation details)

10 - Split create and edit form group Nguyễn Thiện Huấn 100%

Trang 17

13 - IP range & IP list

- User Management

Trang 18

Danh sách tác nhân của hệ thống:

STT Tên tác nhân Ý nghĩa

1 Fense_SuperAdmin Là người quản lí toàn quyền của dự án Pipeline,

chịu trách nhiệm kiểm soát tất cả sản phẩm, ở mọi cấp bậc trong mô hình

2 Tenant Người quản trị sản phẩm ở cấp bật ngang hàng và

khách hàng của mình sau khi sang nhượng dịch

vụ

3 Organization Người quản trị sản phẩm ở cấp bật ngang hàng và

vụ

4 Site Người quản trị sản phẩm ở cấp bật ngang hàng và

vụ

Trang 19

19

5 Account Người quản trị sản phẩm mà mình đang sử dụng

Các tính năng chính:

1 Đăng nhập và quản lí tài

khoản

Cho phép người dùng truy cập vào hệ thống Sửa đổi mật khẩu hoặc thông tin cá nhân cũng như ngôn ngữ phù hợp

2 Roles and Permission Phân quyền cho tài khoản đi kèm với các mức độ

truy cập, quản lí của tài khoản đó

3 Dashboard Thống kê các kết quả quản lí dưới nhiều dạng đồ

7 Policy Management Các chính sách đi kèm với gói dịch vụ được bán

8 Category Management Quản lí các loại dịch vụ cung cấp

9 Subscription

Management

Quản lí việc mua bán gồm sản phẩm, khách hàng

và chi tiết các thông tin giao dịch

3.1.2 Một số hình ảnh giao diện của ứng dụng

Trang 20

20

Hình 1: Màn hình Login

Hình 2: Màn hình Forgot password

Trang 21

21

Hình 4: Màn hình Dashboard

Hình 3: Màn hình User Profile

Trang 22

22

Hình 5: Màn hình Edit User Profile

Hình 6: Màn hình Change Password

Trang 24

24

Hình 11: Màn hình Corporation Management/ Account

Hình 10: Màn hình Vỉew Corporation

Trang 25

Giai đoạn Thảo luận và Demo

- Trao đổi với mentor để thống nhất về công nghệ sử dụng

- Tìm hiểu về công nghệ

Kết quả :

- Sử dụng Angular để phát triển phần front-end của ứng dụng web

Hình 12: Màn hình Edit Corporation information

Định dạng
Số trang	27
Dung lượng	872,52 KB