Skip to content

Commit 8bcecd6

Browse files
HansUXdevHansUXdev
committed
add lessons
1 parent 410902e commit 8bcecd6

File tree

3 files changed

+263
-0
lines changed

3 files changed

+263
-0
lines changed

‎01-CRUD.md

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
title: "Introduction to Mongo"
3+
logoImg: "https://raw.githubusercontent.com/HansUXdev/JavaScript-First/884d95cce59c213f6bb2af7e6d54977b7e06b048/logo.drawio.svg"
4+
theme : "night"
5+
transition: "slide"
6+
# highlightTheme: "monokai"
7+
slideNumber: true
8+
# loop: true
9+
# autoSlide: 5000
10+
# openButton: false
11+
enableMenu: false
12+
# controlsLayout: 'edges'
13+
# controls: true
14+
enableChalkboard: false
15+
# enableTitleFooter: false
16+
---
17+
18+
<style>
19+
#logo > img {max-height: 10.5em;}
20+
.p1{padding:1em; border:none}
21+
</style>
22+
23+
### Why learn MongoDB?
24+
* JavaScript Syntax based off JSON { .fragment }
25+
* Simple to learn { .fragment }
26+
27+
--
28+
29+
### What is JSON?
30+
* Stands for, JavaScript Object Notation
31+
* Curly braces, `{}` hold objects
32+
* Square brackets, `[]` hold arrays
33+
* Data is in name/value pairs
34+
* keys must be strings, written with double quotes:
35+
```JSON
36+
{ "name":"John" }
37+
```
38+
* Data is separated by commas
39+
```JSON
40+
{ "name":"John" },
41+
{ "name":"Jane" }
42+
```
43+
44+
45+
--
46+
47+
### Mongo VS SQL
48+
49+
:::block
50+
[![](assets/mongo-VS-sql.drawio.svg)]() { .fragment .p1}
51+
52+
{style=width:50%;float:left; height:50%}
53+
54+
:::
55+
56+
:::block
57+
Collections VS Tables { .fragment }
58+
59+
Key VS Column { .fragment }
60+
61+
62+
{style=width:50%;float:right}
63+
64+
:::
65+
66+
--
67+
68+
### Mongo VS SQL
69+
70+
:::block
71+
[![](assets/mongo-VS-sql-2.drawio.svg)]()
72+
73+
{style=width:50%;float:left; height:50%}
74+
75+
:::
76+
77+
:::block
78+
Document VS Record { .fragment }
79+
80+
Key: values
81+
:::
82+
83+
84+
--
85+
86+
### Mongo Datatypes
87+
Values have a datatype
88+
89+
![Table of Mongo DataTypes](assets/datatypes.drawio.svg)
90+
91+
---
92+
93+
### What is C.R.U.D.?
94+
95+
[![](assets/CRUD.drawio.svg)]()
96+
{ .fragment .p1}
97+
98+
99+
---
100+
101+
## Exercise 1: Oh CRUD...
102+
103+
104+
--
105+
106+
### Oh CRUD... Methods
107+
108+
:::block
109+
```javascript
110+
use stateBar
111+
112+
db
113+
.stateBar
114+
.insert(
115+
{
116+
name: 'Hans', row:1, os:'Mac',
117+
hobbies:['Hardware Design', '3D Prototyping']
118+
}
119+
)
120+
db.stateBar
121+
.find({row:1})
122+
123+
db.stateBar
124+
.update({name: "Hans"},
125+
{$push: {"hobbies":"Teaching"}})
126+
127+
db.stateBar.insert({name: 'Doug', row:2, os:'linux', hobbies:['Crime'] })
128+
129+
db.stateBar.remove({name:"Doug"})
130+
```
131+
{style=width:80%;float:left}
132+
:::
133+
134+
:::block
135+
136+
Select the mongo database {.fragment .current-only data-code-focus=1-1}
137+
138+
calls the selected **database** {.fragment .current-only data-code-focus=3-3}
139+
140+
calls the selected **collection** {.fragment .current-only data-code-focus=4-4}
141+
142+
**CREATES** the data by inserting the `{}` into our collection {.fragment .current-only data-code-focus=5-10}
143+
144+
call the database and the collection {.fragment .current-only data-code-focus=11-11}
145+
146+
**READS** the data in our collection and find the everyone in row 1 {.fragment .current-only data-code-focus=12-12}
147+
148+
**UPDATES** the data by pushing a new hobby, to "Hans" {.fragment .current-only data-code-focus=15-16}
149+
150+
add another lawyer from the state bar, "Doug" {.fragment .current-only data-code-focus=18-18}
151+
152+
**DELETES** a disbar the lawyer "Doug" {.fragment .current-only data-code-focus=20-20}
153+
154+
155+
{style=width:20%;float:right}
156+
157+
:::
158+
159+
160+
161+
162+
163+

