Todo List CRUD Express

 

Leon Noel

#100Devs

I'm off the 'yak, got a lot on my mind
Time is money and if you don't get it, you wastin' my time

Agenda

  • Questions? 

  • Let's Talk -  #100Devs

  • Review - CRUD 

  • Review - Express

  • Learn - Todo List

  • Together - Let's Build

  • Homework - Build your own APP

Questions

About last class or life

Project Night

FRIDAY
6:30pm EST

CRUD REVIEW

Monday
6:30pm EST

Microsoft

Sponsored Stream

TUESDAY April 13th

"Three years ago, I never imagined that I would have the opportunity to leave the gig economy to become a software engineer. Yet here I am today, debt-free and not tied to an income-share agreement, meeting my markers and finding success" - Zikre

 94% placement rate
$92.4k starting salary

6 People From 100Devs Already Have Jobs

I will earn twice as much as I did before the pandemic,

will have other monetary benefits,

will have dental and health plan for me and my family

and a laptop
And I'll do all that at a company that is 100% remote,

here in Brazil, is rising and seems to be pretty fun to work.

Thank you so much for this!

 

-Wolfpack_of_one

Not Too Late! 

VOMIT CODE

Backend!

Express

Fast, unopinionated, minimalist web framework for Node.js

 

With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.

But First

Blast To The Past

How Does The Internet Work

"It is a set of rules that allow programs to talk to each other. The developer creates the API on the server and allows the client to talk to it."

CRUD

Create (post) - Make something

Read (get) - Get Something

Update (put) - Change something

Delete (delete) - Remove something

Mongo DB

Collection

document

document

document

document

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>

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

Todo List

What are some Create (post) requests?

Todo List

What are some Read (get) requests?

Todo List

What are some Update (put) requests?

Todo List

What are some Delete (delete) requests?

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

Let's Build An App with Express

Key Steps

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

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

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
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

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

Create Public Folder/Files

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>
app.get('/',(request, response)=>{
    db.collection('rappers').find().toArray()
    .then(data => {
        response.render('index.ejs', { info: data })
    })
    .catch(error => console.error(error))
})

API - GET

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

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

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

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

Let's Code

Todo List App

Group Work

https://live.remo.co/e/100devs-classroom

Homework

 

Do: Start prepping THE BANK

Do: Complete Your Professional Links

Do: Make A Todo List APP and Push To Heroku

Reading & Videos shared after class