Title BÁO CÁO THU HOẠCH TÌM HIỂU XÂY DỰNG CHỦ ĐỀ SHOPIFY- Week 2 - DucManh_NextSky ✅

BÁO CÁO THU HOẠCH TÌM HIỂU XÂY DỰNG CHỦ ĐỀ SHOPIFY - Week 2 Họ Và Tên: Trần Đức Mạnh Chức vụ: Thực tập sinh Ngày bắt đầu: 16/08/2024 OUTLINE: GĐ Thời gian Tiêu đề Nội dung Kết quả 1.Chuẩn bị 18/08/2024 BÁO C... Tìm hiểu git, github ● Khái niệm git, tính năng ● Các câu lệnh cơ bản ● Sử dụng các công cụ: SourceTree, GitHub,... ● Nắm được khái niệm git ● Các câu lệnh git. ● Workflow with git. 2.Tuần 1 19-25/08/2024 Link: BÁO C... Đọc tài liệu hướng dẫn của Shopify ● Bắt đầu với Shopify ● Bán với Shopify ● Quản lý cửa hàng của bạn ● Đăng ký được tài khoản dùng thử 30 ngày ● Nắm được các kiến thức cơ bản sử dụng shopify Tìm hiểu về nền tảng Shopify: cấu trúc theme, vai trò của Liquid ● Bắt đầu ● Kiến trúc ● Tạo và tùy chỉnh được chủ đề. ● Nắm bắt được cấu trúc theme, hiểu rõ folder của theme 3.Tuần 2 26-30/08/2024 Theme Developer Tools, Best Practices. ● Shopify Theme Kit, Shopify CLI ● Tools ● Best Practice ● Nắm bắt được các tool phát triển và thực hành tốt. ● Tạo được tài khảo partner từ shopify Tạo các developer store từ tài khoản partner. Liquid syntax. Create, Edit Liquid file in theme (Layout, template, section) ● Basic ● Tag ● Filter ● Nắm bắt được kiến thức của liquid. ● Tạo và tùy chỉnh các file Liquid trong theme (layout, template, section) Dawn. Thêm sửa xóa các html trong liquid files. Shopify Theme Requirement Shopify theme require... ● Nắm rõ các tiêu chuẩn và yêu cầu của shopify. ● Các bước test theme theo shopify.
NGÀY 26/08/2024 I. Theme Developer Tools, Best Practices. 1. Theme Developer Tools Overview: Shopify cung cấp đa dạng các tools: - Tools for building and editing themes: giúp nhanh chóng scaffold (xây dựng), test, share và develop Shopify themes: - Shopify CLI 3.x: CMD tool for building Shopify themes và khám phá Liquid code trong REPL interface. - Shopify Liquid VS Code extension: - Web-based editors for themes: Các tools có thể sử dụng bởi merchants and dev để customize themes trong Shopify admin. Với vai trò 1 dev, nên tính tới các công cụ này để đảm bảo trải nghiệm tốt nhất cho merchants.. - Admin theme editor: Một interactive editor mà cho phép merchants customize Online Store và theme. - Admin code editor: A code editor built into the Shopify admin. - Access tools: Công cụ giúp truy cập vào infrastructure để testing, và giúp truy cập merchant stores an toàn. - Development stores: Tài khoản free cho phép build và test themes free. - Collaborator account: Tài khoản cho phép truy cập và quản lý merchant’store thông qua Partner Dashboard. - Theme Access app: App cung cấp quyền truy cập theo chương trình vào các chủ đề cụ thể. Được sử dụng với Shopify CLI và Theme Kit. - Version control tools: Shopify Github integration giúp kiểm soát và push các thay đổi từ hoặc tới các theme trong Shopify store bằng cách sử dụng Git. - Shopify GitHub integration - Testing tools: Các công cụ giúp giúp tối ưu hiệu suất và phát hiện lỗi trong theme code. - Theme Check: CMD based linter for themes. - Liquid Prettier Plugin: format Liquid và HTML theo 1 cách thống nhất. - Shopify Theme Inspector for Chrome: Profile (theo dõi) và debug Liquid template performance với extension Chrome. - Lighthouse CI: Đảm bảo theme hoạt động hiệu quả bằng cách sử dụng Lighthouse CI GitHub Action. - Tools for learning Liquid: Learn and write Liquid - Imagery: học cách viết image tags và hiểu cách images chuyển động với Imagery. - Example theme: Dawn là theme mẫu, đối chiếu với nó để hiểu cách theme có thể đặt cạnh nhau, hoặc fork nó về để code tiếp. - Dawn
CLI: ● Overview: Một CMD tool giúp build Shopify apps và themes. Quickly generates Shopify apps, themes, và custom storefronts. Bạn có thể sử dụng nó để tự động hóa các tasks. Để hiểu hơn: - Shopify CLI for apps - Shopify CLI for Hydrogen storefronts Lựa chọn giữa Shopify CLI và Theme Kit: Shopify CLI đã thay thế Theme Kit cho hầu hết các tasks. Bạn nên sử dụng Shopify CLI nếu bạn làm việc trên Online Store 2.0 themes. Còn với các theme cũ hơn, sử dụng Theme Kit. Features: Shopify CLI đẩy nhanh quá trình phát triển theme của bạn qua các tính năng: - Safely preview, test, and share changes to themes using development themes. - Hot reload CSS and section changes, or automatically refresh a page on file change, when previewing a theme. - Initialize a new theme using Dawn as a starting point. - Push and publish themes from the command line. - Work on multiple themes using environments. - Run Theme Check on your theme. Development themes: Là theme tạm thời, ẩn và được connect tới Shopify store mà đang sử dụng để dev. Khi bạn connect theme của bạn với store như 1 dev theme, bạn có thể sử dụng data này để local testing. Tạo 1 dev theme bằng câu lệnh: shopify theme dev Development themes thì không giới hạn thay đổi, và sẽ tự động xóa khỏi store nếu sau 7 ngày không hoạt động. Dev themes sẽ bị xóa khi dùng câu lệnh: shopify auth logout. Nếu muốn preview theme sau khi logout, push theme lên 1 theme đang unpublished trên store. Dev themes có thể sử dụng để làm các task: - View changes in real time to a theme that you're developing locally. - Customize and interact with the theme using the Shopify admin theme editor. - Share a password-protected preview of the theme with other developers. Environments:
Nhiều câu lệnh được sử dụng bằng flag. Để tránh truyền multiple flags trong mỗi câu lệnh, và dễ dàng chuyển qua lại giữa các projects projects và context, bạn có thể sử dụng environments. Environments là một tập các câu lệnh configurations mà có thể reference bởi tên bằng cách sử dụng - - environment flag. Các tình huống: - Chuyển đổi giữa các store thường xuyên - Truy cập vào nhiều store khác nhau sử dụng Theme Access passwords. - Muốn deploy project tới development, staging và production instances của theme. Installation: theme command Authenticating and accessing stores: Authentication: - Log in with a Shopify account Có thể sử dụng loại tài khoản Shopify để access the store mà bạn muốn làm việc: - A collaborator account with the Manage themes permission. - A staff account with the Themes permission. - The store owner account. Caution To use a development store or Plus sandbox store with Shopify CLI, you need to be the store owner, or have a staff account on the store. Staff accounts are created automatically the first time you access a development store with your Partner staff account through the Partner Dashboard. Switching between accounts: Logout: shopify auth logout - Provide a Theme Access password: Sử dụng Theme Access password để authen với store làm việc trên đó. Theme Access password được sinh ra sử dụng Theme Access app. Để sd, pass the - - password flag với mỗi câu lệnh mà muốn chạy again. - Provide a custom app access token Có thể sử dụng custom app access token để authen với store làm việc trên đó. Để sử dụng, pass the - - password flag với mỗi câu lệnh mà muốn chạy again. Custom app của bạn cần phải có read_themes và write_theme API access scopes. Để enable hot reloading, cần phải add unauthenticated_read_content access scope. Connecting to a store: