1 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 FRONT-END WEB VỚI HTML, CSS VÀ JQUERY Công ty thực tập : GLOBEE Người phụ trách : Bùi Thị Thanh Thúy Thực tập sinh : Cao Minh Huy LỜI MỞ ĐẦU Trong thời đại 4.0, gần thông tin đưa lên trang web, mảng phát triển thiết kế web đóng vai trị ngành quan trọng công nghệ thông tin Do nhu cầu người dùng ngày cao nên việc phát triển web có tốc độ phát triển vơ mạnh mẽ, liên tục thúc đẩy ngành công nghệ thông tin Việt Nam ngoại lệ Các công ty web nước ta không ngừng phát triển để theo kịp, hòa nhập cạnh tranh với thị trường quốc tế Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, tham gia vào môi trường làm việc chuyên nghiệp nên em định thực tập kì Vì vậy, em định chọn Globee - môi trường lý tưởng, đại, chuyên nghiệp nơi giúp em thực dự định 3 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Globee 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 để xây dựng trang web với HTML, CSS 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 hồn thành đợt thực tập Đặc biệt cảm ơn anh Bách anh Phước 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 Lộc, training front-end, hỗ trợ chúng em nhiều vấn đề CSS, Bootstrap, trình làm task; cảm ơn anh Hưng, dẫn chúng em cách làm báo cáo, lên kế hoạch, kỹ thiếu 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 Tp.Hồ Chí Minh, ngày tháng năm 2021 Cao Minh Huy NHẬN XÉT CỦA KHOA ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………… 5 Nội dung LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty Sản phẩm công ty CHƯƠNG 2: NỘI DUNG THỰC TẬP Tìm hiểu công ty kỹ Nghiên cứu kỹ thuật 2.1 Công cụ làm việc 2.2 Front-end 2.3 Product Requirement Document Training 2.4 Tìm hiểu Saleforce Cloud Platform 2.5 Nghiệp vụ công ty 12 Lịch làm việc 13 TÀI LIỆU THAM KHẢO 14 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu cơng ty Globee tìm thấy nhóm chuyên gia CNTT vào năm 2016 sau năm làm việc Đội ngũ phát triển tham gia phát triển hệ thống lớn hệ thống ERP để quản lý 200.000 tình nguyện viên đồng hành SEA Games 28 Singapore 2015 Globee có kinh nghiệm chăm sóc sức khỏe, thương mại điện tử (mỹ phẩm, giày dép, hành lý & kinh doanh), developer chứng nhận Salesforce Commerce Cloud developer (trước Demandware) Với sứ mệnh làm cho khách hàng hài lòng, Globee cung cấp dịch vụ sản phẩm chất lượng tốt cho khách hàng Có đội ngũ tài để cung cấp cho khách hàng không phần mềm, ứng dụng di động mà giải pháp thương mại điện tử Sản phẩm công ty Hiện tại, khách hàng công ty thương hiệu Samsonite (bao gồm cả: Tumi, AmericanTourister, Lipault) Bao gồm website thương mại đa quốc gia thương hiệu này: - https://www.samsonite.com.au/ https://www.samsonite.com.ph/ https://www.samsonite.com.tw/ https://www.samsonite.com.hk/ https://www.samsonite.com.th/ (Tương tự cho mono brand AmericanTourister Lipault) CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập giúp sinh viên xây dựng giao diện web cải thiện trải nghiệm người dùng thông qua việc cho thực tập viên tham gia vào trình thiết kế Product Requirement Document (PRD) tăng cường thẩm mĩ trang web 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 phát triển ứng dụng e-commerce chun nghiệp 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 cịn 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 Globee, 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 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 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 Một số phần mềm số Tortoise SVN - sử dụng làm việc nhóm, Eclipse với Digital cloud server, Visual Code 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 8 2.2 Front-end Thời gian : 14 ngày (2 tuần) Nội dung : HTML structure, CSS, Javascript, JQuery, Bootstrap - 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 CSS : Tiến hành tìm hiểu css style cho trang HTML trước Javascript, JQuery: Tìm hiểu ES6: Block – Scoped, Arrow Function, Rest Parameter, Destructuring Assignment, Default Parameters, Template Literals, Promises, Classes Tìm hiểu JQuery thư viện liên quan như: jquery validate, jcarousel,… Thêm javascript cho trang web Bootstrap: Tìm hiểu bootstrap: grid, flex,… Style trang web dùng bootstrap 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âng cao kỹ lập trình web Có kiến thức quan trọng cho việc lập trình web sau Ngồi biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu dùng eslint để kiểm tra 2.3 Product Requirement Document Training Thời gian : 14 ngày (2 tuần) Nội dung : Tìm hiểu cấu trúc PRD: - Objective: ( Mục tiêu) Xác định mục tiêu sản phẩm Features: (Tính năng) Chọn lọc tính quan trọng sản phẩm 9 - - UX flow and design: (Thiết kế UX) Tìm hiểu UI/UX, hiểu flow sản phẩm để tiến hành thiết kế Analytics: (Phân tích thống kê) Tìm hiểu điểm mạnh, điểm yếu phần mềm hạn chế, ràng buộc từ phía bên khách hàng song công ty để đưa biện pháp giải hợp lý Future work: (Dự định tương lai) Sau khi, đưa biện pháp, lên kế hoạch để tiến hành xây dựng phát triển web 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âng cao kỹ đọc hiểu tài liệu liên quan tới sản phẩm công ty Am hiểu flow sản phẩm/ dự án làm Ngồi cịn trải nghiệm quý báu đồng hành làm việc với Project Manager cơng ty 2.4 Tìm hiểu Saleforce Cloud Platform Thời gian : 14 ngày (2 tuần) Nội dung : Tìm hiểu Saleforce Cloud Platform, Nodejs - Cấu trúc SFRA (Storefront Reference Architecture) Layer Description Tips Custom Adds specific customizations for your brand and organization Perform all customizations of the base, LINK, and product cartridges in custom cartridges for Rename all custom cartridges with app_custom_* to make them easy to distinguish 10 Layer Description Tips easy adoption of future features LINK Adds third-party functionality to your site You can integrate features from LINK partners, such as payment providers and tax services You can import LINK partner data, such as tax tables or inventory feeds See specific LINK cartridge documentation for more information Plug-in Enhances the ecommerce capabilities provided by Commerce Cloud or anyone else in the Salesforce community Cartridges provided by Commerce Cloud let you integrate (optional) products and features such as product compare and gift registry Plug-ins can create custom objects or data that are specific to a product or feature Base Core functionality modified only by the Commerce Cloud team or through contributions to GitHub The core cartridge includes bestpractice code for features used by most customers In addition to the default features, the base cartridge Some of the features in the base cartridge are configured in Business Manager, such as pick up in store 11 Layer Description Tips contains features that can be configured in Business Manager - - Tại phải dùng SFRA: Các sửa lỗi bảo mật cập nhật Phát triển dựa thiết kế mobile first Dễ dàng ghi đè mở rộng với Mô-đun Áp dụng tuân thủ tiêu chuẩn bao gồm Bootstrap Hỗ trợ công nghệ thử nghiệm: Controller kiểm thử bới integration tests, Model – Unit tests, View – functional test Làm quen với sandbox (Business Manager) Saleforce Import website cơng ty tiến hành thử nghiệm (bao gồm: tạo controller, edit module, thêm thuộc tính cho model, form) Thực : 12 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 : Hiểu kiến trúc SFRA 2.5 Nghiệp vụ công ty Thời gian : ngày Nội dung : Tìm hiểu quản lý dự án với redmine, tập viết TSD (Technical specified document), thao tác với git, development process Review -> Feedback -> Development -> Staging -> Production Review: sau hoàn thành task, techlead bắt đầu review mặt kỹ thuật (chuẩn code, logic,…) Lập trình viên phải tự test review Feedback: có lỗi mặt kỹ thuật, techlead đưa task vào trang thái feedback lập trình viên phải sửa feedback sau đưa lại cột review chờ feedback lại từ tech lead Development: sau chấp thuận, code bạn apply vào môi trường development Lúc này, bạn tester tiến hành test Nếu xảy lỗi bạn phải fix lỗi sau đưa task lại trạng thái review Staging: Là môi trường trung lập, khơng phép chỉnh sửa mơi trường Bình thường code development replicate từ staging theo đợt Production: môi trường người dùng Kết : Hiểu rõ quy trình làm việc cơng ty Nắm cấu trúc, bố cục TSD 13 Lịch làm việc Tuần Công việc - - 2-3 4-5 Tìm hiểu cơng Chị Hồ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 Lập trình frontAnh Lộc end (css, bootstrap, javascript, jquery, html) - PRD Training - Làm quen với Anh Hưng (tech redmine, setup lead) môi trường cho tất site cơng ty TSD Quy trình làm việc Back-end (Setup Anh Bách environment, SFRA) 7-8 Người hướng dẫn Anh Huy (PM) Mức độ hoàn thành Nhận xét người hướng dẫn 14 TÀI LIỆU THAM KHẢO Develop for Salesforce B2C Commerce https://trailhead.salesforce.com/en/content/learn/trails/develop-for-commerce-cloud Salesforce B2C Commerce Infocenter https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp ... Lipault) CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập giúp sinh viên xây dựng giao diện web cải thiện trải nghiệm người dùng thông qua việc cho thực tập viên tham gia vào trình thiết kế Product Requirement... 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 để xây dựng trang web với HTML, CSS Chân thành cảm... Code 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 8 2.2 Front- end Thời gian : 14 ngày (2 tuần) Nội dung : HTML structure, CSS,