モバイルアプリからShopifyの在庫情報を更新する
ShopifyをECプラットフォームとして利用する利点の一つは、強力な在庫管理機能を提供していることです。しかし、リアルタイムで正確な在庫情報を維持することは、特に在庫監査や再入荷時に手作業でのデータ入力に頼っている事業者にとっては、難しい場合があります。
ハンディタイプのバーコードスキャナーは、在庫確認作業のスピードと精度を向上させる優れたソリューションですが、店舗オーナーは多くの場合、スキャナーのデータをShopifyシステムに直接、スムーズに連携させる方法が不足しています。適切な連携が実現されない場合、スタッフは依然としてスキャンしたデータを手動でShopifyに入力する必要があり、バーコードスキャナーが本来提供するはずの効率化の効果が一部損なわれる可能性があります。
バーコードスキャン機能を搭載したモバイルアプリを開発し、それをShopifyと直接連携させてリアルタイムな在庫管理を実現する、具体的な事例を見ていきましょう。
Shopify tracks key inventory metrics, including the quantity on hand at each location, the number of items committed to existing orders, and the availability for new orders. Keeping these numbers accurate is important to prevent overselling or accumulating inactive, non-moving stock.
在庫の正確性を維持するための効果的な方法の一つは、定期的な在庫監査やサイクルカウントです。モバイルアプリを活用することで、Shopifyストア内の各商品の在庫数を迅速に更新でき、このプロセスを効率化し、作業スピードを向上させ、手作業による在庫確認にかかるコストを削減することができます。
製品の使用方法について Altova データプラットフォーム, ハンディスキャナーを使用してバーコードデータを収集し、そのデータをリアルタイムでShopifyに連携させるためのワークフローを構築できます。
ShopifyとGraphQL
Shopifyでは、外部データとの連携にGraphQL APIを標準的に採用しています。これは、データ分析のためのデータ抽出だけでなく、弊社の場合は、在庫管理のためのデータ取り込みにも利用されています。ShopifyのGraphQL APIの仕組みや、それらに接続する方法については、以前の記事をご覧ください Shopifyからデータをエクスポートする.
Shopify在庫管理アプリの要件と設計
弊社のワークフローでは、複数のAltova製品を連携させて利用します
- MobileTogether Designer：バーコードスキャナーアプリを開発するためのツール
- MobileTogether Server：モバイルデバイス向けのアプリケーションをホストするためのサーバー
- MapForce - 用途： アプリのデータをShopifyに連携させる
- MapForce Server：サーバー上でマッピング処理を実行するためのソフトウェア
- FlowForce Server：ワークフローの自動化と連携を実現し、各種設定をWebサービスとして提供します
デザインプロセスは、Altova社のローコードアプリケーション開発フレームワークであるMobileTogetherから始まります。このフレームワークは、データ中心のアプリケーションを構築するための包括的なサポートを提供します 携帯型バーコードリーダーから取得したデータを保存し、処理します.
Shopifyでは、さまざまなものが存在し得ます 製品, そして、それぞれの製品には、一つまたは複数の製品が含まれている可能性があります 変種. 内部的には、各製品バリエーションはそれぞれただ一つのものとして扱われます 在庫アイテム. 在庫アイテムは、複数の...を持つことができます 在庫レベル: それぞれに対して、1つの在庫レベルを設定します 場所. そして、場所とは、商人がビジネスを行う地理的な場所を指し、例えば、小売店や倉庫などが該当します。これらの要素間の関係については、さらに詳しくご説明しています ここに.
したがって、製品のバリエーションの数量を更新するためには、特定の場所にある特定の在庫アイテムの在庫数を変更（GraphQLでは「更新」を意味する「mutate」）する必要があります。そのことを念頭に置き、MobileTogether Designerでのアプリケーションのワークフローを開始するにあたり、まずユーザーに、在庫数を集計する場所を選択してもらうことから始めます
Shopifyストアの場所情報を入力するために、MapForceを使用して、すべての場所に関する情報を取得します。
以下に、左側のShopify/GraphQLウェブリクエストコンポーネントで使用するGraphQLクエリを示します
{
locations(first: 100) {
nodes {
id
name
}
}
}
次に、このマッピングをMapForce Serverに展開し、FlowForce Serverを使用して、これをWebサービスとして提供します
このジョブを、http(s) プロトコルを通じてウェブサービスとして公開することを忘れないでください
次に、MobileTogether Designerで、最初のアプリケーションページの新しいソースとして、新しいFlowForceジョブを追加します。
ご注意ください。URLは、原則としてFlowForceサーバーのホスト名を示す必要があります。ただし、FlowForceサーバーとMobileTogetherサーバーが同じマシン上で動作している場合は、localhostを使用できます。また、今回の例ではローカルマシン上で動作するためhttpを使用しますが、セキュリティ上の理由から、本番環境では必ずhttpsを使用してください。
さて、もし我々のアプリをMobileTogether上でテストしてみるとすれば、… アプリシミュレーター こういったものが表示されるでしょう
場所の設定が完了した後、アプリの次の画面で、バーコードと数量を入力してもらうように設定します。これらの情報は、以降のMapForceのマッピング処理に渡されます。これにより、入力されたバーコードに対応する商品の在庫数が更新されます。
ここでは、GraphQLを使用して、指定されたバーコードに対応する商品IDを検索するために、Shopifyのウェブサービスへの最初のAPI呼び出しが行われています
query ($query: String = null) {
productVariants(first: 1, query: $query) {
nodes {
id
barcode
inventoryItem {
id
}
}
}
}
そして、次にShopifyのウェブサービスAPIを呼び出し、現在の在庫数を更新するためのリクエスト（ミューテーション）を送信します
mutation InventorySet($input: InventorySetQuantitiesInput!) {
inventorySetQuantities(input: $input) {
inventoryAdjustmentGroup {
createdAt
reason
referenceDocumentUri
changes {
name
delta
}
}
userErrors {
field
message
}
}
}
展開されたマッピングは、次に別のFlowForceジョブで使用することができます
そして、それをHTTP経由でWebサービスとして公開することも可能です
MobileTogether Designerのモバイルアプリケーションの2番目のページで提供されている、このマッピング機能を利用しましょう
ここでは、以前に選択された場所が表示され、バーコードと数量を入力するよう促します。 「数量を更新」ボタンをクリックすると、FlowForceサーバーのHTTPサービスが呼び出されます
再度申し上げますが、URLは原則としてFlowForceサーバーのホスト名を示すものでなければなりません。ただし、FlowForceサーバーとMobileTogetherサーバーが同一のサーバー上で稼働している場合は、この限りではありません。
変異の結果については、モバイルアプリケーションの3ページ目でご紹介いたします
…「続行」ボタンをクリックすると、2ページに戻り、そこで次の在庫商品のバーコードと数量を入力できるようになります。
ワークフロー全体は、以下のような流れになる可能性があります。
場所を選択してください
バーコードと数量を入力します（スキャナーを使用）
更新して、確認してください
次に何が？
バーコードスキャンアプリが完成しましたので、今後は モバイル環境で利用できるように、MobileTogetherサーバーに展開されました これにより、モバイルデバイスでも動作させることができます。このアプリは、内蔵型のハードウェアバーコードリーダーを搭載し、ボタン一つでバーコードを読み取り入力できるモバイルデバイスで利用可能です。また、MobileTogetherもサポートしています 外部無線バーコードリーダー (例えば、ゼブラ社やデータロジック社の製品など) モバイルアプリのワークフローに組み込むことができるもの。
MapForceを使ってShopifyにデータを連携させる機能は、ソフトウェアに付属するMapForceのサンプルプロジェクト（Shopify_UpdateInventory.mfd）で利用できます。ご自身のShopifyストア名とアクセス トークンを入力すれば、実際に試すことができます。
この例で使用されているすべてのAltova製品は、以下の条件でご利用いただけます 無料トライアル, そして、MobileTogether Designerは無料で利用できる製品です。