Báo Cáo Thực Tập Lập Trình Front-End Web.pdf

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 Công ty thực tập Spiraledge Người phụ trách Võ Nguyễn Đăng Hải Thực tập sinh Thái Chí Bảo TP Hồ Chí[.]

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH FRONT-END WEB

Công ty thực tập : Spiraledge Người phụ trách : Võ Nguyễn Đăng Hải Thực tập sinh : Thái Chí Bảo

TP Hồ Chí Minh, tháng 12 năm 2022

LỜI MỞ ĐẦU

Ngày nay, thị trường bán lẻ là một trong những bộ phận quan trọng của thị trường toàn quốc cũng như ngành công nghiệp phần mềm Nhiều thương hiệu dù nhỏ hay lớn đều đang từng bước thực hiện chuyển đổi số, muốn đưa doanh nghiệp của mình lên internet qua nhiều hình thức khác nhau, một trong số đó là ecommerce, hay còn gọi là thương mại điện tử

Do nhu cầu ngày càng nâng cao này, các nước trên thế giới ngày càng yêu cầu thêm nguồn nhân lực để thực hiện việc đưa thương hiện của mình lên internet, và đã bắt đầu tìm kiếm

nó ở các nước bạn thông qua làm việc remote, tuyển nhân viên đi sang nước ngoài, một số khác lập cả cả trụ sở ở nước bạn để có thể trực tiếp sử dụng nguồn nhân lực này

Sau bốn 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ư muốn được tham gia lập trình các dự án ở môi trường chuyên nghiệp, em có dự định là sẽ thực tập trong học kỳ này Vì vậy, em quyết định chọn Spiraledge - một môi trường rất thân thiện, hiện đại và chuyên nghiệp - là nơi sẽ giúp em trao dồi kiến thức cũng như lấy kinh nghiệm, học hỏi được nhiều điều mới

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Spiraledge 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 các anh chị và các bạn đồng nghiệp, em đã tiếp thu được những kiến thức quan trọng về bảo mật, kỹ năng làm việc nhóm và tư duy giải quyết vấn đề

Đặc biệt cảm ơn anh Hải Võ (Võ Nguyễn Đăng Hải) và anh Khôi Đặng đã tận tình hướng dẫn em trong thời gian thực tập Nhờ những hướng dẫn về kiến trúc của các hệ thống trong công ty của anh Hải Võ mà em nắm được sơ về cách thức hoạt động của các task mà em được giao, cũng như biết cách đặt câu hỏi để tìm được lời giải cho vấn đề và biết tìm ai để hỏi Cảm ơn anh Khôi Đặng đã giúp em rất nhiều trong các vấn đề liên quan đến front-end cũng như cho em nhiều tips để trở thành một lập trình viên tốt hơn Và cảm ơn các anh chị và bạn bè đồng nghiệp trong thời gian thực tập đã giúp đỡ em và mở lòng chào đón em dù em có hơi ít nói

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

Thái Chí Bảo

Tp HCM, ngày 20 tháng 12 năm 2022

NHẬN XÉT CỦA KHOA

MỤC LỤC

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

MỤC LỤC 5

Chương 1: Giới thiêu công ty thực tập 6

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

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

Chương 2: Nội dung thực tập 8

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

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

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

2.2 Tìm hiểu ngôn ngữ Liquid 8

2.3 Tìm hiểu về Shopify 9

2.1 Tìm hiểu về NetSuite 9

3 Thực hiện dự án 9

4 Lịch làm việc 9

Chương 3: Chi tiết về các dự án 12

2 SwimOutlet 12

2.1 Giới thiệu 12

2.2 Thực hiện 14

2.3 Kế hoạch 14

3 NetSuite 17

3.1 Giới thiệu 17

3.2 Thực hiện 17

3.3 Kế hoạch 17

TÀI LIỆU THAM KHẢO 19

TỔNG KẾT 20

Chương 1: Giới thiêu công ty thực tập

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

Spiraledge được thành lập vào năm 2001 tại Mĩ, là công ty dẫn đầu về internet retailer và cung cấp các dịch vụ phục vụ cho cuộc sống khỏe và lành mạnh Sau hơn 20 năm thành lập, Spiraledge đã khẳng định được vị thế của mình với nhiều thương hiệu khác nhau như SwimOutlet, EverydayYoga, Swim.com, Tend, và các thương hiệu khác

Spiraledge có văn phòng đặt tại Mĩ và Việt Nam, và với văn hóa sống khỏe và chú trọng nhân viên của công ty, văn phòng có hồ bơi, có các dụng cụ tập gym để nhân viên có thể trao dồi sức khỏe, có đồ ăn thức uống để nhân viên có thể thoải mái làm việc và đạt được hiệu quả làm việc cao nhất

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

