Add Express-server && Modify overall client-layout

@@ -22,3 +22,6 @@
 npm-debug.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-debug.log*
 yarn-error.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"
       name="description"
       content="Web site created using create-react-app"
       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
       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/
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
     }
   ],
   ],
   "start_url": ".",
   "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 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 => ({
 const styles = theme => ({
-    root: {
-      '& .MuiTextField-root': {
-        margin: theme.spacing(1),
-        width: '100%',
-        minWidth: 1080
-      },
+  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 App extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            script: ''
-        }
+  },
+  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',
+  },
+});
 
 
-    // Get Script
-    getScript = (e) => {
-        this.script = e.target.value;
+class MainPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      script: ''
     }
     }
+  }
 
 
-    // Send script to server && Move Next URL
-    handleScriptSubmit = (e) => {
-        console.log(this.script);   // test
-    }
+  stateRefresh = () => {
+    this.setState({
+      script: '',
+    });
+    this.callApi()
+      .then(res => this.setState({script: res}))
+      .catch(err => console.log(err));
+  }
 
 
-    render() {
-        const { classes } = this.props;
-        return (
-            <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}/>
-                </Paper>
-                <Button className={classes.button} variant="contained" color="primary" size="medium" onClick={this.handleScriptSubmit}>시작합니다.</Button>
-            </Fragment>
-        );
+  callApi = async () => {
+    const response = await fetch('/api/script');
+    const body = await response.json();
+    return body;
+  }
+
+  // Get Script
+  getScript = (e) => {
+    this.script = e.target.value;
+  }
+
+  // Execute addScript() && Move Next URL
+  handleScriptSubmit = (e) => {
+    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;
+    return (
+      <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} />
+        </Paper>
+        <Button className={classes.button} variant="contained" color="primary" size="medium" onClick={this.handleScriptSubmit}>시작합니다.</Button>
+      </Fragment>
+    );
+  }
 }
 }
 
 
-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

 {
 {
   "name": "teleprompter-sst",
   "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": {
   "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();

변경 사항

1. Express 이용해서 Server 구축
2. 전체적인 Front-end 수정
   • react-router-dom 이용해서 2 Page로 구성
   • 사용자로부터 입력받은 script를 Back-end로 전송하도록 구현

Edited 2020-12-03 07:21:04 UTC