1日でリアルタイムチャットを作る。
作ります。後から加筆していく。
10:30 Start!
まずは大まかな要件
- チャンネルの概念がある（slackのような）
- 1チャンネル１０００ポストまで（2chのような）
- 匿名で投稿
- 無限ふぁぼ（ 超重要！）
11:00
スーパーでネギトロを買ってネギトロ丼を食べる。 アニメを見る。 "ユーリ!!! on ICE"と"ガーリッシュナンバー"。よい。
11:30
少し細かく
firebaseのリアルタイムDB使う
- channel_indexes:Array
- (name):String
- channels:Array
- (channel):Object
- id
- message:Text
- posted_at:Datetime
- fabo:Integer こんなもんで良さそう
- (channel):Object
ルーティングとか
/chennel_name#messageID
UIコンポーネント
これ使う。
12:00
プロジェクトを作り始める
プロジェクト名はもちろんtimes-nakajima
Nekojimaで。
やるぞ。 firebaseのほうのプロジェクトも作る。
DBを軽くつくっておく。
{
"rules": {
".read": "true",
".write": "true"
}
}
ルールは一旦これでいいや。
DBもこんなもんで。
frameworkもいれる
これつかう。
12:30
とりあえず何かしらが公開されている状態にする。 FirebaseのHostingを使う。 react-boilerplateでビルドした後の静的ファイルを公開する形にする想定。 でもいったんてきとーに内容書いてデプロイ。 あとはカスタムドメインを通す。
もちっと時間がかかる。
boilerplateの初期設定
$ npm run setup $ npm run clean
これで初期化される。
あとは試しにビルドしてみる
$ npm run build
出来たけど/buildに吐き出された。
firebaseのデプロイ対象ディレクトリは/publicなので、これを変える。
{
...
"hosting": {
"public": "build"
}
}
サイドdeployする。
よしよし。 そんなこんなでSSL通ったぞ。 DNSレコード書き換えて... レコード設定ミスっていたのでもう少し時間がかかりそう。３０分ぐらい？
13:00
UIframeworkと、firabaseを差し込んでいく。
<MuiThemeProvider>を全体に適応させる。
はいった。
$ npm install reactfire firebase react-mixin@2 --save
firebaseとreactfireをいれる。 react-mixinはReactコンポーネントにfirebaseリアルタイムDBとのバインディング機能をアドオンするために使う。
つながってるか確認するためのデータをRealtime Databaseに入れる。
フロント側も適当な場所で
var ref = firebase.database().ref("home_message");
this.bindAsObject(ref, "homeMessage");
とかする。
ほいきた！
とかやってたらドメイン設定完了したっぽい ビルド＆デプロイしよう。
できｔ.. てない！反映されない！Nannde!
14:00
デプロイで躓く わからん！反映に時間かかるのかな。 ちょっと休憩しよう。
16:00
この時点でもう結構色んな問題が起こっていることに気づいた。 少しづつ直していく。
17:45
materialUIがうまく扱えなくてどうしよう。一旦寝るという選択肢。
19:00
起きた。 github.com
寝たらすぐに解決した。よかった。
20:30
再開 チャンネル切り替えと追加の機能をつける。
だめでしたー！！！！
思いの外バグ踏んだのと、firebaseの扱いがうまくいかなかったので未完。 とりあえずURLだけ貼っておきます。
