Web系高専生の日記

web制作について書いたり、その他趣味について...

高専祭クラス展示で「すーぱーらんきんぐしすてむ」を作った話

めためた久しぶりのブログ投稿です。

お久しぶりです。ふっけです。
今回は、高専祭クラス展示で入退場システムを作成したのでその話を書きます。

とりあえずデモ

使用方法は
1. 「すーぱーらんきんぐしすてむ」にアクセス
2. ニックネームを入力する
3. カメラが起動するので「入場用」のQRコードを読み取る
4. アトラクションを楽しむ
5. 「退出用」のQRコードを読み取る
6. ランキング表に名前がでる
です。以下画像

f:id:Kazkifukke:20191103160534j:plainf:id:Kazkifukke:20191103160602j:plainf:id:Kazkifukke:20191103161004p:plain
使用の図

ことの始まり

同じクラスの にばくん(仮名) から入退場システムを作りたい！という要望がありました。
そこで、にばくんはフロント側、ぼくはサーバ側を担当し作成しました。

設計

要件は「入場時間と退場時間を管理してランキングを作成する」とういうものです。
僕の最初の案はブラウザでストップウォッチ機能を実装してその結果をサーバに送信し、データベースに格納してランキングを作成していく。というものでした。
するとにばくんから「それだと不正されて、ランキングを荒らされる！！」という意見を頂きました。
最終的に「入場時と退場時にQRコードを読み込みその時間の差分でランキングを作成する」というものになりました。

開発

サーバ側の開発について書いていきます。
使用した技術は
APIサーバ: Node, Express
データベース: PostgresSQL
デプロイ: Heroku
フロント: Vue.js
UIフレームワーク: Vuetify です。

1日目

