Build Youtube Channel Info App in Node.js and Express Using Youtube Data API V3 Library Project

Build Youtube Channel Info App in Node.js and Express Using Youtube Data API  V3 Library Project

 

 

 

Welcome folks today in this blog post we will be building a youtube channel info app in node.js and express with the help of youtube-channel-info library in Youtube Data API V3. All the source code of the application will be shown below.

 

 

Live Demo

 

 

 

You can see the live demo of app here

 

 

 

Get Started

 

 

In order to get started you need to install this you need to initialize the node.js project by invoking this command

 

npm init -y

 

then install these dependencies

 

npm i express

 

npm i ejs

 

npm i nodemon

 

npm i youtube-channel-info

 

After installing all these dependencies now create a index.js file inside the root directory of the application and initialize a express application which listens on port 5000

 

 

index.js

 

 

const channelinfo = require('youtube-channel-info')

const bodyparser = require('body-parser')

const app = express()

app.use(bodyparser.json())

app.use(bodyparser.urlencoded({extended:false}))

app.set("view engine","ejs")

app.get('/',(req,res) =>{
    res.render('index')
})


app.listen(5000,() =>{
    console.log(`App is listening on port 5000`)
})

 

 

 

Now we want to load the ejs template as we defined in the get route of the express application. So now make a views folder inside the root directory and inside it make a index.ejs file and copy paste the following code to it.

See also  jQuery HTML5 File Upload with Progressbar Animation in Browser Using Javascript Full Project For Beginners

For this application we will also be using some ajax  to do the dynamic stuff for pulling the data from the node.js library and displaying it inside the html.

 

index.ejs

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <h1 class="text-center">Youtube Channel Info App</h1>
          <form id="form">
              <div class="form-group">
                  <label for="channelidname">Youtube Channel Name or ID</label>
                  <input type="text" required placeholder="Enter Channel Name or ID" id="channelnameid" class="form-control">
              </div>
              <div class="form-group">
                  <button id="button" class="btn btn-danger btn-block">
                      Get Channel Info
                  </button>
              </div>
          </form>
        <div id="result"></div>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
      var result
      $("#form").submit(function(e){
          e.preventDefault()

          $("#result").empty()

          $("#button").text("Please Wait Fetching Channel Info")

          $("#button").prop("disabled","true")

          var name = $("#channelnameid").val()
          
          name = name.trim()

          name = name.split(" ").join("");

          $.ajax({
              method:"POST",
              url:"/getchannelinfo",
              data:{channelname:name},
              success:function(data){
                console.log(data)

                $("#button").text("Get Channel Info")

                $("#button").removeAttr("disabled")

                $("#channelnameid").val("")

                result = `
                
                <table class="table table-striped">
    <thead>
      <tr>
        <th>Channel Name</th>
        <th>Channel Image</th>
        <th>Channel URL</th>
        <th>Subscribers</th>
        <th>Views</th>
        <th>Country</th>
        <th>Genre</th>
        <th>Video Uploads</th>
        <th>Estimated Monthly Earnings</th>
        <th>Estimated Yearly Earnings</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${data.stats.channel_name}</td>
        <td><img class="img-rounded" src="${data.stats.channel_image}"/></td>
        <td><a target="_blank" class="btn btn-danger" href="${data.stats.channel_link}">Go to Channel</a></td>
        <td>${data.stats.channel_subscribers}</td>
        <td>${data.stats.channel_views}</td>
        <td>${data.stats.channel_country}</td>
        <td>${data.stats.channel_genre}</td>
        <td>${data.stats.channel_uploads}</td>
        <td>${data.stats.channel_estimated_monthly_earnings}</td>
        <td>${data.stats.channel_estimated_yearly_earnings}</td>
      </tr>
    </tbody>
  </table>     
                `
                $("#result").append(result)
              }

          })


      })
  </script>
</html>

 

See also  JavaScript Program to Pass a Function as a Parameter or Argument in Browser Full Project For Beginners

 

 

So now inside the index.js file we now have to make the post request to handle the input data provided by the user

 

index.js

 

 

app.post("/getchannelinfo",(req,res) => {
    var name = req.body.channelname

    channelinfo(name, function (channelStats) {
        if (!channelStats) {
          return console.error("Channel not found!")
        }
        res.json({
            stats:channelStats
        }); 
      })
})

 

 

 

Screenshot

 

 

 

 

 

DOWNLOAD SOURCE CODE

 

 

Leave a Reply