Youtube Video API Popularity

1. **Set Up Your API Request**:
– **Endpoint**: `https://www.googleapis.com/youtube/v3/videos`
– **Required Parameters**:
– `part`: Set this to `snippet` to retrieve basic details about each video.
– `chart`: Set this to `mostPopular` to fetch the most popular videos.
– `regionCode`: Specify the [ISO 3166-1 alpha-2 country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) for the country you're interested in.
– `maxResults`: Define the number of results you want to retrieve (up to 50).
– `key`: Your YouTube Data API key.

**Example Request**:

GET https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&regionCode=IN&maxResults=10&key=YOUR_API_KEY


This request fetches the top 10 most popular videos in India (`regionCode=IN`).

2. **Handle the API Response**:
The API will return a JSON response containing details about the most popular videos in the specified region. Each item in the `items` array represents a video resource. You can extract information such as the video title, description, channel title, and more from the `snippet` object of each video.

**Additional Considerations**:

– **Video Categories**: If you're interested in the most popular videos within a specific category, you can include the `videoCategoryId` parameter in your request. For example, to fetch the most popular music videos, you would first retrieve the category ID for music and then use it in your request.

– **Quota Usage**: Be mindful of your API quota usage. Each request to the `videos.list` method with the `chart` parameter set to `mostPopular` costs 1 quota unit. Ensure you have sufficient quota for your application's needs.

– **Error Handling**: Implement proper error handling to manage scenarios such as exceeding quota limits, invalid parameters, or network issues.

For more detailed information on the `videos.list` method and its parameters, refer to the official YouTube Data API documentation. citeturn0search1

By following these steps and considerations, you can effectively retrieve and work with the most popular YouTube videos for specific countries using the YouTube Data API.

—

### **Step 1: Create Laravel Project**

composer create-project laravel/laravel laravel-inertia-app
cd laravel-inertia-app

—

### **Step 2: Install Inertia.js with Vue 3**

composer require inertiajs/inertia-laravel

Publish Inertia middleware:

php artisan inertia:middleware

—

### **Step 3: Install Frontend Dependencies**

yarn add @inertiajs/vue3 vue@3

—

### **Step 4: Setup Vite with Vue**
Install Laravel Breeze for authentication and Vue support:

composer require laravel/breeze --dev
php artisan breeze:install vue

Then install dependencies and build assets:

yarn install
yarn dev

—

### **Step 5: Configure Inertia Middleware**
Ensure your **`HandleInertiaRequests.php`** middleware (in `app/Http/Middleware/`) has the correct settings:

use InertiaMiddleware;

class HandleInertiaRequests extends Middleware
{
    protected $rootView = 'app';
}

—

### **Step 6: Setup Services in Laravel**
Create a `Services` directory inside `app` and create a sample service, e.g., `UserService.php`.

mkdir app/Services

Create `app/Services/UserService.php`:

namespace AppServices;

use AppModelsUser;

class UserService
{
    public function getUsers()
    {
        return User::all();
    }
}

—

### **Step 7: Create a Controller Using the Service**
Modify `UserController.php`:

namespace AppHttpControllers;

use AppServicesUserService;
use InertiaInertia;

class UserController extends Controller
{
    protected $userService;

    public function __construct(UserService $userService)
    {
        $this->userService = $userService;
    }

    public function index()
    {
        $users = $this->userService->getUsers();
        return Inertia::render('Users/Index', ['users' => $users]);
    }
}

—

### **Step 8: Define Routes**
Modify `routes/web.php`:

use AppHttpControllersUserController;

Route::get('/users', [UserController::class, 'index']);

—

### **Step 9: Create a Vue Component**
Create `resources/js/Pages/Users/Index.vue`:

<script setup>
import { defineProps } from 'vue';

defineProps({ users: Array });
</script>

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

—

### **Step 10: Run the Project**

php artisan serve
yarn dev

Now, visit `http://127.0.0.1:8000/users` to see the user list.

—

## **Benefits of This Approach**
✅ **Separation of Concerns**: Business logic is in `Services/`, keeping controllers clean.
✅ **Scalability**: Easier to maintain and extend.
✅ **Vue 3 with Inertia.js**: Reactivity and a smooth SPA experience.

Would you like enhancements like API routes or Vue state management? 🚀

—

## **Step 1: Get a YouTube API Key**
1. Go to [Google Cloud Console](https://console.cloud.google.com/)
2. Create a new project.
3. Enable the **YouTube Data API v3**.
4. Generate an **API Key**.

—

## **Step 2: Store API Key in `.env`**
Add your API key in Laravel's `.env` file:

YOUTUBE_API_KEY=your_youtube_api_key

—

## **Step 3: Create a YouTube Service in Laravel**
Create a service file in `app/Services/YouTubeService.php`:

namespace AppServices;

use IlluminateSupportFacadesHttp;

class YouTubeService
{
    protected $apiKey;
    protected $baseUrl = 'https://www.googleapis.com/youtube/v3/';

    public function __construct()
    {
        $this->apiKey = config('services.youtube.api_key');
    }

    public function getMostPopularVideos($regionCode = 'US', $maxResults = 10)
    {
        $url = $this->baseUrl . 'videos';

        $response = Http::get($url, [
            'part' => 'snippet',
            'chart' => 'mostPopular',
            'regionCode' => $regionCode,
            'maxResults' => $maxResults,
            'key' => $this->apiKey,
        ]);

        return $response->json();
    }
}

—

## **Step 4: Register YouTube API Key in `config/services.php`**
Modify `config/services.php`:

return [
    'youtube' => [
        'api_key' => env('YOUTUBE_API_KEY'),
    ],
];

Run:

php artisan config:clear

—

## **Step 5: Create a Controller**
Create `app/Http/Controllers/YouTubeController.php`:

namespace AppHttpControllers;

use AppServicesYouTubeService;
use InertiaInertia;

class YouTubeController extends Controller
{
    protected $youtubeService;

    public function __construct(YouTubeService $youtubeService)
    {
        $this->youtubeService = $youtubeService;
    }

    public function index()
    {
        $videos = $this->youtubeService->getMostPopularVideos('IN', 10);
        return Inertia::render('YouTube/Index', ['videos' => $videos['items']]);
    }
}

—

## **Step 6: Define a Route**
Modify `routes/web.php`:

use AppHttpControllersYouTubeController;

Route::get('/youtube', [YouTubeController::class, 'index']);

—

## **Step 7: Create a Vue Page**
Create `resources/js/Pages/YouTube/Index.vue`:

<script setup>
import { defineProps } from 'vue';

defineProps({ videos: Array });
</script>

<template>
  <div>
    <h1>Most Popular YouTube Videos</h1>
    <ul>
      <li v-for="video in videos" :key="video.id">
        <h3>{{ video.snippet.title }}</h3>
        <img :src="video.snippet.thumbnails.medium.url" alt="Thumbnail" />
        <p>{{ video.snippet.channelTitle }}</p>
      </li>
    </ul>
  </div>
</template>

—

## **Step 8: Run the Project**

php artisan serve
yarn dev

Now visit `http://127.0.0.1:8000/youtube` to see the most popular YouTube videos in India.

—

## **Summary**
– **YouTube API integration** using Laravel services.
– **Inertia.js + Vue 3** for rendering data.
– **Service Layer** keeps code structured.
– **Dynamic API calls** for different countries.

Let me know if you want filtering options or additional features! 🚀