Coding DIY part 3: Webscraping with JavaScript: Extracting Items and Their Prices from Franko Tading Website

_{Made with PosterMyWall}

Good day fellow devs. In my today's coding DIY, I practice web scrapping with JavaScript with the help of the puppeteer library. Web scrapping involves fetching data and using from other websites. For instance in this demo, I was able to fetch and modify data on latest Samsung phones in Franko Trading website

Franko Trading deals with the retail and mass sale of most of the technological accessories, and they have a website where some of their items are displayed so that users can buy accessories or check item prices and details.

A brother of mine asked me to check for the price details of the latest Samsung phones, and as someone who likes automating tasks, I decided to use web scraping in order to get all the latest Samsung phones in Franko Trading and their respective prices.

_{The webpage I will scrap the data from}

Instead of scrolling down and writing each item's price down manually, I was able to extract all products and display them on a webpage. This is how I implemented it.

Step 1. Technologies used

I used only Node.js for the project with the puppeteer library , express, body-parser, and ejs template engine.

Step2. Code structure

-----------FRANKO_PRICE_LIST 
       ----------Views
           ------------pages.ejs
        ---------App.js
        ---------Package.json

This is basically the structure of the project. The screenshot below shows the folder and some of the files.

_{Screenshot from my pc}

Step 3: Installation of all packages

I used the Node package manager to install the necessary packages that will be required by the project. example: npm install express puppeteer ejs

Step 4: Fetching data from the website

I fetched data from Franko Trading Samsung phones page through the server, app.js I used the puppeteer library to fetch the price and item name from Franko. This is shown in the screenshot below.

_{Screenshot from my pc}

step 5. Displaying a list of items and their respective prices on a webpage using EJS

In order to display the items and prices, I used the ejs templating engine, which imports the data scraped from Franko to display it in a stylized form. The code is shown below.

_{Screenshot from my pc}

The results:

_{Screenshot from my pc}

You can see that it is really interesting. I was able to get the data from Franko and do whatever I wanted with it. One important thing to note about webscraping is that it is not permitted on many websites; hence, you should be extra careful about which website you are dealing with.

All screenshots used in this post are from my Laptop