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 năm 2021 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 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 người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, Hiện đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo 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 đạ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 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 tương lai Sau những năm tháng 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 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ó hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm mentor, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm nhữn g giao diện web tuyệt vời Chân thành cảm ơn anh chị nhóm mentor 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 Nguyễn Anh Tuấn, training front-end, hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến 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 giúp đỡ em suốt trình thực tập 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 Võ Thái Hoà TpHCM, ngày 10 tháng năm 2021 NHẬN XÉT CỦA KHOA MỤC LỤC MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Gumi Viet Nam Sản phẩm công ty Chương 2: Nội dung thực tập .11 Tìm hiểu công ty kỹ công ty 11 Nghiên cứu kỹ thuật 11 Thực project 13 Lịch làm việc .13 Chương 3: Chi tiết project .15 Giới thiệu 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 Giới thiệu công ty gumiViet Công ty cổ phần gumi Việt Nam công ty CNTT có vốn đầu tư 100% đến từ Nhật Bản chuyên phát triển website ứng dụng dành cho smart phone Được thành lập từ năm 2012 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 với mong muốn khách hàng Các sản phẩm, dịch vụ tạo 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 tổ chức doanh nghiệp việc cung cấp 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 • Sứ mệnh: Trong suốt trình hoạt động, gumi Việt Nam nỗ lực với mục tiêu cao mang lại 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 xác, kịp thời dự án Ngồi gumi Việt Nam tiên phon xu hướng công nghệ góp phần vào nghiệp cơng nghiệp hóa, đại hóa đất nước bối cảnh hội nhập kinh tế Thế giới - Số năm kinh nghiệm lĩnh vực bán hàng dịch vụ: năm - Chính sách chất lượng • Ln cung cấp sản phẩm dịch vụ tốt nhất, đảm bảo thi công tiến độ, • chất lượng, hiệu quả, an toàn thỏa thuận với khách hàng Không ngừng cải tiến mặt để đạt hoàn hảo sản phẩm dịch vụ cung cấp, mối quan hệ với khách hàng khả 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 công nghệ thi công đại; nghiên cứu ứng dụng phương thức quản lý hiệu quả, chuyên nghiệp, tiên tiến nhằm đáp ứng tối đa yêu cầu Khách hàng, Đối tác Tổ chức lĩnh vực hoạt động 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 sản phẩm, dịch vụ tạo tảng VR/AR Cơ cấu tổ chức gumi Việt Nam Gumi Việt Nam kết hợp sức trẻ, tri thức đội ngũ nhà quản lý đầy kinh nghiệm, gumi gồm nhiều kỹ sư tin học đào tạo từ trường Đại học danh tiếng Công nghệ thông tin nay, có kinh nghiệm lâu năm 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 phận: • Phịng Marketing • Phịng Hỗ trợ khách hàng • Phòng Phát triển Website/Mobile App 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 đào tạo tồn diện lập trình giao diện web, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường công nghệ chuyên nghiệp Là thành viên team front-end Công ty cổ phần gumiVietnam có hội học tập trau dồi kiến thức lĩnh vực lập trình giao diện web, tiếp cận với tảng công nghệ khác nhau, tăng khả tìm kiếm đọc hiểu tài liệu tiếng Anh… Tìm hiểu công ty kỹ công ty 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, 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, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty gumiViet, 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 Nghiên cứu kỹ thuật 2.1 2.2 Các công cụ làm việc Thời gian : ngày 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, mentor 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 Một số phần mềm số WebStorm– IDE để lập trình giao diện, Terminal để sử dụng git, SourceTree để sử dụng git với GUI Thực : Thực hành sử dụng phần mềm nêu 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 nhau, so với việc dung IDE Tìm hiểu ngơn ngữ Html,css, scss Vì em vào cơng ty chưa biết front-end nên cơng ty đào tạo lại từ đầu Thời gian : 30 ngày (1 tháng ) Nội dung : Được training kỹ thuật html, css, scss nâng cao, kiến thức quan trọng cho việc tạo layout responsive cho trang web 9 - Html : cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links,… - Css : Tạo phong cách kiểu cho trang web nhu tạo bố cục layout, color, khoảng cách, reponsive,… - Scss : Là tiền xử lý css, giúp viết css theo cách ngơn ngữ lập trình, có cấu trúc rõ ràng , rành mạch, dễ phát triển bảo trì code 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 Kết : - Nắm kiến thức html/css/scss - Nắm BEM name - Có thể dàn layout trang web, style theo design responsive 2.3 Tìm hiểu js dom/Jquery Thời gian : 30 ngày (1 tháng ) Nội dung: Tìm hiểu js/Jquery , Ui/Ux, Bootstrap - Tìm hiểu Js/Jquery: - Tìm hiểu js dom - Tìm hiểu object, function, class, Async - Tìm hiểu jquery - Tìm hiểu Js web Apis - Kiến thức UI/UX: Tìm hiểu khái niệm ui/ux - Bootstrap: Tìm hiểu bootstrap, bootstrap gird,… Thực : - Tham gia đầy đủ buổi trainning - Làm tập thực hành làm lại hình có sẵn, thêm logic phức tạp, … - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Nắm nắm kiến thức js/jquery để làm animation cho web - Sử dụng thư viện front-end slick slider - Áp dụng kiến thức Js để responsive cho web - Áp dụng js/jquery vào evens, click, tăng tính tương tác người dùng 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 - Áp dụng gọi api trang web Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực Html, css, scss, js/jquery Sau tháng thứ 2, thực tập sinh phân công thực project dựng giao diện Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc Người hướng dẫn Mức Nhận xét người độ hướng dẫn 10 hoàn thành - 4 => 8 => 10 18 => Hiện 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 email - Tìm hiểu html,css - Thực hành html,css - Tìm hiểu Scss - Thực hành số ứng dụng - Tìm hiểu responsive - Thực hành số 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 js - Responsive js - Dựng giao diện web Anh Nguyễn Anh Tuấn Fix bug giao diện Anh Nguyễn Anh Hồn thành sau Tuấn góp ý mentor - 11 Chương 3: Chi tiết project Giới thiệu project Sau nắm kiến thức front-end, em phân công dựng giao diện website qua file giao diện mẫu psd vòng tuần Trang web giao diện blog 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 thao tác người dùng với trang web 1.2 Tính Giao diện tìm chuyến bay, khách sạn, viết 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 gói tour Hình 3.5: Màn hình about 15 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 project - Tạo project github quản lý sourcetree Giai đoạn 2: - Cắt giao diện home, about, - Làm animation, cvacs thao tác xử lý slick, chuyển page,… js/jquery Giai đoạn 3: Đưa mentor review sau fix bug hồn chỉnh project Kết : Website hồn chình đáp ứng yêu cầu đề Tham gia dự án thực tế Sau nhận phản hồi tốt dự án từ anh Nguyễn Anh Tuấn Em anh Nguyễn Anh Tuấn phân công tham gia vào dự án thực tế với vai trò developer front-end (html,css,js) team bao gồm thành viên khác 16 TÀI LIỆU THAM KHẢO Html https://www.w3schools.com/html/default.asp Css https://www.w3schools.com/css/default.asp Scss https://www.w3schools.com/sass/default.php JavaScript https://www.w3schools.com/js/default.aspi Jquery https://www.w3schools.com/jquery/default.asp Git https://www.tutorialspoint.com/git/index.htm UI/UX https://edex.adobe.com/resource/v3b9bc716 17 TỔNG KẾT Qua trình thực tập thực tế Cơng ty cổ phần gumiVietnam em tích lũy cho thân nhiều kinh nghiệm, kỹ cố kiến thức học, nhận thấy hội, bước đệm cho đường phía trước Em trực tiếp làm việc với đội ngũ anh chị cơng ty nhiệt tình, chịu khó công việc Được đào tạo với chuyên ngành, thực công việc dẫn anh hướng dẫn; trực tiếp tham gia, tích lũy kiến thức, kinh nghiệm cho thân  ... vào trang web - Áp dụng gọi api trang web Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực Html, css, scss, js/jquery Sau tháng thứ 2, thực tập sinh phân công thực project... Phát triển Website/Mobile App 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 đào tạo tồn diện lập trình giao diện web, đồng... 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 ngành công nghiệp web, em đã lựa chọn Front- end web developer là định hướng cho