# Merucii再現アプリ作成

### 機能要件
- ユーザーがコインをためる
- ユーザーが別のユーザーにコインを送る
- コインを送るときにメッセージを送れる
- 持っているコインを消費して交換することができる
- 毎週決まったコインが配布される
- 配布用コインは残らない

### あってもよい機能
- 集計
- ランキング等、可視化するもの
- 匿名投稿
- コメントに返信できたらまあいい
- ボーナスタイム
---
### できていること
- ユーザ情報の登録・参照
- firebaseのauthとfirestoreを用いてｱｶｳﾝﾄ登録やﾛｸﾞｲﾝができる
- ユーザデータの参照にﾛｰｶﾙｽﾄﾚｰｼﾞを用いているため改善したい（が実装が少々大変）
- authにe-mailなどのユーザの登録情報、firestoreのusersコレクションに所持コイン数などのユーザ情報を入れている
- firestoreの内容
- id: ユーザのID
- name: ユーザの名前
- distributedCoin: ユーザの配布用コイン所持数
- receivedCoin: ユーザの受け取ったコイン所持数
- distributedCount: ユーザが他ユーザにコインを送った回数
- receivedCount: ユーザが他ユーザからコインを受け取った回数

- コインの定期配布機能
- date-fnsの関数を用いてあらかじめ設定している配布時間と現在時間を比較し、現在時間が配布時間を過ぎていた時にusersのreceiverCoinを変更し、設定時間を変更する
- 設定している配布時間はfirestoreのbonusCoinDayに保存している

- コインとメッセージを他者に送る機能
- セレクトボックスで送りたい相手を複数選択できる
- 送るコイン数は100枚, 300枚, 500枚の中から選んでいる
- 「コインを送る」ボタンを押すと確認ダイアログを開き、ダイアログ内の「送る」ボタンを押すとfirestoreのpostsコレクションに
- time: 送った時間
- sender: 送り手
- receivers: 受け手
- send_amount 送ったコインの枚数
- comment: メッセージ
として送信している

- 景品交換機能
- コインを消費して景品と交換する機能
- 景品交換時に消費されるコインは、firestoreのusersにあるreceivedCoinと連動している。
- trade2000/3000のメソッドで行っている。
- userの中に現在ログインしているアカウントのデータを入れ、そのreceivedCoinから2000/3000ひかれた値をとる。
- firestoreのusersの中からログインしているアカウントと同じものを探して、そのreceivedCoinを先ほど取ったreceivedCoin-2000/3000した値で更新することで、コインが消費されたこととしている。
- ローカルストレージにあるユーザ情報から、どのユーザが景品を交換しようとしているのかを判断し、その人のusersのデータと連動するようにしている
- 現在2000コインの景品と3000コインの景品のところで使用している画像は適当にインターネットから持ってきた画像
- 変更したいときはitems2000などにあるsrcのURLを変更することで変えられる

- タイムライン
- 「誰が」「誰に」「どのくらいのコイン」を「何というコメント」と一緒に「いつ」送ったのかを過去10件分表示する機能
- これらのデータはfirestoreのpostsにあるデータから持ってきている
- また、全てのコインの送受信の情報、自分が受け取ったコインの情報、自分が送ったコインの情報を選択してみる機能もある。
- ローカルストレージにあるログインしているユーザの情報から、どのユーザが見ているのかを判断する。
- そのユーザが送った・受け取ったコインの情報を調べて表示している
- これを調べるときに、matchを使って調べているため、それが原因でバグが起きるかもしれない。
- test1さんとtest10さんがいる場合、test1さんの受け取った/送ったの情報にtest10さんの情報が出てくるかもしれない。
- whereはうまく使えなかった。
---
### 主なフォルダ内のファイル名と役割
- components フォルダ内
- loginState.vue
- ホーム画面や景品交換の画面の左にユーザ情報を載せる
- Nuxtlogo.vue
- nuxt.jsのロゴを載せる(未使用)
- timeline.vue
- ホーム画面にタイムラインを載せる
- tutorial.vue
- vueのチュートリアル等が書かれたファイル(未使用)
- VuetifyLogo.vue
- Vuetifyのロゴを載せる(未使用)

- layouts フォルダ内
- default.vue
- 全てのページにヘッダーやフッターを載せる
- error.vue
- エラーが起きた際や無効なurlに飛んだ際に書かれた内容を載せる

- pages フォルダ内
- chat.vue
- firestoreの動作確認用に使用した(現在未使用)
- index.vue
- ホーム画面を載せる
- inspire.vue
- プロジェクトを始めた際にできたデフォルトファイル(未使用)
- login.vue
- ログイン画面を載せる
- sendCoin.vue
- 他者にコインを送る際の画面を載せる
- signUp.vue
- ｱｶｳﾝﾄ登録画面を載せる
- tradeItem.vue
- 景品交換画面を載せる
---
### 参考にしたサイト
- 公式ドキュメント
- [firestore データのクラウド管理](https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja)
- [firestore onSnapshot リアルタイムのアップデートを入手](https://firebase.google.com/docs/firestore/query-data/listen?hl=ja)
- [firebase auth ユーザ認証等](https://firebase.google.com/docs/auth/web/password-auth?hl=ja)
- [date-fns 時間取得系](https://date-fns.org/v2.29.2/docs/Getting-Started)
- [Vue ウェブのUI開発に有効なjsフレームワーク](https://jp.vuejs.org/v2/guide/syntax.html)
- [vuetify 便利なUIコンポーネント マテリアルデザイン](https://vuetifyjs.com/ja/introduction/why-vuetify/)

- ○○のやり方シリーズ
- [nuxt.js 起動方法など](https://reffect.co.jp/vue/nuxt-js-first-step)
- [firebase データ操作](https://t8.dev/ja/blog/firebase_firestore_nuxtjs/)
- [localStorage ウェブにデータを保存する](https://www.granfairs.com/blog/staff/local-storage-01)

- 便利な関数シリーズ
- [JavaScript 特定の文字列を含むかどうか](https://qiita.com/shimajiri/items/a2d79d9aa1323da972f3)
- [find 最初に条件に合った配列を返す](https://ginpen.com/2018/12/04/array-find/)
- [filter 条件に合った配列を複数個返す](https://techacademy.jp/magazine/15575)
- [指定の文字列/配列を削除](https://webukatu.com/wordpress/blog/9885/)
- [forEach for文の拡張](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- [firestore where クエリ　条件　抽出](https://zenn.dev/tentel/articles/ea7d5c03e68e6d142d98)
- その他
- [vueのライフサイクル](https://qiita.com/chan_kaku/items/7f3233053b0e209ef355)
- [vsCodeでvue開発をするとき](https://qiita.com/tetusan/items/81b1f863f28731dcb19c)