高専祭クラス展示で「すーぱーらんきんぐしすてむ」を作った話
めためた久しぶりのブログ投稿です。
お久しぶりです。ふっけです。
今回は、高専祭クラス展示で入退場システムを作成したのでその話を書きます。
とりあえずデモ
使用方法は
1. 「すーぱーらんきんぐしすてむ」にアクセス
2. ニックネームを入力する
3. カメラが起動するので「入場用」のQRコードを読み取る
4. アトラクションを楽しむ
5. 「退出用」のQRコードを読み取る
6. ランキング表に名前がでる
です。以下画像
ことの始まり
同じクラスの にばくん(仮名) から入退場システムを作りたい！という要望がありました。
そこで、にばくんはフロント側、ぼくはサーバ側を担当し作成しました。
設計
要件は「入場時間と退場時間を管理してランキングを作成する」とういうものです。
僕の最初の案はブラウザでストップウォッチ機能を実装してその結果をサーバに送信し、データベースに格納してランキングを作成していく。というものでした。
するとにばくんから「それだと不正されて、ランキングを荒らされる！！」という意見を頂きました。
最終的に「入場時と退場時にQRコードを読み込みその時間の差分でランキングを作成する」というものになりました。
開発
サーバ側の開発について書いていきます。
使用した技術は
APIサーバ: Node, Express
データベース: PostgresSQL
デプロイ: Heroku
フロント: Vue.js
UIフレームワーク: Vuetify です。
1日目
はじめにデータベース設計を行いました。
この適当がばがば設計により後で痛い目を見る。(今見てアホでしょってなった
2日目
HerokuPostgresSQLを用いてデータベース、テーブルを作成しました。
次に必要なルーティングを実装しました。
作成したのは、ランキングの取得、時間の投稿、入場テーブルの取得、退場テーブルの取得、名前一覧の取得です。
データベースへの接続確認を行い、Get処理, Post処理をそれぞれ確認しました。
SQLでランキングの導出を行おうとしました。(ここでトラブル発生)
現在のテーブルではランキングの導出のSQL文がいい感じに書けないことがわかりました。(それはそう
そこでデータベース設計をやり直し、入場テーブルと退場テーブルを別々で作成し、以下のSQL文でランキングの導出を行いました。
3日目
Heroku用の環境変数の設定や、typo修正等を行いました。
これで完成(仮)しました。
クライアントが完成に近づいたところで。。
エラー処理(値が足りないとか、nullとかなんたら)をしてなかったので、HTTPレスポンスコードの設定や try, catchでエラーの握りつぶし()を行いました。
当日
二日間でなんと89組捌いたそうです。。(とても嬉しい
「すーぱーらんきんぐしすてむ」のサーバ監視。めた楽しい。みんなきてね 3i pic.twitter.com/eP00GImAyW
— ふっけ (@fukke0906) 2019年11月2日
学んだこと
今回はフロント側とサーバ側で完全に分かれて開発を行いました。
やはりサーバとフロントがうまく組み合わさって動いているのを見るのは最高ですねぇ。
そして、Githubを使用してサーバとクライアントお互いにコードレビューを行いながら開発をしました。
互いにモジュールの使い方や基本文法などを確認しながらできたのでとてもよかったです。おすすめします。
普段のサーバの実装は自分用(クライアントも自作)だったのでガバ設計でも良かったのですが、クライアントが他人となると、API仕様書を作ったり、HTTPレスポンスコードも実装したりと、かなり本格的にできたのではないかなぁと思います。
SQLをまともに書いたのが初めてで試行錯誤を繰り返してデータを取得できた時は嬉しかったです。(基本情報落ちたけど)とても役に立ちました。
今回初めてHerokuPostgresを使用したのですが、とても便利だったのでQiitaに記事をあげようと思います。
具体的には、無料で使える点やDataClipでデータの監視ができる点がとても良かったです。
FirebaseはNoSQLですが無料でRDBを使いたいときはHerokuをおすすめします。
来年の高専祭もなにか作りたいですね。
読んでくれてありがとう。
リポジトリ
サーバ (コードきれいきれいしたいわね byふっけ
github.comクライアント (デプロイ時にgit push origin masterいっぱいしました。。許して、、。 byにば
github.com
