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í[.]
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í Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU Ngày nay, thị trường bán lẻ phận quan trọng thị trường tồn quốc ngành cơng nghiệp phần mềm Nhiều thương hiệu dù nhỏ hay lớn bước thực chuyển đổi số, muốn đưa doanh nghiệp lên internet qua nhiều hình thức khác nhau, số ecommerce, hay cịn gọi thương mại điện tử Do nhu cầu ngày nâng cao này, nước giới ngày yêu cầu thêm nguồn nhân lực để thực việc đưa thương lên internet, bắt đầu tìm kiếm nước bạn thơng qua làm việc remote, tuyển nhân viên sang nước ngoài, số khác lập cả trụ sở nước bạn để trực tiếp sử dụng nguồn nhân lực Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia lập trình dự án mơi trường chuyên nghiệp, em có dự định thực tập học kỳ Vì vậy, em định chọn Spiraledge - môi trường thân thiện, đại chuyên nghiệp - nơi giúp em trao dồi kiến thức lấy kinh nghiệm, học hỏi nhiều điều Võ Nguyễn Đăng Hải Thái Chí Bảo 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ó hội thực tập cơng ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh chị bạn đồng nghiệp, em tiếp thu kiến thức quan trọng bảo mật, kỹ làm việc nhóm tư giải vấn đề Đặc biệt cảm ơn anh Hải Võ (Võ Nguyễn Đăng Hải) anh Khơi Đặng tận tình hướng dẫn em thời gian thực tập Nhờ hướng dẫn kiến trúc hệ thống công ty anh Hải Võ mà em nắm sơ cách thức hoạt động task mà em giao, biết cách đặt câu hỏi để tìm lời giải cho vấn đề biết tìm để hỏi Cảm ơn anh Khôi Đặng giúp em nhiều vấn đề liên quan đến front-end cho em nhiều tips để trở thành lập trình viên tốt Và cảm ơn anh chị bạn bè đồng nghiệp thời gian thực tập giúp đỡ em mở lịng chào đón em dù em có nói Cũng xin cảm ơn thầy 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 Thái Chí Bảo Tp HCM, ngày 20 tháng 12 năm 2022 Võ Nguyễn Đăng Hải Thái Chí Bảo NHẬN XÉT CỦA KHOA Võ Nguyễn Đăng Hải Thái Chí Bảo MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN 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 Spiraledge 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ỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngơn ngữ Liquid 2.3 Tìm hiểu Shopify 2.1 Tìm hiểu NetSuite Thực dự án Lịch làm việc Chương 3: Chi tiết dự án 12 SwimOutlet 12 2.1 Giới thiệu 12 2.2 Thực 14 2.3 Kế hoạch 14 NetSuite 17 3.1 Giới thiệu 17 3.2 Thực 17 3.3 Kế hoạch 17 TÀI LIỆU THAM KHẢO 19 TỔNG KẾT 20 Võ Nguyễn Đăng Hải Thái Chí Bảo Chương 1: Giới thiêu cơng ty thực tập Giới thiệu công ty Spiraledge Spiraledge thành lập vào năm 2001 Mĩ, công ty dẫn đầu internet retailer cung cấp dịch vụ phục vụ cho sống khỏe lành mạnh Sau 20 năm thành lập, Spiraledge khẳng định vị với nhiều thương hiệu khác SwimOutlet, EverydayYoga, Swim.com, Tend, thương hiệu khác Spiraledge có văn phịng đặt Mĩ Việt Nam, với văn hóa sống khỏe trọng nhân viên cơng ty, văn phịng có hồ bơi, có dụng cụ tập gym để nhân viên trao dồi sức khỏe, có đồ ăn thức uống để nhân viên thoải mái làm việc đạt hiệu làm việc cao Sản phẩm cơng ty Cơng ty có sản phẩm tiêu biểu sau: • SwimOutlet: trang web bán mặc hàng liên quan đến bơi lội đồ 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, … Ngồi SwimOutlet cịn có tính giúp trải nghiệm mua hàng mượt mà dễ dàng yêu thích sản phẩm, xem ảnh phóng to, cho phép review với thơng số độ vừa vặn, cho người dùng thiết kế số sản phẩm theo ý Đặc biệt Swim Oulet thường xuyên colab với nhân vật tiếng lĩnh vực bơi lội để mắt sản phẩm • EverydayYoga: trang web bán mặc hàng mảng yoga quần áo, thảm yoga, dụng cụ yoga mặc hàng khác theo theme yoga Trang có nhiều tính giống với SwimOutlet Võ Nguyễn Đăng Hải Thái Chí Bảo • Practyce: trang web thuê hướng dẫn viên bơi lội hay yoga, ngồi mua khóa học yoga online • Swim.com: swim workout app, với 1000 tập, thiết kế buổi tập theo ý thích App dùng chung với WearOS Apple, Garmin, Samsung hay Android • Tend: Ứng dụng dành cho nhà nơng, với nhiều tính đa dạng đặc biệt thiết kế cho người nông dân với trang trại dạng vừa nhỏ lập kế hoạch trồng trọt đến thời điểm thu hoạch loại trồng, thống kê dựa kết gieo trồng trước Ngồi Tend cịn có platform để người nơng dân bán trực tiếp thành cho khách hàng Ứng dụng truy cập web qua app Android iOS Võ Nguyễn Đăng Hải Thái Chí Bảo Chương 2: Nội dung thực tập Trong thời gian thực tập (3 ngày/tuần), em tham gia vào dự án SwimOutlet, làm xây UI tính UI, giai đoạn cuối tập em tham gia xây dựng hệ thống NetSuite cơng ty 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 phịng ban, cách tổ chức cơng ty, nghe người phụ trách giới thiệu văn hóa cơng ty, trình thành lập khu vực quan trọng, đãi ngộ công ty đồ ăn, thời gian tập yoga, đá banh Ngoài ra, thực tập sinh giới thiệu cách thức làm việc công ty quy định làm remote, quy định công ty chung cần phải tuân thủ, cách sử dụng email công việc… Kết quả: Hiểu thêm Spiraledge, văn hóa sứ mệnh cơng ty 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ác công cụ làm việc Thời gian: Trong suốt trình thực tập Nội dung: Tìm hiểu cơng cụ sử dụng q trình làm việc, người phụ trách đồng nghiệp hướng dẫn công cụ cần thiết để xây dựng dự án mà em tham gia Kết quả: Biết cách setup project dự án để bắt đầu làm việc Đối với SwimOutlet em 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 số API third party cung cấp tính đặc biệt cho trang web như Constructor.io, Yotpo, … Đói với NetSuite, em làm việc với UI Netsuite, viết số Client, User Event Suitelet script 2.2 Tìm hiểu ngơn ngữ Liquid Thời gian: ngày Nội dung: Được hướng dẫn ngôn ngữ lập trình server-side liquid cho tài liệu để tìm hiểu cần thiết trình làm việc Võ Nguyễn Đăng Hải Thái Chí Bảo Kết quả: Hiểu cách sử dụng ngôn ngữ, số thủ thuật viết code người trước 2.3 Tìm hiểu Shopify Thời gian: ngày (1 tuần) Nội dung: Được hướng dẫn 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 integrate code sử dụng themekit Shopify 2.1 Tìm hiểu NetSuite Thời gian: Khoảng ngày (3 tuần) Nội dung: Được hướng dẫn kiến trúc NetSuite, công cụ làm việc SuiteBuilder, NetSuite UI, SuiteCloud Cách viết loại script NetSuite User Event Script, Client Script, Suitelet, … Tìm hiểu module thường dùng viết script Kết quả: Hiểu đủ kiến thức để làm việc, hiểu viết script, biết tìm kiếm module cần thiết để giải vấn đề Thực dự án Sau khoảng tuần hướng dẫn tự tìm hiểu, đọc source code em giao task thực tế đầu tiên, chi tiết dự án nói phần sau Lịch làm việc Tuần Công việc - Tìm hiểu cơng ty, phịng ban công ty - Làm quen với đồng nghiệp 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 cơng ty, phịng ban công ty - Làm quen với đồng nghiệp công ty - Học cách trao đổi, làm việc qua email Võ Nguyễn Đăng Hải Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn Anh Khôi Nguyễn Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn Thái Chí Bảo 10 - Tìm hiểu Shopify ngơn ngữ Liquid - Tìm hiểu source code SwimOutlet - Tham gia vào dự án SwimOutlet: fix bug liên quan đến add to cart - Tìm hiểu Shopify ngơn ngữ Liquid - Tìm hiểu source code SwimOutlet - Tìm hiểu NeretSuite - SwimOutlet: xây UI cho thiết kế size chart - Tìm hiểu Liquid Shopify object - Tìm hiểu SuiteScript - SwimOutlet: xây UI cho hiết kế size chart, bắt đầu viết logic cho UI - SwimOutlet: chat với chị Đức Trần dể hiểu thêm CSDL công ty CSDL dùng để hiển thị size chart - NetSuite: xây số nút cho Customer Form sử dụng User Event Script - Tìm hiểu SuiteScript, SuiteCould Development Framework - SwimOutlet: gọi API lấy liệu logic hiển thị 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 - SwimOutlet: logic hiển thị liệu, logic chuyển đổi Võ Nguyễn Đăng Hải Anh Hải Võ Anh Ân Tấn Anh Tâm Nguyễn Anh Khôi Đặng Anh Hải Võ Anh Tâm Nguyễn Anh Khôi Đặng Anh Khôi Nguyễn Anh Bảo Ngô Anh Hải Võ Anh Tâm Nguyễn Anh Khôi Đặng Chị Đức Trần 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ê Anh Hải Võ Anh Khơi Nguyễn Thái Chí Bảo 11 - - - - - inch sang cm, logic xem Youth’s Women’s Size NetSuite: tạo số custom field, custom entry form, custom list, … sử dụng NetSuite UI SwimOutlet: sửa lỗi mà tester tìm được, sửa logic API thay đổi, sửa logic chuyển inch sang cm thực front-end NetSuite: tạo form logic free-shipping credit sử dụng Client Script Suietlet NetSuite: tạo form phần logic cho form membership sử dụng Client Script Suitelet Chuyển giao code task dở cho anh Tâm Nguyễn anh Khôi Đặng Võ Nguyễn Đăng Hải Anh Ân Tấn Anh Khôi Đặng Chị Đức Trần Anh 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ê 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ê Thái Chí Bảo 12 Chương 3: Chi tiết dự án SwimOutlet 2.1 Giới thiệu SwimOutlet trang web bán mặc hàng liên quan đến bơi lội đồ 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ó tính giúp trải nghiệm mua hàng mượt mà dễ dàng yêu thích sản phẩm, xem ảnh phóng to, cho phép review với thông số độ vừa vặn, cho người dùng thiết kế số sản phẩm theo ý Đặc biệt Swim Oulet thường xuyên colab với nhân vật tiếng lĩnh vực bơi lội để mắt sản phẩm Hình Giao diện SwimOutlet Võ Nguyễn Đăng Hải Thái Chí Bảo 13 Hình Giao diện SwimOutlet Võ Nguyễn Đăng Hải Thái Chí Bảo 14 Hình Giao diện SwimOutlet - Mobile 2.2 Thực 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 giao thực số task sau: Võ Nguyễn Đăng Hải Thái Chí Bảo 15 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 số lượng có kho báo lỗi cho người dùng biết, thông báo bị lập lại nhiều lần bấm chuột liên tiếp Nhiệm vụ em sửa lại để hiển thị thơng báo lần Hình Lỗi thơng báo bấm “add to cart” Kết quả: Sửa lỗi thành công, code merge vào production Được anh Hải Võ dạy thêm tầm quan trọng 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, tài khoản bạn có role chứa đủ quyền để tạo team store trước tạo thơng báo điều khoản dịch cần người dùng đồng ý hết với điều khoản Nhiệm vụ em thêm số điều khoản vào UI, đồng thời sửa lại logic để kiểm tra xem điều khoảng có đồng ý hết chưa trước tiếp tục tạo team store Kết quả: Thêm thành công, code merge vào production 2.3.3 Xây dựng size chart mới: Thiết kế yêu cầu sản phẩm thuộc thương hiệu Sporti có UI đẹp nhiều chức size chart cũ, size chart cũ áp dụng cho sản phẩm khác không thuộc thương hiệu Sporti Ngoài giao diện mới, size chart cịn có chức chuyển đổi inch sang cm, hướng dẫn cách tab “How to measure” tính find my fit dùng để tìm số liệu size phù hợp cho người dùng, trung bình review người dùng Võ Nguyễn Đăng Hải Thái Chí Bảo 16 mua sản phẩm có thầy sản phẩm với số liệu size hay không, chọn Youth’s Women’s size Hình Size chart cũ Hình Size chart (còn thiếu số UI) Võ Nguyễn Đăng Hải Thái Chí Bảo 17 Kết quả: Xây dựng xong, code chưa merge vào production lúc kết thúc thời gian thực tập Hầu hết tính UI hồn thành trừ tính “find my fit” NetSuite 3.1 Giới thiệu Netsuite tảng quản lý doanh nghiệp sử dụng hàng ngàn quan tổ chức khắp giới (trên 33.000 doanh nghiệp sử dụng Netsuite) Netsuite tảng đám mây, bao gồm hàng loạt ứng dụng xây dựng để giúp công ty sử dụng dịch vụ quản lý chạy công việc kinh doanh họ, hiểu độ hiệu hoạt động doanh nghiệp họ từ khiến cho doanh nghiệp làm việc hiệu hơn, giảm chi phí vận hành Một số ứng dụng tiêu biểu Netsuite: ERP, ERP Financials, SuitePeople, BFN, PSA SCM, Ecommerce, CRM, HR,… Ngoài ra, NetSuite thiết kế để doanh nghiệp customize theo u cầu loại hình kinh doanh, tạo tính mới, loại liệu mới, áp dụng tính có sẵn NetSuite lên loại liệu đó, Trong q trình thực tập cơng ty, Spiraledge giai đoạn đầu việc chuyển phần ứng dụng nội sang sử dụng Netsuite để thay Ngồi cơng ty cần thêm tính cấu trúc lưu trữ liệu khác mà NetSuite không cung cấp sẵn 3.2 Thực 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 giao thực số task sau: Võ Nguyễn Đăng Hải Thái Chí Bảo 18 3.3.1 Tính đăng nhập với tư cách khách hàng: Lúc xem thông tin khách hàng, nhân viên giúp khách hàng đặt hàng hay giải vấn đề cách đăng nhập với tư cách khách hàng cách bấm vào nút “Login As SO” “Login As EY” “Login As SO” để đăng nhập vào tài khoản SwimOutlet, “Login As EY” để đăng nhập vào tài khoản EverydayYoga Kết quả: Xây dựng thành công UI logic, code merge vào môi trường NetSuite production 3.3.2 Tính free shipping credit: Khách hàng tặng credit giao hàng miễn phí, nhân viên tặng cho khách hàng credit trường hợp khác gặp cố giao hàng, hàng không yêu cầu, dịp đặc biệt, Để thêm/xóa credit, nhân viên cần bấm vào nút “Add/Delete Free Shipping Credit”, sau bấm lên form để nhân viên chọn thao tác mong muốn (thêm xóa credit), loại credit (VD: giao hàng nhanh, giao hàng áp dụng Canada, …) lí thêm/xóa Kết quả: Xây dựng thành công UI logic, code merge vào mơi trường NetSuite production 3.3.3 Tính membership: Khách hàng SwimOutlet EverydayYoga đăng ký thành viên để nhận nhiều ưu đãi giảm giá mua hàng, giao hàng miễn phí, early access mặc hàng mới, Tính membership gồm có: thêm/xóa đăng ký membership, thành viên cịn gia hạn membership Kết quả: Xây dựng thành công UI phần logic, task chuyển qua cho anh Khôi Đặng hết tập Võ Nguyễn Đăng Hải Thái Chí Bảo 19 TÀI LIỆU THAM KHẢO Spiraledge https://www.spiraledge.com Shopify https://www.shopify.com/ https://shopify.dev/themes/tools/theme-kit Ngôn ngữ Liquid Shopify Liquid Objects https://shopify.github.io/liquid/ https://shopify.dev/api/liquid#what_is_a_template_language NetSuite https://www.netsuite.com/portal/home.shtml https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/index.html (Và khóa học tài khoản NetSuite Training cung cấp) NetSuite – SDF, SuiteScript https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/book_4702638251.html https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/set_1502135122.html Giải vấn đề chung https://stackoverflow.com/ Võ Nguyễn Đăng Hải Thái Chí Bảo 20 TỔNG KẾT Trong hai tháng làm việc, em học hỏi nhiều từ đàng anh trước, áp dụng kiến thức lập trình học trường vào môi trường làm việc thực tế Ngoài em làm quen với nhiều anh chị bạn bè lứa, tham gia nhiều hoạt động buổi tiệc dù thời gian ngắn em có trải nghiệm tuyệt vời khó quên công ty Em muốn lần cảm ơn công ty Spiraledge thành viên công ty chào đón giúp đỡ em suốt trình thực tập Võ Nguyễn Đăng Hải Thái Chí Bảo ... dụng nguồn nhân lực Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia lập trình dự án mơi trường chuyên nghiệp, em có dự định thực tập học kỳ Vì vậy, em định chọn Spiraledge... Đặng giúp em nhiều vấn đề liên quan đến front-end cho em nhiều tips để trở thành lập trình viên tốt Và cảm ơn anh chị bạn bè đồng nghiệp thời gian thực tập giúp đỡ em mở lịng chào đón em dù em... Hải Thái Chí Bảo Chương 2: Nội dung thực tập Trong thời gian thực tập (3 ngày/tuần), em tham gia vào dự án SwimOutlet, làm xây UI tính UI, giai đoạn cuối tập em tham gia xây dựng hệ thống NetSuite