DEV Community: Patrick

HOW TO SEARCH FOR FILES WITH USER-INPUT (Node.js)

Patrick — Tue, 01 Feb 2022 00:39:25 +0000

Node.js is an event-driven, JavaScript runtime which can
perform operations asynchronously in a such a way that is non-blocking in execution sense. These operations could include: FS/IO, HTTP operations etc. Node wraps the JavaScript language with extra rich features which enables the language perform operations that it can't do by default such as: reading and writing to files locally, running a full-fledged end-to-end network communication; as JavaScript's scope of operation is limited to the browser window. Hence, Node can allow us run JavaScript in environments other than the restricting interface of the browser.

In this article we will see how to search for existing files within a local directory via user-input in Node. At the end of this article, you should be familiar with the node and its

fs and readline modules and how to use its associated methods to find existing files in our directory.

Setup:

First off, we auto create a package.json file that will help us manage our dependencies and other things such as versioning in the future.
So on your terminallocked in on the root of the project directory, type the code:
npm init –y or yarn init -y
This generates the package file. So, we can now install npm packages such as nodemon which refreshes our node sessions each time we make and save a change to our files.
Finally, we would update the package.json file by adding a type: "module" field to the file. This would enable us use the more modern and elegant ES2015(ES6) syntax in our node project(this is optional, as you could choose to use commonjs require syntax). Exciting huh ?
Finally, we create an index.js file where we will write and test all our code.

To serve as our dummy files to be read, we would create a folder called blogs in our projects directory, there we will create three(3) text files - (text1.txt, text2.txt, text3.txt), and for each of these files we populate them with our preferred dummy data- Lorem Ipsum!
You could also use a more meaningful data for this, its your choice. Your folder structure, and package.json file should be looking similar to mine below:

{
  "name": "Nodescratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
  "start": "nodemon index.js"
},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "2.0.2"
  }
}

Ok, back to Node:

Nodejs has a couple of built-in core modules that can be used for various important operations, these includes: HTTP, Events, FS, etc. We would be working with the FS module (FS stands for File System; quite self-explanatory if you ask me ).
The FS module has some important helper methods that we can use to make manipulations on both local files on our machine and beyond. For this article, we would import and use three of these methods readFile, readdir, also we would import another
method from the readline module called readline. This module allows us to read/accept data from the user via an interface:

import readline from "readline";
import { readFile, readdir } from "fs";
const { log, error } = await import('console') /* this is to avoid typing console.log or console.error redundantly */

To get users input, we would be using the readline method which provides an interface for reading data from a readable stream, the most common being –
process.stdin.
This operation takes some time to complete and hence traditionally
we would often use a callback function to handle the response once it’s done, but we would be making our codes more Promise-based by using the promisify method of nodes community module called util (I would definitely talk about that in depth in another article). So, lets how that is used in code:

import readline from "readline";
import { readFile, readdir } from "fs";
const { log, error } = await import('console')

import util from "util";
const rFile = util.promisify(readFile);
const rDir = util.promisify(readdir);

The readFile asynchronously reads the entire contents of any file. This method takes two arguments, the relative path to the file and a callback function to handle response. But we would be using a rather modern approach by transforming this method to Promise-based method like the one above using promisify.
Inclusively, the readdir method can read the contents of a directory (folder) and just like the readFile method, readdir takes two arguments: a relative path to the
directory and a callback. Just like before, we would promisify this method.
Doing this enables us to elegantly use these methods with the await keyword in an async function as depicted below:

import readline from "readline";
import { readFile, readdir } from "fs";
const { log, error } = await import('console')
import util from "util";

const rFile = util.promisify(readFile);
const rDir = util.promisify(readdir);
async function get() {
    try {
        const file = await rDir("./blogs");
        setTimeout(() => log("Available files are:",file),3000);
    } catch (e) { error(e.message);}
}

Another function we would define is the search function which would listen to our inputs, formats its and make search operations asynchronously based on this input.
But before we define this function, we need to create an interface that would let us key in inputs and also get outputs logged to the console. This function would be called later when we define an interface for accepting user input. Lets look at how the function is defined:

