ものの貸し借りができるサービスがあまりなく、特に自分自身が体験したことから工具が貸し借りできるサービスがあれば面白そうだと感じた。 工具を貸し借りできるアイデアとしてこちらのアイデアがあるが、これを参考に使いやすい工具の貸し借りができるアプリを作る。勉強も兼ねていろんな機能や技術を取り入れていきたい。
- node
- react & redux
- sql
- firebase(Authentication, Storage)
sqlを起動
brew services start [email protected] // sqlをhomebrewでインストールした場合
brew services list // 起動しているサービスを確認する
mysql -u arakappa -p // sqlのシェルを起動
exit // sqlのシェルを閉じる
brew services stop [email protected] // sqlを停止
バックエンド側 .envファイルを作成し、以下のフォーマットでCHATKITのキーとインスタンスロケータを入力
PORT = hoge
CHATKIT_INSTANCE_LOCATOR = hoge
CHATKIT_SECRET_KEY = huga
フロントエンド側 .envファイルを作成し、以下のフォーマットでfirebaseのキーなどを入力 create-react-appでプロジェクトを作成した場合、dotenvモジュールをインストールする必要はない、REACT_APP_で宣言しなければならない
REACT_APP_FIREBASE_KEY = "hoge"
REACT_APP_AUTH_DOMAIN = "hoge"
REACT_APP_DATABASE_URL = "hoge"
REACT_APP_PROJECT_ID = "hoge"
REACT_APP_MESSAGINGSENDER_ID = "hoge"
REACT_APP_APP_ID = "hoge"
REACT_APP_STORAGE_BUCKET = "hoge"
フロント側とサーバ側二つを起動
npm install
cd kashitaruApp
npm start // サーバ側起動
cd kashitaruApp/client
npm start // フロント側起動
- buttonコンポーネントから遷移する場合
- シンプルな遷移方法今回はこっちを使用
- Drawerのリストの遷移とりあえず使用
rentPageでuseEffectを使用しているが、useEffect内で非同期処理をする場合、二つ目の引数に空の配列を渡す必要がある。そうしないと無限ループしてしまう。
server.jsをbabel.jsによってES6でかけるようにしているが、ES6で@pusher/chatkit-serverを使う場合、
const Chatkit = require('@pusher/chatkit-server')
const chatkit = new Chatkit.default({
instanceLocator: "v1:us1-staging:...",
key: "9f0ae37c-1310-4fb2-b517...",
})
の「.default」を省略できる。ここを参照
この関数には7個のアクションと二つのステートを渡す必要がる。reduxにコンテナされた親から子にこれらを渡す場合、スプレッド構文を使うことでまとめて渡すことができる。currentUserとcurrentRoomというステートでcurrentRoomだけアクションたちとまとめて渡しているのは、ログインしてチャットキットインスタンスから返ってきたcurrentUserをステートに保存するのを待たずにそのままこの関数の引数として渡したいから。
firebase認証にしていなかった時は名前とメールアドレスの二つによってユーザを判断していたが、それがuid一つで済むようになる。uidの管理に気をつける必要があり、クライアントではuidを絶対に発行せず、アクセストークンを発行しそれを元にサーバーでfirebaseからuidを入手しなければならない。
ログインした時にユーザ情報を持ってきているため、ログインしていなければプロフィール画面は見ることができない。
共通化したものを入れていく
- create-react-appでjestとenzymeを使ってテストをする際の環境構築create-react-app公式
- そもそものテストの仕方は別で調べる必要があるenzyme公式
- テストについて適当にまとめたQiita
アクションの名前の付け方を最初から決めておけばよかった 画面の数や機能を最初にある程度決めておけばよかった チャットアイコンを押したらリダイレクトするだけなのに、なぜかアイコンを押したらブール値のトグルによってリダイレクトをするようにしてしまった。