báo cáo thực tập FRONT END WEB DEVELOPER

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

FRONT-END WEB DEVELOPER
Công ty thực tập
Người phụ trách
Thực tập sinh

: gumiVietnam
: Nguyễn Nhất Nguyên
: Võ Thái Hoà

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


2

LỜI MỞ ĐẦU
Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nói chung và
ngành Công nghệ phần mềm nói riêng luôn là nhân tố đóng vai trò quan
trọng trong quá trình phát triển của xã hội.
Công nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết
các nhu cầu của con người từ bán hàng, cung cấp kiến thức đến thông tin
liên lạc, ... Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra
những trang web mới vẫn chưa có dấu hiệu giảm.
Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được
yếu tố hình thức và nội dung. Làm thế nào để sản phẩm tạo ra đạt chất
lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website
nào cũng cần phải suy nghĩ đau đầu. Để thử thách bản thân trong ngành

công nghiệp web, em đã lựa chọn Front-end web developer là định hướng
cho việc học cũng như nghề nghiệp trong tương lai.
Sau những năm tháng trong môi trường đại học, với mong muốn áp dụng
những kiến thức đã học và có được trải nghiệm trong môi trường thực tế, em
đã quyết định tham gia vào gumi VietNam – một môi trường lý tưởng và
chuyên nghiệp để thực hiện dự định.


3

LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty gumiVietnam đã 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 mentor, nhóm
thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm được nhữn g giao
diện web tuyệt vời. Chân thành cảm ơn các anh chị trong nhóm mentor đã 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 Nguyễn Anh Tuấn, đã training front-end, 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 Nguyễn Nhất Nguyên tạo điều khiện training và đã giúp đỡ em
trong suốt quá trình thực tậ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.
Võ Thái Hoà
TpHCM, ngày 10 tháng 1 năm 2021


4

NHẬN XÉT CỦA KHOA

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


5

MỤC LỤC
MỤC LỤC.......................................................................................................................... 7
Chương 1: Giới thiệu công ty thực tập..........................................................................8
Giới thiệu về công ty Gumi Viet Nam.....................................................................8
Sản phẩm của cơng ty..............................................................................................8
Chương 2: Nội dung thực tập.......................................................................................11
Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty..........................................11
Nghiên cứu kỹ thuật..............................................................................................11

Thực hiện project...................................................................................................13
Lịch làm việc.........................................................................................................13
Chương 3: Chi tiết về project.......................................................................................15
Giới thiệu về Project..............................................................................................15
Kế hoạch...............................................................................................................17
TÀI LIỆU THAM KHẢO..............................................................................................18
TỔNG KẾT....................................................................................................................19

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

1. Giới thiệu công ty gumiViet
Công ty cổ phần gumi Việt Nam là công ty CNTT có vốn đầu tư 100% đến từ
Nhật Bản chuyên về phát triển website và các ứng dụng dành cho smart phone. Được
thành lập từ năm 2012 tại Việt Nam.
- Định hướng phát triển sản phẩm – dịch vụ
Đầu tư phát huy công nghệ mới, vận dụng kiến thức chuyên sâu vào hoạt động.
Nghiên cứu vào lĩnh vực chuyên môn. Cung cấp hệ thống website/Mobile App phù hợp


6

với mong muốn của khách hàng. Các sản phẩm, dịch vụ được tạo ra trên nền tảng
VR/AR...
- Giá trị cốt lõi
•
•
•
•

Hướng tới khách hàng

Hợp tác chia sẻ
Năng động sáng tạo
Phát triển mạnh mẽ.

- Chiến lược phát triển
• Tầm nhìn : Gumi Việt Nam mong muốn trở thành người bạn đồng hành hàng đầu
của các tổ chức và doanh nghiệp trong việc cung cấp các giải pháp, sản phẩm
cơng nghệ có giá trị sáng tạo, có tính ứng dụng cao, nhằm thú đẩy hoạt động kinh
doanh phát triển hiệu quả.
• Sứ mệnh: Trong suốt quá trình hoạt động, gumi Việt Nam luôn nỗ lực với mục
tiêu cao nhất là mang lại sự hài lòng cho khách hàng với phon cách làm việc
chun nghiệp, ln đảm bảo tính chính xác, kịp thời của dự án. Ngoài ra gumi
Việt Nam tiên phon trong các xu hướng cơng nghệ mới góp phần vào sự nghiệp
cơng nghiệp hóa, hiện đại hóa đất nước trong bối cảnh hội nhập kinh tế Thế giới.
- Số năm kinh nghiệm trong lĩnh vực bán hàng dịch vụ: 8 năm
- Chính sách chất lượng
•

Ln cung cấp những sản phẩm dịch vụ tốt nhất, đảm bảo thi cơng đúng tiến độ,

•

chất lượng, hiệu quả, an toàn như đã thỏa thuận với khách hàng.
Không ngừng cải tiến về mọi mặt để đạt được sự hoàn hảo về sản phẩm và dịch

vụ cung cấp, về mối quan hệ với khách hàng và khả năng cạnh tranh.
• Liên tục đào tạo nhằm phát triển nguồn nhân lực; tăng cường đầu tư trang thiết bị
kỹ thuật và công nghệ thi công hiện đại; nghiên cứu và ứng dụng các phương thức
quản lý hiệu quả, chuyên nghiệp, tiên tiến nhất nhằm đáp ứng tối đa yêu cầu của
Khách hàng, Đối tác.

2. Tổ chức và các lĩnh vực hoạt động của gumi Việt Nam
-

Sản xuất phần mềm, gia công phần mềm
Cung cấp hệ thống website/Mobile App
Cung Cấp các sản phẩm, dịch vụ được tạo ra trên nền tảng VR/AR
3. Cơ cấu tổ chức của gumi Việt Nam


7

Gumi Việt Nam là sự kết hợp giữa sức trẻ, tri thức và đội ngũ các nhà quản lý
đầy kinh nghiệm, gumi gồm nhiều kỹ sư tin học được đào tạo bài bản từ các trường
Đại học danh tiếng về Cơng nghệ thơng tin hiện nay, có kinh nghiệm lâu năm trong
lĩnh vực xây dựng phần mềm.
- Ban giám đốc:
• CEO : Harada Shogo
• General Manager : Phạm Q Tồn
• CTO : Nguyễn Sỹ Đăng

- Các bộ phận:
• Phịng Marketing.
• Phịng Hỗ trợ khách hàng.
• Phịng Phát triển Website/Mobile App


8

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

Được thực tập với chủ đề “Front-end developer” nhằm mục đích giúp sinh viên thực tập được
đào tạo tồn diện về lập trình giao diện web, đồ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 công nghệ chuyên nghiệp.
Là thành viên của team front-end trong Công ty cổ phần gumiVietnam sẽ có cơ hội được học
tập trau dồi các kiến thức về lĩnh vực lập trình giao diện web, được tiếp cận với các nền tảng
công nghệ mới khác nhau, được tăng khả năng tìm kiếm và đọc hiểu tài liệu tiếng Anh…

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, 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 gumiViet, 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.

2.2.

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, 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ư
WebStorm– IDE chính để lập trình giao diện, Terminal để sử dụng git, SourceTree để
sử dụng git với GUI
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.
Tìm hiểu ngơn ngữ Html,css, scss
Vì em mới vào cơng ty và chưa biết gì về front-end nên được cơng ty đào tạo lại từ
đầu.
Thời gian : 30 ngày (1 tháng )
Nội dung : Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những
kiến thức quan trọng cho việc tạo các layout responsive cho trang web.


9

-

Html : cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các
đoạn văn, heading, links,…
- Css : Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color,
khoảng cách, reponsive,…
- Scss : Là tiền xử lý css, giúp viết css theo cách một ngơn ngữ lập trình, có cấu trúc
rõ ràng , rành mạch, dễ phát triển và bảo trì code hơn.
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ắm được kiến thức html/css/scss cơ bản

- Nắm được BEM name.
- Có thể dàn được layout trang web, style theo design và responsive.
2.3.

Tìm hiểu về js dom/Jquery.
Thời gian : 30 ngày (1 tháng )
Nội dung: Tìm hiểu về js/Jquery cơ bản , Ui/Ux, Bootstrap.
- Tìm hiểu về Js/Jquery:
- Tìm hiểu js dom
- Tìm hiểu về object, function, class, Async
- Tìm hiểu jquery.
- Tìm hiểu Js web Apis.
- Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux.
- Bootstrap: Tìm hiểu bootstrap, bootstrap gird,…
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ư làm lại các màn hình có sẵn, thêm những logic
phức tạp, …
- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
Kết quả :
- Nắm được nắm được kiến thức js/jquery cơ bản để làm animation cho web.
- Sử dụng được thư viện front-end như slick slider.
- Áp dụng kiến thức Js để responsive cho web.
- Áp dụng js/jquery vào các evens, click, tăng tính tương tác người dùng đối với
trang web.
- Aps dụng kiến thức bố cục, cách người dùng tương tác vào trang web của mình.
- Áp dụng cơ bản gọi api về trang web.

