Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Spread.ViewsとPayPalを連携して商品発送管理システムを作る

IoT時代の救世主! SpreadJSで作るデータ可視化アプリ 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

6. PayPalのデータと連動する

 では実際のデータと紐づけていきます。

 server.jsにPOSTリクエストを受け付けるAPIを作成します。

 PayPalは購入通知があるとWebhookを飛ばす仕組みがあります。これを利用して、PayPalから送られてきた購入者情報とトレリスUIを連動させましょう。

 PayPalのデータに合わせるためにoriginDataを少し改良します。

server.js
省略

let originData = [
    {
        "work": '未発送',
        "paypal_txn_id": '',
        "clickpost_id": '',
        "payer_email": '',
        "description": 'Nefry BT x 1',
        "title": `菅原のびすけ`,
        "photo": './images/ds.png',
        "progress": 0,
        "address": `東京都千代田区外神田2-9-3\nユニオンビル工新 8F`,
        "address_zip": '101-0021'
    }
]

省略

app.post('/ipn', async (req, res) => {
    const ipn = req.body; //PayPalのWebhook Body
    console.log(ipn)
    const addItem = {
        "work": "未発送",
        "paypal_txn_id": ipn.txn_id,
        "clickpost_id": '',
        "payer_email": ipn.payer_email,
        "description": ipn.item_name,
        "title": `${ipn.first_name} ${ipn.last_name}`,
        "photo": "./images/ds.png",
        "progress": 0,
        "address": `${ipn.address_state}${ipn.address_city}\n${ipn.address_street}`,
        "address_zip": ipn.address_zip
    };
    originData.push(addItem); //元データに追加
    res.end(JSON.stringify({message: 'Success!'}));
});

省略

 この状態で、IPN Simulator(PayPalの決済をシミュレーションするツール)を利用するとPayPalから購入者情報が送られて、トレリスに反映されます。

7. 残りの実装について

 Spread.Viewsの機能から離れるので軽く紹介します。

クリックポスト連携

 クリックポストはAPIが無いので連携が困難です。そこで、Headless Chromeでアクセスしにいき、中の操作を自動化して決済やラベル印字までを行います。

 ライブラリはpuppeteerを利用します。Puppeteerを利用した自動化は本筋ではないので全部の紹介せずに雰囲気だけ伝えます。

 まずはPuppeteerのインストールです。

npm i --save puppeteer

 読み込みとエミュレートするデバイスを指定します。Puppeteerはブラウザを起動してWebサイトの操作を自動制御していきますが、スマホビューから見ている状態をエミュレートできます。

 通常のPC向けのビューとスマホ向けのビューだと、スマホ向けの画面の方がシンプルな作りになっていることが多いので、僕が自動制御を行う際はiPhone 6などを指定して自動制御をしています。

server.js
'use strict';

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

省略

 また、/clickpostにPOSTリクエストがあった際にPuppeteerでの自動化処理を記述します。

server.js
省略

app.post('/clickpost', async (req, res) => {
	 /*
	 ここにPuppeteerでの自動化処理を記述
	 */
    res.end(JSON.stringify({message: 'Success!'}));
});

省略

 フロント側ではカードがラベル申込/決済_済の状態になったときに/clickpostのパスにPOSTリクエストが送られるようにし、カードがラベル申込/決済_済になるとクリックポストへの自動アクセスと決済処理が行われます。

index.html
省略
<script>
省略
        const dragDroppingFn = (sender,args) => {
            if(args.status !== 'beforeDropping') return;
            setTimeout(() => {
                for(let i = 0,len = workGroups.length; i < len; i++){
                    if(args.dataItem.work === workGroups[i]){
                        args.dataItem.progress = i * 20;
                    }
                }

                //今回追加箇所
                if(args.dataItem.work === 'ラベル申込/決済_済'){
                    alert('クリックポストでラベルを発注します。');

                    //args.dataItemのデータをそのまま送る
                    const params = new URLSearchParams();
                    params.append('data', JSON.stringify(args.dataItem));
                    const res =  await axios.put('/clickpost', params);
                }

                dataPut(sender.dataSource_);
            },500);
        };

