VueJs, Tailwind CSS, NodeJs 및 Laravel을 사용하여 Shopify Embed 앱을 구축하는 방법

React 또는 Rails 외부 항목으로 Shopify 앱을 구축하는 것은 어려울 수 있습니다. 당신은 대부분 혼자입니다. VueJs를 사용하여 팀원들과 함께 알아낸 후 템플릿을 오픈 소스로 결정했습니다.

템플릿은 매우 유연하여 NodeJs 또는 Laravel PHP를 백엔드로 사용할 수 있습니다. 그리고 Tailwind CSS의 복음을 사용하고 전파하는 것을 좋아하는 사람들을 위해…

예의:

Tailwind CSS가 이미 설치되어 있습니다!

이 게시물은 설정 프로세스를 안내합니다.

요구 사항:

Shopify partner account 및 development store .

NodeJs 14.13.1 이상을 설치했습니다.

PHP 백엔드용으로 PHP 및 Composer을 설치했습니다.

Npm을(를) 설치했습니다.

Git을 설치했으며 Git bash 터미널(Windows의 경우 중요)을 사용할 수 있습니다.

설정 프로세스

1 단계
템플릿 패키지를 설치하고 Shopify Vue 앱을 생성합니다.

터미널 설치ShopifyVue를 전역 패키지로 사용합니다.

npm i -g shopifyvue

다음으로 사용 가능한 두 개의 백엔드 프레임워크 중 하나를 사용하여 터미널(Windows의 경우 Git bash가 이상적임)에서 앱을 만듭니다.

shopifyvue create "MyShopifyApp" --backend nodejs
or
shopifyvue create "MyShopifyApp" --backend php

NodeJS 백엔드는 this template 을 기반으로 하고 PHP 백엔드는 this template 을 기반으로 합니다.

앱 디렉터리로 이동하여 다음을 실행합니다.
npm install
다음과 유사한 파일 구조가 있어야 합니다.

노드JS

PHP

2 단계
로컬 서버를 Shopify와 연결하려면 터널이 필요합니다. Ngrok을 사용하는 것이 좋습니다. Cloudflare tunnel 또는 Local tunnel 을 사용할 수도 있습니다.
Ngrok account 에서 터미널의 대시보드에서 인증 토큰을 사용하여 에이전트를 계정에 연결합니다.

ngrok config add-authtoken TOKEN

그런 다음 localhost 포트를 실행하십시오.

NodeJS의 경우:

ngrok http http://localhost:8081/

PHP의 경우:

ngrok http http://localhost:8000/

이렇게 하면 ngrok https URL이 생성됩니다.
URL을 기록해 두십시오. 나중에 사용할 것입니다.

3단계
파트너 대시보드에서 수동으로 앱을 생성합니다.

앱 URL 섹션에서 2단계에서 생성된 Ngrok https URL을 삽입하고 허용된 리디렉션에 다음과 같이 입력합니다.
NodeJS의 경우:

<Ngrok https url>/auth
<Ngrok https url>/auth/callback
<Ngrok https url>/auth/online

PHP의 경우:

<Ngrok https url>/authenticate

4단계
이제 우리는 env 파일을 만들 것입니다(설치와 함께 제공되는 파일을 편집할 수 있습니다). SHopify 파트너 대시보드에서 앱을 만든 후 앱을 클릭하여 API 키를 받으세요. API 키와 API 비밀 키를 모두 .env 파일에 복사합니다.


NodeJS의 경우:

SHOPIFY_API_KEY="api key"           
SHOPIFY_API_SECRET="api secret key" 
SCOPES=write_customers,write_draft_orders
SHOP="my-development-store.myshopify.com"                    
HOST="Ngrok https url"          

PHP의 경우:

SHOPIFY_API_KEY=<your api key>
SHOPIFY_API_SECRET=<your secret key>
SHOPIFY_APPBRIDGE_ENABLED=true

파일을 저장하고 개발 서버를 시작합니다.
NodeJS의 경우

npm run serve:dev

PHP의 경우

npm run dev

그리고 새 터미널에서 PHP 개발 서버를 시작하십시오.

php artisan serve

PHP 앱이 작동하려면 데이터베이스, 작업, 미들웨어를 구성하고 Laravel Shopify 패키지에 대한 구성을 게시해야 합니다. wiki page here 의 지침을 따르십시오.

5단계
이것이 마지막 단계입니다.

앱을 설치할 파트너 대시보드의 앱 내에서 개발 스토어를 선택하십시오. NodeJS 백엔드를 사용하는 경우 env 파일에 지정한 것과 동일한 저장소인지 확인하세요.


모든 것이 동일하다면 위와 비슷한 이미지가 있어야 합니다.

축하해요! 이제 앱 맞춤설정을 시작할 준비가 되었습니다.

추신: 이 게시물은 VueJs , 선택한 백엔드 언어 NodeJs 또는 Laravel PHP , Tailwind CSS (원하는 CSS 구문을 수용하기 위해 npm을 통해 제거할 수 있음) 및 Shopify’s documentation 작업 능력에 대한 사전 지식을 가정합니다. ) 앱이 수행하려는 작업을 기반으로 합니다.

행복한 건물!

아래 의견에 귀하의 생각을 알려주십시오.