Summary

Transcript Summary

In this session, the speaker discusses transitioning fake data to the server side in a Node.js application. Here's a breakdown of the key points covered:

Setting Up Routes

The speaker begins by modifying the server.js file to add a new route that serves written messages (entries).
Emphasizes thinking in terms of resources when programming server-side, defining "entries" as the resource.

REST Convention

The route is defined using REST conventions. For GET requests that return a list of resources, the route typically uses the plural form of the resource's name, e.g., /entries.
The speaker updates the route with app.get('/entries', ...) and mentions the importance of restarting the server after making changes.

Server Commands

For server management, the speaker explains how to use Control + C to halt the server and restart it using node server.js.

Data Handling

The speaker moves on to transferring fake data from the client to the server by creating an array of objects representing the entries.
Each object in the array is structured with an id and text field, illustrating a database-like structure for entries.

Representation of Data

The format includes:

const entries = [
    { id: 1, text: "First entry" },
    { id: 2, text: "Second entry" },
    { id: 3, text: "Third entry" }
];

The speaker emphasizes using objects instead of strings to better represent the data.

Sending Responses

After defining the entries, the speaker updates the server's response to send this array when a client requests the /entries route.
Uses res.send(entries) to send the array back to the client.

Testing the Endpoint

The session concludes with the speaker demonstrating how to test the new endpoint in the browser by navigating to /entries and ensuring the data is displayed correctly.

Next Steps

The speaker hints at connecting this server-side data to the client side in the next lesson.

Overall, this session provides a practical walkthrough on setting up routes and data handling in a simple Node.js application following RESTful principles.

Video Transcript

Welcome back. Let's move on to moving the fake data to the server side so we can serve it to the client. Back to server.js, we want to add a route here. I don't need slash anymore. I'm going to add a route. Let's add a route to serve all the written messages. Written messages of entries. All the entries. So when it comes to server side programming, you want to think in terms of resources. The resources we have in question right now is the entry. From the client side you can see here on the left hand side in the background. There is a list of entries. Each entry is a resource. The typical standard way naming convention for the routes is to give the route name the name of the resource. I'm going to follow what's called REST convention. When you want to get a list, when you get an index of all the resources, you do get for the verb, the HTTP verb. The route is usually going to be slash resource name. So app.get here, I'm going to change that to the name of the resource. I'm going to say entries. I'm going to use plural but it's fine if you use singular. Some people like to use singular, but people like to use plural. I am going to choose plural. Now, when I hit get entries, it's going to do whatever I tell it to do. Let's try it out. Go back to the browser here. One thing I want to warn you is when I change the code here, I have to make sure to go back to the terminal and kill the server and restart it. For me, it's control C to kill, to send an interrupt signal and kill the server. And I can run the code, node server JS again. And if I go to 3000, cannot get slash because that route is gone. So I have to say slash entries here now. And now it goes to that same message. Everything is working fine. One thing I didn't mention before is if you're using Windows to do these commands, you might want to use the CMD or PowerShell is up to you. I'm a fan of using command lines. So that's why I do all of these commands here. And it's simple and straightforward. So for Windows, you use CMD or PowerShell. And it should work the same way as long as you install the NVM Windows or even through the NodeJS installer and all. It should work fine as long as everything is correctly set in your path variable. Anyway, continuing. Go back to the text editor. Now I want to move all this fake data that we wrote here to the server side so we can serve that from the server, send it back to the client and the client will dynamically populate the list of entries. So let me just copy and paste each one. I'm going to make an array here inside. I'm going to call it entries like so. Okay, I've realized just the indicators of constant. Arrays made with square brackets. Let me call it at the end of statement just. I'm going to copy this first text. Now I'm going to make an array of objects. So I could make an array of strings. That's totally fine. And put the wrap here. Ultimately, I want this data to reflect what's going to look like in a database. And in the database we have what's called an ID and many other fields for a single entity. So I'm going to refrain from making an array of strings. You could do that for a time being, but I'm not going to do it. I'm going to make an object. This object, I'm going to say text. And I'm going to paste that text under double quotes. You can use single quotes if you want. Now to each entry, I'm going to give it an ID, a unique identifier. That's usually what appears in the database. And I'm going to give an integer value. I'm going to start counting from one. With that, I'm also going to duplicate this. And I'm going to do ID two and then ID three. And I'm going to copy the other text. And I'm going to replace for the second one with that text, the third one. With the text from the third entry. So this is the representation of the data here on the left hand side in the background in the browser. We have an array of objects. Each object has an ID to uniquely identify that object. And it has a text, which is what we see on each entry box. ID is a number, text is a string. String is a sequence of characters under quotes, right? We're presented under quotes. Now with that, I can send this array of entries as the response for this route. When a client requests slash entries, get slash entries, we're going to reply with this list of entries, list of objects. So instead of the message object here, I'm going to say res.send, open parentheses, entries. With that, let's check the browser. Go to the tab where you have the localhost colon 3000 slash entries. Reload, of course, not going to work. Why? What did I tell you before? Every time we make a change to the server side, you have to kill the server and restart it again. The control C, node server.js again. Reload the page. Now we have the response here. If you look at the network tab and click for entries, you can see the preview in a nice format. This is the browser that does this formatting to make it better for us to visualize. But the raw response is just on single line with everything without spaces. But you can see that we have the data here. Now let's hook up this to the client side. That's the next lesson. See you then.