DongyoungKwon / Teleprompter-SST

Go to a project
Toggle navigation Toggle navigation pinning
DongyoungKwon
fb4b4cf5 1 parent c3e8c299

Add Express-server && Modify overall client-layout

Expand all
Inline Side-by-side
Showing 22 changed files with 266 additions and 88 deletions
......@@ -22,3 +22,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Google Speech-to-Text ssh
TelePrompt-SST-507a938e9249.json
\ No newline at end of file
......
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.eslintcache
npm-debug.log*
yarn-debug.log*
yarn-error.log*
\ No newline at end of file
{
"name": "teleprompter-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000/"
}
......@@ -9,7 +9,7 @@
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
......
......@@ -6,16 +6,6 @@
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
......
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import MainPage from './pages/MainPage';
import PrompterPage from './pages/PrompterPage';
class App extends Component {
render() {
return (
<>
<Route path="/" component={MainPage} exact={true} />
<Route path="/prompter" component={PrompterPage} exact={true} />
</>
);
}
}
export default App;
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: '"Noto Sans KR", serif',
}
})
ReactDOM.render(
<BrowserRouter>
<MuiThemeProvider theme={theme}><App /></MuiThemeProvider>
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
\ No newline at end of file
import React, { Component, Fragment } from 'react';
import './App.css';
import { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
import { post } from 'axios';
import { withStyles, Typography, Paper, Button, TextField } from '@material-ui/core';
// import PrompterPage from './PrompterPage';
const styles = theme => ({
root: {
......@@ -29,9 +30,9 @@ const styles = theme => ({
marginLeft: theme.spacing.unit * 20,
fontSize: '1rem',
},
});
});
class App extends Component {
class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -39,15 +40,51 @@ class App extends Component {
}
}
stateRefresh = () => {
this.setState({
script: '',
});
this.callApi()
.then(res => this.setState({script: res}))
.catch(err => console.log(err));
}
callApi = async () => {
const response = await fetch('/api/script');
const body = await response.json();
return body;
}
// Get Script
getScript = (e) => {
this.script = e.target.value;
}
// Send script to server && Move Next URL
// Execute addScript() && Move Next URL
handleScriptSubmit = (e) => {
console.log(this.script); // test
e.preventDefault()
this.addScript()
.then((response) => {
console.log(response.data);
this.stateRefresh();
})
this.setState({
script: ''
})
this.props.history.push('/prompter');
}
// Send script to Server
addScript = () => {
const url = '/api/script';
let scriptJSON = { script : this.script };
const config = {
headers: {
'content-type': 'application/json'
}
}
return post(url, JSON.stringify(scriptJSON), config);
}
render() {
const { classes } = this.props;
......@@ -55,7 +92,7 @@ class App extends Component {
<Fragment>
<Typography className={classes.title} variant="h6" color="inherit" noWrap>์Œ์„ฑ์— ๋งž์ถฐ ๋Œ€๋ณธ์„ ํ™”๋ฉด์— ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ถœ๋ ฅํ•˜๋Š” ํ”„๋กฌํ”„ํ„ฐ ์„œ๋น„์Šค</Typography>
<Paper className={classes.paper} elevation={3}>
<TextField id="outlined-textarea" label="Script๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”." fullWidth="true" rows={20} placeholder="Script" multiline variant="outlined" onChange={this.getScript}/>
<TextField id="outlined-textarea" label="Script๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”." fullWidth="true" rows={20} placeholder="Script" multiline variant="outlined" onChange={this.getScript} />
</Paper>
<Button className={classes.button} variant="contained" color="primary" size="medium" onClick={this.handleScriptSubmit}>์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.</Button>
</Fragment>
......@@ -63,4 +100,4 @@ class App extends Component {
}
}
export default withStyles(styles)(App);
\ No newline at end of file
export default withStyles(styles)(MainPage);
\ No newline at end of file
......
import React, { Component, Fragment } from 'react';
// import { withStyles, Typography, Paper, Button, TextField} from '@material-ui/core';
// const styles = theme => ({
// root: {
// '& .MuiTextField-root': {
// margin: theme.spacing(1),
// width: '100%',
// minWidth: 1080
// },
// },
// title: {
// marginTop: theme.spacing.unit * 5,
// textAlign: 'center',
// display: 'none',
// fontSize: '2.0rem',
// [theme.breakpoints.up('sm')]: {
// display: 'block',
// }
// },
// paper: {
// marginTop: theme.spacing.unit * 5,
// marginLeft: theme.spacing.unit * 20,
// marginRight: theme.spacing.unit * 20
// },
// button: {
// marginTop: theme.spacing.unit * 1,
// marginLeft: theme.spacing.unit * 20,
// fontSize: '1rem',
// },
// });
class PrompterPage extends Component {
render() {
// const { classes } = this.props;
return (
<Fragment>
<h1>{this.props.script}</h1>
</Fragment>
);
}
}
// export default withStyles(styles)(PrompterPage);
export default PrompterPage;
\ No newline at end of file
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
{
"name": "teleprompter-sst",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
"repository": {
"type": "git",
"url": "http://khuhub.khu.ac.kr/2016110307/Teleprompter-SST.git"
},
"author": "Dongyoung Kwon <ehddud2468@khu.ac.kr>",
"license": "MIT",
"dependencies": {
"body-parser": "^1.19.0",
"express": "^4.17.1",
"multer": "^1.4.2"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.6"
}
}
......
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
// const data = fs.readFileSync('./database.json');
// const conf = JSON.parse(data);
// const mysql = require('mysql');
const multer = require('multer');
// app.get('/api/customers', (req, res) => {
// connection.query(
// "SELECT * FROM course",
// (err, rows, fields) => {
// res.send(rows);
// }
// );
// });
// app.get('/api/customers/:id', (req, res) => {
// let sql = 'SELECT * FROM course WHERE id=?';
// let params = [req.params.id];
// connection.query(sql, params,
// (err, rows, fields) => {
// res.send(rows);
// }
// );
// });
let scriptReceived = "";
app.get('/api/script', (req, res) => {
res.send(
scriptReceived
)
});
app.post('/api/script', (req, res) => {
scriptReceived = req.body.script;
});
app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: '"Noto Sans KR", serif',
}
})
ReactDOM.render(<MuiThemeProvider theme={theme}><App /></MuiThemeProvider>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
// import React from 'react';
// import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';
// ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
// document.getElementById('root')
// );
// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();
This diff could not be displayed because it is too large.
  • DongyoungKwon
    @2016110307 commented

    ๋ณ€๊ฒฝ ์‚ฌํ•ญ

    1. Express ์ด์šฉํ•ด์„œ Server ๊ตฌ์ถ•
    2. ์ „์ฒด์ ์ธ Front-end ์ˆ˜์ •
      • react-router-dom ์ด์šฉํ•ด์„œ 2 Page๋กœ ๊ตฌ์„ฑ
      • ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ๋ฐ›์€ script๋ฅผ Back-end๋กœ ์ „์†กํ•˜๋„๋ก ๊ตฌํ˜„
    Edited