DEV Community: Daniel

API Endpoints or Routes✈

Daniel — Fri, 15 Dec 2023 18:08:43 +0000

How often have you heard about endpoints or routes in APIs but found it difficult to grasp? 🙂😑. Come with me😎, as you reach the end of this article, you will feel comfortable whenever you encounter terms like 'endpoints' or 'routes.' Additionally, you'll be able to implement them on your own using Node.js and Express.😊😉..

What are endpoints or routes?🤷‍♂️😪

Endpoints are the app's units of executable request-handling code. Huhh??🙄🙂.. Simply put, an endpoint or route is, as its name implies, basically a pathway or road 🚘🚆 that leads to a destination.. That is, as known from the knowledge of what an API is from the first episode of "Your first backend project" [you could check on it, if you missed it Your first backend project - 1] So an API we got to know is a single link that leads you to a specific application which will allow you to access resources, post(save) resources or utilize a function/processes/methods already implemented in an application Hence each of the options would have a path on the parent URL respectively. Cool?😁...

Routes in skeleton😂😎

Now that we've grasped the essence of routes/endpoints, let's delve into the details and solidify our understanding once and for all! 😎😉 No time to waste here! 😎
Imagine the link to Amazon 🎁 as our API. Folks 😁, visit our API at www.amazon.com. Clicking on the link takes you to an APPLICATION created by someone. Once you land on the Amazon page, you'll discover numerous options within the application, beyond just buying or viewing. It's packed with various functions, and each function is accomplished through a route.
For instance, when you click on 'registry,' a link or route like www.amazon.com/registries is what guides you to that specific service. Folks, that's a route! 😂😀 Isn't this breathtaking? 😁😂.. So, from the new link www.amazon.com/registries, we can still see www.amazon.com, our API, and /registries. Therefore, /registries is our endpoint or route, and www.amazon.com is our application/API/Parent URL.

Let's write our Endpoints or Routes too!😉🧐

So, before we dive into writing our codes, let's carefully note how applications work. We interact with an application by requesting the Amazon platform to help us with a little Christmas🛍 shopping. In turn, Amazon responds to us with various items we need for a happy Christmas! 🎆🎄. Carefully get your Christmas stuffs down!😉🚀 from Amazon. so you see we have two operations here:

we Request and
Amazon in turn Respond Hence, the first step is to find yourself at a route, initiate a request, and then await a response.😎 Clear? That is all about it. C'mon we've talked plenty no codes🚀.. let's write some codes.👨‍💻

Implementing our codes

By now, you should be good to go with setting up your backend project. Installing the Express package and configuring it is just a piece of cake for a pro! 😎😉 If you haven't read the initial article, check it out Your first backend project - 1]!
After setup--this is from the previous article

HTTP REQUEST METHODS🚀🪂

Don't be frightened by the heading. It's as simple as it will always be for a pro like you! 😁👨‍💻!. As we have learned from above, we interact with applications by requesting an action. 😎 But have you realized that even though you interact with the application by requesting, there are different things you can ask the application to do for you?🤷‍♂️ This could include filling out a form🌠, deleting items from your Google Drive, updating your status, or simply getting an interesting article like this 😁😎 to read😎🤷‍♂️..
So these various activities are called the METHODS! So, applications use several methods to implement our requests based on what we desire, but four are mostly used and dominant: GET, POST, DELETE, and PUT. These terms might not be so strange if you think about them in the context of English vocabulary, right? 😉😁. So:

1.GET is used to retrieve or read information

POST is utilized for creating data within an application or feeding it with information, just like filling out a form.
DELETE is employed to remove or delete information
PUT is used to update an already existing information.

All Knowledge needed for implementing a route is settled, lets see an anatomy of if it and wrap up!

Let's break it down and see from the various sections of the code.

app is the initialized express package we installed for our API setup in the first article.
".get()" is a method called on the app([const app = express()] which is obviously the package necessary for our API project)😉. So it means we could also use .post(), .put(), .delete() methods.We could see the method takes in two parameters, which is explained below:
"/read" is the first parameter in the METHOD(not only get(), but for the rest as well) for our route or endpoint! 🪂 That means, in the address bar after inserting our parent URL, we only add "/read" to navigate to this route or endpoint. So, suppose our parent URL/API is www.ourbackend.com. Then this particular endpoint will be www.ourbackend.com/read 🚀.
The second parameter, which is "(request, response) => { response.send("You want to read an article like the one you are reading?") }," is always a callback function. This function is invoked immediately when this endpoint is called upon 💻. So, in this case, if our endpoint is indeed www.ourbackend.com/read, when someone calls this endpoint, they will see the response: 'You want to read an article like the one you are reading?' because the application is responding with that! 🖥🚀 This is breathtaking, seasoned pro!👨‍💻🪂. Clear?🥱😎. Fellas, that means the callback function could be written to do anything whatsoever! Like: allowing user to register a form, delete a blog, update a blog, etc.

Warm up skills😎🚀👨‍💻

Fellas, you've read quite a bit, and now it's time to put your knowledge into action! As a warm-up for the real implementations in the next blog 💬🚀👨‍💻, let's modify the endpoints using various methods like post(), put(), and others. Keep the same format, but change the message and methods. This practice will help stabilize your understanding. In the next article, we'll delve into real implementations and explore industrial-standard tools for testing. Remember, the web browser can only test get() method, so don't miss out on that for anything! 😪😉 Gear up for some hands-on experience to activate your seasoned pro spirit! 😁👨‍💻📲

Don't forget to react to the article and comment as well! 😎📲 Let's build a community of fellow devs!
see below for the first article!
Your first backend project - 1]

Your First Backend Project

Daniel — Thu, 07 Dec 2023 01:04:49 +0000

Are you interested in creating a backend for yourself but has no clue as to how to go about it?😌 Worry less😉, in this article I will hold your hands gradually until you finally build your first backend project!

Let's get started!

Many programming languages will definitely allow you create a backend project(API). Among them are python(Django),java(spring),php(Laravel), etcetera. However they are all spearheaded by NodeJS according to stack overflow survey 2023 https://survey.stackoverflow.co/2023/#most-popular-technologies-webframe, and then it also beginner friendly!🏹.

Environment setup

Let's setup our environment! NodeJS is simply a JavaScript runtime. Therefore JavaScript must be part of your environment in order to start hacking! This is JavaScript away from the web browser! click on this link to install https://nodejs.org/en your NodeJS. Advisory: select the Recommended For most Users.

Set? let's get our hands dirty!

What at all is an API or Backend?🤷‍♂️😑

Application Programming Interface(API) is a way for two or more computer programs to communicate with each other.🙄 what?
Simply see an API as a link or URL to a particular resources or files, such as a link to someone's google drive!🌍. So an API is another application that has got resources, functions or processes that you access the "link/url" in your own application for a soft life!🥱... skipping all the troubles for building those functions or resources from scratch! With this out of the way let's rock and roll!👨‍💻. Let's create our own API to have people access our resources too!😎😉

Backend or API setup

now let's rush into our code editor, preferably Vs code, you can download it via this link https://code.visualstudio.com/. Create a directory(folder) for your project and navigate into it and open a terminal from vs code or mac or cmd on windows. Set up your project by the command below:

After you have run the command, you will be asked to answer some few questions about your project, such as package-name, version, description, main etc. I entreat you answer only the package name(inputs must be in lower case and separated by hyphens or under scot), the rest skip by clicking on the return key or enter key. Your final response will be like this:

from my result I answered only the package name as my-first-api. you could see a file has automatically been generated called package.json. No worries this gives a description of the project.

Create a file called index.js since in our project description(package.json) file, since our main has a value index.js , you could change it to your preference!👨‍💻.

Installing our framework

NodeJS uses a framework called express to help create our "API" or our link to the resources, functions, among others. with ease! In order to incorporate in our application we first have to install it.

express is now installed in our application, you could verify from the package.json file. Don't be bothered about the two add ups in the directory(package-lock.json and node_modules) they are necessary for express to run!😉..

Creating a simple API📲

Just as it has been explained that an API is an application that sits somewhere on a server, but can be accessed through a URL to perform certain operations such as: getting resources, creating resources, deleting resources, updating resources, etc. So an API should basically have a URL to access it and some functions or resources(either for cash payments, movie display, or what have you?).

we will use the ES6 JavaScript syntax for our application, hence we will have to modify our project description, thus package.json as follows:

so under the "main":"index.js" write another key-value
"type":"module". Now all is set! open the index.js file and let's write our API that performs a function. Let's import our express framework so we can use it.

We have successfully imported our express framework and instantiated ready to use the various methods/functions on it.

Streaming our API to be accessed
just as we said, an API should have the potential to be accessed, that means it should have a URL for accessibility! Let's create our local URL. Let's modify our code in the index.js file.

listen is a method on the app for streaming your API live, it takes the port number and a call back function, modify it to your own preference!. You could run node index.js in your terminal to Deploy and host your API locally for live testing. go to your address bar of your favorite web browser and type "localhost:port-number" as used in the code, in this case we used 3001. You will realize your browser has responded to the URL but has not returned any function or resource, because we have not created any!

Let's create some functions to access on the URL or our API

we modified our code to have three different functions accessed from our application(API), all these functions are called on a unique URL(route or endpoint) on the same base URL of our application localhost:3001. The first function is called on the base route "/", which implies 'localhost:3001/' which will return "This is your home page" on the browser.
The second is also accessed on the "/About" route, which also implies 'localhost:3001/About' which will return "This is your About page" on the browser.
The third is also accessed on the "/Contact" route, which also implies 'localhost:3001/Contact' which will also return "This is your Contact page" on the browser...

TEST YOUR API

Run node index.js in a terminal, then check in the terminal for the call back function to log "My Api is running on Port 300". access your API on the browser by using your URL's above.

Congratulations!!! you have created your first API that has three different endpoints which returns an information! As said above API could allow you to store resources and access resources and many other functionalities!😍... However this was an article to bring you to the light of API's. This is part 1. "Stay tuned for the upcoming Part 2 as we continue our journey in Backend Development, guiding you until you become a seasoned pro! Keep an eye out! 😁😎 Keep practicing, and Happy Hacking!"