Flutterハッカソンで3位入賞できました

先日、Flutterのハッカソンに参加しました。

flutterlabo.tech

結果としては、会社のメンバーと力を合わせて3位入賞することができました!

参加したきっかけ

 参加したきっかけは、会社の同僚がハッカソンを見つけて誘ってくれたことでした。

 Flutterについては、一度チュートリアルをやったことがあり、ちゃんとアプリを使ってみたいなーという気持ちはありつつ、なんだかんだできていなかったので、Flutterを学ぶいい機会だと思い、参加しました。

ハッカソンの1週間で作ったアプリ

 今回のハッカソンのテーマは「アナログなイベントをデジタル化する」でした。テーマ発表から、開発したアプリの発表&コード提出までの期間は1週間でした。

 私たちのチームがつくったアプリは「Talk to me(仮)」です。

 エンジニアは、紙の名刺以上にTwitterなどでつながることが多い職種な気がします。エンジニアがリアルのイベントで会った際の名刺交換に代わるサービスと位置付けて以下のようなアプリを作りました。

↓ 作ったアプリ(発表資料の一部を修正して抜粋)

私が担当した機能

 上記の中で、私は主に以下の機能を担当しました

  • アプリでQRコードリーダを立ち上げる機能
  • QRコードリーダーで読み取った内容をFirestoreに履歴として保存する機能
  • QRコードリーダーで読みとったデータに対するメモ機能
  • アカウント編集機能

 そのほか、画面スワイプでメニュー間を移動する機能など、モバイルアプリらしい部分も作ってみました。

部品を組み合わせる感じでできるので簡単で楽しい

 Flutterの見た目の部分は、Widgetと呼ばれる部品を組み立てて作るイメージで、割と思い通りに作れる感じで楽しかったです。

 スワイプでページ間を移動するなど、モバイルアプリっぽさを実装するのも用意されたWidgetを組み合わせて使えばすぐできるのも便利な点でした。

難しかった点

 リアルタイムでデータを取ってくるのが意外と大変でした。

 例えば、アカウント編集後に更新を押してアカウント表示画面に戻っても、「Firestoreのデータは更新されているが画面の情報が変わっていない」ことが起きました。

 画面で表示するデータの持ち方によっては、都度Firestoreからデータを持ってくるのではなく、以前の情報を使いまわしているため起きていたのですが、RailsアプリだとViewの表示ごとにControllerでデータを取得するのであまり見かけない現象だと思うので、最初は解決策がよくわかりませんでした。(最終的にはStreamBuilderというものを使って解決しました。)

課題はリファクタリング

 また、きれいにコードが書けたかと言われると否です。

  • Viewにロジックがたくさん書かれている
  • 同じコードが繰り返し出てくる
  • データを取得するだけなのに大袈裟なコードになっている(気がする)

 コードが汚いことを自覚しつつも、Dartへの理解が浅くてリファクタリングができないのは悔しい点でもありました。

さいごに

 ハッカソンなるものに初めて参加しましたが、アイデア出しから実装までできてよかったです。

 また、実装の時間は仕事終わりにとっていたのですが、チーム開発でやっていると他のメンバーの頑張りが刺激になってついつい夜遅くまで実装をしていました。大学生のころの試験期間のような気持ちになって、とても楽しかったです。

 まだアプリとしての完成度は低いので、細々とFlutterの開発を続けてリリースまでやりたいなあという気持ちです。