3.

Thực hiện project

Sau 2 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ề Html, css, scss, js/jquery. Sau tháng thứ 2, thực tập sinh được phân công thực hiện
project dựng giao diện.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Tuần
Công việc
Người hướng dẫn Mức
Nhận xét của người
độ
hướng dẫn


10

hồn
thành
-

1

2
3

4

4 => 8

8 => 10
18 =>
Hiện tại

Tìm hiểu về cơ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.
- Tìm hiểu html,css
- Thực hành html,css
- Tìm hiểu về Scss
- Thực hành một số
ứng dụng cơ bản
- Tìm hiểu về
responsive
- Thực hành một số
màn hình giao diện
phức tạp.

Chị Nguyễn Yến
Nhi

Anh Nguyễn Anh
Tuấn
Anh Nguyễn Anh
Tuấn

Anh Nguyễn Anh
Tuấn

Anh Nguyễn Anh
Tìm hiểu js/jquery
Tuấn
Tạo animation bằng
js
- Responsive bằng js
- Dựng giao diện web Anh Nguyễn Anh
Tuấn
Fix bug giao diện
Anh Nguyễn Anh
Hoàn thành sau những
Tuấn
góp ý của mentor
-


11

Chương 3: Chi tiết về project

1. Giới thiệu về project
Sau khi đã nắm được kiến thức cơ bản về front-end, em được phân công dựng
giao diện website qua các file giao diện mẫu psd trong vòng 3 tuần.
Trang web giao diện về blog về travel, đặt vé, khách sạn.
1.1.

Công nghệ

Giao diện web sử dụng html,css,scss,js/jquery để xậy dựng giao diện và các thao
tác giữa người dùng với trang web.

1.2.

Tính năng chính
Giao diện về tìm chuyến bay, khách sạn, các bài viết về du lịch.


12

Hình 3.1: Giao diện trang chủ đặt vé.


13

Hình 3.2: Màn hình đặt khách sạn.

Hình 3.3: Màn hình blog


14

Hình 3.4: Màn hình các gói tour

Hình 3.5: Màn hình about


15

2. Kế hoạch
Giai đoạn 1:
- Lấy file ảnh , font từ file psd.
- Dựng cấu trúc, thành phần , layout trong một project.
- Tạo project trên github và quản lý bằng sourcetree.
Giai đoạn 2:
- Cắt giao diện các màn hình như home, about,..
- Làm animation, cvacs thao tác xử lý như slick, chuyển page,… bằng js/jquery.
Giai đoạn 3: Đưa mentor review và sau đó fix bug và hồn chỉnh project.
Kết quả : Website đã hồn chình và đáp ứng những yêu cầu đã đề ra.
3. Tham gia dự án thực tế
Sau khi nhận được phản hồi tốt về dự án từ anh Nguyễn Anh Tuấn. Em được anh
Nguyễn Anh Tuấn phân công tham gia vào một dự án thực tế với vai trò là developer
front-end (html,css,js) trong một team bao gồm 5 thành viên khác.


16

TÀI LIỆU THAM KHẢO
Html
/>Css
/>Scss
/>JavaScript
/>Jquery
/>Git
/>UI/UX
/>

17

TỔNG KẾT
Qua q trình thực tập thực tế tại Cơng ty cổ phần gumiVietnam em đã tích lũy cho bản
thân nhiều kinh nghiệm, kỹ năng và cũng cố được kiến thức đã học, nhận thấy đây là cơ hội, là
bước đệm cho con đường phía trước.
Em được trực tiếp làm việc với đội ngũ các anh chị trong công ty nhiệt tình, chịu khó
trong cơng việc. Được đào tạo với đúng chuyên ngành, được thực hiện các công việc dưới sự
chỉ dẫn của anh hướng dẫn; được trực tiếp tham gia, tích lũy kiến thức, kinh nghiệm cho bản
thân.