#100Devs - TODO LIST (cohort 2) take 2

Class 44 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord

Skip to first slide
Slide 1 of 53

 

Todo List CRUD Express

 

Leon Noel

#100Devs

I don't give a fuck about jeans and crep
Or goin' to Milan or goin' to the Met
I just wanna make these songs for the set

Slide 2 of 53

Agenda

Slide 3 of 53

Questions

About last class or life

Slide 4 of 53

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 53

Health First

Slide 6 of 53

What's Next

  • Aug - Fullstack Web Apps 
  • Sept - React + DS/Algorithms

THE HUNT BEGINS

  • Oct - PROJECTS, PREP, MEGA
  • Nov - Agency Life
Slide 7 of 53

YOU ALREADY KNOW ENOUGH

Slide 8 of 53

Please Be Kind

 

!unban

https://bit.ly/100devs-unban

Slide 9 of 53
Slide 10 of 53
Slide 11 of 53
Slide 12 of 53
Slide 13 of 53
Slide 14 of 53
Slide 15 of 53
Slide 16 of 53
Slide 17 of 53
Slide 18 of 53
Slide 19 of 53

Thank You

Slide 20 of 53

Still Just LEGO

Slide 21 of 53

But First

Blast To The Past

Slide 22 of 53
Slide 23 of 53

How Does The Internet Work

Slide 24 of 53
Slide 25 of 53

CRUD

Create (post) - Make something

Read (get) - Get Something

Update (put) - Change something

Delete (delete) - Remove something

Slide 26 of 53

Mongo DB

Collection

document

document

document

document

Slide 27 of 53

EJS

(Embedded Javascript Templates)

    <h1>Current Rappers</h1>
    <ul class="rappers">
    <% for(let i=0; i < info.length; i++) {%>
        <li class="rapper">
            <span><%= info[i].stageName %></span>
            <span><%= info[i].birthName %></span>
            <span class='del'>delete</span>
        </li>
    <% } %>
    </ul>

    <h2>Add A Rapper:</h2>
Slide 28 of 53

Client (Laptop)

Browser

URL

Server

Disk

API Code

Files

Mongo

Database

Collection

Collection

document

document

document

document

app.get('/')

app.post('/form')

app.put('/info')

app.delete('/info')

/views

/public

index.ejs

main.js

style.css

Fonts

Images

Slide 29 of 53

Todo List

What are some Create (post) requests?

Slide 30 of 53
Slide 31 of 53

Todo List

What are some Read (get) requests?

Slide 32 of 53
Slide 33 of 53

Todo List

What are some Update (put) requests?

Slide 34 of 53
Slide 35 of 53

Todo List

What are some Delete (delete) requests?

Slide 36 of 53
Slide 37 of 53

Client (Laptop)

Browser

URL

Server

Disk

API Code

Files

Mongo

Database

Collection

Collection

document

document

document

document

app.get('/')

app.post('/form')

app.put('/info')

app.delete('/info')

/views

/public

index.ejs

main.js

style.css

Fonts

Images

Slide 38 of 53

Let's Build An App with Express

Slide 39 of 53

Key Steps

Slide 40 of 53
mkdir api-project
cd api-project
npm init 
npm install express --save
npm install mongodb --save
npm install ejs --save
npm install dotenv --save

Setting Up The Project

Slide 41 of 53
let db,
    dbConnectionStr = 'mongodb+srv://demo:demo@cluster0
    .2wapm.mongodb.net/rap?retryWrites=true&w=majority',
    dbName = 'rap'

MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
    .then(client => {
        console.log(`Connected to ${dbName} Database`)
        db = client.db(dbName)
    })

Connect To DB

Slide 42 of 53
DB_STRING = 
  mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority

Use .env

.env file

add .env to .gitignore

.env
node_modules

In terminal, add var to Heroku

heroku config:set DB_STRING = 
  mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Slide 43 of 53
let db,
    dbConnectionStr = process.env.DB_STRING,
    dbName = 'rap'

MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
    .then(client => {
        console.log(`Connected to ${dbName} Database`)
        db = client.db(dbName)
    })

Connect To DB

Slide 44 of 53
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())



app.listen(process.env.PORT || PORT, ()=>{
    console.log(`Server running on port ${PORT}`)
})

Setup Server

Slide 45 of 53

Create Public Folder/Files

Slide 46 of 53

Create EJS File

    <h1>Current Rappers</h1>
    <ul class="rappers">
    <% for(let i=0; i < info.length; i++) {%>
        <li class="rapper">
            <span><%= info[i].stageName %></span>
            <span><%= info[i].birthName %></span>
            <span class='del'>delete</span>
        </li>
    <% } %>
    </ul>

    <h2>Add A Rapper:</h2>
Slide 47 of 53
app.get('/',(request, response)=>{
    db.collection('rappers').find().toArray()
    .then(data => {
        response.render('index.ejs', { info: data })
    })
    .catch(error => console.error(error))
})

API - GET

Slide 48 of 53
app.post('/addRapper', (request, response) => {
    db.collection('rappers').insertOne(request.body)
    .then(result => {
        console.log('Rapper Added')
        response.redirect('/')
    })
    .catch(error => console.error(error))
})

API - POST

Slide 49 of 53
app.put('/addOneLike', (request, response) => {
    db.collection('rappers').updateOne({stageName: request.body.stageNameS, 
                                        birthName: request.body.birthNameS,
                                        likes: request.body.likesS},{
        $set: {
            likes:request.body.likesS + 1
          }
    },{
        sort: {_id: -1},
        upsert: true
    })
    .then(result => {
        console.log('Added One Like')
        response.json('Like Added')
    })
    .catch(error => console.error(error))
})

API - PUT

Slide 50 of 53
app.delete('/deleteRapper', (request, response) => {
    db.collection('rappers').deleteOne({stageName: request.body.stageNameS})
    .then(result => {
        console.log('Rapper Deleted')
        response.json('Rapper Deleted')
    })
    .catch(error => console.error(error))

})

API - DELETE

Slide 51 of 53
heroku login -i
heroku create simple-rap-api
echo "web: node server.js" > Procfile
git add . 
git commit -m "changes"
git push heroku main

Push To Heroku

Slide 52 of 53

Let's Code

Todo List App

Slide 53 of 53

Homework

 

Do: Start prepping THE BANK

Do: Complete Your Professional Links

Do: Comment Your Todolist