Báo cáo thực tập lập trình WEB FRONT END (2)

1

1TRƯỜ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 WEB FRONT-END

Cơng ty thực tập

: Công Ty Spiraledge

Người phụ trách

: Lê Tuấn Anh

Thực tập sinh

: Bùi Gia Hịa

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


2

LỜI MỞ ĐẦU
Việc lướt web để nắm bắt thông tin, phục vụ cho việc thư giãn, giải trí đã trở
thành một phần không thể thiếu trong mỗi chúng ta. Đặc biệt là thế hệ trẻ cần phải
truy cập internet để tự mở mang trau dồi kiến thức cho bản thân.
Việt Nam với nền kinh tế đang trên đà phát triển thì khơng thể thiếu được

một phần đóng góp hết sức to lớn của ngành cơng nghệ thơng tin nói chung và
ngành làm web nói riêng. Web giúp các doanh nghiệp quảng bá sản phẩm thương
hiệu họ cho khách hàng, cho đối tác hiệu quả hơn so với các cách làm truyền thống
như báo, ấn phẩm, đài tiếng nói truyền hình. Web giúp ta dễ dàng tiếp cận, chăm
sóc khách hàng tốt hơn. Web giúp cho việc kinh doanh của các doanh nghiệp lớn
hay là nhỏ lẻ, hộ gia đình hoạt động 24/7. Web giảm tải gánh nặng chi phí vận
hành doanh nghiệp, giảm nhân công, tăng hiệu suất và nhiều lợi ích tuyệt vời khác
mà trang web mang lại cho cuộc sống con người hiện tại.
Mặc dù Việt Nam còn khá non trẻ trong lĩnh vực công nghệ thông tin. Tuy
nhiên, đất nước ta đang phát triển mạnh mẽ, sản sinh ra nguồn nhân lực chất lượng
cao đóng góp cho nền kinh tế cho sự hịa nhập với những cơng ty IT hàng đầu trên
thế giới. Một trong số công ty có tên tuổi trong nước như Spiraledge đang góp
phần rất lớn vào sự phát triển tích cực cho sự phát triển công nghệ của đất nước.
Sau khoảng thời gian ra sức học tập và tham gia cuộc thi học thuật trên
trường, với mục đích mở rộng vốn kiến thức lập trình cịn non nớt của bản thân.
Em đã đi thực tập và nơi em chọn là công ty SpiralEdge – một môi trường năng
động, chuyên nghiệp – là nơi sẽ giúp em thực hiện được kế hoạch của bản thân.

BÙI GIA HÒA


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn công ty SpiralEdge đã 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 team. Em đã tiếp thu được những kiến thức quan trọng để có hiểu được cách
vận hành của một trang web. 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 Lê Tuấn Anh đã 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ê Nguyễn Nhật Trung đã là người hướng dẫn em
viết trang web. Chỉ em cách sửa những lỗi thường gặp.
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.

BÙI GIA HÒA


4

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

.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................
.........................................................................................................................................................

MỤC LỤC
BÙI GIA HÒA


5

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

7

1.Giới thiệu cơng ty Spiraledge:

7

2.Sản phẩm của cơng ty:

7

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

10

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

10

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

10

a)Các cơng cụ làm việc:

10

b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS:

11

c)Lập trình web với angularJS:

12

d)Cách build và deploy dự án lên server:

13

3.Thực hiện dự án thực tế:

14

4.Lịch làm việc:

14

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

16

1.Giới thiệu về trang web tend:

16

2.Các tính năng chính trong trang web:

16

TÀI LIỆU KHAM KHẢO

21

TỔNG KẾT

22

BÙI GIA HÒA


6

BÙI GIA HÒA


7

CHƯƠNG 1: GIỚI THIỆU CƠNG TY
THỰC TẬP
1. Giới thiệu cơng ty Spiraledge:

-Spiraledge là một trong những công ty hàng đầu chuyên về mảng sức
khỏe và mua sắm online có trụ sở đặt tại CampBell, California với các
văn phòng ở Cincinati, Ohio và Hồ Chí Minh, Việt Nam. Các sản phẩm
của công ty bao gồm SwimOutlet.com, trang web nổi tiếng về sản phẩm
bơi lội, YogaOutlet.com một trong những trang web bán những gói dạy
yoga online và Swim.cohỗ m nền tảng kĩ thuật số dạy bơi và tập thể dục.
-Kể từ khi thành lập vào năm 2001, công nghệ đã trở thành vấn đề cốt
lõi của văn hóa cơng ty và là chìa khóa quyết định cho sự thành cơng

