DEV Community

Kareem Itani
Kareem Itani

Posted on

How to make an api endpoint call

What Is an API Endpoint?

An API endpoint is an endpoint that you can hit, that results in a certain action happening, that can lead to the frontend.

For instance, if you go on Facebook and you get to your profile, what this does is it hits a /profile page, this endpoint will take you over to your personal profile page for the specific user currently logged on.

An endpoint is essentially a thing you can go to, and it does something for you on the backend. This could be related to databases, scraping information, or other heavy-lifting tasks. It processes actions on the backend and sends data to the frontend or performs backend operations.


Understanding MVC (Model-View-Controller)

There’s this concept called MVC:

  • Model: This is the data object that you can fill up and want to return.
  • View: What the user sees at the end.
  • Controller: The first point of interaction with the API call.

For example, if we’re writing a controller:

Controllers catch certain endpoints. For instance, if we’re on port 8080 and we have a /home endpoint on our controller, the controller can check if /home is hit. Once it’s hit, the controller can trigger specific actions.

Step-by-Step Example: Get Profile Page

Let’s say we’re working on a controller with a getProfilePage method:

  1. When getProfilePage is hit, it goes into the controller’s method.
  2. Inside this method, it can call a service.
    • A service is responsible for processing an action, such as interacting with a database or performing a calculation.
  3. Once the service completes its task, it returns data back to the controller.
  4. The controller then sends this data back to the frontend.

For example:

  • A user hits the getProfile endpoint.
  • The service retrieves information about the user based on their ID through a database query.
  • The database returns the user’s details to the service.
  • The service sends it back to the controller.
  • Finally, the controller returns it to the frontend, where it can be displayed to the user.

Frontend Interaction with API

From the frontend, you can make an API call to retrieve information. For instance:

  • When a frontend calls the getProfile endpoint, it expects the user’s data in return.
  • The backend handles the heavy lifting, fetching and processing the data while the frontend receives and displays the result.

Suggested Exercise: Login Page

To practice, try creating a simple login page:

  1. Allow the user to input a username and password.
  2. On clicking login, the frontend sends an API call to the backend.
  3. The backend checks the database:
    • If the user exists, return a success status (e.g., 200).
    • If the user doesn’t exist, return an error (e.g., 401).
  4. Upon success, display the user’s profile information.

This flow will help solidify your understanding of API endpoints.

Final Thoughts

This is the fundamental concept of making an API call. Controllers handle incoming requests, services perform backend tasks, and models structure the data returned to the frontend.

It takes some practice, but it’s a necessary skill for web development. Almost every website, if it’s not static, will need API calls. My advice: Keep it simple and start with basic exercises, like the login page example.

Let me know what kind of projects you’re thinking about making with this new information. Have a good day!

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.