async function search(userInput) {
  try {
    const data = await rFile(`${userInput}`);
    log(data.toString());
  } catch (e) {
    error(e.message);
  }
}

Finally, we should note that the question method of the readline can be used to throw a query or question a user to perform an input operation. It should also have a callback function that grabs the input and runs an operation using the input as a payload; thus when called, rl.question() will resume the input stream if it has been paused.
Note, the callback passed to rl.question does not follow the typical pattern of accepting an ‘err & data’ as arguments, rather it’s called with the provided answer (user-input) as the only argument. Lets see how that’s done:

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});
rl.question("Search for a file..\n", (input) => {
  const userInput = input.trim();
  search(userInput); // the 'search function is called at this point
  get(); // the 'get function is called after the search
  log(`You searched for ${userInput}`);
  rl.close();
});
rl.on("close", () => {
  log("Searching....");
});

To execute this file and get our data using our input, open the Terminal, using the node runtime we would execute the module by typing - node index.js.
We would get a prompt that tells us to Search for a file….
Enter the keywords - blogs/text1.txt, which is the name of the dummy files we created earlier (Don’t forget to include the .txt extension).
And we should get a satisfactory result of -

You searched for blogs/text1.txt
Searching....
// data is output after some secs.

After a moment you should get your file served to you beautifully on the Terminal, hurray.

Summary:

Now, let’s have a summary of everything we’ve done so far. All we did was use a fancy syntax to get our users input via the readline interface. A function is executed that uses the readFile and readdir method to search for and beautifully return our files content on the Terminal.

If you made it to the end of this article, Congrats! Now you have a task of making this even more better and elegant than I could.
Keep learning, keep discovering and keep sharing.

Ping my Twitter handle when you can- Patrick

Beginners Introduction to Response Handling (pt2)

Patrick — Fri, 24 Dec 2021 22:05:39 +0000

In the previous article, we talked at length about how to make a request to a server, and also about the structure of requests, but in this article we will be diving deep into HTTP response as it relates to requests.
An HTTP response is basically made by a server to a client reacting to a request. Its aim is to provide a resource back to the client (browser) that requested the file, or to inform the client about an error which occurred while processing the request; An error you might ask, yes and it’s worth noting that bad or invalid requests most often leads to an error as a response. It is a two-way process: a server can only give a response when it gets a request.

An important technical concept to understand to be able to grasp what response are all about, and that is ‘HTTP status codes’. “Oh, another technical jargon!”, one thing you have to understand is that, the server issues an HTTP status code in response to a client’s request. In simpler terms, a user makes a request for a resource, the web server processes that request and if the resource is found or present, the server responds with a status code befitting that operation.

A response can be likened to a box that has a bold tag on it to give a quick and brief peek into what’s actually inside, it could be money who knows right? Similarly, an HTTP response is the Box, an HTTP status is the bold tag on the box (the box is the actual resource returned by a server to a client). That was a bit better and refreshing right?
Now to understand this Box (response) properly let’s look at each individual parts separately, starting with the bold tag (HTTP status code) that gives a brief peek. HTTP status codes comes in forms of 3-digits and split into identity 5 categories: (1xx, e.g. 101, 102), (2xx, e.g. 200, 202), (3xx, e.g. 300, 305), (4xx, e.g. 400, 404) and (5xx, e.g. 501, 503).
The first category (1xx) is an information response, the second (2xx) denotes success, (3xx) flags a redirection – most commonly used to state that a resource has been moved from its original state. The fourth (4xx) you may have seen while surfing the web – a 404 error, that states that a resource was not found. Finally, (5xx) occurs when there is a server error.

Understanding the nature of these status codes helps a developer to know what to expect and also the next line of action should they appear. Hence, HTTP status code are a vital and integral part of a HTTP response that shouldn’t be overlooked. Next, we would now explore the fun part of the box (response), the goodies!! The content of a response can be in any of a number of format. They all span under a common type – MIME which is a Media type. This can specify the format of the data as a type/subtype e.g. text/html, text/xml, application/json or image/jpg etc.
The response can be in any of the types – JSON, XML, BSON, etc. and can be converted to any of these during the GET action or can be done after the response has been returned from the API.
In the next article, we would be talking about the concept of Content-Type headers and how important they are in handling data response gotten from a server. Keep in touch!
Come on guys like and follow this dude to keep getting quality contents like this.

A Beginners Introduction to Making API Requests (Unsplash API)

Patrick — Tue, 21 Dec 2021 22:01:30 +0000

So if you’ve followed upon the previous post where we discussed about Response, then this article about how to implement request and handle response with the Unsplash API would prove very useful in understanding the two concepts. This article by the way assumes you have a basic knowledge of JavaScript and its core concepts such as: Functions and the JavaScript fetch API. But if you don’t know, just read on, I’ll try to explain the steps as much as possible

Now, to make a request in JavaScript, we have a lot of options, we could do an XHR request, or we could use a package called Axios to make a Promise-based request to a web server if you working with a node-generated project. But for the sake of simplicity in this article, we would be using the JavaScript fetch API. The Fetch API basically allows us to make HTTP requests to web servers. We could use Fetch on its own to make a request to our API and then tackle on the response using a .then() function, or we could use a cleaner method of wrapping our Fetch in an async function. Nevertheless, this article is not focused on teaching you how to write async functions, rather how to use it to make our requests easier with Fetch.

Having talked at length about making requests to an API using Fetch, you may wonder what an API exactly is: In short an API (Application Programming Interface) is any standard interface or endpoint that facilitates connection to a web server. In this article we would be making a simple request to Unsplash API. Unsplash is a web platform that acts as a repository of high quality free images, hence, their API enables us to make requests to their central server for an image, which would in turn make a response to us.

Making a Request:
To get started, quickly scaffold a simple index.html project on your PC. It should look something similar to this:

So at the script section of our project we are going to create two things: a fetch request without the async function as a wrapper and also a fetch request with the wrapper. This way we can get a knowledge of both worlds:

Now looking closely, the searchTerm and the accessKeys are two variables that would help our API below them function optimally. Access Keys are private hence endeavor to keep them hidden!
In fetch without async wrapper above, we use the fetch to make a GET request to a server(Unsplash) via an API, this request is then tackled on using the .then() methods. The first one parses the response gotten from the server (res), converting it to a more usable “JSON” format; This enables us to access the response the same way we would with a JavaScript objects. Also, the second .then() method grabs the parsed data and outputs it on our browsers console.
The async function too also helps in making asynchronous requests, how so: a response is expected and upon getting the response the data is stored in a constant called – res. Next we await the response to be parsed into a JSON format, after resolving it is passed to a constant – data.
One thing to note is that these operations occur in a non-blocking manner, they execute sequentially such that the fetch must run/execute and get a response before the response is then parsed, after which we then output or use the parsed data. Such is the nature of asynchronous JavaScript.
If you’ve followed this article properly, you should come to the understanding of not the syntax for making a GET request to an API using fetch, but rather of how making requests asynchronously works in JavaScript. Handling Responses and using them on our page is also vital to understand. The part2 of this article series would explain not only how to handle and use responses but also how to structure our requests to catch and handle errors too, should they occur. Happy Learning!

Requests and Response for Beginners

Patrick — Mon, 20 Dec 2021 22:28:03 +0000

Have you asked the waiter at a restaurant to get you a dessert and they served you exactly what you wanted? Have you also asked for a Chicken-soup but got Chips instead? Well, believe it or not this is very similar to making requests and receiving responses on the web.
From the previous article we understood that we can make requests to a server via a link or a portal commonly called an endpoint or an API; the server processes this request that we have made prepares a response accordingly and passes it back to us via the endpoint, hence we can work with the response as we please.

