This shows you the differences between two versions of the page.
se:labs:05 [2024/11/12 12:42] gabriel.nicolae3103 |
se:labs:05 [2024/11/12 13:07] (current) gabriel.nicolae3103 [Tasks] |
||
---|---|---|---|
Line 122: | Line 122: | ||
- | Now that our cluster is ready we need to create our database (and our collection). To do that go to Clusters -> Our Cluster -> Browse Collections -> Add my own data. For database name use "SE2024" and for Collection name use "Todos", after that click on "Create". | + | Now that our cluster is ready we need to create our database (and our collection). To do that go to Clusters -> Our Cluster -> Browse Collections -> Add my own data. For database name use "**SE2024**" and for Collection name use "**Todos**", after that click on "Create". |
Our next step is to find our connection string (we use this to connect to the database), to find our connection string go to Clusters -> Out Cluster -> Connect -> Drivers and copy paste your connection string. | Our next step is to find our connection string (we use this to connect to the database), to find our connection string go to Clusters -> Out Cluster -> Connect -> Drivers and copy paste your connection string. | ||
Line 128: | Line 128: | ||
{{:se:labs:mongodb_connection_string.png?700|MongoDB User}} | {{:se:labs:mongodb_connection_string.png?700|MongoDB User}} | ||
- | Make sure to replace <db_password> with the password that you set up earlier. Also, you need to add **SE2024** in your connection string like this <db_username>:<db_password>@cluster0.bpou2.mongodb.net/**SE2024**?retryWrites=true&w=majority&appName=Cluster0. SE2024 represents our database name, if you chose another name for your database, use that. | + | Make sure to replace <db_password> with the password that you set up earlier. Also, you need to add **SE2024** in your connection string like this |
+ | <code> | ||
+ | mongodb+srv://<db_username>:<db_password>@cluster0.bpou2.mongodb.net/SE2024?retryWrites=true&w=majority&appName=Cluster0. | ||
+ | </code> | ||
+ | |||
+ | SE2024 represents our database name, if you chose another name for your database, use that. Your connection string will be different, so don't just copy and paste the connection string from above! | ||
<note tip> | <note tip> | ||
Line 143: | Line 148: | ||
- Follow the tutorial to create a MongoDB database using Atlas. | - Follow the tutorial to create a MongoDB database using Atlas. | ||
- Look through the source code to see how Mongoose is utilised to connect to our database and create our Schema. The files you need to watch for are db/mongoose.ts and model/todo.ts | - Look through the source code to see how Mongoose is utilised to connect to our database and create our Schema. The files you need to watch for are db/mongoose.ts and model/todo.ts | ||
- | - Update the MongoDB connection string in .env.local with your own. | + | - Update the MongoDB connection string in **.env.local** with your own. |
- | - Go to Atlas and create one document to test that the connection and find action works. The document needs to have a **text** and a **completed** field. | + | - Go to Atlas and manually create one document to test that the connection and find query works. To create a document go to Clusters -> Browse Collections -> Select the collection -> Insert document. The document needs to have a **text** (string) and a **completed** (boolean) field. MongoDB will automatically assign an _id field. |
- Go to actions.ts and look at the new getItems() function, if you did everything correctly until now your ToDo list should contain one item (the document that you created earlier). | - Go to actions.ts and look at the new getItems() function, if you did everything correctly until now your ToDo list should contain one item (the document that you created earlier). | ||
- Look at the new createItem() function, by creating a new todo item, a new document should be inserted in our collection. | - Look at the new createItem() function, by creating a new todo item, a new document should be inserted in our collection. | ||
- | - Using Mongoose, implement the remaining functions in actions.ts | + | - Using Mongoose, implement the remaining functions in actions.ts by following the TODOs. |