shopify アプリ開発の調査メモ

新しいアプリを作成する

• プロジェクト用アプリの開発

$ mkdir shopify_dev
$ cd shopify_dev/

• shopifyのパッケージをインストール

npm init @shopify/app@latest

• shopifyプロジェクトの初期設定。プロジェクト名と、どの言語を利用するのか問われる。言語は、node,php,rubyから選択可能。 今回はnodeを指定する

✔ Your app's name? · example-mo-dev
✔ Which template would you like to use? · node

• shopifyアプリの起動

cd example-mo-dev/
npm run dev

✔ Create this project as a new app on Shopify? · Yes, create it as a new app
✔ App Name · example-mo-dev
※パートナーアカウントの認証確認がこのタイミングで入ります。
✔ Which development store would you like to use to view your project? · <検証に利用するショップ名を指定する>
````

- 開発にはngrokが必要でngrokのアカウント作成とngrokのトークンが必要である
````
To make your local code accessible to your dev store, you need to use a Shopify-trusted tunneling service called ngrok. To sign up and get an auth token: https://dashboard.ngrok.com/get-started/your-authtoken (​https://dashboard.ngrok.com/get-started/your-authtoken​)
````

- ngrokの認証キーを取得できたら、コピーペーストで入力する
[f:id:PX-WING:20221108223028p:plain]


- アプリ開発用のURLを自動で生成するかと問われるため、「Always by default」を選択する

````
Have Shopify automatically update your app's URL in order to create a preview experience?

> Always by default
  Yes, this time
  No, not now
  Never, don't ask again

※※※上記の翻訳は下記となります。※※※

Shopifyは、プレビュー体験を作成するために、アプリのURLを自動的に更新していますか？

> デフォルトで常に
  はい、今回
  いいえ、今すぐではありません
  二度と聞かない

• ngrokで生成されたURLが表示されるため、そちらをクリックする

• shopへのインストール画面が表示されるので、画面右上の「アプリをインストール」ボタンをクリックする

• shopへ開発用アプリをインストールすることが出来た。