Công ty có các sản phẩm tiêu biểu như sau:

• SwimOutlet: trang web bán các mặc hàng liên quan đến bơi lội như đồ bơi, áo bơi dài tay, đồ bơi giữ nhiệt, dụng cụ bơi lội, thời trang bơi lội, … Ngoài ra SwimOutlet còn có các tính năng giúp trải nghiệm mua hàng được mượt mà và dễ dàng như yêu thích sản phẩm, xem ảnh phóng to, cho phép review với các thông số như độ vừa vặn, cho người dùng thiết kế một số sản phẩm theo ý mình Đặc biệt Swim Oulet còn thường xuyên colab với các nhân vật nổi tiếng trong lĩnh vực bơi lội để ra mắt các sản phẩm mới

• EverydayYoga: trang web bán các mặc hàng về mảng yoga như quần áo, thảm yoga, dụng cụ yoga và các mặc hàng khác theo theme yoga Trang cũng có nhiều tính năng giống với SwimOutlet

• Practyce: trang web thuê các hướng dẫn viên bơi lội hay yoga, ngoài ra cũng có thể mua các khóa học yoga online

• Swim.com: swim workout app, với trên 1000 bài tập, có thể thiết kế buổi tập theo

ý thích App dùng chung với WearOS của Apple, Garmin, Samsung hay Android

• Tend: Ứng dụng dành cho nhà nông, với nhiều tính năng đa dạng đặc biệt thiết kế cho những người nông dân với trang trại dạng vừa hoặc nhỏ như lập kế hoạch trồng trọt đến thời điểm thu hoạch của các loại cây trồng, thống kê dựa trên các kết quả gieo trồng trước đó Ngoài ra Tend còn có một platform để những người nông dân có thể bán trực tiếp thành quả của mình cho khách hàng Ứng dụng truy cập được trên web hoặc qua app Android hoặc iOS

Chương 2: Nội dung thực tập

Trong thời gian thực tập (3 ngày/tuần), em được tham gia vào dự án SwimOutlet, làm về xây UI cũng như tính năng UI, và ở giai đoạn cuối kỳ thực tập em còn được tham gia xây dựng

hệ thống NetSuite của công ty

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

Thời gian: 2 ngày

Nội dung: Giới thiệu về công ty và các phòng ban, cách tổ chức của công ty, được nghe

người phụ trách giới thiệu về văn hóa công ty, quá trình thành lập và các khu vực quan trọng, các đãi ngộ trong công ty như đồ ăn, thời gian tập yoga, đá banh 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ư quy định làm remote, các quy định công ty chung 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ề Spiraledge, văn hóa cũng như sứ mệnh của công ty 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ác công cụ làm việc

Thời gian: Trong suốt quá trình thực tập

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, được người

phụ trách và đồng nghiệp hướng dẫn về các công cụ cần thiết để xây dựng các dự án mà em được tham gia

Kết quả: Biết cách setup các project của dự án để có thể bắt đầu làm việc

Đối với SwimOutlet em được làm việc với Shopify – platform mà công ty sử dụng để xây dựng SwimOutlet, ngôn ngữ lập trình server-side Liquid, học qua một số API của các third party cung cấp tính năng đặc biệt cho trang web như như Constructor.io, Yotpo, …

Đói với NetSuite, em được làm việc với UI của Netsuite, viết một số Client, User Event

và Suitelet script

2.2 Tìm hiểu ngôn ngữ Liquid

Thời gian: 2 ngày

Nội dung: Được hướng dẫn về ngôn ngữ lập trình server-side liquid và cho tài liệu để tìm

hiểu khi cần thiết trong quá trình làm việc

Kết quả: Hiểu cách sử dụng ngôn ngữ, một số thủ thuật viết code của những người đi

trước

2.3 Tìm hiểu về Shopify

Thời gian: 3 ngày (1 tuần)

Nội dung: Được hướng dẫn cơ bản về Shopify, cách dùng giao diện admin, cách tạo

theme Cách integrate code từ máy lên Shopify theme

Kết quả: Biết cách tạo theme, sửa theme và integrate code sử dụng themekit của Shopify 2.1 Tìm hiểu về NetSuite

Thời gian: Khoảng 9 ngày (3 tuần)

Nội dung: Được hướng dẫn cơ bản về kiến trúc của NetSuite, các công cụ làm việc như

SuiteBuilder, NetSuite UI, SuiteCloud Cách viết các loại script của NetSuite như User Event Script, Client Script, Suitelet, … Tìm hiểu các module thường dùng khi viết script

Kết quả: Hiểu đủ kiến thức để làm việc, hiểu viết được script, biết tìm kiếm các module

cần thiết để giải quyết vấn đề

3 Thực hiện dự án

Sau khoảng 3 tuần được hướng dẫn và tự tìm hiểu, đọc source code thì em được giao task thực tế đầu tiên, chi tiết của dự án sẽ được nói ở phần sau

4 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ác phòng ban trong công ty

- Làm quen với đồng nghiệp trong 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

Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn Anh Khôi Nguyễn

2

- Tìm hiểu về công ty, các phòng ban trong công ty

- Làm quen với đồng nghiệp trong công ty

- Học cách trao đổi, làm việc qua email

Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn

- Tìm hiểu về Shopify và ngôn ngữ Liquid

- Tìm hiểu source code SwimOutlet

3

- Tham gia vào dự án SwimOutlet: fix bug liên quan đến add to cart

- Tìm hiểu về Shopify và ngôn ngữ Liquid

- Tìm hiểu source code SwimOutlet

Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn Anh Khôi Đặng

4

- Tìm hiểu về NeretSuite

- SwimOutlet: xây UI cho thiết kế mới của size chart

- Tìm hiểu về Liquid Shopify object

Anh Hải Võ Anh Tâm Nguyễn Anh Khôi Đặng Anh Khôi Nguyễn Anh Bảo Ngô

5

- Tìm hiểu về SuiteScript

- SwimOutlet: xây UI cho hiết kế mới của size chart, bắt đầu viết logic cho UI

- SwimOutlet: chat với chị Đức Trần dể hiểu thêm về CSDL của công ty và CSDL dùng để hiển thị size chart

- NetSuite: xây một số nút cho Customer Form sử dụng User Event Script

Anh Hải Võ Anh Tâm Nguyễn Anh Khôi Đặng Chị Đức Trần

6

- Tìm hiểu về SuiteScript, SuiteCould Development Framework

- SwimOutlet: gọi API lấy

dữ liệu và logic hiển thị dữ liệu

- NetSuite: tạo API generate Shopify Multipass Token

để đăng nhập vào tài khoản khách hàng sử dụng Restlet

Anh Hải Võ Anh Khôi Nguyễn Anh Tâm Nguyễn Chị Đức Trần Anh Bảo Mai Anh Miên Lê

7 - SwimOutlet: logic hiển thị

dữ liệu, logic chuyển đổi

Anh Hải Võ Anh Khôi Nguyễn

inch sang cm, logic xem Youth’s hoặc Women’s Size

- NetSuite: tạo một số custom field, custom entry form, custom list, … sử dụng NetSuite UI

Anh Ân Tấn Anh Khôi Đặng Chị Đức Trần Anh

8

- SwimOutlet: sửa lỗi mà tester tìm được, sửa logic

do API thay đổi, sửa logic chuyển inch sang cm được thực hiện trên front-end

- NetSuite: tạo form và logic free-shipping credit

sử dụng Client Script và Suietlet

Anh Hải Võ Anh Khôi Nguyễn Anh Ân Tấn Chị Đức Trần Anh Tâm Đặng Anh Miên Lê

9

- NetSuite: tạo form và một phần logic cho form membership sử dụng Client Script và Suitelet

- Chuyển giao code và task còn đang dở cho anh Tâm Nguyễn và anh Khôi Đặng

Anh Hải Võ Anh Khôi Nguyễn Anh Ân Tấn Anh Tâm Nguyễn Anh Khôi Đặng Anh Miên Lê

Chương 3: Chi tiết về các dự án

2 SwimOutlet

2.1 Giới thiệu

SwimOutlet là một trang web bán các mặc hàng liên quan đến bơi lội như đồ bơi, áo bơi dài tay, đồ bơi giữ nhiệt, dụng cụ bơi lội, thời trang bơi lội, …

SwimOutlet còn có các tính năng giúp trải nghiệm mua hàng được mượt mà và dễ dàng như yêu thích sản phẩm, xem ảnh phóng to, cho phép review với các thông số như độ vừa vặn, cho người dùng thiết kế một số sản phẩm theo ý mình Đặc biệt Swim Oulet còn thường xuyên colab với các nhân vật nổi tiếng trong lĩnh vực bơi lội để ra mắt các sản phẩm mới

Hình 1 Giao diện SwimOutlet 1

Hình 2 Giao diện SwimOutlet 2

Hình 3 Giao diện SwimOutlet - Mobile

