Zenn
🎫

タダで文化祭来場用の予約サイトを作らされた話

2022/11/09に公開
Firebase
Flutter
tech

初めに

・結構適当に書き散らしてます
・読みづらいところもあるかもしれないけれど、お許しを。

どういうことだってばよ

教師「いやぁ・・・最近のコ〇ナの状況からして、一般のお客さんにご来場いただくのは、ちょっと・・・」
ぼく「（一般のお客さんがいない文化祭なんて、ただの内輪ノリのごみイベントじゃないか・・・ひどい・・・）」
教師「う～む・・・」
ぼく「一般のお客さん全員を事前予約制にして、定員決めて、緊急時は連絡取れればいいですよね？」
教師「まぁ・・・それなら・・・」

今思えば

これがすべての発端でした。なんであんなこと言ってしまったんだろう

とりあえず技術選定

ぼく「う～ん。時間があったら"文化祭公式アプリ"なんて面白いだろうなぁ～」
ぼく「よーし！フロントはFlutterで決定！」

ぼく「バックエンドはどうしようか・・・SMS認証ができなきゃいけないし・・・」
ぼく「Firebase・・・?これでできそうだな!よし!」

技術選定ツッコミ

  • 昔の僕、なんでFlutterにしたの？
    • どうして、開発経験があるNuxtにしなかったの?
    • 一切開発経験ないのに・・・なんで?????
    • 適当に決めすぎじゃない????
  • そもそも技術選定をもっと早くからやれ
    • この時点でリリース予定日まで約2か月でした(アホ)

詳しい実装要件

  • 一般のお客さんの事前予約を受け付けられること
  • 一人一枚QRチケットを発行すること (後述)
  • 入退場時にQRチケットを読み取ると、時刻などが記録されること
  • 1グループの上限人数を設定できること (後出し)
  • 在校生保護者用に、合言葉的なもので特別枠を予約できること (後出し)
  • リアルタイムで混雑状況を表示すること(ボランティア)
  • (リストバンドを発行すること(後述))

チケットの要件

ぼく「まぁ、チケットは一人一枚の方が誤解生まなくていいよなぁ～。」
ぼく「と、いうことでチケットは一人一枚です」

アホ「え？どいうこと？一枚じゃないの？」
ぼく「え、いや・・・こうこうこうで・・・」
アホ「？普通１グループ一枚じゃね？」
ぼく「はい・・・改修してきます・・・」

～　１か月後　～
アホ「あ～そういうことか～じゃあ、一人一枚だわｗ」
ぼく「はい・・・改修してきます・・・」

ということで、チケットの実装は実際は「一人一枚」→「１グループ一枚」→「一人一枚」となっていたのでした・・・

リストバンドについて

～　文化祭１か月前　～
ぼく「他の学校はリストバンドとかやってるみたいですよ、うちもやってみません？」
先生「おお～えぇねぇ～」

～　２週間後　～
ぼく「リストバンドの見積りこれです(20万)」
先生A「う～ん。高くない？」
先生B(怖い)「来年引き継げる人間いないんでしょ？今年だけやって、はいおしまいならそこまでする必要ないんじゃない？(3割ぐらい正論)」
ぼく「はい・・・(諦め)」

※実際はこの時点でシステムは「リストバンドなし」→「リストバンドあり」に改修されており、私はまた改修する羽目になりましたとさ。

フロントエンド実装について

フロントエンドは先述の通り、Flutterで作りました。
大半のソースはここにあります。

デザイナー失踪事件

～　夏休み前　～
ぼく「デザイン案頼んだぞ～」
A「りょーかい、一週間後に出すわ」

～　一週間後　～
ぼく「まだ？」
（連絡なし）

～　夏休み明け　～
ぼく「まだですか？」
（連絡なし）

ぼく「あぁ・・・(諦め)」

デザイナーが失踪したので、プログラマーがフロントのデザインをやりました。
それ、即ち死。おかげさまで、デザインは壊滅し、レイアウト・UXなどといった言葉からはこのアプリは無縁の存在となりました。

バックエンド実装について

FirebaseのFunctionsでAPIの実装を行いました。
ソースはここにあります。

Firabase Authenticationについて

Firebase AuthenticationはかのGoogle様が破格で提供してくださっている、認証サービスです。
特にTS・Dartで使用しましたが、かな～り簡単でした。

実際は、クライアント側からのAPIリクエストのヘッダーにJWT Tokenをくっつけて、バックエンドサーバー側で、Auth.verifyIdToken(token)で認証しました。
JWT Tokenは使うなとか、ネットで見ましたが私はそんなもの見ていません

結果

以上、結構な突貫工事(2か月×1人)で制作した予約アプリですが、予約時・当日入場時ともに大きな混乱は見られず、結構うまくいきました。

あんまり書きすぎると特定要素なので書きませんが、うちの学校は実は結構人気があるらしく、一般のお客さん用の予約枠受付開始時には予約リクエストが殺到し、頭数分間は10req/sぐらいで推移していたようですが、無事に全部捌きました。(なんで)

当日入場受付時も、スマホでの読み取り時間は0.5~1s/人程と、想定よりもかなり速い結果となりました。

最後に愚痴

(適当に書き散らしたのであんまり労力が伝わってないと思いますが、)
2か月弱で開発に150時間以上かけて完成させた予約システムですが、もちろん ボランティアです。
学校っていいですね。「生徒の自主的な活動」ですもんね。

追記

そのうち詳しくかきなおすかもしれないし、書き直さないかもしれません。
眠いので寝ます。

Discussion