‎lessons/00-local-docker.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# MongoLearnPod
2+
An education GitPod module intended to teach individuals how to use mongo on any machine.
3+
Here we are applying the idea of [GhostPlate](https://github.com/HansUXdev/GhostPlate) built on GitPod to education instead of Industry at scale ...
4+
5+
# How to use?:
6+
See that button?
7+
Click it with your right index finger and wait.
8+
If you use any other finger I will bite it off.
9+
[![Open in Gitpod](http://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io#https://github.com/gitpod-io/gitpod-status)
10+
11+
12+
Then follow the directions inside the GitPod. Don't worry its still better than Microsoft documentation...
13+
14+
## Unit Learning Objective
15+
Students should be to:
16+
1. Use Docker Compose to start and stop mongoDB environment
17+
2. Use Docker, Terminal & MongoExpress to teach basic mongoDB concepts
18+
3. Distinguish between the name of a docker image (mongo) and the container name (learn-mongo)
19+
4. Use NPM Scripts to store docker commands
20+
21+
22+
# What did you build
23+
Today we'll be learning how to use Docker Compose to learn MongoDB.
24+
25+
## Unit Learning Objective
26+
Students should be to:
27+
1. Use Docker Compose to start and stop mongoDB environment
28+
2. Use docker exec to access the mongoDB Shell
29+
3. Distinguish between the name of a docker image (mongo) and the container name (learn-mongo)
30+
4. Use NPM Scripts to store docker commands such as docker exec for mongo shell
31+
32+
# About me
33+
Hans McMurdy is an experianced web developer and coding teacher.
34+
35+
## About
36+
This is a brief mongo tutorial in GitPod and originally built for docker and docker compose which you can see [here](https://github.com/HansUXdev/OSS-Books/tree/master/JavaScript-First/00-JavaScript-DataBases/mongo).
37+
38+
## Using Mongo Shell to build a database
39+
Type the following into a NEW terminal: ` mongo`. Because no one in chat wanted to help me run it in headless mode (thanks, support :-) ).
40+
41+
Lets go ahead and create a new *collection* and use it.
42+
43+
Type the following into the terminal: `use mongo`.
44+
45+
We can then show the database we are using by using the `db` command.
46+
47+
Next we are going to insert some data into our new database.
48+
To do this we'll use the the [insert](https://docs.mongodb.com/manual/tutorial/insert-documents/) command.
49+
50+
51+
```js
52+
db.info.insert(
53+
{
54+
"country": "United States of America",
55+
"state": "Arizona",
56+
"cities": ["Phoenix", "Mesa", "Chandler"]
57+
}
58+
)
59+
```
60+
This will insert a new *document* into the info *collection*.
61+
62+
**Exercise**
63+
Next, you should come up with 2 other states, with atleast two cities in each.
64+
65+
Finally, we will use the [.find()]() method to find the document with a state of Arizona.
66+
67+
```js
68+
db.info.find({state:'Arizona'}).pretty()
69+
```
70+
Note that the [.pretty()]() command just formates the data more properly.
71+
72+
73+
By the end of the exercise your terminal should look something like following but with different examples:
74+
[![](exercise1.png)]()
75+
76+
If we open mongo-express, we should see a new database appeared. We can also use the terminal command `show dbs` to display them in terminal.
77+
78+
[![](mongo-express02.png)]()
79+
[![](mongo-express03.png)]()
80+
[![](mongo-express04.png)]()
81+
82+
83+
## Using NPM Scripts
84+
# Package.json is used to demostrate NPM Scripts for use with docker
85+
Students should be able to:
86+
* Identify the package.json file and the script section
87+
* Modify the package.json file to add the docker command
88+
```
89+
"mongo": "docker exec -it learn-mongo mongo",
90+
```
91+
* Distinguish between the name of the docker image (mongo) and the container name (learn-mongo)
92+
93+
* Demonstrate Mongo Terminal Commands
94+
1. Running with docker compose
95+
- ```docker exec -it learn-mongo mongo```
96+
97+
# Conclusion
98+
## Key learnings
99+
## Tips and advice
100+
## Final thoughts and next steps

‎lessons/lesson1.gif

698 KB
Loading

0 commit comments

Comments
 (0)