Shopify 스토어를 위한 디렉토리 관리자 작성 방법

이 문서에서는 사용자 정의 워크플로우에 적합한 Shopify 대시보드를 구축합니다.하지만 그 전에 배경을 설정해 봅시다.많은 가게 주인들이 인터넷 상점으로 Shopify를 선택한다.이 제품은 스토어 관리 패널과 API 액세스 기능을 모두 갖춘 검증된 제품입니다.
그럼에도 불구하고 그것은 결함이 없는 것이 아니다.
로컬 Shopify 서비스가 없는 통합은 진정한 난제일 수도 있고, Shopify 관리 패널로 사용자 정의 작업 흐름을 구축할 수도 거의 없다.Shopify admin panel.을 어떻게 만드는지에 대한 또 다른 댓글이 올라왔습니다.
이 문서에서 Shopify 상점에 작업 절차에 맞는 계기판 프로그램을 구축하기 위해 이 모든 장애를 극복하는 방법을 보여 드리겠습니다.다음과 같은 개념에 대해 살펴보겠습니다.

Appsmith의 Shopify API와 통합하는 방법

Shopify 대시보드의 사용자 정의 테마 설정 방법

API 호출에서 동적 매개변수

을 사용하는 방법

Google Sheets 통합

사용 방법
Feel free to peek into the app we’ll be building.
괜찮은 것 같은데?우리 시작합시다!

Shopify API와 Appsmith 통합 방법

많은 서비스는 API를 통해 리소스에 대한 안전한 액세스를 제공합니다.이것은 복잡한 작업 흐름을 설계하고 새로운 기능을 해제하는 것을 가능하게 한다.Shopify도 예외가 아니다. 왜냐하면 우리는 그들의 API를 광범위하게 사용할 것이다.
시작하려면 Shopify 대시보드에서 Private apps 을 사용하십시오.새 응용 프로그램을 만들고 권한 단계를 설정합니다.API와 안전하게 상호 작용할 수 있도록 다음 세부 정보를 볼 수 있습니다.
당신의 매장 단점, 즉 https://your_store_name.myshopify.com/admin/api/2021-10/사용자 이름
비밀번호가 하나 더 있습니다. shppa_cc*******입니다.
이런 세부 사항이 있으면 우리는 계기판을 구축하기 시작할 수 있다.So signup for Appsmith if you’re yet to do so, 새 응용 프로그램을 만듭니다.
새 앱에서 Datasource>Create New>Authenticated API을 클릭하세요.Authentication Type을 Basic으로 설정한 다음 양식에 기입하십시오.다음은 내 빠른 스냅샷 중 하나입니다.

Shopify 데이터 원본을 사용하여 상점의 모든 제품을 가져오는 새로운 API를 만듭니다.get_products으로 전화하면 products.json 노선에 대한 요청일 것입니다.

현재 우리는 응용 프로그램에 데이터가 들어왔다.이를 표시하기 위해 스타일화된 UI 구성 요소를 구성합니다.

Shopify 대시보드의 사용자 정의 테마 설정 방법

Appsmith에는 선택할 수 있는 작은 위젯이 많습니다.가장 좋은 부분은 맞춤형과 스타일의 외관과 느낌을 많이 만들 수 있다는 것이다.내가 어떻게 하는지 가르쳐줄게.
widgets 옵션 카드에서 용기의 작은 위젯을 캔버스로 드래그합니다.열린 설정 메뉴(속성 창이라고 함)에서 Border Radius으로 총 5개를 설정하고 Box Shadow을 설정합니다.멋있어 보이는 카드 용기가 있어야 한다.

현재 목록의 작은 위젯을 용기에 도입하고 get_products에서 조회한 데이터를 다음과 같이 연결할 수 있습니다.

마찬가지로 {{currentItem}}의 데이터에 액세스하여 제품 이미지와 이름을 표시할 수 있습니다.다음 예는 다음과 같습니다.

쿨!이것은 속성 창의 Styles 부분을 사용하여 구성 요소 스타일을 설정하는 간단한 정도입니다.

API 호출에서 동적 매개변수를 사용하는 방법