như ngày hơm nay của Spiraledge, cho phép chúng ta tập trung vào sứ
mệnh cốt lõi của cơng ty: hồn thiện trải nghiệm mua sắm trực tuyến cho
khách hàng của họ.
2.Sản phẩm của công ty:
-Spiraledge thiết kế các trang web mua sắm hàng trực tuyến, hỗ trợ nông
dân làm nông nghiệp buôn bán các sản phẩm thô trực tuyến chạy trên đa
nền tảng
Android, Iphone, laptop, mobile web.
Nhờ là cơng ty có chun mơn lâu năm trong lĩnh vực công nghệ thông
tin. Spiraledge sỡ hữu những sản phẩm nổi tiếng do chính bản thân họ
làm ra.


8

BÙI GIA HÒA


9

BÙI GIA HÒA


1
0

CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Lập trình front-end web” nhằm mục đích giúp sinh
viên thực tập được đào tạo kĩ năng về lập trình web, đồng thời rèn luyện kĩ năng
mềm như tư duy logic, thuyết trình, làm việc nhóm. Tại cơng ty, sinh viên có cơ

hội được học tập,
Đợt thực tập với chủ đề “Lập trình web front-end server-render-side” nhằm
mục đích giúp sinh viên ứng dụng được kiến thức của mình vào thực tiễn, đồng
thời rèn luyện những kĩ năng mềm như kĩ năng tư duy, 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 phép sai và sửa sai, được các
anh chị đi trước review code và khắc phục những lỗi sai cơ bản như đặt tên biến
mà không khởi tạo giá trị, khởi tạo hàm nhưng khơng đặt điều kiện khi nào chạy
vào hàm đó. Tư duy logic rõ ràng và chặn những lỗi phát sinh từ người dùng trong
quá trình deploy sản phẩm đến người dùng.

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 .
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 Spiraledge, 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:
a)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, anh mentor đã 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,

BÙI GIA HỊA


1
1

visual studio code– trình duyệt file trực quan với nhiều tiện ích, git bashcơng cụ giúp lập trình viên push pull code của dự án từ git về, bit-bucket
theo dõi các commit và branch được tạo ra trong dự án jira – cơng cụ
giúp quản lí quy trình nghiệp vụ tích hợp sử dụng Agile.
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.
b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS:
Thời gian : 4 ngày (1 tuần)
Nội dung : Được hướng dẫn về các kỹ thuật javascript, những kiến thức
quan trọng cho việc tối ưu chương trình chạy trên trình duyệt web chẳng
hạn là chrome hay firefox.
● Sử dụng closure: tìm hiểu closure là gì, các đặc tính của closure
trong javascript. Closure là tập hợp bao gồm hàm và nơi hàm số đó
được khai báo. Ở đây mơi trường bao gồm những biến cục bộ
trong phạm vi hàm số được khai báo và các mức độ truy cập của
closure.
● Cách khởi tạo biến và xác định mức độ truy cập của biến, hàm:
● Học vể html: cách sử dụng các thẻ để tạo nên một trang web. Sự
khác biệt giữa thẻ div và span là như thế nào. Ngoài ra, thực tập
sinh còn được biết thêm về html5, những thẻ mới và tính năng của
nó.
● Học về css: cách viết một css class, cách sử dụng các css atribute
khiến trang web lung linh, giao diện thân thiện với người dùng
hơn.

● Học cách dùng jQuery, bootstrap: jQuery và bootstrap là hai thư
viện hết sức phổ biến mà đa số các trang web hiện nay đều đang sử
dụng. Trong quá trình thực tập, thực tập sinh được các anh/ chị đi
trước giới thiệu về khái niệm căn bản, những module thường được
sử dụng trong jQuery. Ví dụ như module ajax (xử lí ajax, dùng để
gọi api nhận hay truyền dữ liệu cho bên back-end), module atribute
(xử lí các thuộc tính của đối tượng html), module event (xử lí sự
kiện của người dùng). Đối với bootstrap, lập trình viên có thể sử
dụng nó để khiến giao diện trang web hiển thị tốt hơn trên các thiết
bị android, ios, laptop với nhiều kích cỡ khác nhau.
● Tìm hiểu về JSON: thực tập sinh tìm hiểu về JSON và ứng dụng
của nó trong việc trao đổi dữ liệu trên web. JSON là viết tắt của
javascript object notation, là một kiểu định dạng dữ liệu tuân theo
BÙI GIA HÒA


1
2

một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay
đều có thể đọc được.
Thực hiện :
● Tham gia đầy đủ các buổi training của công ty.
● Ứng dụng các kiến thức của bản thân vào thực tế.
Kết quả :
● Nâng cao kỹ năng lập trình với ngơn ngữ javascript, html, css
● 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.
c)Lập trình web với angularJS:

