$ npx create-react-app keicho-webclient --template typescript
- create-react-app
- It seems
--typescript
no longer works.
- Thereās a new one called reportWebVitals.
- Iāll put the routing aside for now and try to make the main screen.
- If itās App last time, Iāll be careful because it got bloated when I went to write it.
- Material-UI
-
$ npm install @material-ui/icons
-
AppBar
-
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
-
- The chat portion was carved into components.
- Consider later: Iām concerned about the different gaps between posts.
- Consider later: only the botās remarks extend longer than the content.
Put it on Github and deploy with Netlify.
- Just follow the Netlify wizard
- I put a badge on it.
What to do next
-
When I open it on my phone, I zoom in when the text is small.
- Fixed.
- I didnāt want to stretch only what the bot said, so I stretched it all out.
-
Add remarks with line breaks in text area
-
- word-break: break-all; (since I am a Japanese user)
-
-
Hit the server with a new line in the text area.
- Flask-CORS
- 400 Bad Request ā 400 Bad Request by hitting Flask from JS.
-
Show response
- At any rate, I made it return nop and was able to display it successfully.
-
Make it so that a new env object is created when the page is opened.
- Requires env creation API
- Create a new one and return ID
- When I tweak a server, I want to try it out locally without deploying it every time.
- Flask to HTTPS
- Wasnāt necessary.
-
Itās working.
- local
- server
- local
-
Iāve sorted out some of the more subtle expressions like local and server.
- The above screener says he tried the TypeScript client both locally and remotely and it worked fine.
- The latter is accessed from a smartphone, not a development PC.
What to do next
- Allow logs to be displayed
- Import into Regroup, put on Scrapbox, etc.
- Make it testable
- Maybe youāll want to tinker with the internals a bit, but tinkering without testing is hell.
- I want to tinker with it to make it into training data or to import it into Regroup.
- Maybe youāll want to tinker with the internals a bit, but tinkering without testing is hell.
- Allow data accumulated in Firebase to be downloaded locally for analysis
- We discussed which one to do.
- Conversation Log 20210120
- Log output in a form that can be imported into Regroup is important.
This page is auto-translated from /nishio/WebUIä½ęä½ę„ć”ć¢1ę„ē® using DeepL. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at @nishio_en. Iām very happy to spread my thought to non-Japanese readers.