Node.js based smart shopping cart app


In this page, there is English description followed by Japanese one.

Getting Started

Installing Node.js and npm

You need to have Node.js and npm installed.

To check if you have them installed, open a terminal or command prompt and run the following commands:

node --version
npm --version

If you see an number output similar to x.x.x for each command, then they are both installed and you can continue to the next section.

To install on Windows or mac, you can download the installer from

To install on Linux, you can use a package manager. Instructions for installing Node.js on your distribution can be found in the following link:


This example assumes that you've already run the following program that can communicate the decoded result of barcode data with mbed Device Connector:

Import programGR-PEACH_mbed-os-client-ZXingSample

Fork of

Configuring the Applition

In order to run this app, you need to set up the options shown below via .env file stored in the folder GR-PEACH_mbed-os-QRCode-ShoppingCart-node which should be automatically created when cloning this program.

    Set this variable to your Access Key that you can create on mbed Device Connector. if you don't have an Access Key yet, please create it in accordance with the following procedure.
    1. Access
    3. When prompted, enter a name for the access key (e.g. "demo") and click ADD.

    After an access key is successfully created, please copy the access key you just created and use it in .env file as follows:


  • PORT
    Set this variable as follows to override the default port for this example if needed. The default port is 8080.



Also, user need to prepare for the comma-delimited list which includes "Item Name" and "Price" which is added to shopping cart, and save it by the name klist.txt as follows:
The list should be stored in GR-Peach_mbed-os_QRCode_ShoppingCart_node\public\list.

Application Execution

This application consists of 2 tabs. One is Shopping Cart and the other is QR Code Login. In this section, it is described that how those work.

As mentioned above, GR-PEACH_mbed-os-client-ZXingSample should be executed beforehand. For details on how to set up and execute GR-PEACH_mbed-os-client-ZXingSample, please refer to If the program works properly, you can see the following message in your terminal: /media/uploads/HinoNaka/mbed_shoppingcart_fig4.png

After it is confirmed that the program works properly, please follow the procedure below in order to execute this Web Application.

  • How to invoke this Web Application
    You can now run the application by invoking the following: /media/uploads/HinoNaka/shoppingcart_fig1.png
    Then, you should see the following message if the configuration is successfully done, :
    Please note that 8080 might be changed. It should depends on your PORT setting mentioned above. If you access the above URL using Web browser, you can see the following Smart Shopping Cart tab by default: /media/uploads/HinoNaka/mbed_shoppingcart_fig3.png

  • How Shopping Cart tab works
    When you decode QR code stored in GR-Peach_mbed-os_QRCode_ShoppingCart_node\qrcode by GR-PEACH successfully, the item should be added to shopping cart as follows:

  • How QR Code Login tab works
    When you choose QR Code Login tab, you can see the following screen indicating it's Locked status.
    Then, if you decode the Unlock qrcode described in GR-Peach_mbed-os_QRCode_ShoppingCart_node\qrcode\qr.pdf, screen should transit to the following one indicating it's Unlocked status.
    After that if you you decode the Lock qrcode described in the above qr.pdf, screen should re-transit to Locked status. In this way, the screen transits to Locked and Unlocked status in accordance with the decoded result of QR code.

How to Deploy this app on HEROKU

HEROKU ( ) is PaaS (Platform as a Service) on which Node.js application can deploy free-of charge. By utilizing it, you can access mbed Shopping Cart and QR Code Login from mobile terminal.

Here is the procedure to deploy this application on HEROKU:

  1. Create your HEROKU account at if you haven't created it yet.
  2. Install Heroku Toolbelt
    64-bit: )
  3. Launch command prompt (e.g. Windows PowerShell) and move to the project root directory. Then, invoke the command heroku login. At the first time, Email and Password is thought to be required. At that time, please type Email address and password registered at the step 1.
  4. Invoke the command git init
  5. Invoke the command git add . to prepare all the files staged for the next commit
  6. Invoke the command git commit -m "[commit message]" to commit the files staged at the step 5
  7. Invoke the command heroku create. If the command is successfully terminated, the remote repository heroku should be created and associated with the local repository
  8. Invoke the command git push heroku master If the command is successfully terminated, this application should be deployed to HEROKU and its URL should be shown as follows:

remote: -----> Launching...
remote:        Released v3
remote: deployed to Heroku

After all the steps are completed without error, please access the URL (i.e URL where https in the URL shown in the step 7 is replaced with http) with Web browser. You should be able to show mbed Shopping Cart on Web browser.




node --version
npm --version

