Báo cáo thực tập lập trình WEB FRONT END 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
LẬP TRÌNH WEB - FRONT END DEVELOPER

Cơng ty thực tập

: MIOTO

Người phụ trách

: Dương Bảo Như

Thực tập sinh

: Nguyễn Dzỗn Hồng Khánh Duy


LỜI MỞ ĐẦU
Hiện nay, có rất nhiều ứng dụng cho thuê xe nổi tiếng như Grab, Goviet. Những
ứng dụng này được rất nhiều người tin dùng và sử dụng, mang lại rất nhiều lợi
nhuận cho cơng ty, từ đó cũng xuất hiện nhu cầu về phương tiện di chuyển ngày
càng lớn. Do xu hướng này ngày càng phát triển, Mioto ra đời và hoạt động cho
thuê xe tự lái 4-7 chỗ theo mơ hình kinh tế sẻ chia
Mioto được thành lập với sứ mệnh mang đến nền tảng công nghệ hiện đại kết nối
chủ xe ô tô và hành khách theo cách Nhanh Nhất, An Toàn Nhất và Tiết Kiệm
Nhất.
Mioto hướng tới việc xây dựng một cộng đồng chia sẻ ô tô văn minh với nhiều tiện
ích thông qua ứng dụng trên di động, nhằm nâng cao chất lượng cuộc sống của
cộng đồng.

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ế, em
có dự định là sẽ thực tập trong học kỳ 2 này. Vì vậy, em quyết định chọn Mioto là
một mơi trường lý tưởng, là nơi sẽ giúp em thực hiện được dự định này.

2

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Mioto 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ể tham gia vào product cùng với mọi người ở công ty. 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 hồn thành đợt thực tập này.
Đặc biệt cảm ơn các anh chị đã dành thời gian training, hướng dẫn, giúp đỡ
cho em một cách nhiệt tình 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 chị Như đã luôn hướng dẫn em từ ngày
bắt đầu vào công ty, cũng như chị Nguyên đã hướng dẫn, chia sẻ em những tài liệu
và cách sử dụng công cụ thiết kế
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.
Nguyễn Dzỗn Hồng Khánh Duy
TpHCM, ngày 26 tháng 7 năm 2020

3

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


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

………………………………………………………………………….……………
………………………………………………………………………………………
………………………………………………………………………….……………
………………………………………………………………………………………
………………………………………………………………………….……………
4

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


Mục lục

5

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


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

1. Giới thiệu công ty
-

Công ty Cổ phần Mioto Việt Nam hoạt động trên nền tảng ứng dụng cho
thuê xe tự lái 4-7 chỗ, theo mơ hình kinh tế sẻ chia.

-

Mioto được thành lập với sứ mệnh mang đến nền tảng công nghệ hiện đại
kết nối chủ xe ô tô và hành khách theo cách Nhanh Nhất, An Toàn Nhất
và Tiết Kiệm Nhất.

-

Mioto hướng tới việc xây dựng một cộng đồng chia sẻ ô tô văn minh với
nhiều tiện ích thông qua ứng dụng trên di động, nhằm nâng cao chất
lượng cuộc sống của cộng đồng.

-

Các lợi ích mà Mioto có thể mang lại cho người dùng:
o Đặt xe nhanh chóng (có thể đặt mà không cần xác nhận từ chủ xe),

không mất nhiều thời gian, quy trình đặt xe rất đơn giản.
o Hoạt động hầu hết trên các quận huyện TP.Hồ Chí Minh và một số

các tỉnh thành lớn như, Hà Nội, Hải Phòng, Đà Nẵng …
o Rất nhiều mẫu xe đa dạng, chủ xe luôn rất vui vẻ, thân thiết với

khách hàng thuê xe.
o Phí thuê xe rẻ hơn so với xe truyền thống
o Mang lại nguồn thu nhập tương đối ổn định cho các cá nhân cũng

như doanh nghiệp khi cho thuê xe trên app Mioto
2. Sản phẩm của công ty:
-

Hiện tại, khách hàng của công ty là các cá nhân có nhu cầu thuê xe, hoặc
những cá nhân/ doanh nghiệp có nhu cầu cho th xe.
6

Dương Bảo Như

Nguyễn Dzỗn Hoàng Khánh Duy


-

-

Các sản phẩm/ ứng dụng mà công ty Mioto hiện có bao gồm:
Ứng dụng di động trên các nền tảng Android, IOS, Website cho phép
khách hàng muốn thuê xe có thể tìm kiếm thơng tin của các xe theo địa
điểm phù hợp, kết hợp với bộ lọc để lọc ra những xe phù hợp với nhu cầu
cũng như số tiền để chi trả.
Mioto cịn đang phát triển các tính năng GPS tích hợp trực tiếp trên ứng
dụng, Với tính năng GPS, chủ xe có thể dễ dàng theo dõi hiện trạng và vị
trí xe của mình ngay trên ứng dụng, bất cứ lúc nào và bất cứ đâu để bạn
có thể hồn tồn an tâm về chiếc xe của mình. (Mioto dự kiến triển khai
tính năng GPS trong quý 4 năm 2019, hỗ trợ cài đặt cho chủ xe với giá
bán ước tính 1,000,000VND/thiết bị).

7

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy

CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập chủ yếu rèn luyện các kỹ năng front-end và các công cụ thiết
kế, sau khi hoàn thành các kỹ năng trên ở mức cơ bản sẽ tiến hành tham gia
chính thức (xây dựng trang mới và chỉnh sửa layout đã có sẵn, vẽ thiết kế
Layout mới, chỉnh sửa ảnh).
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, làm quen với mọi người trong công ty.
Kết quả : Hiểu thêm về cơng ty Mioto, 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 đặc biệt là làm quen với mọi người
trong công ty.
2. Nghiên cứu kỹ thuật

Công cụ làm việc
Thời gian : 6 ngày (2 tuần)

2.1

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, 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. Sử dụng git để làm việc
chung với mọi người trong nhóm, sử dụng các kênh giao tiếp như Slack và
giao nhận task trên Trello.
Thực hiện : Thực hành đọc và sử dụng git cũng như các kỹ thuật css đã đọc
được trên tài liệu, xem các tính năng của Slack và Trello.
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

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


Front-end
Thời gian : 12 ngày (4 tuần)

2.2

Nội dung : HTML structure + Pug, CSS + SASS, Bootstrap, Gulp - 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.
Pug: Xây dựng trang tĩnh có thể được tổ chức các module riêng để tái sử

dụng.
CSS : đọc các tài liệu về css + thủ thuật sử dụng để sử lý các dạng layout
phức tạp, xây dụng trang web responsive.
SCSS: Tìm hiểu về scss và sass bao gồm: variables, nesting, modules
design, mixins, extend/ineritance và các operator. Với SASS, bạn có thể
viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn,
các class dùng chung hay có thể tự động nén tập tin CSS lại để tiết kiệm
dung lượng. Xem các cấu trúc sử dụng đã có sẵn của cơng ty.
Bootstrap: Tìm hiểu bootstrap: grid, flex,… . Đọc hiểu các class, cấu trúc
thường dùng trong bootstrap và luyện tập áp dụng.
Gulp: là một javascript build tool, sử dụng gulp để xây dựng nên các
trang html tĩnh kết hợp sử dụng tool này để compile các file .pug và .scss,
.sass

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 – tự xây dựng nên các
trang tĩnh dự trên cấu trúc code có sẵn, chỉnh sửa các style đang bị lỗi
Kết quả :
Nâng cao kỹ năng lập trình front-end.
Có được những kiến thức nền cho việc lập trình web front-end 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à tuân theo cấu trúc có sẵn của cơng ty.

9

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy

Công cụ thiết kế:
Thời gian : 6 ngày (2 tuần)

2.3

Nội dung : học sử dụng 2 công cụ thiết kế: Figma, Photoshop.
Figma: là một công cụ hỗ trợ cho việc thiết kế website. Các đặc điểm của
công cụ figma này bao gồm
-

-

-

Có thể thiết kế trên thời gian thực, nhiều người có thể cùng thiết kế trên
một project riêng, có thể share các bản thiết kế với nhau, cùng thao tác và
chỉnh sửa.
Có thể sử dụng ở bất cứ đâu khơng nhất thiết phải sử dụng máy tính cá
nhân vẫn có thể truy cập vào những file design được lưu trữ sẵn của
mình.
Có thể đọc/ quản lý các phản hồi trên từng màn hình khác nhau tăng sự
tương tác giữa các thành viên
Hỗ trợ thiết kế các dạng vecto, có thể xuất ra các file svg, png, jpg khi
thiết kế.

Photoshop: là công cụ hỗ trợ thiết kế đồ họa rất mạnh đang sử dụng rất phổ
biến hiện nay. Một số tính năng nổi bật của Photoshop mang lại như:
-

-

