webui作成作業メモ1日目

NISHIO Hirokazu [Translate]
WebUI作成作業メモ1日目
from WebUI作成作業メモ
$ npx create-react-app keicho-webclient --template typescript
create-react-app
 --typescript ではダメになったっぽい
reportWebVitalsってのが新しく増えてる
ルーティングは一旦置いといてメインの画面を作ってみる
前回Appなら書いて行ったら肥大化してしまったので気をつける
Material-UI
$ npm install @material-ui/icons
AppBar

nisbot

チャット CSS
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き) | ナコさんのブログ | nako-log
 To import Sass files, you first need to install node-sass 
$ npm install node-sass
 Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 
$ npm install node-sass@4
チャット部分はコンポーネントに切り分けた
後で検討: 投稿の間の隙間が異なるの気になる
後で検討: ボットの発言だけコンテンツより長く伸びる


Githubに置いてNetlifyでデプロイする
Netlifyのウィザードに従うだけ
バッジを貼ってみた



次にやること
スマホで開くと文字が小さいときはズームしてしまう
直した
ボットの発言だけ伸びるのも嫌だったので全部伸ばしてみた

テキストエリアでの改行で発言追加
word-break: break-all;することにした(日本語ユーザなので)
テキストエリアでの改行でサーバを叩く
Flask-CORS
400 Bad Requestになった→JSからFlaskを叩いて400 Bad Request
レスポンスを表示する
とりあえずnopを返すようにして、無事表示できた
ページを開いた時点で新しいenvオブジェクトを作るようにする
env作成APIが必要
新規作成してIDを返す
サーバをいじるとき、いちいちデプロイしないでローカルで試したい
FlaskをHTTPSにする
必要なかった
動くようになった
ローカル 
サーバー
ローカルとかサーバーとかの表現が微妙なので整理した
上記のスクショはTypeScriptのクライアントをローカルとリモートと両方で試して問題なく動いたって話
後者は開発用PCではなくスマホからアクセスしている

次にやること
ログが表示できるようにする
Regroupにインポートしたり、Scrapboxに貼ったり
テストできるようにする
たぶん内部構造を少しいじりたくなると思うのだけど、テストなしでいじると地獄だから
学習データにするためや、Regroupにインポートするためにいじりたい
Firebaseに溜まったデータをローカルにダウンロードして解析できるようにする
どれをやるのか相談してみた
会話ログ20210120
Regroupにインポートできる形でのログ出力が大事