省略
</script>
省略

 実行してみるとこんな感じです。

 クリックポストのログイン部分を自動化する部分のコードになります。クリックポストはYahooのログインシステムを利用しているため、Yahooのログインを自動化する処理とも言えます。

server.js
省略
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://clickpost.jp/mypage/index'); //ページに移動
await page.click('.logInBtn'); //ログインボタンを押す
console.log(`ログインボタン done`);

await page.waitFor('#username');
await page.type('#username','ユーザー名');   //ユーザー名の入力
console.log(`ユーザー名入力 done`);

await page.click('#btnNext'); //次へボタンを押す
await page.waitFor('#idWrap.dispNone');
省略

 コメントに処理の流れを書いていますが、かなり直感的です。

 実際にこの箇所だけを動かすとこんな感じです。

 自動化できるとかなりの感動があります。

Gmail APIを使ってメール送信の自動化

 購入者に対して、発送完了連絡を自動化します。

 こちらもクリックポスト同様にPOSTリクエストを受け付けるAPIを作成します。/sengmailとしました。

server.js
省略

app.post('/sendmail', async (req, res) => {
	 /*
	 ここにPuppeteerでの自動化処理を記述
	 */
    res.end(JSON.stringify({message: 'Success!'}));
});

省略
index.html
省略
<script>
省略
        const dragDroppingFn = (sender,args) => {
            if(args.status !== 'beforeDropping') return;
            setTimeout(() => {
                for(let i = 0,len = workGroups.length; i < len; i++){
                    if(args.dataItem.work === workGroups[i]){
                        args.dataItem.progress = i * 20;
                    }
                }

                if(args.dataItem.work === 'ラベル申込/決済_済'){
                    alert('クリックポストでラベルを発注します。');

                    //args.dataItemのデータをそのまま送る
                    const params = new URLSearchParams();
                    params.append('data', JSON.stringify(args.dataItem));
                    const res =  await axios.put('/clickpost', params);
                }

                //今回追加箇所
                if(args.dataItem.work === '発送完了'){
                    alert('発送完了メールを送ります。');

                    //args.dataItemのデータをそのまま送る
                    const params = new URLSearchParams();
                    params.append('data', JSON.stringify(args.dataItem));
                    const res =  await axios.put('/sendmail', params);
                }

                dataPut(sender.dataSource_);
            },500);
        };

省略
</script>
省略

 GmailをNode.jsから送信する方法はGoogle公式ライブラリを利用してNode.jsからGmailの送受信をしてみようの記事にまとめたので、こちらを参照してください。

 組み込むと、こんな形で発送完了にカード移動をすると裏側でメールが送られます。

まとめ

 トレリス風なUIもSpread.Viewsを使うことで簡単に扱うことができました。

 今回は、ドラッグアンドドロップのイベント取得をやりましたが、Spread.Viewsではクリックしたときや編集したときなどのイベントを取得できるので、イベントを活用してトリガーにすることで他のAPIとの連携部分も作っていけそうです。

 APIなどの連携を図れば、商品管理に留まらず、プロジェクト管理やスクラムなど活用ジャンルが無限に広がります。イベントがライブラリ側にしっかりと実装されていてAPIなどの連携がしやすいのもSpread.Viewsのメリットだと思います。皆さんも是非使ってみてはいかがでしょうか。

 IoT技術の成長により、データの扱い方や扱うデータの種類も広がっています。2~4回でそれぞれ違った指向のアプリケーションを作成しましたが、Spread.Viewsが幅広い用途に対応できるライブラリであることが今回の連載を通して伝われば幸いです。

 それではまたどこかでお会いしましょう!



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 菅原のびすけ(dotstudio株式会社)(スガワラ ノビスケ)

     日本最大規模のIoTコミュニティ「IoTLT」主催。岩手県立大学大学院ソフトウェア情報学研究科を卒業後、株式会社LIGでWebエンジニアとして入社し、Web開発に携わる。2016年にdotstudio株式会社を立ち上げ、今はIoT領域を中心に活動している。JavaScript Roboticsコミ...

バックナンバー

連載:IoT時代の救世主! SpreadJSで作るデータ可視化アプリ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5