技育 CAMPハッカソンに参加した

茶塩

2025年2/1〜2に開催された技育CAMPハッカソンvol.21に高校の友達(柴野)と参加してきました

構想


柴野さんが機械に強いので、物体(?)と連動したwebアプリを作れればいいなーという話になり、貯金アプリと連動した賽銭箱型貯金箱を作ることになりました
これならwebアプリ→私、賽銭箱デバイス→柴野と分業もしやすい！

分担


柴野(デバイス):
入れた硬貨を重さセンサーで感知し、それぞれの硬貨が何枚あるかを検知・テキストファイルで返す部分

私(webアプリ):
①柴野さんが返してくれたテキストファイルを読み取り、何円か表示する
②口座残高を表示
③欲しいものリスト(総残高からあといくらで買えるか計算して表示)

事前開発期間

お互い担当部分はおまかせ状態なので、reactで作ることに決める(比較的触ったことがあるから)
本当は、作りたい機能とかで使用技術を選べたら良いんだろうなあとは思うんですが、経験が浅すぎるのでそこまで至らず…
とりあえず、仮の硬貨の枚数から金額を計算して表示・ほしい物リストの実装(あといくらで買えるとか計算しないただのリスト)だけ簡単に終わらせる

1日目

11時の開会式(オンライン)に参加したあと、デバイスとwebアプリのデータのやり取りをどうするかが問題になる
年末に柴野と購入した共通のレンタルサーバーとドメインがあったので、そこにテキストファイルをあげてくれることになる(丸投げ)　

口座残高表示機能に取り掛ったのですが、どうやら当初使う予定だった銀行のAPIが色々審査通さないと私用で使えないことが判明したので、急遽ネットバンキングからのスクレイピングに方法を変更
ここで色々詰まりました

  • どうやらフロントからwebスクレイピングはできないらしい(ほんとはできるのかもしれませんがうまく行きませんでした)のでバックエンドサーバを作成する必要があるらしい

  • 口座番号やパスワードやらを自動入力する際、ターミナル上で出力はできるのになぜか入力できたことになってない→タイミングを置いてから入力することで解決

何度もログインを繰り返していたので不審に思われて止められないかな…と心配になりながら試行錯誤していた結果無事口座残高を取ってこられるように
夜が明けた…

2日目

起きたら、「Arduinoの値をサーバーにあげるとこまでできた！」と柴野から連絡が入っている(すごい)
しかし重さ(総量)からそれぞれの枚数出すのどうするんだ

これも結局柴野さんに丸投げ


柴野が実装してくれたテキストファイルを読み取って硬貨の枚数を表示だ！と思ったのですが、ここも意外とうまくいかない
テキストファイルは5秒おきに硬貨の枚数の状況を書き出すような構成になっていたので、リロードした時点の最後の9行を読み取るという無理やり実装をしてどうにか成功しました　き、きたないコードだ

結果

努力賞をいただきました！う、うれしい


反省点

・UI技術がない
やっぱり見栄えも大事だよなと思うので(特にハッカソンでは)、おしゃれな見た目を実装できるコンポーネントとかを勉強したいなと思いました
・プレゼン練習の時間をちゃんと取る
プレゼンの練習をしっかり取らなかった結果、時間内に間に合わなかったのでこっちもおろそかにしないことが大事だなと思いました


いいなと思ったら応援しよう！