Exercise: Demo App — Part 3

Learn how to integrate the playlist resources into a real-world app.

We'll cover the following

We’ve already looked at the playlist and playlistItem resources and how we can use them to retrieve data from the API. In this lesson, we’ll integrate them into the “YouTube Mini” project.

The front end is prebuilt and will be populated with the appropriate data once a successful API request’s response is received.

Explaining the newly created functions

Skeleton code for two new functions, get_playlist_stats on line 1, and get_playlists on line 16, has been provided in the code widget below. The instructions about what to do in each function have been provided in the widget above the function declaration. Just follow the steps to make successful API calls for data retrieval.

In the get_playlists function, we have to set up an API call to retrieve the list of playlists owned by the channel specified by the channelId parameter passed to the function. Once the response is received, it will be filtered and used in the app.

In the get_playlist_stats function, we have to set up an API call to retrieve the list of playlist items in the playlist identified by the playlistId parameter passed to the function.

Workflow

Let’s get an overview of how the data from the playlist and playlistItem resources is displayed in our app.

  1. The playlists, retrieved using the playlist resource, will be displayed on the “Channel Stats” page. In the top-right corner of the page, you will see the “Go to Playlists” button. Click it to go to the “Playlists section”, which displays the playlists with a thumbnail, playlists title, and a “Playlist Stats” button.
  2. Clicking the “Playlist Stats” button will redirect you to a new page “PlayList Stats”, where you can see all the videos in that playlist. The playlistItem resource is used to retrieve the collection of playlist items.

Run the app

Ensure that the API key is set up correctly in the widget below to run the app. If you haven’t done so already, add the API key you generated for your project when you set up your credentials.

Note: The playlist.html and channel.html files contain the code for displaying the data. You can look at them for reference, but do not change the code in these files.

Implement the functions below to check if you can make successful API requests and subsequently retrieve the required data.

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <title>Video Search Bar using YouTube Data API</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container" style="margin-top: 25px; margin-bottom: 25px;">
      <div class="row">
        <a class="col-1" href="/searchResults/">Back</a>
        <h1 class="display-6 text-center col-9">YouTube Mini - Channels Stats</h1>
        <a href="#platlistsTag" class="btn btn-danger col-2" style="height: 40px;">Playlists</a>
      </div>
      <br>
      {% for resource in data.channelData.items %}
        <figure class="text-center">
          <blockquote class="blockquote">
            <h4 style="color: red;" class="text-center">
              Channel Name:
              <small class="text-muted">{{resource.snippet.title}}</small>
            </h4>
          </blockquote>
          <figcaption class="blockquote-footer">
            Channel Id: <cite title="Source Title"><a target="_blank" style="text-decoration: underline; color: black;" href="https://youtube.com/channel/{{resource.id}}">{{resource.id}}</a></cite>
          </figcaption>
        </figure>
        <br>
        <h3 class="text-center"><u>Channel Statistics</u></h3>
        <br>
        <div class="row g-3">
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total views: </span>
              {{resource.statistics.viewCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total subscribers: </span>
              {{resource.statistics.subscriberCount}}
            </p>
          </div>
          <div class="col-4 text-center">
            <p class="lead">
              <span style="color: red; font-size: 16px;">Total videos: </span>
              {{resource.statistics.videoCount}}
            </p>
          </div>
        </div>
        <br>
        <h3 class="text-center"><u>More Videos</u></h3>
        <br>
        <div class="container">
          <div class="row">
            {% for video in data.videosData.items %}
              <div class="col center-block text-center" style="margin-bottom: 15px;">
                <iframe class="video_display" width="400" height="300" src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="5" allowfullscreen></iframe>
                <br>
                <span class="videoTitle">{{video.videoData.title}}</span>
                <br>
                <br>
                <div id="main">
                  <form id="stats2" action="{% url 'videoStats' %}" method="POST">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" name=videoStatsButton value={{video.id.videoId}}>Video Stats</button>
                  </form>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
        <br>
        <br>
        <h3 class="text-center" id="platlistsTag"><u>More Playlists</u></h3>
        <br>
        <div class="container">
          <div class="row">
            {% for playlist in data.playListsData.items %}
              <div class="col center-block text-center" style="margin-bottom: 15px;">
                <img src={{playlist.snippet.thumbnails.high.url}} alt="Playlist Thumbnail" width="350" height="250">
                <br>
                <span class="videoTitle">{{playlist.snippet.title}}</span>
                <br>
                <br>
                <div id="main">
                  <form id="stats2" action="{% url 'playListStats' %}" method="POST">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" name=playListButton value={{playlist.id}}>Playlist Stats</button>
                  </form>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </body>
</html>
Exercise: Demo App — Part 3