Nội dung: Các kiến thức cơ bản về angularJS để có thể làm ra một trang
web.
● Khái niệm cơ bản về angularJS.
Năm được các khái niệm cơ bản về angularJS, là một framework cho
các ứng dụng web, được phát triển từ năm 2009 bởi Google và bản
cập nhật mới nhất cho đến bây giờ là 2.0. Ngồi ra, trainer cịn cung
cấp cho thực tập sinh những khái niệm cơ bản như cách tạo một
component sử dụng angular CLI, cách gọi các function ở các
controller khác nhau.
● Cách gọi các hàm ở controller khác nhau sử dụng $broadcast, $emit,
$on:
Đôi khi ứng dụng angularJS cần sự giao tiếp giữa các controller khác
nhau. Chẳng hạn như là gửi một thông báo để truyền dữ liệu giữa các
controller. Một trong cách giao tiếp đó là sử dụng $broacast, $emit,
$on. $broacast và $emit giúp lập trình viên gửi một sự kiện. Sự khác
biệt giữa hai hàm này là: broadcast dùng để gửi một sự kiện từ cha
sang con, emit dùng để gửi một sự kiện từ con sang cha. Còn $on
dùng để nhận sự kiện và biến được truyền vào.
● Jquery:
Học cách dùng jQuery, bootstrap: jQuery là thư viện hết sức phổ biến
mà đa số các trang web hiện nay đều đang sử dụng. Trong quá trình
thực tập, thực tập sinh được các anh/ chị đi trước giới thiệu về khái
niệm căn bản, những module thường được sử dụng trong jQuery. Ví
dụ như module ajax (xử lí ajax, dùng để gọi api nhận hay truyền dữ
BÙI GIA HÒA


1
3

liệu cho bên back-end), module atribute (xử lí các thuộc tính của đối
tượng html), module event (xử lí sự kiện của người dùng).
● Bootstrap:
Học cách dùng bootstrap: bootstrap là thư viện do Twitter tạo ra nhằm
giúp lập trình viên có thể thiết kế trang web dễ dàng hơn. Trong quá
trình thực tập, thực tập sinh được các anh/ chị đi trước giới thiệu về
khái niệm căn bản, lập trình viên có thể sử dụng bootstrap để khiến
giao diện trang web hiển thị tốt hơn trên các thiết bị android, ios,
laptop với nhiều kích cỡ khác nhau.
● Google chart
Là biểu đồ hiển thị giúp cho người dùng có cách nhìn trực quan về số
liệu của tài khoản mình. Google chart hỗ trợ rất nhiều loại biểu đồ
khác nhau. Tuy nhiên trong quá trình thực tập, thực tập sinh được giới
thiệu chủ yếu là biểu đồ dạng cột. Cách khởi tạo biến
googleVisualisation, truyền dữ liệu vào như thế nào, cách dán nhãn
từng cột ra sao. Ngồi ra, thực tập cịn được chỉ số lỗi thường gặp như
text overlap, trang html phải hiển thị trước khi chạy code javascript
nhằm vẽ biểu đồ không bị méo
● Thư viện lodash
Lodash là phiên bản mở rộng của underscore, với nhiều chức năng
cho hiệu năng cao hơn. Các chức năng của lodash được chia ra làm
các nhóm: nhóm xử lí array, nhóm xử lí object, nhóm xử lí date, nhóm
xử lí Date,…
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ư bắt sự kiện người dùng trên trang html,
ng-click, ng-mouseenter, ng-mousehover.
● 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 sử dụng framework

angularJS.
d)Cách build và deploy dự án lên server:
Nội dung : Các kỹ thuật tạo ra một trang web cơ bản.
● Định nghĩa về web reponsive:
Là một phong cách thiết kế website sao cho phù hợp với tất cả các
thiết bị, mọi độ phân giải màn hình.
● Giới thiệu về jenkins:
BÙI GIA HỊA


1
4

Jenkins là một opensource dùng để thực hiện chức năng tích hợp liên
tục và xây dựng các tác vụ tự động hóa. Nhóm dự án sử dụng jenkins
để build code lên server và lưu lại log nhằm fix lỗi.
● Tạo một chức năng và build lên trang web demo cho tester review:
Sau khi viết xong một tính năng, dev sẽ build code lên server để QC
test chức năng sau đó mới deploy lên server chính thức.
Thực hiện :
● Tham gia đầy đủ các buổi training.
● Thêm những chức năng cho các trang đã có sẵn, deploy lên server và
fix bug.
Kết quả:
● Đã có thể tạo ra một trang web cơ bản sử dụng angularJS.
3.Thực hiện dự án thực tế:
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ề JS, framework angularJS, jQuery và bootstrap. Trong
tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức
đã học để thực hiện một số chức năng fix lỗi ở một dự án thực tế. Những

tháng tiếp theo, thực tập sinh có cơ hội được làm trong một dự án thực tế.
Học cách làm theo sprint trong agile, fix bug của những chức năng hiện tại.
Chi tiết đồ án sẽ được nói ở phần sau.
4.Lịch làm việc:
Mức độ Nhận xét của
Người
Tháng
Cơng việc
hồn
người hướng
hướng dẫn
thành
dẫn
-Tìm hiểu về cơng ty, cách Anh Lê Tuấn
tổ chức của công ty.
Anh
-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.
1
-Tìm hiểu ngơn ngữ lập
trình JS, ngơn ngữ đánh dấu
văn bản HTML, CSS
-Thực hành javascript
-Làm các chức năng sử
dụng javascript
2
-Tìm hiểu về bootstrap,
Anh

Lê
BÙI GIA HÒA


1
5

3

4,5,6

jquery
-Làm các chức năng sử
dụng bootstrap, jquery.
-Tìm hiểu về web
-Cách vận hành một trang
web
-Cách gọi API, lấy dữ liệu
trả về.
-Ứng dụng kiến thức của
bản thân vào dự án thực tế.
logic,

Nguyễn Nhật
Trung
Anh
Đào
Duy Tùng

Anh Lê Tuấn

Anh

BÙI GIA HÒA


1
6

CHƯƠNG 3: CHI TIẾT VỀ PROJECT
1.Giới thiệu về trang web tend:
-Tend là phần mềm quản lí nơng trại giúp cho nơng dân có thể dễ dàng quản lí cây
trồng của họ theo mùa vụ.
2.Các tính năng chính trong trang web:
-Quản lí cây trồng: Tend tích hợp việc trồng cây với quản lí tác vụ để giảm thiểu
các bản số liệu và giúp dễ dàng hơn để phân tác vụ theo tuần, nhờ thế người nơng
dân có thể vận hành trang trại họ trơn tru.

BÙI GIA HÒA


1
7

-Quản lí tác vụ: giúp cho người nơng dân có thể hệ thống hóa tất cả cơng việc mà
bản thân họ cần làm.

BÙI GIA HÒA


1

8

-Mua sắm trực tuyến: nơng dân có thể bán sản phẩm của họ trực tiếp cho khách
hàng:

BÙI GIA HÒA


1
9

-Pick & Pack: giúp người nông dân kết nối hoạt đơng mua bán với mùa vụ của họ.

BÙI GIA HỊA


2
0

-Reports: cung cấp biểu đồ trực quan nhằm giúp nông dân đưa ra các quyết định tốt
hơn.

BÙI GIA HÒA


2
1

BÙI GIA HÒA

2
2

TÀI LIỆU KHAM KHẢO
-Tài liệu ngôn ngữ javascript, html, css:
/>v=uDwSnnhl1Ng&list=PLsyeobzWxl7qtP8Lo9TReqUMkiOp446cV
/>v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET
/> />v=TThZIt4r3eg&list=PL0b6OzIxLPbzDsI5YXUa01QzxOWyqmrWw
-Tài liệu về framework AngularJS:
/>v=s3qZF4jhgDo&list=PLYxzS__5yYQmX2bItSRCqwiQZn5dIL1gt
/>-Tài liệu về thư viện bootstrap, jquery.
/>v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv
/>v=a59kOE2Ma1Q&list=PL6n9fhu94yhVDV697uvHpavA3K_eWGQap
-Tài liệu về icon sử dụng cho trang web:
/>-Tài liệu về vẽ các biểu đồ trong trang web:
/>BÙI GIA HÒA


2
3

TỔNG KẾT
Sau đợt thực tập tại công ty Spiraledge, em đã kịp hoàn thành một số chức
năng của trang web chạy trên nền tảng pc, android và ios.
Trang web được cải thiện nhiều tính năng mới như online store (giúp khách hàng
có thể mua trực tuyến các sản phẩm thơ của nơng dân), pricing (cập nhật lại các gói
sử dụng dịch vụ với nhiều mức giá ưu đãi hơn), cải thiện giao diện của trang web.
Chân thành cảm ơn sự giúp đỡ của các anh chị trong nhóm Tend, để hoàn
thành những chức năng được cập nhật trong quá trình em thực tập.

BÙI GIA HỊA