Báo cáo thực tập lập trình FRONT END WEB với HTML, CSS và JQUERY

LỜI MỞ ĐẦU Trong thời đại 4.0, khi gần như mọi thông tin đều được đưa lên các trang web, mảng phát triển và thiết kế web đóng vai trò là một trong những ngành quan trọng công nghệ thông

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, khi gần như mọi thông tin đều được đưa lên các trang web, mảng phát triển và thiết kế web đóng vai trò là một trong những ngành quan trọng công nghệ thông tin Do nhu cầu người dùng ngày càng cao nên việc phát triển web có tốc độ phát triển vô cùng mạnh mẽ, liên tục thúc đẩy ngành công nghệ thông tin

Việt Nam không phải 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 và cạnh tranh với các thị trường quốc tế

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ế, cũng như tham gia vào môi trường làm việc chuyên nghiệp nên em đã quyết định đi thực tập kì này

Vì vậy, em quyết định chọn Globee - một môi trường lý tưởng, hiện đại, chuyên nghiệp -

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 Globee 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ể xây dựng trang web với HTML, CSS 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 anh Bách và anh Phước đã hướng dẫn, giúp đỡ cho chúng em

tận tình cả 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 anh Lộc, đã training front-end, hỗ trợ chúng em rất nhiều về các vấn đề về CSS, Bootstrap, trong quá trình làm task; cảm ơn anh Hưng, đã chỉ dẫn chúng

em về cách làm báo cáo, lên kế hoạch, những kỹ năng không thể thiếu

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

Tp.Hồ Chí Minh, ngày 7 tháng 1 năm 2021

Cao Minh Huy

NHẬN XÉT CỦA KHOA

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Nội dung

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

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

1 Giới thiệu công ty 6

2 Sản phẩm của công ty 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 7

1 Tìm hiểu công ty và các kỹ năng cơ bản 7

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

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

2.2 Front-end 8

2.3 Product Requirement Document Training 8

2.4 Tìm hiểu Saleforce Cloud Platform 9

2.5 Nghiệp vụ công ty 12

3 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

1 Giới thiệu công ty

Globee đã được tìm thấy bởi một nhóm các chuyên gia CNTT vào năm 2016 sau 4 năm làm việc cùng nhau Đội ngũ phát triển đã tham gia phát triển các hệ thống lớn như hệ thống ERP để quản lý hơn 200.000 tình nguyện viên đồng hành của SEA Games 28 tại Singapore 2015

Globee có kinh nghiệm về 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), các developer cũng được chứng nhận là Salesforce Commerce

Cloud developer (trước đây là Demandware) Với sứ mệnh làm cho khách hàng hài lòng,

Globee đã cung cấp các dịch vụ và sản phẩm chất lượng tốt cho các khách hàng

Có đội ngũ tài năng để cung cấp cho khách hàng không chỉ phần mềm, ứng dụng di động

mà còn là giải pháp thương mại điện tử

2 Sản phẩm của công ty

Hiện tại, khách hàng của công ty là thương hiệu Samsonite (bao gồm cả: Tumi,

AmericanTourister, Lipault) Bao gồm các website thương mại đa quốc gia của thương hiệu này:

(Tương tự cho các mono brand AmericanTourister và Lipault)

CHƯƠNG 2: NỘI DUNG THỰC TẬP

Đợt thực tập hiện tại giúp sinh viên xây dựng giao diện web cơ bản và 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 quá trình thiết kế Product Requirement Document (PRD) cũng như tăng cường thẩm mĩ của trang web Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển ứng dụng e-commerce chuyên nghiệp

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

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, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty Globee, 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

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

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

Thời gian : 5 ngày

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 Một số phần mềm trong số đó như Tortoise SVN

- sử dụng trong làm việc nhóm, Eclipse với Digital cloud server, Visual Code

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

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 : 14 ngày (2 tuần)

Nội dung : HTML structure, CSS, Javascript, JQuery, Bootstrap - 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

- CSS :

Tiến hành tìm hiểu về css và style cho trang HTML ở bài trước

- Javascript, JQuery:

Tìm hiểu về ES6: Block – Scoped, Arrow Function, Rest Parameter, Destructuring Assignment, Default Parameters, Template Literals, Promises, Classes

Tìm hiểu JQuery và các 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 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

Kết quả :

Nâng cao kỹ năng lập trình web

Có được những kiến thức quan trọng cho việc lập trình web 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à 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ơ bản về cấu trúc của PRD:

- Objective: ( Mục tiêu)

Xác định được mục tiêu chính của sản phẩm

- Features: (Tính năng)

Chọn lọc được các tính năng quan trọng của sản phẩm

- UX flow and design: (Thiết kế UX)

Tìm hiểu về UI/UX, hiểu được flow của sản phẩm để tiến hành thiết kế

- Analytics: (Phân tích thống kê)

Tìm hiểu về điểm mạnh, điểm yếu của phần mềm cũng như các hạn chế, ràng buộc từ phía bên khách hàng song công ty để đưa ra biện pháp giải quyết hợp lý

- Future work: (Dự định tương lai)

Sau khi, đưa ra các biện pháp, lên kế hoạch để tiến hành xây dựng và phát triển web

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

Kết quả :

Nâng cao kỹ năng đọc hiểu tài liệu liên quan tới sản phẩm của công ty

Am hiểu hơn về flow của sản phẩm/ dự án đang làm

Ngoài ra còn được trải nghiệm quý báu khi được đồng hành làm việc cùng với Project Manager của 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 về 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

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 best-practice 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

Layer Description Tips

contains features that can

be configured in Business Manager

- Tại sao phải dùng SFRA:

Các bản sửa lỗi và bảo mật cập nhật nhất

Phát triển dựa trên thiết kế mobile first

Dễ dàng ghi đè hoặc mở rộng hơn với Mô-đun

Áp dụng tuân thủ các tiêu chuẩn bao gồm Bootstrap 4

Hỗ trợ các công nghệ thử nghiệm: Controller được kiểm thử bới integration tests, Model – Unit tests, View – functional test

- Làm quen với sandbox (Business Manager) của Saleforce

- Import website của công ty và tiến hành thử nghiệm trên đó (bao gồm: tạo

controller, edit module, thêm thuộc tính cho model, form)

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

Kết quả :

Hiểu được kiến trúc của SFRA

2.5 Nghiệp vụ công ty

Thời gian : 1 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 khi hoàn thành task, techlead sẽ bắt đầu review về mặt kỹ thuật (chuẩn code, logic,…) Lập trình viên phải tự test mới được review

Feedback: nếu có lỗi về mặt kỹ thuật, techlead sẽ đưa task vào trang thái feedback và 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 khi được chấp thuận, code của bạn sẽ được apply vào môi trường development Lúc này, bạn cũng như các tester sẽ tiến hành test Nếu xảy ra lỗi thì 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 ai được phép chỉnh sửa gì trên môi trường này Bình thường các code trên development sẽ replicate từ staging về theo đợt Production: môi trường người dùng

Kết quả :

Hiểu rõ quy trình làm việc công ty

Nắm được cấu trúc, bố cục của TSD

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ô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 email

Chị Hồng

2-3

- Lập trình front-end (css, bootstrap, javascript, jquery, html)

Anh Lộc

4-5 - PRD Training Anh Huy (PM)

6

- Làm quen với redmine, setup môi trường cho tất

cả các site của công ty

- TSD

- Quy trình làm việc

Anh Hưng (tech lead)

7-8

- Back-end (Setup environment, SFRA)

Anh Bách

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