今回は僕が製作したアプリの一つの「Frontman」を開発して感じたこと、反省点などをまとめたいと思います。
使用した技術、ライブラリ等(2023/02/28時点)
- NextJS(v13.1.6)
- React(v18.2.0)
- firebase firestore / authentication
参考にしたサイト、ドキュメント
Google firebase firestore
Google firebase authentication
このアプリでできること
この「Frontman」は主に以下の機能があります。
- 宿泊者（以下顧客）の情報管理
- 顧客の予約情報管理
- 顧客の宿泊履歴一覧
- このシステムを利用するユーザー（以下ユーザー）の管理(管理者ユーザーのみ)
です。それぞれ解説していきます。
顧客の情報管理
まずは顧客情報を新規登録、情報更新、顧客情報の削除です。
トップ画面からログインして、「顧客管理」ボタンを押下すると以下の画面が表示されます。
いろいろ説明が記述してありますがこの後に各説明があります。
顧客登録
このページでは新規に顧客をデータベースに登録する際に使用します。
まずは下記画像内の入力フォームに顧客情報を入力していきます。
また、国籍欄で「日本以外」を選択した場合は、ページ一番下の外国籍専用欄の入力も必要です。
登録ボタン押下後、顧客管理トップに移動します。するとリストの中に先ほどの顧客が表示されます。
顧客情報の更新
さらに隣の「更新ボタン」を押すと、更新ページに遷移します。
試しに先ほど登録したユーザー（てすと太郎）をてすと花子に変更してみます。
するとリスト内の情報も更新されて、データベース内の情報も更新されます。
顧客情報の削除
また「削除」ボタンを押すと削除ダイアログが表示されて「削除」を続けて押下すると顧客情報が削除されます。
予約管理
次に予約管理の説明です。
トップ画面から「予約管理」を押下すると、以下のページに移ります。
チェックイン
現在、誰も宿泊していないので、実際にチェックインしてみます。部屋番号をクリックした後、右上の「チェックイン/アウト」ボタンを押すと以下のページに移ります。
そして、各フォームに宿泊開始日、宿泊数等を入力して、ページ下部にある「金額計算」ボタンを押してください、すると金額が表示されます。
また、顧客情報欄では登録済みの顧客を選択できるボタン、顧客登録せずにゲストとして宿泊するかどうかを選択できます。
以下は「顧客情報参照」ボタンを押した時に表示される顧客選択ダイアログです。(今回はてすと花子を選択しています)
顧客選択後、右下のチェックインを押すと予約一覧画面に戻ります。すると先ほどの予約情報が表示されているのがわかります。
予約が入っている部屋をクリックすると、上部に詳細が表示されます。
そしてその状態で「チェックイン/アウト」ボタンを押すと、チェックアウトページに移ります。
チェックアウト
宿泊履歴
宿泊履歴ページは非常にシンプルで、今までの宿泊履歴がリスト上で表示されています。
・詳細ページ
ユーザー管理
最後にユーザー管理です。まず前提として、このアプリ内では「一般ユーザー」と「管理者ユーザー」の2種類のユーザーが存在します。
そしてこのユーザー管理は管理者ユーザーのみが利用できます。
今回は一般ユーザーを作成してみます。
ユーザー管理トップは基本的には顧客管理画面とほぼ同じです。右下の「ユーザー登録」を押すと以下のページに移ります。
そして必要な情報を入力後、「登録」ボタンを押すと、登録完了ページに移るので下のボタンからログアウトして、もう一度ログインし直してください。
もう一度ログインし直して、ユーザー管理ページを確認してみます。
すると、リストに先ほど登録した「一般太郎」が追加されています。
この一般太郎は一般ユーザーなので、以下のようにユーザー管理ボタンが表示されていません。
各機能の説明は以上です。
改善点
今回のアプリは自分が作ってきた中でも大きな規模だったので、改善点を一つづつ挙げていくのはキリがないので、特に改善が必要な箇所をまとめます。
- 各機能に搭載してあるリストの並び替え機能の追加
- 検索機能の向上
- ユーザー管理からユーザー情報の更新/削除昨日の追加
- 決済手段の追加
です。
今後もブラッシュアップできたらと思っています。
最後に
まず、なぜこのアプリを作ろうとしたかと言いますと、僕の学校でホテルのフロント業務システム開発の上流工程の部分をグループワークで設計する授業がありました。(3年次)
上流工程については2年生の時に一度授業があったので、要件定義をもとに各メンバーと協力しあって、クラス図、パッケージ図、画面レイアウトから、シーケンス図などを設計していきました。
授業では上流工程の部分だけで、プログラミングなどの下流工程は行いませんでした。せっかくグループで意見を出し合って設計したのに、実際に機能を実装せずに終わるのは勿体無いと感じ、実際にこの設計通りに機能を実装（一部実装できていない機能はあります。）してみて、うまく機能できてるかを確かめたかったのが制作のキッカケです。
結論から申しますと、上記の改善点以外は大体の機能は実装できたかなと思います。
今回のアプリは自分の中でもいろいろな機能を詰め込んだので、かなり試行錯誤しましたが、その分完成した時の達成度は大きかったですし、何より自分の成長にもつながったと感じています。