-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
57 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,16 +2,16 @@ | |
|
||
Next, we need to connect your project with Firebase, so we can deploy web experiments. | ||
|
||
![Setup](img/system_testingzone.png) | ||
![Setup](../img/system_testingzone.png) | ||
|
||
Move to the `testing_zone` folder in your project (e.g., locally or on GitHub Codespaces). The `testing_zone` contains a basic template for a website that is compatible with the [AutoRA Experimentation Manager for Firebase](https://autoresearch.github.io/autora/user-guide/experiment-runners/experimentation-managers/firebase/) and the [AutoRA Recruitment Manager for Prolific](https://autoresearch.github.io/autora/user-guide/experiment-runners/recruitment-managers/prolific/). | ||
|
||
## Copy Web App Credentials From Firebase | ||
|
||
1. Navigate to the [Firebase console](https://console.firebase.google.com/) and select the project you created. | ||
2. On the gear-symbol next to `Project Overview`, you can find `project settings`. | ||
![project_settings.png](img/project_settings.png) | ||
3. You will find credentials in the tab `general` (you might have to scroll down). They should contain something like this | ||
- Navigate to the [Firebase console](https://console.firebase.google.com/) and select the project you created. | ||
- On the gear-symbol next to `Project Overview`, you can find `Project settings`. | ||
![project_settings.png](../img/project_settings.png) | ||
- You will find credentials in the tab `general` (you might have to scroll down). They should contain something like this | ||
```javascript | ||
// Your web app's Firebase configuration | ||
const firebaseConfig = { | ||
|
@@ -23,7 +23,7 @@ const firebaseConfig = { | |
appId: "1:3328439208594:web:136f203fe48f63ea4b" | ||
}; | ||
``` | ||
4. Copy the credentials to the corresponding variables in the `.env` file in the `testing_zone` folder that was created on your system using create-react-app or cookiecutter. After you copied the credentials, it should look something like this: | ||
- Copy the credentials to the corresponding variables in the `.env` file in the `testing_zone` folder that was created on your system using create-react-app or cookiecutter. After you copied the credentials, it should look something like this: | ||
```dotenv | ||
REACT_APP_apiKey="AIzaadskKasjjasjKqsIt-UPXSDsdkdDhjBDU" | ||
REACT_APP_authDomain="closed-loop-study.firebaseapp.com" | ||
|
@@ -40,9 +40,9 @@ For now, we will leave ``REACT_APP_useProlificId="False"``. We will change these | |
|
||
## Configure Your Project For Firebase | ||
|
||
Now make sure to ``cd`` into the `testing_zone` folder in your terminal. | ||
- Make sure to ``cd`` into the `testing_zone` folder in your terminal. | ||
|
||
In the `testing_zone` folder, enter the following commands in your terminal: | ||
- In the `testing_zone` folder, enter the following commands in your terminal: | ||
First log in to your Firebase account using | ||
|
||
```shell | ||
|
@@ -53,36 +53,37 @@ or (if you run this in codespace) | |
firebase login --no-localhost | ||
``` | ||
|
||
If asked to collect CLI and Emulator Suite usage information, you can choose to answer yes or no. | ||
- If asked to collect CLI and Emulator Suite usage information, you can choose to answer yes or no. | ||
|
||
!!! hint | ||
You may be asked to authenticate. Follow the instructions in your terminal to authenticate your account. This will require following a link that requires you to sign in with your Google account. Once you selected a Google account. Follow the setup and allow Firebase CLI access. Click ``Yes, I just ran this command.`` Assuming this is your session ID, click ``Yes, this is my session ID``. Next, you are taken to a long string that you can copy into the terminal. It should look something like this: `2/0AVGKJADKHAXKg4ML_Usub28sdhjdskjsdktwWeAJASKFCjrKMck-SBEfgsddDmKQlfrDSQ`. | ||
|
||
Then initialize the Firebase project in the `testing_zone` folder by running: | ||
- Then initialize the Firebase project in the `testing_zone` folder by running: | ||
```shell | ||
firebase init | ||
``` | ||
An interactive initialization process will now run in your command line. You can select options with SPACE and confirm your selection with ENTER. | ||
- An interactive initialization process will now run in your command line. You can select options with SPACE and confirm your selection with ENTER. | ||
|
||
1. For the first question, select the following options. Once you selected both options, press ENTER. | ||
1. For the first question, select the following options. Once you selected both options, press ENTER. | ||
|
||
- `Firestore: Configure security rules and indexes files for Firestore` | ||
- `Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys` | ||
- `Firestore: Configure security rules and indexes files for Firestore` | ||
- `Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys` | ||
|
||
2. Select `use an existing project`. Press ENTER. | ||
3. Select the project you created earlier. You should recognize it by the project name you entered when setting up Firebase. Press ENTER. | ||
4. Confirm the default option `(firestore.rules)` with ENTER. | ||
5. Confirm the default option `((firestore.indexes.json))` with ENTER. | ||
6. ***!!! IMPORTANT !!!*** Use the build directory instead of the public directory here. Enter `build` and press ENTER. | ||
7. Configure as a single-page app. Enter `y` and press ENTER. | ||
8. Don't set up automatic builds and deploys with GitHub. Enter `N` and press ENTER. | ||
9. Don't overwrite the index.html file if the question pops up. | ||
2. Select `use an existing project`. Press ENTER. | ||
3. Select the project you created earlier. You should recognize it by the project name you entered when setting up Firebase. Press ENTER. | ||
4. Confirm the default option `(firestore.rules)` with ENTER. | ||
5. Confirm the default option `((firestore.indexes.json))` with ENTER. | ||
6. ***!!! IMPORTANT !!!*** Use the build directory instead of the public directory here. Enter `build` and press ENTER. | ||
7. Configure as a single-page app. Enter `y` and press ENTER. | ||
8. Don't set up automatic builds and deploys with GitHub. Enter `N` and press ENTER. | ||
9. Don't overwrite the index.html file if the question pops up. | ||
|
||
## Install jspsych | ||
Next, we install jspsych (still within the testing_zone folder): | ||
- Next, we install jspsych (still within the testing_zone folder): | ||
```shell | ||
npm install [email protected] | ||
``` | ||
and the package that we'll use for the experiment: | ||
- and a couple packages that we'll use for the experiment: | ||
|
||
```shell | ||
npm install @jspsych/plugin-html-keyboard-response | ||
|
@@ -105,17 +106,21 @@ npm install @jspsych/plugin-fullscreen | |
## Build And Deploy To Firebase | ||
The testing zone folder already contains a default web-based experiment. To serve this web-experiment on the internet, you must build and deploy it to Firebase. We will repeat this step later once we deploy our actual experiment. | ||
|
||
To build the experiment, run | ||
- To build the experiment, run | ||
```shell | ||
npm run build | ||
``` | ||
To deploy the experiment to Firebase, run | ||
- To deploy the experiment to Firebase, run | ||
```shell | ||
firebase deploy | ||
``` | ||
|
||
If everything worked, you should see something like this: | ||
![deployed.png](../img/deployed.png) | ||
|
||
This includes a link to your web-based experiment. You can now open this link in your browser. However, at this moment, we haven't built an experiment yet, so you will see nothing interesting. Next, we will set up the AutoRA workflow and generate the experiment. | ||
|
||
[next](init_autora.md) | ||
## Next Steps | ||
|
||
[Next: Initialize your AutoRA workflow in the researcher hub.](init_autora.md) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters