Skip to content

Commit

Permalink
fixed formatting and links
Browse files Browse the repository at this point in the history
  • Loading branch information
musslick committed Oct 18, 2024
1 parent 619a94b commit c89d720
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 51 deletions.
47 changes: 24 additions & 23 deletions docs/examples/closed-loop-bandit-task/firebase.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Next, we want to set up Firebase for our project.

![Setup](img/system_firebase.png)
![Setup](../img/system_firebase.png)

Firebase is a platform developed by Google for creating mobile and web applications. Here, we will leverge firebase as a platform for hosting our web-based behavioral experiment, and firestore for hosting associated experimental data.

Expand All @@ -12,33 +12,34 @@ To serve a website via Firebase and use the Firestore Database, it is necessary
You'll need a [Google account](https://www.google.com/account/about/) to use Firebase.

## Firebase Project
While logged in into your Google account, head over to the [Firebase website](https://firebase.google.com/). Then, create a new project:

1. Click on `Get started`.
2. Click on the plus sign with `Create a project`.
3. Name your project (e.g., "closed-loop=study") and click on `Continue`.
4. As we don't need Google Analytics, we can leave it disabled (you can leave it enabled if you want to use it in the future).
5. Click `Create project`.
- While logged in into your Google account, head over to the [Firebase website](https://firebase.google.com/). Then, create a new project:
1. Click on `Get started`.
2. Click on the plus sign with `Create a project`.
3. Name your project (e.g., ``closed-loop-bandit``) and click on `Continue`.
4. As we don't need Google Analytics, we can leave it disabled (you can leave it enabled if you want to use it in the future).
5. Click `Create project`.

## Adding a Web App to Your Project
Now, we add a web app to the project, which will correspond to our web experiment. Navigate to the project and follow these steps:
- Now, we add a web app to the project, which will correspond to our web experiment. Navigate to the project and follow these steps:

1. Click on ```<\>```.
![webapp.png](img/webapp.png)
2. Name the app (can be the same as your project) and check the box `Also set up Firebase Hosting`. Click on `Register app`.
3. Select `Use npm`. We will use the configuration details later, but for now, click on `Next`.
3. We will install firebase tools later, for now, click on `Next`.
4. We will login and deploy our website later, for now, click on `Continue to console`.
1. Click on ```<\>```.
![webapp.png](../img/webapp.png)
2. Name the app (can be the same as your project) and check the box `Also set up Firebase Hosting`. Click on `Register app`.
3. Select `Use npm`. We will use the configuration details later, but for now, click on `Next`.
3. We will install firebase tools later, for now, click on `Next`.
4. We will login and deploy our website later, for now, click on `Continue to console`.

## Adding Firestore To Your Project
For our closed-loop study, we will use a Firestore Database to communicate between the AutoRA workflow and the website conducting the experiment. We will upload experiment conditions to the database and also store experiment data in the database. To build a Firestore Database, follow these steps:

1. In the left-hand menu of your project console, click on `Build` and select `Firestore Database`.
![build_database.png](img/build_database.png)
2. Click on `Create database`.
3. Select a location for the server hosting the database. Click on `Next`. Note that your institution may have restrictions on the location of the server. Click `Next`
4. Select `Start in production mode` selected and click `Create`.
For our closed-loop study, we will use a Firestore Database to communicate between the AutoRA workflow and the website conducting the experiment. We will upload experiment conditions to the database and also store experiment data in the database.
- To build a Firestore Database, follow these steps:
1. In the left-hand menu of your project console, click on `Build` and select `Firestore Database`.
![build_database.png](../img/build_database.png)
2. Click on `Create database`.
3. Select a location for the server hosting the database. Click on `Next`. Note that your institution may have restrictions on the location of the server. Click `Next`
4. Select `Start in production mode` selected and click `Create`.

You have now configured Firebase for your project. Next, we will connect your local project to Firebase and deploy your web-based experiment.

[next](testingzone.md)
## Next Steps

[Next: Connect your local project with Firebase.](testingzone.md)
59 changes: 32 additions & 27 deletions docs/examples/closed-loop-bandit-task/testingzone.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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)

2 changes: 1 addition & 1 deletion docs/examples/closed-loop-basic/firebase.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ You'll need a [Google account](https://www.google.com/account/about/) to use Fir

1. Click on `Get started`.
2. Click on the plus sign with `Create a project`.
3. Name your project (e.g., "closed-loop=study") and click on `Continue`.
3. Name your project (e.g., ``closed-loop-study``) and click on `Continue`.
4. As we don't need Google Analytics, we can leave it disabled (you can leave it enabled if you want to use it in the future).
5. Click `Create project`.

Expand Down

0 comments on commit c89d720

Please sign in to comment.