Merge pull request #3 from mongodb-developer/local_mongodb

Update lab docs to reflect local MongoDB changes

Author: ajosh0504

docs/30-dev-env/1-jupyter-notebooks.mdx renamed to docs/20-dev-env/1-jupyter-notebooks.mdx

@@ -8,28 +8,28 @@ Cells in a Jupyter notebook are a modular unit of code or text that you can exec
 ## Running a cell
 To run a cell in a Jupyter notebook, hover over it and click the Run icon that appears against the cell.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-jupyter-notebooks/1-run-cell.png" alt="Run a cell" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-jupyter-notebooks/1-run-cell.png" alt="Run a cell" />
 
 When a cell is running, you will see a loading spinner in the bottom left corner of the cell. 
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-jupyter-notebooks/2-running-cell.png" alt="A running cell" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-jupyter-notebooks/2-running-cell.png" alt="A running cell" />
 
 ## Successful cell runs
 When a cell is finished running successfully, you will see a green check mark appear in the bottom left corner of the cell.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-jupyter-notebooks/3-successful-cell.png" alt="Successful cell run" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-jupyter-notebooks/3-successful-cell.png" alt="Successful cell run" />
 
 ## Erroneous cell runs
 If an error occurred while running a cell, you will see a red cross appear in the bottom left corner of the cell, and also an error traceback after the cell.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-jupyter-notebooks/4-error-in-cell.png" alt="Erroneous cell run" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-jupyter-notebooks/4-error-in-cell.png" alt="Erroneous cell run" />
 
 To fix errors, you may need to update previous cells. If you do, re-run all the cells following the one(s) you updated.
 
 ## Interrupting a cell
 To interrupt a running cell, click the Stop icon that you see against the cell while it is running.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-jupyter-notebooks/5-interrupt-cell.png" alt="Interrupt cell run" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-jupyter-notebooks/5-interrupt-cell.png" alt="Interrupt cell run" />
 
 :::warning
 The UI might differ slightly if you are running Jupyter Notebooks in a different IDE. Refer to the appropriate documentation if running the notebook in a different environment.    

docs/30-dev-env/2-dev-env-setup.mdx renamed to docs/20-dev-env/2-dev-env-setup.mdx

@@ -12,33 +12,56 @@ You will be working in a Jupyter Notebook in a GitHub Codespace throughout this
 
 Navigate to [this](https://github.com/codespaces/new/mongodb-developer/genai-devday-notebooks?quickstart=1) link. You will be prompted to sign into GitHub if you haven't already. Once signed in, click the **Create new codespace** button to create a new codespace.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/2-dev-env-setup/1-create-codespace.png" alt="Start a codespace" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/1-create-codespace.png" alt="Start a codespace" />
 
-Let it run for a few seconds as it prepares your environment. It will clone the repository, prepare the container, and run the installation scripts. Once the environment is built, you should see a list of files appear under the Explorer. 
+Let it run for a few seconds as it prepares a Docker container with all the required libraries and a MongoDB cluster.
+
+Once the environment is built, you should see a VS Code IDE with a list of files under the Explorer tab. 
 
 In the left navigation bar of the IDE, click on the file named `vector-search-lab.ipynb` to open the Jupyter Notebook for this lab.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/2-dev-env-setup/2-nav-notebook.png" alt="Navigate to the notebook" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/2-nav-notebook.png" alt="Navigate to the notebook" />
 
 Next, select the Python interpreter by clicking **Select Kernel** at the top right of the IDE.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/2-dev-env-setup/3-select-kernel.png" alt="Select kernel" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/3-select-kernel.png" alt="Select kernel" />
 
 In the modal that appears, click **Python environments...** and select the interpreter that is marked as **Recommended** or **Global Env**.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/2-dev-env-setup/4-python-env-modal.png" alt="Select Python Environments" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/4-python-env-modal.png" alt="Select Python Environments" />
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/2-dev-env-setup/5-select-recommended.png" alt="Select recommended interpreter" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/5-select-recommended.png" alt="Select recommended interpreter" />
 
 That's it! You're ready for the lab!
 
+<details>
+  <summary>🦹 Use the MongoDB for VS Code extension to interact with the local MongoDB cluster from the VSCode IDE </summary>
+
+    In the left navigation bar of the IDE, click on the leaf icon. Under Connections, click the **Add Connection** button.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/6-add-connection.png" alt="Add MongoDB connection" />
+
+    In the tab that appears, click the **Connect** button.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/7-click-connect.png" alt="Click Connect" />
+
+    In the modal that appears at the top of the screen, enter the string `mongodb://admin:mongodb@mongodb:27017/` and hit `Enter` on your keyboard.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/8-enter-connection-string.png" alt="Enter connection string" />
+
+    If the connection was successful, you should see the cluster and its default databases under Connections. Any additional databases and collections created during the lab will appear here as well.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/9-connections.png" alt="View connections" />
+
+</details>
+
 ## Option 2: Run locally
 
 :::caution
 During the lab, we will use GitHub Codespaces. These instructions are here just in case you can't use Codespaces or if you really, really, really want a local installation.
 :::
 
-If you want to run the notebook locally, follow the steps below:
+To run the lab locally, follow the steps below: 
 
 * Clone the [GitHub repo](https://github.com/mongodb-developer/genai-devday-notebooks.git) for this lab by executing the following command from the terminal:
 
@@ -74,4 +97,4 @@ jupyter notebook
 
 * In the browser tab that pops up, open the file named `vector-search-lab.ipynb`.
 
-<Screenshot url="localhost:8888/tree" src="img/screenshots/30-dev-env/2-dev-env-setup/6-jupyter-notebook.png" alt="Jupyter Notebook" />
+<Screenshot url="localhost:8888/tree" src="img/screenshots/20-dev-env/2-dev-env-setup/10-jupyter-notebook.png" alt="Jupyter Notebook" />

docs/20-dev-env/3-setup-pre-reqs.mdx

@@ -0,0 +1,20 @@
+# 👐 Setup prerequisites
+
+Run the cells under the **Step 1: Setup prerequisites** section in the notebook.
+
+:::info
+
+Additional steps **if you are running the lab locally**:
+
+* Spin up a MongoDB Atlas cluster and obtain its connection string:
+
+    * Register for a [free MongoDB Atlas account](https://www.mongodb.com/cloud/atlas/register) if you don't already have one
+    * [Create a new database cluster](https://www.mongodb.com/docs/guides/atlas/cluster)
+    * [Obtain the connection string](https://www.mongodb.com/docs/guides/atlas/connection-string) for your database cluster
+
+* Set the `MONGODB_URI` variable to the connection string for your cluster as follows:
+
+```python
+MONGODB_URI = "<your_connection_string>"
+```
+:::

docs/30-dev-env/_category_.json renamed to docs/20-dev-env/_category_.json

@@ -1,6 +1,6 @@
 {
     "label": "Dev Environment",
-    "position": 30,
+    "position": 20,
     "link": {
         "type": "generated-index",
         "description": "Setup the dev environment and prerequisites"

docs/20-mongodb-atlas/1-create-account.mdx

@@ -0,0 +1,23 @@
+# 👐 Import data into MongoDB
+
+Let's first import a dataset to use for this lab. We will use a collection of books.
+
+Run the cells under the **Step 2: Import data into MongoDB** section in the notebook to import the dataset for this lab into a MongoDB collection.
+
+<details>
+  <summary>🦹 Visually verify that the data has been imported into the local MongoDB cluster </summary>
+
+    Click the leaf icon in the left navigation bar of the IDE.
+    
+    Ensure that you see a database called _mongodb_genai_devday_vs_, and a collection named _books_ under it. 
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-import-data/1-import-data/1-verify-collection.png" alt="Verify collection" />
+
+    Click the **>** arrow next to _books_ and note the number of documents.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-import-data/1-import-data/2-document-count.png" alt="Verify document count" />
+    
+    To preview a document, click the **>** arrow next to _Documents_ and select a document from the list.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-import-data/1-import-data/3-preview-document.png" alt="Preview document" />
+</details>