はじめにデータベース設計を行いました。 この適当がばがば設計により後で痛い目を見る。(今見てアホでしょってなった

f:id:Kazkifukke:20191103222251j:plain
ボツになったレポート用紙の裏にデータベース設計する図
次に、ExpressでAPIサーバの雛形を作成し、Herokuでデプロイまで行いました。

2日目

HerokuPostgresSQLを用いてデータベース、テーブルを作成しました。
次に必要なルーティングを実装しました。
作成したのは、ランキングの取得、時間の投稿、入場テーブルの取得、退場テーブルの取得、名前一覧の取得です。 データベースへの接続確認を行い、Get処理, Post処理をそれぞれ確認しました。
SQLでランキングの導出を行おうとしました。(ここでトラブル発生) 現在のテーブルではランキングの導出のSQL文がいい感じに書けないことがわかりました。(それはそう
そこでデータベース設計をやり直し、入場テーブルと退場テーブルを別々で作成し、以下のSQL文でランキングの導出を行いました。

f:id:Kazkifukke:20191103223000p:plain
最終的なデータベース構成
f:id:Kazkifukke:20191103223044p:plain
ランキング取得用SQL

3日目

Heroku用の環境変数の設定や、typo修正等を行いました。
これで完成(仮)しました。

クライアントが完成に近づいたところで。。

エラー処理(値が足りないとか、nullとかなんたら)をしてなかったので、HTTPレスポンスコードの設定や try, catchでエラーの握りつぶし()を行いました。

f:id:Kazkifukke:20191103223222p:plain
エラーを潰す図
f:id:Kazkifukke:20191103223336p:plain
これもうちょっとなんとかしたかったやつ
最後にリリースタグを付けて完成！！です。

当日

二日間でなんと89組捌いたそうです。。(とても嬉しい

f:id:Kazkifukke:20191103223518j:plain
入り口
f:id:Kazkifukke:20191103223744p:plain
ランキング

f:id:Kazkifukke:20191103224007p:plain
Heroku PostgresSQLでの監視の図

学んだこと

今回はフロント側とサーバ側で完全に分かれて開発を行いました。
やはりサーバとフロントがうまく組み合わさって動いているのを見るのは最高ですねぇ。
そして、Githubを使用してサーバとクライアントお互いにコードレビューを行いながら開発をしました。
互いにモジュールの使い方や基本文法などを確認しながらできたのでとてもよかったです。おすすめします。
普段のサーバの実装は自分用(クライアントも自作)だったのでガバ設計でも良かったのですが、クライアントが他人となると、API仕様書を作ったり、HTTPレスポンスコードも実装したりと、かなり本格的にできたのではないかなぁと思います。
SQLをまともに書いたのが初めてで試行錯誤を繰り返してデータを取得できた時は嬉しかったです。(基本情報落ちたけど)とても役に立ちました。

今回初めてHerokuPostgresを使用したのですが、とても便利だったのでQiitaに記事をあげようと思います。
具体的には、無料で使える点やDataClipでデータの監視ができる点がとても良かったです。 FirebaseはNoSQLですが無料でRDBを使いたいときはHerokuをおすすめします。

来年の高専祭もなにか作りたいですね。
読んでくれてありがとう。

リポジトリ

  • サーバ (コードきれいきれいしたいわね byふっけ
    github.com

  • クライアント (デプロイ時にgit push origin masterいっぱいしました。。許して、、。 byにば
    github.com

ハックツハッカソン-アロ杯-に行ってきた話

こんにちは. ふっけーです.

6/22-23 に天神でハッカソンが開催されたので行ってきた話です.

1日目

移動部門

移動中はもちろんVue.jsの勉強してた()

会場に早く着いたので近くの川で涼んでた.

そして会場入り(会場内の写真撮り忘れた

アイデア決め

今回のテーマは...

f:id:Kazkifukke:20190626223431j:plain

「タスク管理アプリ」です!!

なんかめっちゃ絞られてない...??

でも, テーマが絞られていたのでアイデアはすぐに決まった?

あ、忘れてました.. 今回のメンバーは

前回のハッカソンと同じく @kubo_programer と @Qba3c です.

最初はアイデア出し

三人でそれぞれアイデアを考えて 出し合う形になりました.

僕の案は みんなでテスト勉強の計画を共有できるアプリ

@kubo_programer は独自のソートアルゴリズムでタスクを管理できるアプリ

@Qba3c はタピオカでタピオカタピオカな見た目のアプリを考えて

最終的に @kubo_programer と @Qba3 を組み合わせる形でアイデアがまとまりました. (僕のは少し方向性が違った

開発開始

今回は僕のわがままでVue.jsを使うことになりました.(Vue.jsを使ってみたかったので

技術的には Vue cli を用いて Vuex と Vue Router を使ってメインのアプリ開発をして

git と github で管理しました.

Vue cli で環境構築等を完成させた僕.

その間にデザイン決めやソートアルゴリズムの作成をしてもらいました.

夜の部

夜ご飯は ラ！

そして、夜の作業...

ソート用のフォームを作成したり, タスクのデータ構造練ったり.. 色々しました(覚えてない

途中コンビニに行ったりしたんですが治安最悪でした..

朝の4時まで作業..

2日目

6時に目が覚めました. 睡眠時間は2時間です...

最初の作業は完全に忘れていたタスクの削除機能の追加です. これが割と手こずって時間がかかりました.

そしてUIをごちゃごちゃしてました.

お昼

地獄でした.

完成！！

発表2時間前ぐらいに僕のタスクは全て終了しました.

残りのUIの調整とパワポの作成はチームメンバーに任せて僕は多分寝てました(意識がない..

結果発表!!!

副賞(服賞)をいただきました!!

嬉しいです

最優秀賞のUnityのチームはすごかったです..

感想

今回のハッカソンで初めてVue.jsをまともに扱ったんですけどハッカソンは技術力の向上が見込めるのでとても良いと思いました.(Vue.js完全に理解した

また2dayということもあって かなりキツかったんですけど 良い思い出になりました.

今後も積極的に参加していきたいです!!

最後に,

二年生の振り返りと三年生での目標(技術系)

二年生の振り返り

9月からプログラミング始めましたがもう三年生になるみたいです。
最初はフロントエンドばっかりやってたので、フロント関連は大体扱えるようになったのかなと思っています。(バイトもできたし)
途中CTFとか競プロとか手を出しましたが結局フロントエンドに戻ってきてる感じです。
最近はwebアプリやネイティブアプリにも挑戦し始めたのでこのまま楽しくやっていけたらなと思います。

続きを読む

プログラミング始めて半年たったのでなんか書く

ふっけです。

夏休みからプログラミングの勉強を始めてだいたい半年ぐらいたったので、これまでのまとめ的なの書いときます。

内容は僕のお遊び程度です..
夏休みの段階でのプログラミングスキルはc言語を授業で少しやったぐらいです。

続きを読む