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

- 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 x

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 Dzoãn Hoà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ợinhuận cho công ty, từ đó cũng xuất hiện nhu cầu về phương tiện di chuyển ngàycà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ẻ chiaMioto đượ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ốichủ 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

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 hoà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àybắ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

NHẬN XÉT CỦA KHOA

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

………

……….………

Mục lục

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 đạikế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 thuê xe

- 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ầucũ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ể hoàn toà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ị)

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 giachí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, quá trình thành lập và pháttriên (như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cáchthứ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, 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, 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 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ườitrong công ty

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

2.1 Công cụ làm việc

Thời gian : 6 ngày (2 tuần)

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áccông cụ sẽ giúp ích cho trong công việc sau này Sử dụng git để làm việcchung 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

2.2 Front-end

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

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úcthườ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.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 và tuân theo cấu trúc có sẵn của công ty

2.3 Công cụ thiết kế:

Thời gian : 6 ngày (2 tuần)

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 projectchính thức

3 Lịch làm việc

Tuần Công việc Người hướng dẫn

Mức độ hoàn thành

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

1

- Tìm hiểu vềcông ty, cách tổchức của côngty

- Làm quen vớicác công cụ làmviệc trong côngty

- Học cách traođổi, làm việc quacác kênh giaotiếp như Trello,Slack

Chị Như

2-5

- Lập trình end (scss, bootstrap, pug)

front Đọc tài liệu

sourcecode xemcách tổ chức

Chị Như

6-8

- Làm quen và tậpluyện sử dụngcông cụ thiết kếFigma,

Photoshop cơbản

Chị Như, ChịNguyên

9

- Giới thiệu quytrình làm việc,clone projectchính thức và bắtđầu xem các cấutrúc đã có sẵn

Chị Như

10

- Tiến hành nhậntask và làm việc

Chị Như

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 thuê xe tại ứng dụng để tìm kiếm khách hàng cho mình

- Đối với khách hàng thuê xe ngoà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 yê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 đượckhi 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í thuê 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 Luôn 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 thuê 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 thuê 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 thuê

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ủ thuê xe và luôn có đội ngũ chăm sóc khách hàng nhiệt tình hỗ trợ

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)

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:

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ùngtọa độ) Địa chỉ xe chính xác sẽ hiển thị khi thanh toán đặt cọc.

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)

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)

Bước 3: sau khi hoà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: https://pugjs.org/api/getting-started.html

Tài liệu các thủ thuật css: frontend-co-the-con-chua-biet-phan-7-aWj53pv1K6m

https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-Tài liệu sử dụng công cụ figma: https://www.youtube.com/watch?

v=Vo0sEPqArRQ&fbclid=IwAR08YUY93WWqhAguuHPb3KxvmiRq7KXF6iBEcEFEzUunXfFh5OqveVlPXXw

Tài liệu sử dụng công cụ Photoshop: https://www.youtube.com/watch?

v=Z9pn7kJSW-s&list=PLhH4pVqw4xK5PxI73ENSPKRzEakPNzWqR

Tài liệu Gulp: https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfilesTài liệu sass: https://sass-lang.com/documentation

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áonày