Chỉnh sửa ảnh bitmap: sử dụng PS để khắc phục hầu hết những lỗi trên
hình ảnh + tạo ra những hiệu ứng đẹp và phục chế lại những ảnh cũ có
chất lượng thấp
Thiết kế chữ sáng tạo, sắp đặt và tùy biến cho chúng để mang tính hình
ảnh biểu tượng. Thiết kế các banner quảng cáo cho công ty.
Sử dụng để thiết kế các icon đơn giản cho web/ ứng dụng, có hỗ trợ thiết
kế 3d, dựng phối cảnh.

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: vẽ thiết kế cho các
màn hình, sử dụng photoshop để chỉnh sửa các icon của trang web.
Kết quả :
Hiểu được cơ bản cách sử dụng các công cụ thiết kế để vẽ layout cho project
chính thức.

10

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


3. Lịch làm việc

Tuần

Cơng việc

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
các kênh giao
tiếp như Trello,
Slack.
Lập trình frontend (scss, bootstrap,
pug)
- Đọc tài liệu.
sourcecode
xem
cách tổ chức
- Làm quen và tập
luyện sử dụng
công cụ thiết kế
Figma,
Photoshop
cơ
bản.
- Giới thiệu quy
trình làm việc,
clone
project

chính thức và bắt
đầu xem các cấu
trúc đã có sẵn
- Tiến hành nhận
task và làm việc
thử
-

1

2-5

6-8

9

10

Người hướng
dẫn

Mức
độ
hồn
thành

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

Chị Như

Chị Như

Chị Như, Chị
Nguyên

Chị Như

Chị Như

11

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


12

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


CHƯƠNG 3: CHI TIẾT VỀ PROJECT
1. Giới thiệu về project:
- Mioto là nền tảng ứng dụng cho thuê xe 4-7 chỗ tại đây khách hàng có
thể tìm kiếm xe phù hợp với giá cả của mình. Chủ xe hoặc các doanh
nghiệp cũng có thể đăng kí cho th xe tại ứng dụng để tìm kiếm khách

hàng cho mình.
- Đối với khách hàng th xe ngồi tìm kiếm xe phù hợp cịn hỗ trợ các
tính năng theo dõi lịch trình của xe và giá thuê xe theo từng ngày khác
nhau. Các tính năng đánh giá xe để giúp chủ xe có thể cải thiện những
thiếu sót cịn đang gặp phải để góp phần thay đổi thái độ làm việc cũng
như nâng cao chất lượng xe của mình ngày một tốt hơn. Khách hàng
cũng có thể đặt xe ngay lập tức mà khơng cần duyệt u cầu chủ xe (nếu
xe có hỗ trợ tính năng này). Các lợi ích mà khách thuê xe có thể thu được
khi sử dụng nền tảng website/ ứng dụng thuê xe của Mioto như:
o Tiết kiệm được chi phí th xe
o Đặt xe nhanh chóng và tiện lợi chỉ tốn khoảng 5-10 phút
o Có thể trải nghiệm nhiều dòng xe khác nhau, mẫu xe trên ứng
dụng/web rất đa dạng, phong phú
o Có thể gửi đánh giá ý kiến cá nhân để giúp Mioto phát triển/ hoàn
thiện sản phẩm của mình hơn
o Ln có đội ngũ hỗ trợ các thắc mắc và giải đáp của khách hàng về
quy trình cũng như giải quyết các sự có tranh chấp ngoài ý muốn
- Chủ thuê xe cá nhân hoặc doanh nghiệp có thể đăng xe cá nhân của mình
trên các ứng dụng của Mioto để tìm kiếm các khách hàng th xe, quản
lý thơng tin các xe của mình. Các lợi ích có thể thu được như:
o Mang lại mức thu nhập ổn định
o Chi phí cho th thấp (Khơng tốn phí đăng kí và phí duy trì)
o Thời gian linh hoạt, có thể cho thuê xe trong bất cứ thời gian nào,
toàn quyền sử dụng xe khi cần thiết
o Toàn quyền thiết lập giá thuê xe và các yêu cầu riêng.
o Dễ dàng kiểm tra lịch sử thuê xe của khách trên ứng dụng Mioto
trước khi quyết định cho th.
o Thuận tiện quản lí và theo dõi lịch trình xe, dễ dàng theo dõi vị trí
xe của bạn khi sử dụng GPS
o Các chương trình ưu đãi dành riêng cho chủ th xe và ln có đội

ngũ chăm sóc khách hàng nhiệt tình hỗ trợ
13

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


2. Các màn hình cơ bản:

2.1. Màn hình tìm kiếm trên trang chủ:
- Màn hình tìm kiếm xe tự lái: lọc ra danh sách các xe tự lái theo địa điểm/
từ ngày bắt đầu cho đến ngày kết thúc.

-

Màn hình tìm kiếm xe có tài xế: lọc ra các danh sách xe có tài xế, khách
thuê xe có thể tùy chọn địa điểm đón và thời gian thuê xe nội thành / liên
tỉnh (thời gian có thể tùy chỉnh theo ý muốn của khách hàng), có thể đi
một chiều (chỉ 1 chiều đi).

14

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


2.2. Màn hình kết quả tìm kiếm:
Kết quả được trả ra cho người dùng khi thực hiện tìm kiếm xe. Trên

màn hình tìm kiếm người dùng có thể tùy chọn thay đổi địa điểm và thời
gian thuê xe. Bên trái màn hình cịn có bộ lọc có nhiều chức năng và đa dạng
để người dùng có thể tùy chỉnh yêu cầu xe của mình sao cho phù hợp với
mong muốn.

Màn hình tìm kiếm khi sử dụng thiết bị di động:

15

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


2.3. Màn hình kiểm tra thơng tin xe:
Khách hàng sau khi tìm kiếm được xe phù hợp với mình có thể kiểm
tra thơng tin xe của mình đã chọn, các thông tin được hiển thị rất chi tiết để
khách hàng nắm rõ được những đặc điểm của xe hiện tại.

Khách hàng cịn có thể kiểm tra địa điểm hiện tại của xe (khoanh vùng
tọa độ). Địa chỉ xe chính xác sẽ hiển thị khi thanh toán đặt cọc.

16

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


2.4. Màn hình đăng nhập:

Người dùng có thể đăng nhập bằng tài khoản chính thức của Mioto đã
đăng ký hoặc sử dụng facebook và google để đăng nhập thay thể.

2.5. Màn hình đăng ký cho thuê xe:
Các chủ xe muốn đăng thơng tin xe của mình lên ứng dụng/ web của
Mioto sẽ thực hiện điền đầy đủ các thông tin dữ liệu theo yêu cầu để tiến
hành đăng xe của mình. Bao gồm 3 bước
Bước 1: mã giới thiệu (nếu có) và biển số xe (khơng được trùng lặp)

17

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


Bước 2: điền các mẫu thông tin cơ bản như hình bên dưới về chi tiết
xe của mình (thơng tin chi tiết của xe sẽ được hiển thị cho người dùng sau
khi đăng ký xe thành cơng)

18

Dương Bảo Như

Nguyễn Dzỗn Hoàng Khánh Duy


Bước 3: sau khi hồn thành trường thơng tin chi tiết, chủ xe có thể tùy chọn hình

ảnh xe của mình (chụp xe cá nhân ở nhiều góc độ khác nhau).

Sau khi hoàn tất 3 bước trên chủ xe sẽ chờ admin duyệt xe của mình trong khoảng
thời gian ngắn nhất
TÀI LIỆU THAM KHẢO
Tài liệu Pug: />Tài liệu các thủ thuật css: a/p/mot-vai-thu-thuat-css-ma-chinhfrontend-co-the-con-chua-biet-phan-7-aWj53pv1K6m
Tài liệu sử dụng công cụ figma: />v=Vo0sEPqArRQ&fbclid=IwAR08YUY93WWqhAguuHPb3KxvmiRq7KXF6iBE
cEFEzUunXfFh5OqveVlPXXw
Tài liệu sử dụng công cụ Photoshop: />v=Z9pn7kJSW-s&list=PLhH4pVqw4xK5PxI73ENSPKRzEakPNzWqR
Tài liệu Gulp: />Tài liệu sass: />
19

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy


TỔNG KẾT
Kỳ thực tập vừa qua đã giúp em có được kinh nghiệm làm thực tế và hiểu thêm về
quy trình phất triển sản phẩm cũng như các nghiệp vụ của công ty, rèn luyện kỹ
năng chuyên môn cũng như những kỹ năng giao tiếp với mọi người. Trong quá
trình tham gia vào dự án cũng giúp em định hướng được những mong muốn tương
lai của mình và đặc biệt là trách nhiệm cá nhân khi phát triển một sản phẩm.
Chân thành cảm ơn các anh/chị ở công ty Mioto đã giúp em hoàn thành bài báo cáo
này.

20

Dương Bảo Như

Nguyễn Dzỗn Hồng Khánh Duy