2.2 Thực hiện

Thành viên team Tornado:

- Hải Võ (Leader / Người phụ trách)

- Tâm Nguyễn

- Ân Tấn

- Khôi Đặng

- Bảo Ngô

- Tâm Hoảng

- Bảo Thái (Thái Chí Bảo)

2.3 Kế hoạch

Trong thời gian thực tập, em được giao thực hiện một số task sau:

2.3.1 Sửa lỗi thông báo add to cart:

Khi số lượng hàng muốn mua lớn hơn số lượng có trong kho sẽ báo lỗi cho người dùng biết, nhưng thông báo này bị lập lại nhiều lần nếu bấm chuột liên tiếp Nhiệm vụ của em là sửa lại để chỉ hiển thị thông báo đó 1 lần duy nhất

Hình 4 Lỗi thông báo khi bấm “add to cart”

Kết quả: Sửa lỗi thành công, code được merge vào production Được anh Hải Võ chỉ dạy

thêm về tầm quan trọng của việc sửa code chứa nhiều dependencies, nguyên lý SOLID

2.3.2 Mở rộng thêm UI cho bảng “đồng ý với điều khoản dịch vụ”:

Trong SwimOutlet, nếu tài khoản của bạn có role chứa đủ quyền để tạo team store thì trước khi tạo sẽ hiện thông báo về điều khoản dịch và cần người dùng đồng ý hết với các điều khoản đó Nhiệm vụ của em là thêm một số điều khoản mới vào UI, đồng thời sửa lại logic để kiểm tra xem các điều khoảng mới có được đồng ý hết chưa trước khi tiếp tục tạo team store

Kết quả: Thêm thành công, code được merge vào production

2.3.3 Xây dựng size chart mới:

Thiết kế mới yêu cầu các sản phẩm thuộc thương hiệu Sporti sẽ có UI mới đẹp và nhiều chức năng hơn size chart cũ, size chart cũ vẫn sẽ áp dụng cho các sản phẩm khác không thuộc thương hiệu Sporti Ngoài giao diện mới, size chart mới còn có các chức năng như chuyển đổi inch sang cm, hướng dẫn cách đó ở tab “How to measure” và tính năng find my fit dùng để tìm số liệu size phù hợp cho người dùng, hiện trung bình review của người dùng

đã mua sản phẩm có thầy sản phẩm đúng với số liệu size hay không, chọn giữa Youth’s và Women’s size

Hình 5 Size chart cũ

Hình 6 Size chart mới (còn thiếu một số UI)

Kết quả: Xây dựng xong, code vẫn chưa được merge vào production lúc kết thúc thời

gian thực tập Hầu hết tính năng và UI đã hoàn thành trừ tính năng “find my fit”

3 NetSuite

3.1 Giới thiệu

Netsuite là một nền tảng quản lý doanh nghiệp được sử dụng bởi trên hàng ngàn cơ quan

tổ chức khắp thế giới (trên 33.000 doanh nghiệp sử dụng Netsuite) Netsuite là một nền tảng đám mây, bao gồm hàng loạt các ứng dụng được xây dựng để giúp các công ty sử dụng dịch

vụ quản lý và chạy công việc kinh doanh của họ, hiểu được độ hiệu quả trong hoạt động doanh nghiệp của họ và từ đó khiến cho doanh nghiệp làm việc hiệu quả hơn, giảm chi phí vận hành

Một số ứng dụng tiêu biểu trong Netsuite: ERP, ERP Financials, SuitePeople, BFN, PSA SCM, Ecommerce, CRM, HR,…

Ngoài ra, NetSuite được thiết kế để doanh nghiệp có thể customize theo yêu cầu của từng loại hình kinh doanh, có thể tạo tính năng mới, loại dữ liệu mới, áp dụng tính năng có sẵn của NetSuite lên loại dữ liệu đó,

Trong quá trình thực tập ở công ty, Spiraledge đang ở giai đoạn đầu của việc chuyển một phần các ứng dụng nội bộ của mình sang sử dụng Netsuite để thay thế Ngoài ra công ty cần thêm những tính năng và những cấu trúc lưu trữ dữ liệu khác mà NetSuite không cung cấp sẵn

3.2 Thực hiện

Thành viên team Tornado:

- Hải Võ (Leader / Người phụ trách)

- Tâm Nguyễn

- Ân Tấn

- Khôi Đặng

- Bảo Ngô

- Tâm Hoảng

- Bảo Thái (Thái Chí Bảo)

3.3 Kế hoạch

Trong thời gian thực tập, em được giao thực hiện một số task sau: