This is a chat interface built in React to be run on AWS EC2 for a JATOS study.
For setting up and running the project on an AWS EC2 instance: You must first set up your AWS EC2 instance to be used with JATOS according to these instructions: https://www.jatos.org/JATOS-in-Amazons-Cloud-without-Docker.html For step 7 in the instructions, leave the port number as the default (9000). Remember to also install Apache web server (httpd) on your EC2 instance to access JATOS through http/https.
Additionally, clone this repo on your local machine. On your local machine, open the repo and look for /src/redirect.html. Zip that file and rename it to anything with .jzip as the extension.
Once you have installed JATOS and Apache onto your EC2 instance run sudo systemctl start httpd.service, and then navigate to the jatos_linux_java directory and run ./loader.sh start. Then access your EC2 through the public url on port 9000 (e.g. 'something.com:9000'). You will be prompted to log into JATOS. (the default username and password is 'admin', which you can change later.) Hit "import study" at the top of the dashboard and import the jzip folder from your local machine. You have now imported the study.
When you have finished these instructions, clone the repo onto your EC2 instance by running # git clone https://github.com/Lam-Richard/keystrokes-collablab.git. You may need to install git and nodejs onto your EC2 instance as well (sudo yum install git -y && sudo yum install nodejs -y). Finally run screen npm start in the repo to make sure localhost:3000 stays running on the EC2 instance to be accessed by the JATOS study.
On the dashboard, go to "Worker and Batch Manager" and get the study's link for "General Multiple" workers. You can now distribute this link on Prolific to recruit participants. You can verify that the study is running by opening 2 tabs and going to the link for "General Multiple" workers generated by your study.
The data collected for the study is hosted on a Realtime Firebase Database which you can access through the Firebase console. The socket.io server is hosted on Heroku (the source code for which is in the other repo).
For editing the study (e.g. changing the delay for which alerts pop up to remind participants that they're time is running out to respond to certain prompts), open /src/App.js with an editor like Vim, or edit the file locally on your machine / push to git and git pull from the EC2 instance.
About the files/directories:
database.rules.json, firebase.json, and .firebaserc => These files basically tell Firebase how to deploy your code (if you choose to do so). Currently the EC2 is running this on localhost:3000 so nothing about hosting in these files is relevant.
package.json, package-lock.json => Information about packages installed.
.gitignore => Tells GitHub what files not to commit to GitHub
In the .firebase folder => Irrelevant, it's just some cache file that can probably be deleted.
In the SRC Folder => The only things that are important are index.js, App.js, redirect.html, and App.css - the rest is boilerplate code generated by create-react-app (check the React section below). index.js is the least important because all it's doing is rendering everything in App.js. App.css is just a css file that modifies the JSX (HTML-like syntax in the return statement of function App in App.js) like how normal CSS would do to HTML pages. redirect.html is the html file that needs to be jzipped and imported into the JATOS interface.
In the Public Folder => Honestly not too sure about the specifics but mostly irrelevant; React does some work to make sure App.js gets rendered and index.html in this folder probably has something to do with it.
That's it! If you are new to React, you can read the following boilerplate README that acccompanies all projects built in react.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify