Chromebookで作るPWAアプリ日記8

こんにちは、junkawaです。

バーコードを読み取り、商品検索を行うPWAアプリを検討しています。

画面スケッチをGoogleスライドで作っています。

バーコード読み取り (バーコード→JANコード)

バーコード(JANコードを)を読み取れる、軽量なJavascriptライブラリJOBを使います。

EddieLa/JOB

webpackでバンドルするためにコードに少し手を加えました。

商品検索 (JANコード→商品名)

Amazon Product Advertise API を使いたかったのですが、アソシエイト・プログラムの審査に通りそうになかったので、Yahoo デベロッパーネットワークのWeb APIを使うことにしました。

ショッピング:商品検索 - Yahoo!デベロッパーネットワーク

https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid=<あなたのアプリケーションID>&jan=4959127006128

将来的にAmazonや楽天のAPIも試してみたいので、Web API呼び出しの処理をクライアント上(フロントエンド)で実行しないことにしました。

これには、アプリケーション・キーやシークレット・キーをユーザから隠蔽できるという利点もあります。

JANコード→商品名は単純な処理なのでわざわざサーバを立てる必要もないため、サーバレスアーキテクチャを検討します。

AWS LambdaやGoogle Cloud Functionsも使ってみたいですが、まずは使い慣れたGoogle Apps Scriptで実装します。

Google Apps Script

GASを「ウェブアプリケーションとして導入」すると、指定されたURLにGET,POSTした時に処理を実行することができます。

例)
https://script.google.com/macros/s/.../exec?jan=4959127006128

Web Apps  |  Apps Script  |  Google Developers

function doGet(e) {
  const params = JSON.parse(JSON.stringify(e));
  if (!('jan' in params['parameter'])) return HtmlService.createHtmlOutput('invalid params');

  const jan = params['parameter']['jan'];
  const appId = '<アプリケーションID>';
  const url = 'https://shopping.yahooapis.jp/ShoppingWebService/V1/itemSearch?appid='+appId+'&jan='+jan;

  const response = UrlFetchApp.fetch(url);

  return ContentService.createTextOutput(response.getContentText());
}

このような感じでGET時のパラメタjanを使って商品を検索できます。