NowLoading...

NINE Pay

https://github.com/Kyutech-C3/nine-pay

ハンモックで寝るとたまるポイントで冷蔵庫が使えるアプリ

ユーザーアイコン

citrus_candy

MacBook
サムネイル

推しアイデア

冷蔵庫を使いたいそこのあなた!なんとこのアプリを使えば、寝るだけで使えるポイントが溜まります!寝よう!!!!

作った背景

Studio9にあるハンモックで寝てみたかった。よくねむれた。みんなも寝てみよう。

推し技術

NFC, バーコードリーダー, PWA

プロジェクト詳細

NINE Pay

  1. ハンモックで寝てポイントを貯める
  2. 冷蔵庫に入れたいもののバーコードを読み取る
  3. 冷蔵庫に入れる

この3ステップで誰でも冷蔵庫を使うことができます!

主な機能

Google でのログイン機能

  • Firebase Authentication の Google ログインを使っています

login.png

NFC Reader でポイントを貯める機能

  • スマホでサイトを開いて NFC タグの上に置くことで、1秒ごとにハンモックポイント(HP)が溜まります
  • iPhone は仕様上未対応です
  • ハンモックの近くに NFC タグを置き、寝るときにその上にアプリを開いたままのスマホを置くことで、ポイントが勝手に溜まります
  • 冷蔵庫を使っている(バーコードで1つ以上スキャンしている)と、1分に1 HP 減っていきます

nfc_reader.jpeg

冷蔵庫に入れたいもののバーコードを読み取る機能

  • 飲み物やおやつにあるバーコードをJANコードとして読み取ることができます
  • 読み取り部分が丸いものや光があたっちゃうと、間違ったJANコードを読み取る場合があります
    • 例えば RedBull だと精度が低くなります

barcode.jpeg

冷蔵庫に入れたものを管理する機能

  • バーコードで読み取ったものを表形式で管理することができます
  • 冷蔵庫にあるものを取り出すときは、1度読み取ったものをもう1度読み取ると表から削除され、取り出すことができます

list.jpeg

スマホアプリになる機能

  • PWA を実装していることで、Web アプリなのにスマホアプリのように動かすことができます
  • プッシュ通知の機能も追加したんですが、挙動が不安定で原因もわからず、今回は実装を見送りました

開発技術

  • Vue
  • QuaggaJS
  • Service Worker
  • Firebase
    • Firebase Authentication
    • Firebase Firestore
    • Cloud Functions
    • Cloud Messaging
  • Netlify

構成図

ninepayPage1.drawio 1.png

citrus_candy

citrus_candy

@j5q3knxpt116fntq