Báo cáo thực tập lập trình FRONT END WEB với HTML, CSS và JQUERY

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

LẬP TRÌNH FRONT-END WEB VỚI HTML, CSS
VÀ JQUERY

Công ty thực tập

: GLOBEE

Người phụ trách

: Bùi Thị Thanh Thúy

Thực tập sinh

: Cao Minh Huy


2

LỜI MỞ ĐẦU
Trong thời đại 4.0, khi gần như mọi thông tin đều được đưa lên các trang web, mảng phát
triển và thiết kế web đóng vai trị là một trong những ngành quan trọng công nghệ thông
tin. Do nhu cầu người dùng ngày càng cao nên việc phát triển web có tốc độ phát triển vơ
cùng mạnh mẽ, liên tục thúc đẩy ngành công nghệ thông tin.
Việt Nam không phải ngoại lệ. Các công ty web ở nước ta khơng ngừng phát triển để theo

kịp, hịa nhập và cạnh tranh với các thị trường quốc tế.
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ư
tham gia vào môi trường làm việc chuyên nghiệp nên em đã quyết định đi thực tập kì này.
Vì vậy, em quyết định chọn Globee - một môi trường lý tưởng, hiện đại, chuyên nghiệp là nơi sẽ giúp em thực hiện được dự định này.


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Globee 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óm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể xây
dựng trang web với HTML, CSS. 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 Bách và anh Phước đã hướng dẫn, giúp đỡ cho chúng em
tận tình cả những khó khăn trong cơng việc, đến những khó khăn việc làm quen với môi
trường mới; cảm ơn anh Lộc, đã training front-end, hỗ trợ chúng em rất nhiều về các
vấn đề về CSS, Bootstrap, trong quá trình làm task; cảm ơn anh Hưng, đã chỉ dẫn chúng
em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu.
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 làm bài báo cáo này.
Tp.Hồ Chí Minh, ngày 7 tháng 1 năm 2021
Cao Minh Huy


4

NHẬN XÉT CỦA KHOA
………………………………………………………………………………………………………………………………………………………………….

………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….
………………………………………………………………………………………………………………………………………………………………….


5

Nội dung
LỜI MỞ ĐẦU.................................................................................................................................................. 2
LỜI CẢM ƠN .................................................................................................................................................. 3
NHẬN XÉT CỦA KHOA ................................................................................................................................... 4
CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP ............................................................................................... 6
1.

Giới thiệu công ty .............................................................................................................................. 6

2.

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

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

Tìm hiểu cơng ty và các kỹ năng cơ bản............................................................................................ 7

2.

Nghiên cứu kỹ thuật .......................................................................................................................... 7

3.

2.1

Công cụ làm việc ....................................................................................................................... 7

2.2

Front-end .................................................................................................................................. 8

2.3

Product Requirement Document Training ................................................................................ 8

2.4

Tìm hiểu Saleforce Cloud Platform ........................................................................................... 9

2.5

Nghiệp vụ công ty ................................................................................................................... 12

Lịch làm việc .................................................................................................................................... 13

TÀI LIỆU THAM KHẢO.................................................................................................................................. 14


6

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

1. Giới thiệu cơng ty
Globee đã được tìm thấy bởi một nhóm các chuyên gia CNTT vào năm 2016 sau 4 năm
làm việc cùng nhau. Đội ngũ phát triển đã tham gia phát triển các hệ thống lớn như hệ
thống ERP để quản lý hơn 200.000 tình nguyện viên đồng hành của SEA Games 28 tại
Singapore 2015.
Globee có kinh nghiệm về chăm sóc sức khỏe, thương mại điện tử (mỹ phẩm, giày dép,
hành lý & kinh doanh), các developer cũng được chứng nhận là Salesforce Commerce
Cloud developer (trước đây là Demandware). Với sứ mệnh làm cho khách hàng hài lòng,
Globee đã cung cấp các dịch vụ và sản phẩm chất lượng tốt cho các khách hàng.
Có đội ngũ tài năng để cung cấp cho khách hàng không chỉ phần mềm, ứng dụng di động
mà còn là giải pháp thương mại điện tử.
2. Sản phẩm của công ty
Hiện tại, khách hàng của công ty là thương hiệu Samsonite (bao gồm cả: Tumi,
AmericanTourister, Lipault) . Bao gồm các website thương mại đa quốc gia của thương

