Shopify Node.js 응용 개발 환경 만들기

전제 조건

파트너 계정 생성

Shopify 개발점 생성

터미널 등에서 명령을 사용하여 조작 가능

Shopify App Cli 설치 완료

React,Next.js의 지식, 또는 기억하고 싶다

새 노드.js 응용 프로그램 프로젝트 만들기

새 노드.shopify create node를 입력하여 js 프로젝트를 만듭니다.
다음에 프로그램 이름을 입력하십시오.프로그램 이름은 프로젝트 디렉터리 이름입니다.이 글은appDev입니다.

$ shopify create node
? App Name
> appDev

앞으로 개발된 응용 프로그램의 유형(공개 또는 맞춤형)에 대해 물어볼 것이다.

? What type of app are you building? (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Public: An app built for a wide merchant audience.
  2. Custom: An app custom built for a single client.

공개 애플리케이션애플리케이션 스토어은 무료 또는 유료로 정보센터에 널리 분포된다.
맞춤형 응용은 특정한 표지를 위해 개발된 응용이다.
※ 시장은 쇼피파이에서 판매하는 사업자를 뜻합니다.
개발할 애플리케이션 유형을 선택하려면 Shopify Partners 계정 인증이 필요하므로 표시된 URL에 액세스할 수 있습니다.(로그인한 경우 표시되지 않음)

𝒾 Authentication required. Login to the URL below with your Shopify Partners account credentials to continue.
Please open this URL in your browser:
https://accounts.shopify.com/oauth/authorize?client_id=(略)

인증이 성공하면 다음과 같이 표시되므로 페이지가 닫힙니다.

Authenticated successfully. You may now close this page.

Shopify 파트너 계정을 선택합니다.

? Select partner organization
>

계정을 선택하면 응용 이름으로 디렉터리를 만들고 응용 개발 기반의 파일 그룹을 다운로드합니다.

✓ .env saved to project root
✓ appDev was created in the organization's Partner Dashboard https://partners.shopify.com/XXXXXXXX/apps/XXXXXXXX
⭑ Change directories to your new project folder appdev and run shopify serve to start a local server
⭑ Then, visit https://partners.shopify.com/XXXXXXXX/apps/XXXXXXXX/test to install appDev on your Dev Store

.env문서에는 SHOPIFY_API_KEY,SHOPIFY_API_SECRET,SHOP,SCOPES,shopify serve가 기재되어 있다.
프로젝트 디렉토리로 이동합니다.

$ cd appDev

로컬 개발 서버를 시작합니다.

$ shopify serve

프로젝트 디렉토리 외부ngrok

shopify serve was not found

대화 상자.

✓ ngrok tunnel running at https://xxxxxxxxxxxx.ngrok.io
⭑ This tunnel will timeout in 7 hours 33 minutes
⭑ To avoid tunnels that timeout, it is recommended to signup for a free ngrok
account at https://ngrok.com/signup. After you signup, install your
personalized authorization token using shopify tunnel auth <token>.
✓ .env saved to project root
? Do you want to update your application url? (Choose with ↑ ↓ ⏎)
> 1. yes
  2. no

1. yes는 일시적으로 로컬 서버를 공개할 수 있는 서비스다.
응용 프로그램 URL을 업데이트하시겠습니까?를 선택합니다.
아래에 이렇게 표시되므로 표시되는 URL에 액세스할 수 있습니다.

⭑ To install and start using your app, open this URL in your browser:
https://xxxxxxxxxxxx.ngrok.io/auth?shop=[開発ストア].myshopify.com

이후 개발점으로 방향을 바꾸고 응용 프로그램의 설치 화면을 표시합니다.

"게재되지 않은 프로그램 설치"를 클릭하여 설치합니다.
아래와 같이 표시되면 설치가 완료되었습니다!

표현을 바꿔봐요.

pages/index.js를 열어 Shopify app with Node and React 🎉를 임의의 텍스트로 바꿔 보세요.
pages/index.js

import { Heading, Page } from "@shopify/polaris";

const Index = () => (
  <Page>
    <Heading>アプリ開発を始めてみよう!</Heading>
  </Page>
);

export default Index;

브라우저를 다시 불러오지 않아도 변경 사항이 나타나면 OK입니다.

Shopify 애플리케이션 개발 시작

여기까지, 응용 프로그램 개발 자습서의 3까지 끝났습니다.
미리 준비되어 있기 때문에 여기서부터 프로그램을 설치할 수 있습니다.
그렇다면 편안한 Shopify 앱 개발 생활을 즐겨보자.🥳