🎫

[React x Firebase]整理券アプリを作ってみた

4 min read

サービス紹介

かるがも整理券
Topページ

整理券の作成・取得を行えるサービスを作りました。整理券の名前と枚数を入れると、整理券取得画面が作成され、twitterなどでURLを共有することで整理券を取得してもらえます。

整理券取得画面です
整理券取得画面

取得した番号が表示されます
整理券取得後

管理画面です(呼び出しを押してもメールやプッシュ通知は送られません)
管理画面

呼び出しの状況はユーザの整理券に表示されるので、あと何番か、呼び出されてからどのくらい経ったかが分かります。
整理券表示1
整理券表示2

ただ、まだ本当には使わないでください。個人開発なので運用に手が回らないためです。引き継いでくれる方募集します。

作ったきっかけ

家族から「会社でやるイベントで使える予約システムがほしい」と言われたことがきっかけです。はじめは時間別の予約システムを考えていましたが難しすぎたので整理券に変更しました。意外にも無料で使える整理券システムは少なかったので作ってみました。

製作期間

コードを書いていた期間は1ヶ月くらい

システム概要

フロントエンドをReact、バックエンドをFirebaseで作成しました。
Firebaseでは、Authentication(認証)、Firestore Database(DB)、Hosting(ホスティング)を使用しています。
スタイリングはMUI (Material-UI)です。

アーキテクチャ

ソースコードはこちらです : https://github.com/yucatio/karugamo-seiriken

Firebaseを使ってよかったこと

開発期間を大幅に短縮できた

バックエンドをFirebaseにすることで開発期間を大幅に短縮できました。
特にユーザ認証は、コード数行で済むので本当に楽でした。
DBも設定フィルを書くだけなので開発期間がかなり短縮されました。

transactionが使える

Firestoreではtransactionが使えます。今回は、次に取得する整理券番号を排他的にカウントアップする動作に使用しました。

無料で使える

制限はありますが、これだけの機能を無料で使えるのはありがたいです。登録も簡単でした。

Firebaseで難しかったこと

メールアドレスとパスワードでの認証

Firebaseではメールアドレスとパスワードでの認証もサポートしています。しかし認証するまでのフェーズが多く、初回リリースでの実装は見送りました。

DBのuniq設定

Firestoreにはuniqの設定がありません。React側で重複を防ぐようにはしていますが、クライアントサイドで処理をするだけでは完璧ではありません。ただ、通常の操作で重複はありえないので、今後はスクリプト等使用して重複を監視しようと思います。

MUI(Material-UI)を使ってよかったこと

今回はスタイルにMUI(Material-UI)をしようしました。個人的にかなり気に入っています。

コンポーネントが充実している

今っぽいUIを作るのに必要なコンポーネントがそろっています。今回は、

Drawer
Drawer

Snackbar(画面下部の"整理券を作成しました"と書かれている部分)
Snakbar

Accordion
Accordion_1
Accordion_2

Dialog
Dialo

などを使用しました。
そのほかのコンポーネントは公式ページをご覧ください。

プロトタイプ開発

ここからは開発方法の話です。今回はプロトタイプモデル+独自開発方法で開発しました。割とうまくいったので記載しておきます。

プロトタイプ1

最初のプロトタイプ(試作品)では、機能のみ実装しました。具体的にはサーバとの通信部分とページの遷移をプログラミングしました。スタイルを全く当てず、素のHTMLのままプログラミングを進めます。殺風景な画面がつらかったです。

プロトタイプ1
メニュー
プロトタイプ1
新規登録画面

プロトタイプ2

2つ目のプロトタイプでは、画面デザインのみコーディングしました。サーバとは接続しません。文字の部分もサーバからとってきたものではなく直接打ち込んでいます。自分のデザインセンスのなさがつらかったです。

プロトタイプ2
作成した整理券一覧
プロトタイプ2
取得した整理券一覧

プロトタイプ3

3つ目のプロトタイプでは、プロトタイプ1と2を合わせました。やっとアプリらしくなってきました。しかしコードが長くなりつらかったです。

プロトタイプ3
プロトタイプ3
DBに登録した内容が表示されている

完成版

完成版ではプロトタイプ3をリファクタリングしながら実装しました。具体的にはコンポーネントを分割したり、定数は変数に格納して使うなどです。リファクタリングが終わったら追加の機能開発をいくつかしました。

トップページ
トップページ。ロゴを作成したりフッターをつけました
新規作成ページ
整理券の作成画面。リッチテキストエディタの機能を追加しました

終わりに

この記事が、個人開発をしている人、Firebaseを使おうか迷っている人に少しでも役立つことを願っています。
うまくいったこと、いかなかったことは他にもたくさんあるので別記事で書いていきたいです。

Discussion

ログインするとコメントできます