hiệu này:
-

/> /> /> /> />(Tương tự cho các mono brand AmericanTourister và Lipault)


7

CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập hiện tại giúp sinh viên xây dựng giao diện web cơ bản và cải thiện trải
nghiệm người dùng thông qua việc cho thực tập viên tham gia vào quá trình thiết kế
Product Requirement Document (PRD) cũng như tăng cường thẩm mĩ của trang web. 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 ứng dụng e-commerce chun nghiệp.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản
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, q 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 .
Ngồ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 Globee, q 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. Nghiên cứu kỹ thuật
2.1 Công cụ làm việc

Thời gian : 5 ngày

Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong q 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ư Tortoise SVN
- sử dụng trong làm việc nhóm, Eclipse với Digital cloud server, Visual Code.
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.


8

2.2 Front-end

Thời gian : 14 ngày (2 tuần)
Nội dung : HTML structure, CSS, Javascript, JQuery, Bootstrap - Các syntax, quy chuẩn về
việc lập trình từng nội dung trên (sử dụng eslint để kiểm tra).
-

-

HTML
Xây dựng cấu trúc của 1 trang tĩnh chỉ gồm các thẻ HTML.
CSS :
Tiến hành tìm hiểu về css và style cho trang HTML ở bài trước.
Javascript, JQuery:
Tìm hiểu về ES6: Block – Scoped, Arrow Function, Rest Parameter, Destructuring
Assignment, Default Parameters, Template Literals, Promises, Classes.
Tìm hiểu JQuery và các thư viện liên quan như: jquery validate, jcarousel,…
Thêm javascript cho trang web.
Bootstrap:

Tìm hiểu bootstrap: grid, flex,… . Style trang web dùng bootstrap.

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 web.
Có được những kiến thức quan trọng cho việc lập trình web sau này.
Ngồ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 và dùng eslint để kiểm tra.

2.3 Product Requirement Document Training

Thời gian : 14 ngày (2 tuần)
Nội dung : Tìm hiểu cơ bản về cấu trúc của PRD:
-

Objective: ( Mục tiêu)
Xác định được mục tiêu chính của sản phẩm
Features: (Tính năng)
Chọn lọc được các tính năng quan trọng của sản phẩm.


9

-

-

UX flow and design: (Thiết kế UX)

Tìm hiểu về UI/UX, hiểu được flow của sản phẩm để tiến hành thiết kế.
Analytics: (Phân tích thống kê)
Tìm hiểu về điểm mạnh, điểm yếu của phần mềm cũng như các hạn chế, ràng
buộc từ phía bên khách hàng song cơng ty để đưa ra biện pháp giải quyết hợp lý.
Future work: (Dự định tương lai)
Sau khi, đưa ra các biện pháp, lên kế hoạch để tiến hành xây dựng và phát triển
web.

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 đọc hiểu tài liệu liên quan tới sản phẩm của công ty.
Am hiểu hơn về flow của sản phẩm/ dự án đang làm.
Ngoài ra còn được trải nghiệm quý báu khi được đồng hành làm việc cùng với Project
Manager của cơng ty.
2.4 Tìm hiểu Saleforce Cloud Platform

Thời gian : 14 ngày (2 tuần)
Nội dung : Tìm hiểu về Saleforce Cloud Platform, Nodejs.
-

Cấu trúc SFRA (Storefront Reference Architecture).

Layer

Description

Tips

Custom

Adds specific customizations
for your brand and
organization. Perform all
customizations of the base,
LINK, and product cartridges
in custom cartridges for

Rename all custom
cartridges
with app_custom_* to
make them easy to
distinguish.


10

Layer

Description

Tips

easy adoption of future
features.

LINK

Adds third-party

functionality to your site.
You can integrate features
from LINK partners, such as
payment providers and tax
services.

You can import LINK
partner data, such as tax
tables or inventory feeds.
See specific LINK cartridge
documentation for more
information.

Plug-in

Enhances the ecommerce
capabilities provided by
Commerce Cloud or anyone
else in the Salesforce
community. Cartridges
provided by Commerce
Cloud let you integrate
(optional) products and
features such as product
compare and gift registry.

Plug-ins can create custom
objects or data that are
specific to a product or
feature.

Base

Core functionality modified
only by the Commerce
Cloud team or through
contributions to GitHub. The
core cartridge includes bestpractice code for features
used by most customers. In
addition to the default
features, the base cartridge

Some of the features in the
base cartridge are
configured in Business
Manager, such as pick up in
store.


11

Layer

Description

Tips

contains features that can
be configured in Business
Manager.

-

-

Tại sao phải dùng SFRA:
Các bản sửa lỗi và bảo mật cập nhật nhất
Phát triển dựa trên thiết kế mobile first.
Dễ dàng ghi đè hoặc mở rộng hơn với Mô-đun
Áp dụng tuân thủ các tiêu chuẩn bao gồm Bootstrap 4
Hỗ trợ các công nghệ thử nghiệm: Controller được kiểm thử bới integration tests,
Model – Unit tests, View – functional test.
Làm quen với sandbox (Business Manager) của Saleforce.
Import website của công ty và tiến hành thử nghiệm trên đó (bao gồm: tạo
controller, edit module, thêm thuộc tính cho model, form).

Thực hiện :


12

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ả :
Hiểu được kiến trúc của SFRA.
2.5 Nghiệp vụ cơng ty

Thời gian : 1 ngày
Nội dung : Tìm hiểu quản lý dự án với redmine, tập viết TSD (Technical specified
document), thao tác với git, development process.

Review -> Feedback -> Development -> Staging -> Production
Review: sau khi hoàn thành task, techlead sẽ bắt đầu review về mặt kỹ thuật (chuẩn
code, logic,…). Lập trình viên phải tự test mới được review.
Feedback: nếu có lỗi về mặt kỹ thuật, techlead sẽ đưa task vào trang thái feedback và
lập trình viên phải sửa feedback sau đó đưa lại cột review chờ feedback lại từ tech
lead.
Development: sau khi được chấp thuận, code của bạn sẽ được apply vào môi trường
development. Lúc này, bạn cũng như các tester sẽ tiến hành test. Nếu xảy ra lỗi thì
bạn phải fix lỗi sau đó đưa task lại trạng thái review.
Staging: Là môi trường trung lập, không ai được phép chỉnh sửa gì trên mơi trường
này. Bình thường các code trên development sẽ replicate từ staging về theo đợt.
Production: mơi trường người dùng.
Kết quả :
Hiểu rõ quy trình làm việc công ty.
Nắm được cấu trúc, bố cục của TSD.


13

3. Lịch làm việc

Tuần

Cơng việc
-

1
-

2-3

4-5

Tìm hiểu về cơng Chị Hồng
ty, cách tổ chức
của công ty.
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àm việc qua
email.
Lập trình frontAnh Lộc
end (css,
bootstrap,
javascript, jquery,
html)

-

PRD Training

-

Làm quen với Anh Hưng (tech
redmine,
setup lead)
môi trường cho tất
cả các site của
cơng ty.

TSD
Quy trình làm việc.
Back-end (Setup Anh Bách
environment,
SFRA)

6
7-8

Người hướng
dẫn

Anh Huy (PM)

Mức
độ
hoàn
thành

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


14

TÀI LIỆU THAM KHẢO
Develop for Salesforce B2C Commerce
/>
Salesforce B2C Commerce Infocenter
/>