Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (8)
Featured
Featured (20)
Matsuri Map
- 1. MATSURI MAP Koya Ito Anonymous1 Anonymous2 Two Gate Dev Camp 2021
- 3. 一番は高専祭
- 7. デモ
- 13. 分担 バックエン ド • 伊藤航矢 フロントエ ンド • anonymous1 • anonymous2
- 15. END
Editor's Notes
- それではteam c MATSURI MAPの発表を始めたいと思います。
- 皆さんにとっての高専生活での一番のイベントってなんですか？夏休みでしょうか？それとも修学旅行でしょうか？ 色々高専生活での楽しみなイベントってあると思うんですけど、でもやっぱり一番は高専祭ではないでしょうか
- 高専祭は凄く楽しいんですが、でも色々困る時ってあると思います。
- 例えば、どこに何があるのか分からない。周りを歩いてる人がチュロスを食べてて自分も食べたいなって思ってもどこに売っているかが分からない。 だったり、後で食べようと思っていたのに最終日なんかだと知らない間に売り切れていたり 自分が屋台で物を売っている時に、沢山に商品を買って貰ったけど、実際のところどのくらい売り上げたか分かんない ずっと自分の屋台の近くにいるとどこが盛り上がってるのかが分かんない といったような問題があると思います。
- そこで私たちは、そんな高専祭にまつわる悩みをまるっと解決するアプリ、MATSURI MAPを開発しました。
- MATSURI MAPの機能は、オープンチャット機能、マップ機能、決済機能の3つです。
- それではデモを行います。（見れる方は見てください）
- 決済機能を導入することで、帳簿を付けるのが劇的に楽になります。お金を無くしたり、会計間違いをするといったようなミスが起こる心配もないです。 他にも、お釣りを返したりする必要がないのでレジの効率がUPしますし、コロナ対策にもなります。 また現金しか持っていない人用のフォームをあるため、クレカを持っていない人は会計出来ない、といった事態も防げます
- オープンチャット機能ではリアルタイム性のある情報が手に入ります。 それは～のたこ焼きが美味しかったーだったり、どこどこがもう直ぐ売り切れます、だったり、高専祭最終版の安売りの情報だったり そういったパンフレットなどでは手に入らないような情報を交わす事が出来るのがオープンチャットの魅力です
- マップ機能の魅力 マップ機能では売り上げの上位がパッとみて分かるため、例えばテニス部がめっちゃ売れてる！といったような驚きを提供できます。 そして詳細画面では売り上げも明確に出るため、上位と何円売り上げが離れてるからあと何個売ろう！といったような活力になります また、どこに何が売り出されているか分かるため、例えば皆が食べているあのチュロスどこの店なんだろうと思った時に探して回らなくて済みます
- 今回は時間がなかったので実装しませんでしたが、屋台のメニューや屋台自体のCRUDを実装したいです。現状は茨城高専のマップしか対応していませんが、ユーザに屋台の配置などを決めてもらえるようにすることで他の高専祭にも対応できるようになります。 また、決済した屋台の口コミを投稿できる機能 現在は売り上げ上位3位をハイライトする形になっていますが、どのくらい売ったのかを段階的に表示する機能も実装したかったです。 他にはクレジットカード情報の編集画面やクレジットカードの決済の実装も今回は間に合いませんでした。
- MATSURI MAPの構成を紹介します。 ウェブページはnuxt.jsとtailwind cssで構成されていて、マップ画面はleaf letを使っています。 Api サーバにはcloud functionsを採用していて、データベースにはfirestore、画像はCloud strageに保存しています。 そしてオーセンティケーションにはfirebase Authentication を用いています。
- 分担は私、伊藤がバックエンドを担当していて、 anonymous1、anonymous2がフロントエンドを担当しています。
- 苦労した点ですが、anonymous1と私は今回のハッカソンで初めて触る技術があったため、やはりそこに苦労しました。特に最初は勝手が分からず苦労しました。 ただ新しい技術を短期間でキャッチアップしなければならないというのがいい刺激なったというか、凄く成長出来たと感じています。 あと、一番工数がかかった機能はマップ画面で、寺門君が担当してくれましたが、マップ画面だけで初日が終わってしまいました。 まずfigmaで茨城高専のマップを作るところから実装していたので、本当に大変でした。 サーバサイドで工夫した点としては、なるべく早くフロント側との接合部分を作るようにしました。マップ機能などフロント側の実装が重いのを承知していたため、 機能の実装より先に固定のjsonを返すようにするなどして、フロント側が少しでも楽が出来るような、apiの実装を待たなければならない時間を無くすよう努めました。
- 皆さんもMATSURI MAPを使ってみてください 以上で発表を終わります