A request could be of a number of type, we have the GET request: this is one of the most common forms of request programmers and developers alike often use to get a resource from a server. Another type of request is the POST request: this is a type of request that’s most commonly used in connotation to submitting a resource or a data to the server. It instructs the server to accept and store a data from the user/sender. We have other types of requests such as “PUT, DELETE, PATCH, HEAD, CONNECT”. Note: all these can be more specifically termed – http requests.
A response on the other hand is gotten or received for the server in a number of formats, it could either be a blob, a JSON (JavaScript Object Notation) data etc. Now to use this response, developers usually parse the response into other usable format (by default the browser returns a response in a format that is not readily usable), example the JSON format. It is always important to parse a response for the above reason.

Note that, valid requests to a server via its endpoint leads to a successful or complete response. When you make an invalid request, the server could flag it as a bad request and reject, throwing an http status code to further explain the nature of that request.

Having understood what requests are, we can now see how it relates to responses and how the server reacts to this via its endpoint or API. This is an interesting way to understand the concept of request and response which are also one of the core foundations of web development we should all understand. More interesting articles like this are available.

A Beginners Introduction to Web Development

Patrick — Sun, 19 Dec 2021 20:53:56 +0000

What is Web Development?

The development of pages of information stored across series of interconnected resource-hubs/machines that acts to serve information as at when needed has led to the advent of websites and web-apps alike. A website serves two major purpose- to serve relevant information as requested by a user, and or to accept data as input from a user to process: web platforms that performs that kind of operations are specifically referred to as web-apps.
Now to understand how webpages work, let’s use a ‘Barman’s’ description: ‘you go to a bar (a web browser), greet the barman (server), request for a glass of beer (web address/request), and he pours us a glass of cool beer with a smile (webpage/response)’.

From this analogy, we see that we get a web result known as a response when we make a valid request to a server. This is a simple but in exact terms how a websites or webpages are served.
Web development as the name implies entails a series of steps taken to solve a given problem using a variety of web technologies. These web technologies enable a web developer to quickly scaffold a web platform that is performant and solves a task or series of tasks, example: Amazon which solves the problem of shopping and home-delivery.

How do I get started?

Now for a beginner, it can get really confusing where to start as there are many resources claiming to be the best in making you a developer. First, let’s look at what to have in mind before beginning your journey:

A Capable Text-editor: You don’t have to break the bank for this, there are a lot of free software to use out there to start with, such as VSCode, Atom, etc.
A web browser (obviously, so you can see your work as you build it). Most PCs come with one pre-installed, so no fuss at that.
An online resource to get you started with learning, now from my vast knowledge of resources out there, there are so many (free or paid) that opines to makes you better at developing the web, I rounded up two from each category of ‘Free’ and ‘Paid’.

For the free category, I strongly recommend Freecodecamp for day-to-day studies as they have an awesome curriculum. Second, you should back up that knowledge using w3schools website – this platform has a rich collection of docs that explains each web technology (HTML, CSS...) and its usage in depth. It is vital to use both in parallel in your studies to better understand each concept.

Now for the paid category, Udemy has a great collection of video resources that are curated by authors who are experienced developers, and this can help you go a long way. Second, I think Pluralsight has an awesome collection of video resources by experts in the web industry, which cement the use of each technology into your mind. Whichever you choose from here solely depends on you and your learning preference.
Youtube also has loads of free videos on practically every concept you could think of that concerns web development, hence is also worth checking out if you want a free video resource.

A good video or text resource should carry you along, explaining concepts precisely and exactly the way it should with code snippets or samples backing up such explanations, not just having code snippets littered everywhere or just all talks and texts with no code/practice to explain or show.

How do I get started?

Finally, you should know that the journey to becoming a proficient web developer is tough. It is a life-long commitment to learning and working on various concepts that may shake your depths of understanding. But make sure to ground yourself with the basics as much as you possibly can before diving into advanced concepts.
It can get really enjoyable when you attain basic or little proficiency, the joy of building what works is amazing, hence keep at it and do your best to grab the most important concept, don’t try to learn everything all at once, structure your learning timetable and stick to it.
Remember, one step at a time, then you might attain advanced proficiency after all.