지금까지 우리 프로그램은 데이터를 읽고 UI에 표시할 수 있었다.이제 데이터를 쓸 수 있는 흐름을 추가합니다.이를 위해 제품 업데이트 기능을 구축해 보겠습니다.
앞에서 설명한 개념을 사용하여 다음과 같이 업데이트 양식 UI를 구성합니다.

또한 모든 입력 위젯이 명명되고 product_list 위젯에서 선택한 제품의 기본값인 스티커 입력 위젯이 up_title으로 명명되며 Default Text이 있는 {{product_list.selectedItem.title}}:

쿨하다폼의 다른 입력 위젯에 대해 같은 동작을 수행합니다.
현재, 앞에서 설정한 Shopify 데이터 원본을 사용하여 새 업데이트 조회를 만들고, 폼의 작은 위젯의 입력을 매개 변수로 합니다.다음 예는 다음과 같습니다.

{
    "product": {
     "title": {{up_title.text}},
     "body_html": {{up_body_html.text}},
     "product_type": {{up_product_type.selectedOptionValue}},
     "status": {{up_status.selectedOptionValue}}
    }
}

업데이트할 제품의 ID는 product_list 위젯에서 선택한 제품으로 채워져 있으며, 단점 URL에서 사용됩니다.
경탄할 만한!이 작업을 완료하려면 양식 제출 버튼으로 돌아가서 업데이트 질의를 실행하도록 구성합니다.또한 애플리케이션의 모든 데이터를 플러시하기 위해 get_products 쿼리를 추가해야 합니다. 즉,

{{update_product.run(() => get_products.run())}}

이것이 바로 동적 매개 변수를 API에 전달하여 호출하기 쉬운 정도입니다!
마지막으로 Google Sheets와 통합하는 방법에 대해 살펴보겠습니다.

Google Sheets와 통합 방법

이 부분은 매우 선진적일 것이니 따라오세요!Google sheet에서는 Shopify API 네이티브에서 지원하지 않는 대량 가져오기 기능을 구축합니다.
시작하려면 새 페이지를 만들고 Datasource>Create New에서 Google Sheets을 클릭하십시오.데이터 소스를 승인하고 새 API를 만듭니다. get_products_from_sheets을 호출합니다.
this sample sheet as a reference을 Spreadsheet URL 구성에 사용할 수 있습니다.다음은 구성 예입니다.

이제 제품 목록과 같이 UI 위젯을 구성하여 반환된 데이터를 표시할 수 있습니다.이 예에서는 테이블 위젯을 사용했습니다.
Sync 단추를 눌렀을 때, 우리는 이 항목들을 순환적으로 훑어보고, 몇 개의 API 호출을 통해 모든 제품을 만듭니다.또한 API 호출에 매개변수를 세 번째 매개변수로 전달합니다.

{{
    (() => {
    get_products_from_sheets.data.forEach((i) => {
        new_product.run(
        (res, i) => {
            new_image.run(
            () => {},
            () => {},
            { ...i, id: res.product.id }
            );

            new_price.run(
            () => {},
            () => {},
            { ...i, id: res.product.variants[0].id }
            );

            new_track_inventory.run(
            (res, i) =>
                new_inventory.run(
                (res, i) => showAlert('Added: '+i.Title, 'success'),
                () => {},
                i
                ),
            () => {},
            { ...i, id: res.product.variants[0].inventory_item_id }
            );

        },
        () => {},
        i
        );
    });
    })();
}}

다음은 각 쿼리에서 호출된 스냅샷입니다.





이러한 리소스/엔드포인트에 대한 자세한 내용은 official Shopify docs에서 확인할 수 있습니다.

다음은요?

축하해, 해냈어!
지금까지 우리는 이미 제품 보기, 갱신과 대량 도입 등 핵심 기능을 실현하였다.그러나 Stripe 결제를 사용하는 추가 서비스를 추가할 수 있습니다.
바닥은 다 니 거야!우리는 네가 다음에 무엇을 보충하는지 매우 보고 싶다.그나저나 give us a star any time you visit github.