上記コマンド実行後、x.x.x というバージョン・リビジョン番号が表示されれば、Node.js、npmは既にインストールされていますので、次節以降の手順にしたがってアプリケーションのセットアップを行ってください。未インストールの場合は以降の手順にしたがってNode.js、npmをインストールしてください。

開発環境のホストOSがWindowsまたはmacの場合は から入手可能なインストーラを使用してインストールします。

開発環境のホストOSがLinuxの場合は、お使いのディストリビーションに応じたパッケージ管理システムを用いたインストールが可能です。詳細は を参照ください。


本アプリケーションを実行するにあたっては、GR-PEACH上のバーコードデータのデコード結果にmbed Device Connectorからアクセスする下記プログラムを事前にセットアップしておく必要があります。

Import programGR-PEACH_mbed-os-client-ZXingSample

Fork of



  • ACCESS_KEY 本変数にはmbed Device Connector上で生成可能なAccess Keyを設定します。Access Keyが未生成の場合は下記に従って作成してください。
    1. にアクセスします。
    2. CREATE NEW ACCESS KEYをクリックします。
    3. access keyの名称を入力するように促されたら、任意の名称(例えばdemo等)を入力し、ADDをクリックします。

    access keyが正常に生成できたら、コピーして下記のように.envファイルでACCESS_KEYに設定します。


  • PORT 本変数にはWebアプリへのアクセスに使用するポート番号を下記のように設定します。デフォルトのポート番号は 8080 です。8080から変更の必要がなければ、設定は省略可能です。






本アプリケーションでは、Shopping CartQR Code Loginという2つのタブが実装されています。以下、それぞれの動作方法について記載します。
なお上述の通り、本アプリケーションの実行に際しては、事前にGR-PEACH_mbed-os-client-ZXingSampleを実行しておく必要があります。GR-PEACH_mbed-os-client-ZXingSampleのセットアップ方法、および実行方法に関しては、 を参照ください。プログラムが正常に動作している場合、下記のメッセージがターミナルに表示されます。


  • Webアプリケーションの起動
    続いて、上述のURLにWebブラウザでアクセスすると、下記のSmart Shopping Cartの画面が表示されます。

  • Shopping Cartタブ
    GR-Peach_mbed-os_QRCode_ShoppingCart_node\qrcode\qrcode.pdf に記載されている Birthday CakeParty CupsBeer KegsPound of beefBuflle-proof vest のQRコードをデコードすると、下記のようにデコードしたアイテムが都度ショッピングカートに追加されます。

  • QR Code Loginタブ
    このタブを選択すると、下記のLock状態を示す画面が表示されます。 /media/uploads/HinoNaka/mbed_shoppingcart_fig6.png
    ここで、GR-Peach_mbed-os_QRCode_ShoppingCart_node\qrcode\qrcode.pdf に記載のUnlock QRコードをデコードすると、Unlock状態を示す下記の画面に遷移します。 /media/uploads/HinoNaka/mbed_shoppingcart_fig7.png

    この後、Lock QRコードをデコードすると画面はLock状態に再度遷移します。

    このようにQR Code Loginタブでは、LockUnlockのQRコードをデコードする都度、対応する画面に遷移するアプリケーションです。


HEROKU ( はNode.jsアプリが無償でデプロイ可能なPaaS (Platform as a Service)と呼ばれるサービスです。HEROKUを活用する事で、mbed Shopping CartQR Code Loginにモバイル端末等からアクセスする事が可能となります。


  1. HEROKUのアカウントを所有していない場合は でアカウントを作成してください
  2. Heroku Toolbeltをインストールします
    64-bit版: )
  3. ターミナルソフトウェア(例えばWindows PowerShell)を立上げます。そして本アプリのルートディレクトリへ移動し、heroku loginコマンドを実行します。Emailアドレスとパスワードの入力を求められた場合は、アカウント生成時に入力したアドレスとパスワードを入力してください。
  4. git initコマンドを実行します
  5. git add .コマンドを実行し、全ファイルをコミット対象に設定します
  6. git commit -m "[commit message]" で、全ファイルをコミットします
  7. heroku createを実行します。本コマンドが正常終了すると、リモートリポジトリ herokuが設定されます
  8. git push heroku master本コマンドが正常終了すると、HEROKUへのデプロイが完了し、下記のように本WebアプリのURLが表示されます

remote: -----> Launching...
remote:        Released v3
remote: deployed to Heroku

上記の全ての手順が完了したら、 ( 8. で表示されたURL中のhttpshttpに置換えたもの)へブラウザ等でアクセスします。途中でエラーが発生していなければ、mbed Shopping CartがWebブラウザ上に表示されます。