hinata-blogs's Issues
チャット画面「リッチ化」
- lineのグループのような見た目にする
希望要件
- アイコンが有り、吹き出しの上にユーザーのニックネームを表示させる。
- 吹き出し内の時刻を消すことができれば消し、吹き出しの左に表示させる
部屋一覧からその部屋に入ったとき、違う部屋で発言したメッセージも表示されている。
- みーぱんの部屋でメッセージを送り、部屋に戻る。そしてひなのの部屋に入るとみーぱんの部屋のメッセージが表示されている。
現在いるroomIdを取得する
- 推しメンが二人いる以上現在どの部屋にいるのかについて判断する方法がほしい
現状の不具合
- 登録時、アイコンを設定した後にメアドを変更すると、そのメアドの画像が見つからないため、エラーが起こる。
- 登録時、メアドが既に使われてた場合などメアドを変更して再度登録しても上のやつと同じエラーが起こる。
- 編集を反映するボタンを2回押さないとだめ。
ログアウトを行う→新規登録をする→エラー発生
ログアウトを行う→新規登録をする→エラー発生
原因→新規登録後userに情報が入るのはそりゃそう。でもroomIdは入ってちゃダメなのに入っている。なので、tabのところに遷移する。
Originally posted by @yuki-hinata in #50 (comment)
デモアプリの作成
- これを使ってアプリの作成イメージを固める。仕様の理解がまだ深いうちに決めてしまう。
- 期間は3時間ほど。これに凝る必要はなし。イメージを固める。
推しメン診断画面作成
主な機能
- はい/いいえの2択で選択できるようにして、その答えによって次に出てくる質問を変更する。
画面の挙動やデザイン
- 画面全体に質問が出る感じ。で、OKボタンやボタンを押すと、次の画面へ行き、2個めの質問が出る。
方法について
- if文とかで判断するのが良いのだろうが、ネストがかなり深くなりそう
-
アイコンについて最初に設定されたものから変更するときに、ユーザーのメアドでストレージに保存しているので、違う画像が表示される可能性あり
firebaseのデータ取得hooksの作成
作ろうと感じたきっかけ
- いちいちcollection使って〜、参照取得して〜とかやるのが面倒。内部処理はだいたい同じなので、なんか一つにまとめたいなと思う。
注意
- 優先度はめちゃ低いので、
タブナビゲーターの実装
- 一番下の画面にチャットの部屋一覧が表示される画面とユーザーのニックネーム、プロフィール画像を変更できる画面の2つを行き来できるようにする。
診断画面のテスト作成
- 手動で確認はできるが、一々会員登録を踏まないといけないため、かなり手間がかかる。そのため、テストコードを書くのが、一番効率が良く、安心だと思う。
renderActionをクリックするとアプリが落ちる
- renderActionを使って、iconを表示させる。その後クリックするとアプリが落ちる
serverディレクトリの実装
新規登録画面の作成
- トップ画面の「新規登録を行う」をpushすると、その画面に行く。
- デモアプリを参考に
不具合修正
- 会員登録を行う際に、
storage/object-not-found
エラーが発生する。 - firestoreのfirstAnswerに空文字列が入る。
- メアドを変えて、再度会員登録しようとしてもできない。(アイコンを変更すればできる)→userの挙動によるので、後でいい。
push通知の実装
要件
- 自分の所属している部屋で自分以外の誰かが発言を行った時、push通知を受信できるようにする。
- アプリを開いているときにはpush通知は出さずに、アプリを裏で開きっぱなし(フォアグラウンド)、キルしている場合のみpush通知(イメージは上から何か出てくるやつ)を受け取る。
使用するライブラリ・メソッド
- expo-notification
- cloud functions
- sdk-node
推しが二人いるときでも一人しか表示されない
表示についてはうまくいきそう→一人しかいないときにレンダリングが走ってしまい、それが保持されたままなので、2人推しメンがいるのに1人しか表示されていない。
Originally posted by @yuki-hinata in #57 (comment)
画面遷移時に一瞬undefになってしまう。そのせいでfalse側の質問が表示されてしまう。
-
仮説→一瞬useStateで保持した値が、undefinedになってしまうため、それがfalse認定されてしまうため、一瞬false側の質問が表示されてしまう。
-
解決策→undefinedのときにloadingを表示できるようにする。
チャット画面実装
- まずは推しメンが同じ人同士が連絡を取れるようにしたい。
- これを更に分解すると、「送信処理の実装」「推しメンが同じ人同士とはどう判断するか?」の2つに分かれるはず。
ログアウト処理時の不具合
- onSnapshotの購読を解除していないことによって、生じるエラーがある。
- ログアウトを行って、新規登録するとチャット確認画面が映る
firestore過剰読み出し[至急]
トップ画面の作成
- アプリを開いたときに出力される画面の作成。
- 表示すべきは新規登録画面へとナビゲートするボタンの作成
チャット部屋への入室確認画面の作成
-
概要
推しメン決定画面において、「この推しメンを決定する」を押したあとに遷移する画面。 -
要件
タイトル→「チャット部屋に入る」
説明文→「チャット部屋についての説明」を書く。
ボタン→チャットのルームに遷移するボタンと自分の所属しているルームが表示されている「ホーム画面」のようなものに移動する「戻る」ボタンの2つ -
今イシューで満たすこと
チャットの実装が最優先であると思うので、チャットの画面へ遷移するナビゲーションのみ実装する。
所属部屋一覧表示画面の実装
- チャット画面から戻る際に、行くのがこの画面。自分の所属しているチャット部屋が一覧で表示され、その名前の部屋をクリックすると再度チャットの画面に行ける。
- 部屋に戻った後と前で表示されるチャットの内容が変化してはいけない。
- レイアウト的には左に推しメンの画像(丸)。その右に「小坂菜緒のチャットルーム」みたいな感じで表示したい。
ユーザープロフィール編集画面の実装
- tabナビゲーター実装後に行う。
- 左にそのユーザーが設定したアイコン画像を表示させ、その右にニックネームを表示。そしてその右に「編集」ボタンを作り、そこを押すと編集画面が表示され、アイコン画像、ニックネームの変更することが可能。
- 「新規登録画面」を参考に実装しよう
アプリ開いたときにチャット画面を表示させる。
要件
- expoを開いた瞬間、チャット画面一覧を表示させる。
- イメージはマナリンク。あれも一回キルしても再度開くと、以前ログインしたユーザーの情報が表示されている。
情報
- getAuth→firebase
診断画面を一つに
今ははいを押すとナビゲーションして、次の質問とかだが、はいを押すと次の質問とかにしたい。
課題
- 公式を読んでこれだなというのがわかる→それを「こう使う」と上手くいく!というのがまだわからない
eslintの追加
- 見やすいコードを書くために、セットアップが必要。
jest 27.5.1へのアップデート
診断が終わったかどうかを判断する変数の検討
- 以前はroomIdが存在しているかどうかで診断を途中でやめたとしても、最初から診断させるようにしたが、推しメン複数保持機能の追加によって、その判断ができなくなった。そのため、roomIdの代わりとなるものを作るor探す。
- loadingはだめ。障壁となるのはwhereにundefinedが入ってしまうことによる、エラーの発生。これが起きるとTop画面から進まない。
新規登録画面でのレンダリング回数の節約
- consoleを埋め込んで確認したところ、インプット欄に文字入力を続けるたびにレンダリングが走っていた。
React 18.0.0へのアップデート
roomListの表示
https://reactnativeelements.com/docs/2.3.2/listitem
- これ使ってmapする。そのためにroomIdが入った配列を取ってこなければならない。
RootNavigatorの書き換え
- 画面遷移は可能であるが、型エラーになってしまう。
- 公式ドキュメントを参考に、型指定を行う。
チャット画面「同じ推しメン判断方法」
#30 の完成へやるべきこと。
- YourRecommendのuserIdsを取ってきて、そのidをsetMessage内のuserにセットする。感じ
推しメンを1人以上持てるようにする。
要件
- 現状は推しメンを一人しか持てない状況であるが、2人以上持てるようにする。それに伴い1人のユーザーが複数の部屋に所属できるようになるし、部屋一覧に複数の部屋が表示されるようになる。
仕様
- 推しメン決定の画面の次に「2推し」診断画面を追加する。「診断する」ボタンと気になるメンバーを設定しない「設定しない」ボタンを追加する。
- 「設定しない」ボタンを押した際には、現在と同じルーティングをする。「診断する」ボタンを押した際には、再診断のロジックと同じように質問の一番最初に遷移させる。
- それが終了した際の画面も「推しメン決定画面」と同じでいい。
- その後「チャット入室画面」には遷移するが、そこが問題。→チャットに遷移するのは第1推しメンの部屋でいい。第2推しメンの部屋はルーム一覧画面に表示する感じ。入室時間(enterRoomTime)は共通で良い。
関係しそうなファイル
- YourRecommend.tsx
- RoomList.tsx
firestoreにiconに有効なURIを埋め込む
- チャットでのアイコン、プロフィール編集画面でユーザーのアイコンを保持しておく必要があるため、firestoreで保存されたアイコンのURIを取ってきてきて表示する必要がある。
- そのため、firestoreに保存されたアイコンのURIが有効でないと、表示できない。
typescript 4.6.3へのアップデート
ニックネーム、アイコンを変更してもチャット画面では反映されていない。
- 設定画面でアイコン、ニックネームを変更後、チャット画面を見ると前のアイコンが表示されている。
チャット画面「送信処理の実装」
#30 の完成へやるべきこと。
- 具体的にはonSendの中をどう実装するのか?
チャットの履歴が見れない
- 一度Backボタンなど、前の画面に戻り、再度チャット部屋に入ると前見ることができていたメッセージが表示されていない。
- useEffectの第2引数がnameだけだからレンダリングされず、表示がされないと考える。
バリデーションの追加
PUSH通知の調査
-
push通知にはローカル通知とリモート通知の2つがある。ローカル通知は指定されたコンテンツや配信条件に基づいてユーザーへ通知を送る。今回はローカル通知。
-
FCMを使うと自分でswiftなどのネイティブ言語で書かなければいけないので、厳しい。だが、expoが自動でそこの分岐もやってくれるので、expo-notificationを使う。
-
参考サイト(expo-notification + cloud functions)
-
https://docs.expo.dev/push-notifications/sending-notifications/
-
参考サイト(FCM + Cloud function)
チャット画面内でのシステムメッセージの表示(優先度中)
現状
- ユーザーが新たにチャットルームに入った時に何も表示されず、現状その部屋に人が何人いるのか分からない。
解決策
- その部屋にユーザーが追加されたときに、システムメッセージで「〜が新たに入室しました」みたいなメッセージを表示する。また、チャット画面の名前の隣に設定ボタンを設置し、そこからその部屋にいるユーザーを見れるように。
iconにGBが大きい画像を設定すると、expoが落ちる。
-
調査すべきはどのぐらいの大きさなら、アプリが落ちないか。ここをはっきりさせれば、解決策の検討もしやすい。
-
考えられる解決策→アイコンの隣に「〇〇GB以上の画像は指定できません」みたいな風に表示する。
expoでのファイル構造の理解
- screenに画面表示を行いたいものを追加するのは分かる。ただその作ったコンポーネントをどこで、importして使うのかがいまいちわからないので、調べる。
- #4
- これとも関連性が高く、トップページに表示するscreenの設定法もわかればスムーズ。
giftedcahtのonSend切り出し
- onSendの処理だけChatScreen上に書いたままなので、その部分を切り出したい。
- 一応ファイル自体は書いてあるが、それをonSend内で使用したとき、送った文面が表示されなかったため、そこで止まっている状況。
- 調査状況→onSnapshotの前のconsoleは実行されるが、docChangeの中のconsoleは実行されない。
新規登録画面の作成
- https://www.fluidui.com/
- これをあくまで参考に「新規登録画面」を作成する。
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.