Shopify App CLI でアプリを開発する

# アプリとは
Shopify はアプリで機能を拡張することが出来ます。
アプリには公開アプリとプライベートアプリがあります。

# Shopify App CLI による開発環境構築
[Shopify Dev Template](https://github.com/t-kurasawa/shopify_dev_template) を公開しているのでご活用ください。

[Shopify App CLI](https://github.com/Shopify/shopify-app-cli) のインストール手順に従い環境構築をします。今回はWindows/WSL/Ubuntuで構築します。 

``` console
$ eval "$(curl -sS https://raw.githubusercontent.com/Shopify/shopify-app-cli/master/install.sh)"
```

# create
`shopify create project apps`
アプリを作成。Shopify Partners ダッシュボードに apps が追加されます。
https://partners.shopify.com/xxxxxx/apps/xxxxxx

# serve
`shopify serve`
Node で立ち上げた場合は http://localhost:8081 でWebサーバー上で動くアプリがビルドされて起動します。

※ここで localhost:8081 を見ても動きませんが、後述の手順が必要になるので焦らないでください。

# tunnel start
`shopify tunnel start`
ngrok を利用し、インターネットから localhost:8081 へトンネリングします。
ngrok の URL から確認するとアプリが動いていることが確認できます。

> https://url.ngrok.io -> http://localhost:8081

# アプリをストアへインストール
ここまでの手順では shopify-app-cli を利用し、アプリを作成→起動→インターネットからのアクセスを可能にしました。
では、次にアプリをストアへインストールします。

## Step.1
shopify partners アカウントで「アプリ管理」から作成したアプリ（今回は Apps ）を選択

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/bf51961b-435c-19e0-8ce2-bc5878035695.png)

## Step.2
その他の操作→開発ストアでテスト
※今回はアプリを公開していないので、開発ストアでのテスト

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/51206a29-96e3-4828-d84e-15450f43d864.png)

## Step.3
インストール先のストアを選択するとアプリのインストールが始まります。
※ここで `/auth/enable_cookies?shop=` の処理が走り、認証情報が処理されます。
※まぁまぁ時間がかかるので気長に待ってください。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/0c1ecfef-ac57-7f81-37ce-63b8f895315a.png)

## Step.4
インストールしたストア上の「アプリ」で動いていることが確認できます。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/0ff328e5-2aa3-b3fa-bdda-bd56b92093e6.png)

# tunnel stop
`shopify tunnel stop`
トンネリングを止めます。

## 注意点
`shopify tunnel stop` を行うと ngrok の URL が変わるため、改めてアプリのビルドとインストールをし直す必要があります。

再び `shopify tunnel start` し `shopify serve` するごとに「アプリURL（ngrok）」と「ホワイトリストに登録されたリダイレクトURL（ngrok）」が変更されるからです。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/28142070-2547-2755-a89b-6e3e010ee92e.png)

`Expected a valid shop query parameter` と出たら Github の [issue](https://github.com/Shopify/shopify-app-cli/issues/201) が参考になります。

さて、ここからは Shopify App CLI の他の機能をご紹介します。

# populate
`shopify populate products | customers | draftorders`
データ生成コマンド、商品（products）| カスタマー（customers） | 下書き注文（draftorders） を生成する

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/1547d893-d62f-439c-6455-153e6808837a.png)

# deploy
`shopify deploy`
heroku へデプロイします。

# generate page
`shopify generate page information`

今回、information というページを作成しました。生成したページ名の React / Next ファイルが生成されています。
`annotation` を選択し、生成された pages/information.js が以下です。

```javascript
import { Card, Layout, Page } from '@shopify/polaris';

const Information = () => (
  <Page>
    <Layout>
      <Layout.AnnotatedSection
        title="Title"
        description="Description"
      >
        <Card>
          <div>Put content here</div>
          <a href="https://polaris.shopify.com/components/structure/layout">For more information see Polaris docs</a>
        </Card>
      </Layout.AnnotatedSection>
    </Layout>
    <Layout>
      <Layout.AnnotatedSection
        title="Title"
        description="Description"
      >
        <Card>
          Put content here
        </Card>
      </Layout.AnnotatedSection>
    </Layout>
  </Page>
  );
  export default Information;
```

アプリの挙動を確認するには、インストールしたアプリの URL に /information を追加するとアプリ内に information 画面が表示されています。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/135f8cda-a8e7-14d0-fbc2-8f7da08a0108.png)

# generate billing
`shopify generate billing`
1回限りの課金モデルを作成するか、定期的なサブスクリプションモデルを作成します。

# generate webhook
`shopify generate webhook WEBHOOK_NAME`
webhook を作成します。

Webhook は Shopify のイベントをきっかけに通知されます。
商品の登録や受注、Create / Update / Delete をきっかけにして POST します。

## Webhook とは
> Webhookサブスクリプションを使用して、ショップ内の特定のイベントに関する通知を受け取ることができます。Webhookをサブスクライブすると、API呼び出しを定期的に行ってステータスを確認する代わりに、アプリがインストールされているショップで特定のイベントが発生した直後にアプリにコードを実行させることができます。たとえば、顧客がカートを作成したとき、または販売者がShopify管理者で新しい製品を作成したときに、Webhookを使用してアプリでアクションをトリガーできます。Webhookサブスクリプションを使用することで、全体的に少ないAPI呼び出しを行うことができます。これにより、アプリがより効率的になり、迅速に更新されます。
> https://shopify.dev/docs/admin-api/rest/reference/events/webhook
> https://shopify.dev/concepts/shopify-introduction

## Webhook の設定

1. Shopify 管理画面→設定→通知
2. Webhook を作成
3. イベントを選択してください。フォーマットは JSON のままで良いでしょう。URLはイベントを受け取りたい Web サーバーの URL を指定してください。Webhook API バージョンはソースコードと一致させてください。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/685de0d9-ad53-c55e-3a65-f105aa274a8c.png)

## Webhook の疎通確認
`テスト通知を送信する` ボタンを押して疎通確認を行います。

## 参考記事
> https://www.shopify.jp/blog/partner-cli-tool
https://github.com/Shopify/shopify-app-cli 

# まとめ
本記事では Shopify 公式の Shopify App CLI を用いたアプリの開発方法を解説しました。次回はアプリを AWS 上で動かす方法をご説明します。

<本記事に関するお問い合わせ>
NRIデジタル株式会社　担当　吉田・倉澤・萩村 and Developers　marketing-analytics-team@nri-digital.jp

> 本記事は NRI digital TECH BLOG からの転載、抜粋です。
> [Shopify でテーマとアプリを開発する – ThemeKit / Shopify App CLI –](https://www.nri-digital.jp/tech/20200525-2042/)