みんなの「作ってみた」

Reactとタブレットでバーコード使ったシェアハウス物々交換システム作った話【個人開発】

2019/07/26

wamisnet
wamisnet
Arduinoで遊んだり、Androidさわったりしてる学生だったもの

こんにちわ、ギークハウス新宿（ぎーじゅく）の住民のわみです。
先日開発合宿で作った物々交換システムができたので仕組みや機能などをまとめてみます。

なにを作ったか

こんな感じのバーコードを使ったPOSシステム的なもの

どうして作ったか

シェアハウスであるある（？）な悩みの一つ、例えばカップヌードルとかドクペをまとめ買いをしてくれて、それを必要なタイミングでみんなで分けるということ。（他だと多めにカレーとかおかずを作ったりしたときにシェアしたいときもめんどい

まとめ買いすることで安く買えるのはすごくいいのですが、それをいい感じに分けるのは至難の業。購入時にまとめてやるとか方法はいろいろあると思いますが、できたら欲しいときに分けてもらえるとよいなーと

そんなことをしていたぎーじゅくの過去の写真がこちら

それぞれ買ってきた人のボールにお金を入れるという方式（一番手前が私、奥のオレンジや右の封筒が入っているのは別のひとのやつ）

数が少なければこれでもいいんですが、数が増やすと訳が分からなくなったり、新しい住民が増えたときには一からこの商品は誰々のだよといった説明が必要になってきました。

これを解決するために一つシステムを作りました！

物々交換システムの歴史

このシステムには少々歴史があります。

物々交換システムv1　（2019年2月頃）の概要

Flutterで今回の下地となるAndroidアプリを作成しました。

完成写真

技術構成

次のような構成で作成しました。

  • バーコードリーダー
  • タブレット（Flutterアプリ入り）
  • Slack
  • Node-RED(RedMobile)
  • Elasticsearch
  • Kibana

図にするとこんな感じです。

問題点

ここまで3日ぐらいでつくったものでFlutterのバーコード入力処理にかなり泥臭い対応が一部あったり、Node-REDに依存する部分があったりとなかなか保守しにくいシステムになっていたり、データの作成に手動でいろいろ行わないといけない感じでした。

手動で行わないといけない作業

  • 商品登録
  • 商品編集
  • 商品削除
  • 在庫管理
  • 取引削除
  • 週単位で決済処理
  • ユーザ追加

この中でも商品登録と決済は手動で行う作業でも大変な作業でした。（2月の頭から5か月以上稼働しているのだから自動化すればいいのに…ｗ

商品登録

Elasticsearchにデータを入れるためにNode-REDからわざわざ手打ちでJSONを作るｗ

週単位で決済処理

毎週どれぐらい使ったかKibanaで集計されたデータを使ってユーザに人力で通知していきます。

（数字は生々しいのでね…

こんな感じにがんばってる

今回作成したシステム

いろいろと問題のあったFlutterとNode-REDからReactで新規に作り直しました！

ReactはスマートミラーのMiYOのアプリを作るときに初めて触り始めましたが、いい感じに画面を作ることができたので今回も採用しました。


（買ってくれたりするとうれしいなー
商品URL : https://booth.pm/ja/items/1359854

完成写真

GIF小さいけどこんな感じ

技術構成

次のような構成で作成しました。

  • バーコードリーダー
  • タブレット（React PWA入り）
  • Slack
  • Firebase
  • Elasticsearch(分析用　おまけ)
  • Kibana(分析用　おまけ)

図にするとこんな感じです。

他の人から使ってみたいという要望を聞いていたのでElasticsearchからFirebaseでまるっと作り直しました！

Firebaseの使っている機能は次の通りです。

  • Cloud Firestore
    • ユーザ情報
    • 商品情報
    • 取引データ
  • Auth
    • ログイン（Cloud Firestoreで個別にデータ管理するため
  • Hosting
    • Reactのホスティング

改善点

今までの手動で行わないといけない作業一覧

  • 商品登録　← サポート
  • 商品編集　← サポート
  • 商品削除
  • 在庫管理　← サポート
  • 取引削除
  • 週単位で決済処理　
  • ユーザ追加

商品登録画面

商品のバーコードを読み取ると、RakutenのAPIで商品名や登録価格の基準値を取得するようにして簡単に商品を追加できるようにしました！

RakutenのAPIめっちゃ便利でよかった！つかってみて
https://webservice.rakuten.co.jp/explorer/api/IchibaItem/Search/

商品登録の方法もすこしこだわっていて、バーコードの読み取りだけでこの画面の設定値を変更できるようにしているため、バーコードリーダーがあれば登録が完了するところもこだわりポイント！

在庫一覧画面

在庫管理の機能が追加されて、今の残り個数が検索できるようになりました！
商品のバーコードを読み取るとリストが絞り込まれるようにしたところもこだわりポイント！

まだサポートしてない機能もありますが、今後サポートできたらいいなと思っています。

React化したときにFlutterに比べて圧倒的に拡張しやすくしたので今後は随時機能を追加していきます！

まとめ

便利になったぎーじゅくの物々交換システム。

みんなで持ち寄るこの感じが私はすごく好きなので「物々交換システム」という風にしました。
物々交換システムといってますが、物々交換してないやんけっていうツッコミはなしで！

完全に同じ価値のものと交換するのは大変なので一旦お金を介して交換がはかどるようになったらいいなという理想と現実の狭間な感じ

他のシェアハウスでもいいだろうし、オフィスでもつかえるのではないでしょうか？

タブレットとバーコードリーダー（なくてもいいけど、読み込みがカメラより早かった）があればできるところもよいかなと思います。

ぎーじゅくに興味をもったり、このシステムがもっと気になったらコメントしていただけると嬉しいです！

ここまで読んでくれた方へ

ここまで読んでくださりありがとうございます。

いいねやコメント、SNSでの共有等をしてくださると、今後の励みになります。よろしくお願いします。

良かったらTwitterもフォローしてね

ぎーじゅくの別記事