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ó nhiều ứng dụng cho thuê xe tiếng Grab, Goviet Những ứng dụng nhiều người tin dùng sử dụng, mang lại nhiều lợi nhuận cho cơng ty, từ xuất nhu cầu phương tiện di chuyển ngày lớn Do xu hướng ngày phát triển, Mioto đời hoạt động cho thuê xe tự lái 4-7 chỗ theo mơ hình kinh tế sẻ chia Mioto thành lập với sứ mệnh mang đến tảng công nghệ đại kết nối chủ xe ô tô hành khách theo cách Nhanh Nhất, An Toàn Nhất Tiết Kiệm Nhất Mioto hướng tới việc xây dựng cộng đồng chia sẻ ô tô văn minh với nhiều tiện ích thơng qua ứng dụng di động, nhằm nâng cao chất lượng sống cộng đồng Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, em có dự định thực tập học kỳ Vì vậy, em định chọn Mioto môi trường lý tưởng, nơi giúp em thực dự định 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ó hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để tham gia vào product với người công ty Chân thành cảm ơn anh/chị nhóm trainer bỏ 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 Đặc biệt cảm ơn anh chị dành thời gian training, hướng dẫn, giúp đỡ cho em cách nhiệt tình khó khăn cơng việc, đến khó khăn việc làm quen với mơi trường Cảm ơn chị Như hướng dẫn em từ ngày bắt đầu vào công ty, chị Nguyên hướng dẫn, chia sẻ em tài liệu cách sử dụng công cụ thiết kế Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Nguyễn Dzỗn Hồng Khánh Duy TpHCM, ngày 26 tháng năm 2020 Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy NHẬN XÉT CỦA KHOA ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… ……………………………………………………………………………………… ………………………………………………………………………….…………… Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy Mục lục 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 Giới thiệu cơng ty - Công ty Cổ phần Mioto Việt Nam hoạt động tảng ứng dụng cho thuê xe tự lái 4-7 chỗ, theo mơ hình kinh tế sẻ chia - Mioto thành lập với sứ mệnh mang đến tảng công nghệ đại kết nối chủ xe ô tô hành khách theo cách Nhanh Nhất, An Toàn Nhất Tiết Kiệm Nhất - Mioto hướng tới việc xây dựng cộng đồng chia sẻ ô tô văn minh với nhiều tiện ích thơng qua ứng dụng di động, nhằm nâng cao chất lượng sống cộng đồng - Các lợi ích mà Mioto 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 nhiều thời gian, quy trình đặt xe đơn giản o Hoạt động hầu hết quận huyện TP.Hồ Chí Minh số 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 vui vẻ, thân thiết với khách hàng thuê xe o Phí thuê xe rẻ so với xe truyền thống o Mang lại nguồn thu nhập tương đối ổn định cho cá nhân doanh nghiệp cho thuê xe app Mioto Sản phẩm công ty: - Hiện tại, khách hàng công ty cá nhân có nhu cầu thuê xe, cá nhân/ doanh nghiệp có nhu cầu cho thuê xe Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy - - Các sản phẩm/ ứng dụng mà công ty Mioto có bao gồm: Ứng dụng di động tảng Android, IOS, Website cho phép khách hàng muốn th xe tìm kiếm thơng tin xe theo địa điểm phù hợp, kết hợp với lọc để lọc xe phù hợp với nhu cầu số tiền để chi trả Mioto phát triển tính GPS tích hợp trực tiếp ứng dụng, Với tính GPS, chủ xe dễ dàng theo dõi trạng vị trí xe ứng dụng, lúc đâu để bạn hồn tồn an tâm xe (Mioto dự kiến triển khai tính GPS quý 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ị) 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 kỹ front-end công cụ thiết kế, sau hoàn thành kỹ mức tiến hành tham gia thức (xây dựng trang chỉnh sửa layout có sẵn, vẽ thiết kế Layout mới, chỉnh sửa ảnh) Tìm hiểu cơng ty kỹ Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập 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ơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, làm quen với người công ty Kết : Hiểu thêm cơng ty Mioto, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm đặc biệt làm quen với người công ty Nghiên cứu kỹ thuật Công cụ làm việc Thời gian : ngày (2 tuần) 2.1 Nội dung : Tìm hiểu cơng cụ sử dụng 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 cơng cụ giúp ích cho cơng việc sau Sử dụng git để làm việc chung với người nhóm, sử dụng kênh giao tiếp Slack giao nhận task Trello Thực : Thực hành đọc sử dụng git kỹ thuật css đọc tài liệu, xem tính Slack Trello Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với 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 việc lập trình nội dung (sử dụng eslint để kiểm tra) - - - HTML: Xây dựng cấu trúc trang tĩnh gồm thẻ HTML Pug: Xây dựng trang tĩnh tổ chức module riêng để tái sử dụng CSS : đọc tài liệu css + thủ thuật sử dụng để sử lý dạng layout phức tạp, xây dụng trang web responsive SCSS: Tìm hiểu scss sass bao gồm: variables, nesting, modules design, mixins, extend/ineritance operator Với SASS, bạn viết CSS theo thứ tự rõ ràng, quản lý biến định nghĩa sẵn, class dùng chung hay tự động nén tập tin CSS lại để tiết kiệm dung lượng Xem cấu trúc sử dụng có sẵn cơng ty Bootstrap: Tìm hiểu bootstrap: grid, flex,… Đọc hiểu class, cấu trúc thường dùng bootstrap luyện tập áp dụng Gulp: javascript build tool, sử dụng gulp để xây dựng nên trang html tĩnh kết hợp sử dụng tool để compile file pug scss, sass Thực : Tham gia đầy đủ buổi training công ty Làm thực hành, kiểm tra kiến thức học – tự xây dựng nên trang tĩnh dự cấu trúc code có sẵn, chỉnh sửa style bị lỗi Kết : Nâng cao kỹ lập trình front-end Có kiến thức cho việc lập trình web front-end sau Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu tn theo cấu trúc có sẵn cơng ty Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy Công cụ thiết kế: Thời gian : ngày (2 tuần) 2.3 Nội dung : học sử dụng công cụ thiết kế: Figma, Photoshop Figma: công cụ hỗ trợ cho việc thiết kế website Các đặc điểm công cụ figma bao gồm - - - Có thể thiết kế thời gian thực, nhiều người thiết kế project riêng, share thiết kế với nhau, thao tác chỉnh sửa Có thể sử dụng đâu khơng thiết phải sử dụng máy tính cá nhân truy cập vào file design lưu trữ sẵn Có thể đọc/ quản lý phản hồi hình khác tăng tương tác thành viên Hỗ trợ thiết kế dạng vecto, xuất file svg, png, jpg thiết kế Photoshop: công cụ hỗ trợ thiết kế đồ họa mạnh sử dụng phổ biến Một số tính bật Photoshop mang lại như: - - Chỉnh sửa ảnh bitmap: sử dụng PS để khắc phục hầu hết lỗi hình ảnh + tạo hiệu ứng đẹp phục chế lại ảnh cũ có chất lượng thấp Thiết kế chữ sáng tạo, đặt tùy biến cho chúng để mang tính hình ảnh biểu tượng Thiết kế banner quảng cáo cho công ty Sử dụng để thiết kế icon đơn giản cho web/ ứng dụng, có hỗ trợ thiết kế 3d, dựng phối cảnh Thực : Tham gia đầy đủ buổi training công ty Làm thực hành, kiểm tra kiến thức học: vẽ thiết kế cho hình, sử dụng photoshop để chỉnh sửa icon trang web Kết : Hiểu cách sử dụng cơng cụ thiết kế để vẽ layout cho project thức 10 Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy Lịch làm việc Tuần Cơng việc Tìm hiểu công ty, cách tổ chức công ty - Làm quen với công cụ làm việc công ty - Học cách trao đổi, làm việc qua kênh giao tiếp 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 tập luyện sử dụng công cụ thiết kế Figma, Photoshop - Giới thiệu quy trình làm việc, clone project thức bắt đầu xem cấu trúc có sẵn - Tiến hành nhận task làm việc thử - 2-5 6-8 10 Người hướng dẫn Mức độ hoàn thành Nhận xét 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 Giới thiệu project: - Mioto tảng ứng dụng cho thuê xe 4-7 chỗ khách hàng tìm kiếm xe phù hợp với giá Chủ xe doanh nghiệp đăng kí cho th xe ứng dụng để tìm kiếm khách hàng cho - Đối với khách hàng th xe ngồi tìm kiếm xe phù hợp cịn hỗ trợ tính theo dõi lịch trình xe giá thuê xe theo ngày khác Các tính đánh giá xe để giúp chủ xe cải thiện thiếu sót cịn gặp phải để góp phần thay đổi thái độ làm việc nâng cao chất lượng xe ngày tốt Khách hàng đặt xe mà không cần duyệt yêu cầu chủ xe (nếu xe có hỗ trợ tính này) Các lợi ích mà khách th xe thu sử dụng tảng website/ ứng dụng thuê xe Mioto như: o Tiết kiệm chi phí th xe o Đặt xe nhanh chóng tiện lợi 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 ứng dụng/web đa dạng, phong phú o Có thể gửi đánh giá ý kiến cá nhân để giúp Mioto phát triển/ hồn thiện sản phẩm o Ln có đội ngũ hỗ trợ thắc mắc giải đáp khách hàng quy trình giải có tranh chấp ngồi ý muốn - Chủ thuê xe cá nhân doanh nghiệp đăng xe cá nhân ứng dụng Mioto để tìm kiếm khách hàng thuê xe, quản lý thơng tin xe Các lợi ích thu 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í phí trì) o Thời gian linh hoạt, cho thuê xe thời gian nào, toàn quyền sử dụng xe cần thiết o Toàn quyền thiết lập giá thuê xe yêu cầu riêng o Dễ dàng kiểm tra lịch sử thuê xe khách ứng dụng Mioto trước định cho thuê o Thuận tiện quản lí theo dõi lịch trình xe, dễ dàng theo dõi vị trí xe bạn sử dụng GPS o Các chương trình ưu đãi dành riêng cho chủ th xe 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 Các hình bản: 2.1 Màn hình tìm kiếm trang chủ: - Màn hình tìm kiếm xe tự lái: lọc danh sách xe tự lái theo địa điểm/ từ ngày bắt đầu ngày kết thúc - Màn hình tìm kiếm xe có tài xế: lọc danh sách xe có tài xế, khách thuê xe tùy chọn địa điểm đón thời gian thuê xe nội thành / liên tỉnh (thời gian tùy chỉnh theo ý muốn khách hàng), chiều (chỉ 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 tìm kiếm: Kết trả cho người dùng thực tìm kiếm xe Trên hình tìm kiếm người dùng tùy chọn thay đổi địa điểm thời gian thuê xe Bên trái hình cịn có lọc có nhiều chức đa dạng để người dùng tùy chỉnh yêu cầu xe cho phù hợp với mong muốn Màn hình tìm kiếm 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 tìm kiếm xe phù hợp với kiểm tra thơng tin xe chọn, thông tin hiển thị chi tiết để khách hàng nắm rõ đặc điểm xe Khách hàng cịn kiểm tra địa điểm xe (khoanh vùng tọa độ) Địa xe xác hiển thị tố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 đăng nhập tài khoản thức Mioto đăng ký sử dụng facebook 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 lên ứng dụng/ web Mioto thực điền đầy đủ thông tin liệu theo yêu cầu để tiến hành đăng xe Bao gồm bước Bước 1: mã giới thiệu (nếu có) biển số xe (không trùng lặp) 17 Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy Bước 2: điền mẫu thơng tin hình bên chi tiết xe (thơng tin chi tiết xe hiển thị cho người dùng sau đăng ký xe thành công) 18 Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy Bước 3: sau hồn thành trường thơng tin chi tiết, chủ xe tùy chọn hình ảnh xe (chụp xe cá nhân nhiều góc độ khác nhau) Sau hồn tất bước chủ xe chờ admin duyệt xe khoảng thời gian ngắn TÀI LIỆU THAM KHẢO Tài liệu Pug: https://pugjs.org/api/getting-started.html Tài liệu thủ thuật css: https://viblo.asia/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: https://www.youtube.com/watch? v=Vo0sEPqArRQ&fbclid=IwAR08YUY93WWqhAguuHPb3KxvmiRq7KXF6iBE cEFEzUunXfFh5OqveVlPXXw 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-gulpfiles Tài liệu sass: https://sass-lang.com/documentation 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ó kinh nghiệm làm thực tế hiểu thêm quy trình phất triển sản phẩm nghiệp vụ công ty, rèn luyện kỹ chuyên môn kỹ giao tiếp với người Trong trình tham gia vào dự án giúp em định hướng mong muốn tương lai đặc biệt trách nhiệm cá nhân phát triển sản phẩm Chân thành cảm ơn anh/chị cơng ty Mioto giúp em hồn thành báo cáo 20 Dương Bảo Như Nguyễn Dzỗn Hồng Khánh Duy ... 1,000,000VND/thiết bị) 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 kỹ front- end công cụ thiết kế, sau hoàn thành kỹ mức tiến hành tham gia thức (xây... trúc code có sẵn, chỉnh sửa style bị lỗi Kết : Nâng cao kỹ lập trình front- end Có kiến thức cho việc lập trình web front- end sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ... 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 tập luyện sử dụng công cụ thiết kế Figma, Photoshop - Giới thiệu quy trình làm việc,