Appsmith で GMO MakeShop 連携アプリケーションを作成

Cameron Leblanc
Technology Evangelist

Appsmith でCData Connect AI を介して GMO MakeShop のデータに接続し、GMO MakeShop のデータにリアルタイムでアクセスできるカスタムビジネスアプリケーションを作成。

Appsmith は、チームがビジネスオペレーションを改善するためのUI を素早く簡単に構築できる、オープンソースの内部ツールビルダーです。CData Connect AI と組み合わせることで、ビジネスアプリケーションから GMO MakeShop のデータに即座にアクセスできるようになります。この記事では、Connect AI を使用して GMO MakeShop に接続し、Appsmith で GMO MakeShop のデータから基本的なアプリケーションを作成するプロセスを説明します。

CData Connect AI は、GMO MakeShop への純粋なSQL Server のクラウドtoクラウドインターフェースを提供し、Appsmith 内からライブ GMO MakeShop のデータを直接使用してビジネスアプリケーションを作成できます。ネイティブデータベースへのデータレプリケーションは必要ありません。アプリケーションを構築する際、Appsmith はデータを収集するためのSQL クエリを生成します。CData Connect AI は、最適化されたデータ処理機能により、フィルタやJOIN を含むすべてのサポートされるSQL オペレーションを GMO MakeShop に直接送信します。これにより、サーバーサイドの処理を活用して、リクエストされた GMO MakeShop のデータを迅速に取得できます。

Appsmith 用に GMO MakeShop への接続を構成

Appsmith から GMO MakeShop への接続は、CData Connect AI を介して行います。Appsmith から GMO MakeShop のデータを操作するには、まず GMO MakeShop 接続を作成して構成します。

Connect AI にログインし、Sources をクリックして、 Add Connection をクリックします

Add Connection パネルから「GMO MakeShop」を選択します

GMO MakeShop に接続するために必要な認証プロパティを入力します。
GMO MakeShop に接続するには、MembersAccessCode、OrdersAccessCode、ProductsAccessCode、およびShopId が必要です。
GMO MakeShop へのアクセスの設定

MembersAccessCode、OrdersAccessCode、ProductsAccessCode、およびShopId を取得するには、以下の手順に従ってください。
- GMO MakeShop には各API のAccessCode が必要です。
- GMO MakeShop Store Manager にログインし、メニューの「ショップ作成」をクリックします。
- 左ナビゲーションメニューの「外部システム連携」から任意の連携対象設定ををクリックします（メニューに表示されない場合は別途GMO MakeShop にご確認ください）。
- 商品データ連携設定の場合：認証コードの「発行」ボタンをクリックし、ProductsAccessCode を取得します。
- 注文データ連携設定の場合：最初に「注文情報参照」と「注文情報変更」の設定を選択します。選択後、認証コードの「発行」ボタンをクリックし、OrdersAccessCode を取得します。
- 会員データ連携設定の場合：最初に「会員情報の（参照・登録・変更・削除）」の設定を選択します。選択後、認証コードの「発行」ボタンをクリックし、MembersAccessCode を取得します。
- 会員認証連携設定の場合：認証コードの「発行」ボタンをクリックし、ProductsAccessCode を取得します。
GMO MakeShop アカウントの認証

次の接続プロパティを設定して接続します。
- ShopId：接続先のGMO MakeShop Store ID を設定。GMO MakeShop Store ID はログイン用の ID と同じです。
- OrdersAccessCode：「注文データ連携設定」から取得した「認証コード」を設定。このプロパティは Orders テーブルにアクセスする場合に必要です。
- ProductsAccessCode：「商品データ連携設定」から取得した「認証コード」を設定。このプロパティは Products テーブルにアクセスする場合に必要です。
- MembersAccessCode：「会員データ連携設定」から取得した「認証コード」を設定。このプロパティは Members テーブルにアクセスする場合に必要です。
- MemberAuthenticationCode：「会員認証連携設定」から取得した「認証コード」を設定。このプロパティは MemberAuthenticationConfirm を実行する場合に必要です。
- Password：GMO MakeShop Store Manager のログインユーザーのパスワードを指定。このプロパティは ProductCategoryRegistrationOrModification,ProductMemberGroupPriceRegistrationOrModification,ProductOptionRegistrationOrModification,ProductRegistrationOrModification を実行する場合に必要です。
Save & Test をクリックします
Add GMO MakeShop Connection ページのPermissions タブに移動し、User-based permissions を更新します。

パーソナルアクセストークンの追加

REST API、OData API、またはVirtual SQL Server を介してConnect AI に接続する場合、パーソナルアクセストークン（PAT）を使用してConnect AI への接続を認証します。アクセスの粒度を維持するために、サービスごとに個別のPAT を作成することをお勧めします。

Connect AI アプリの右上にある歯車アイコン（）をクリックして、設定ページを開きます。
設定ページで、Access Tokens セクションに移動し、 Create PAT をクリックします。
PAT に名前を付けて、Create をクリックします。
パーソナルアクセストークンは作成時にのみ表示されるため、必ずコピーして安全な場所に保存してください。

接続が構成され、PAT が生成されたので、Appsmith から GMO MakeShop のデータに接続する準備が整いました。

ライブ GMO MakeShop のデータからAppsmith アプリケーションを作成

Appsmith からCData Connect AI Virtual SQL Server への接続を確立するには、以下の手順に従います。

Appsmith で GMO MakeShop に接続

Appsmith インスタンスにログインし、新しいアプリケーションを作成します。
新しいアプリケーションで、Data ページを開き、Bring your data を選択します。
このページで、Microsoft SQL Server を検索し、データソースとして選択します。
新しいデータソースの名前を入力し、以下の接続設定を入力します。
- Host address: tds.cdata.com
- Port: 14333
- Database name: 接続するCData Connect AI データソースの接続名を入力します（例：GMOMakeShop1）。
- Username: CData Connect AI のユーザー名を入力します。これはCData Connect AI インターフェースの右上に表示されます。例：test@cdata.com。
- Password: 先ほど生成したPAT を入力します。
Test configuration をクリックして接続が成功したことを確認し、Save をクリックしてデータソースを保存します。

新しいクエリを作成

データソースへの接続を構成したら、SQL クエリを追加してデータソースから実際にデータを取得します。

新しいデータソースの画面で、New Query をクリックします。
クエリエディタが開き、データを選択するSQL クエリを入力できます。SQL クエリの指定については、CData Connect AI のExplorer を使用して、SQL クエリと取得するデータをプレビューできます。
SQL クエリを作成したら、Appsmith のクエリエディタに戻り、SQL クエリを入力してRun をクリックします。
クエリが正常に実行されたら、あとは取得したデータを表示するためのページをセットアップするだけです。