SQL Node Project 2 - Weather Project

Introduction

In this tutorial, we’ll learn how to build a REST API using PostgreSQL as our database and Node.js (JavaScript) as our programming language AND connect it to a frontend application.

Learning Objectives

Students should get hands-on experience with:

Understanding REST Principles
HTTP Methods and CRUD Operations
Connecting to a SQL database
Building a fully functional backend system for user interactions
Connecting and handling user interactions on the frontend.

Creating the Database

We will be using the same database that we used for our practice project, with https://dashboard.render.com/.

Connecting to the Database

Open pgAdmin. Right click on Servers (or Server Groups)
Click on the Server you created, then Databases. Then click on the sql_postgres_practice database. You will then select Schemas, and then select public.

Adding Data

Let’s add the saved_city table. First, right click on the Tables section in your DB in pgAdmin, and then select Query Tool.

CREATE TABLE saved_city
(
  id            SERIAL NOT NULL,
  city_name     VARCHAR(255) NOT NULL ,
  created_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,
  updated_at    TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,
  PRIMARY KEY (id)
)

Click the Play button to run the query.
You should be able to right click on the saved_city table and select View All Data to see all of your columns!
Let's add two saved cities so that we can see them when we test.

INSERT INTO saved_city(id,city_name) 
VALUES 
(1,'Oakland'),
(2,'London');

Creating the Web Server and API

Open your weather-project's code repository. Create a new folder called server. This will be what stores all of the code for the backend application. Note: You can put all of your frontend code in a folder called user-interface, if that is helpful!
cd into the server folder and into the Run npm init to initialize the package.json.
Run the following command, npm install express to add Express.
Run the following command, npm install pg to add node-postgres.

Linking the DB and the API

Create the config.js file on the server folder with the following contents:

const config = {
  user: 'sql_postgres_practice_user',
  host: '[database.server.com] Replace with your URL',
  database: 'sql_postgres_practice',
  password: 'Replace with your password',
  port: 5432,
  ssl: true
}
module.exports = config;

Add the config.js file to your .gitignore file. We don't want a file with passwords to be added to Github!

Building the API

Now, let's write the code that starts our application. Create a src folder and an index.js file. In the index.js file, add the following code. This code should look familiar. We are adding express and building our application. Now we need to add the code that will allow us to connect to our database.

const express = require('express'); //external module for using express
const Client = require('pg') //external module for using postgres with node
const config = require('../config.js'); // internal module for connecting to our config file

const app = express();
const port = 3000;

app.use(express.json());

const client = new Client(config); //creating our database Client with our config values
 
await client.connect() //connecting to our database


app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

await client.end() //ending the connection to our database

This code uses a Client, which is an object that allows us to connect with our database. We have to enter the config object to securely connect to the proper database, and then we need to establish a connection.
Now, we need to build our route and helper function to get our data. We are going to create a GET request to get all of the saved cities.

const express = require('express'); //external module for using express
const { Client } = require('pg') //external module for using postgres with node
const config = require('../config.js'); // internal module for connecting to our config file

const app = express();
const port = 3000;

app.use(express.json());

const client = new Client(config); //creating our database Client with our config values

//NEW CODE
const getCities = async () => {
  await client.connect() //connecting to our database
  const result = await client.query('SELECT * FROM saved_cities');
  console.log(result.rows);
  await client.end() //ending the connection to our database
  return result.rows;
}

app.get('/get-cities', async (req, res) => {
  const cities = await getCities();
   // This will allow us to connect our localhost frontend to make the API call. Check to see if your port is the same. Without this extra code, the browser will throw an error because it will think there is a security risk.
   res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5500').send(cities);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Testing

Now we get to test our application with Postman! Let's open Postman and enter a GET request to localhost:3000/get-cities. We should see our list of languages!

Connecting our frontend

In our frontend call, we need to make an API call to get all of the saved cities.
In our JavaScript file, let's talk through adding this code:

const getAllCities =  async () => {
    let cities = await fetch('http://localhost:3000/get-cities');
    let citiesParsed = await cities.json();
    console.log(citiesParsed);
    return citiesParsed;
  }
  getAllCities() // This function is called when app first loads, you will call this function in your JavaScript file. You might call it inside of another function.

Now that you have an array of data, how will you display this to the user?

Next Steps

For your lab, you will build on this project by adding a POST for adding a new saved city. BONUS: You can add an option in the UI to have the user select which cities they want to save.

Stay-Hack06 / weather-project-backend