Skip to main content

The Backend

1. What is the Backend?

Backend development (often called the “server-side” development), is the creation of everything that goes on behind the scenes of a website or application that the user can’t see.

The backend normally consists of an application, server and database. As you interact with a site by entering information, this information is stored in a database that resides on a server. Results are then returned to you to be displayed on the site as frontend code.

2. Why not just connect the Frontend directly to the Database???????

  • If you connect your database directly from the frontend, you are exposing all your database credentials to the browser, and anyone can look up the code in the console and take it.
  • When your database is exposed, anyone can query the data from your databse, just by running a database query in browser console, which exposes other users data too.
  • it is not secure at all for managing data or making an algorithm at the frontend.

3. What is API?

API stands for Application Programming Interface. that is the mechanism that enable two software components to communicate with each other using a set of definitions and protocols. For example Frontend and Backend are mostly using REST APIs to communicate with each other.

4. What is REST APIs?

A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access the data using HTTP protocol to communicate between Frontend and Backend.

Let's see the example

  1. Go to the Instagram on website. https://www.instagram.com/
  2. Go to any profile you want.
  3. Press Ctrl (or Command) + Shift + I or F12 to open DevTools, the choose Network tab and filter Fetch/XHR data

  • For some students that are using Microsoft Edge - Click the right arrow and choose Network

  1. Refresh the page.
  2. After you have refreshed the page, you will see that a lot of requests that sent to the Intragram server.

  1. Click the row name that leading with ?username=... and click the Headers

Let's see the details in the Headers -> General

  • The Request URL is the link that you sent to request the data from the Instragram server
  • The Request Method is the method that Identify the action to be performed for a given resource from the Instragram server, For this class we will focus on 5 HTTP methods (you will see the example later).
    • GET Retrieve data from the server
    • PUT Handles updates by replacing the entire entity
    • POST Create data
    • PATCH Only updates the fields that you give it
    • DELETE Delete data
  • The Status Code is the HTTP response status codes indicate whether a specific HTTP request has been successfully completed. Responses that we focused in this class are grouped in three classes:
    • Successful responses (200 – 299) ✅
    • Client error responses (400 – 499) ❌
    • Server error responses (500 – 599) ❌

  • The Preview and Response are the response from the Instragram server that mostly uses JSON format.
  1. Right click at the data response at the first line and click copy object.

  1. Go to the Visual Studio Code and Click open and create a folder and click open

  1. Create a response.json file

  1. Paste the data that you have copied from the webstie.

  • This is the data response from instragram that uses to display in the website. 👆🏻
Back to top