В современном мире, где автоматизация и цифровые технологии играют ключевую роль в различных сферах, создание простых и эффективных административных панелей для ботов становится все более актуальной задачей. В этой статье мы рассмотрим процесс разработки такой панели для нашего бота.

Наш бот будет выполнять следующие функции:

При первом запуске пользователем бот приветствует пользователя.
При вызове команды /getText — отправит случайный текст. Сообщение сохранится в бд.

В административной панели мы добавим следующие элементы:

Таблицу для создания, редактирования и удаления чатов с ботом.
Таблицу с отправленными сообщениями.
Виджет для просмотра статистики.
Фильтр для поиска сообщений по чатам и дате создания.

Перед началом разработки админ панели для нашего бота, необходимо подготовить среду разработки. Мы будем использовать следующие инструменты:

PHP 8.2: Один из наиболее популярных языков серверной разработки.
MySQL: Для хранения данных нашего бота.
Laravel 11: Современная и мощная фреймворк для PHP, который значительно упрощает разработку.
Filament 3: Библиотека для создания панелей администратора.
Telegraph: Инструмент для работы с API Telegram.
Ngrok: Инструмент для создания виртуального внешнего адреса, для тестирования бота на локальной машине.

Теперь, можно приступать к созданию административной панели.

Содержание

Установка проекта
Установка Laravel
Установка Telegraph
Установка и настройка Filament 3
Установка ngrok
Настройка бота
Создание модели и ресурсов
Создание команды для отправки случайного сообщения
Настройка фильтров и виджетов в ресурсе сообщений
форма редактирования
Таблица
Фильтр
Виджет
Заключение

Установка проекта

Установка Laravel

Для запуска нашего проекта необходим установить чистый проект laravel

composer create-project laravel/laravel telebot --prefer-dist
cd telebot

После успешной установки необходимо перейти в папку проекта и скачать библиотеку telegraph через composer

Установка Telegraph

Документацию по этой библиотеке можно найти по следующему адресу: Telegraph

composer require defstudio/telegraph

Активируем скачанный пакет и добавим миграции

php artisan vendor:publish --tag="telegraph-migrations"
php artisan migrate

Установка и настройка Filament 3

Установка Filament с использованием Composer.

composer require filament/filament:"^3.2" -W

Добавление необходимых функций и пакетов для работы с Filament.

php artisan filament:install --panels

Создание пользователя

php artisan make:filament-user

Теперь можно проверить как работает наш проект. Выполним команду

php artisan serve

Установка ngrok

Теперь наш сервер работает локально и для того, что бы зарегистрировать вебхук нужно создать внешний https адрес. Для этого есть специальная утилита — ngrok

Скачаем и установим клиент для windows в нашем личном кабинете

Как создать админку для своего телеграмм бота (Laravel, Filament3, Telegraph)

Установка ngrok

choco install ngrok

Выполните следующую команду, чтобы добавить ваш authtoken в файл ngrok.yml по умолчанию.Скопировать код

ngrok config add-authtoken 2ODq3************************************

Разверните свое приложение онлайн

Подключите ваше приложение к сети в эфемерном домене, перенаправляя его на вышестоящую службу. Например, если оно прослушивает порт http://localhost:8080, запустите:Скопировать код

ngrok http http://localhost:8000

После запуска ваши конечные точки будут перечислены на странице конечных точек.

Если получилось, то выйдет такое сообщение

Меняем в .env файле APP_URL на адрес выданный ngrok

Настройка бота

Для начала создадим бота в telegram. Для этого добавим себе в контакты системного бота «BotFather«.

— Посылаем ему команду /newbot
— Далее посылаем «имя бота»
— После этого «BotFather» сообщаем token нового бота.

Далее создаем бота в Laravel командой artisan

php artisan telegraph:new-bot

запустится процесс создания

Не забудь поменять в файле .env APP_URL

Находим пустой хандлер и меняем в нем настройки

vendor\defstudio\telegraph\src\Handlers\EmptyWebhookHandler.php

Меняем настройки безопасности в Конфиг файле config\telegraph.php

Добавим следующий код для действия при нажатии команды /start

В нашем случае бот просто отправит пользователю «Hi my bot». Но мы доработаем этот функционал в дальнейшем.

Создание модели и ресурсов

Необходимо добавить модель для сохранения отправленных сообщений

Выполните команду в терминале для создания модели и миграции:

php artisan make:model Message -m

После этого откройте созданный файл миграции в директории database/migrations и добавьте необходимые поля:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateQuotesTable extends Migration
{
    public function up(): void
    {       
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->foreignId('chat_id')->constrained('telegraph_chats')->onDelete('cascade');
	        $table->text('message');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('quotes');
    }
}

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateQuotesTable extends Migration

{

public function up(): void

{

Schema::create('messages', function (Blueprint $table) {

$table->id();

$table->foreignId('chat_id')->constrained('telegraph_chats')->onDelete('cascade');

$table->text('message');

$table->timestamps();

});

}

public function down()

{

Schema::dropIfExists('quotes');

}

Откройте файл модели Message.php в директории app/Models и добавьте необходимые свойства:

<?php

namespace App\Models;

use DefStudio\Telegraph\Models\TelegraphChat;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    use HasFactory;

    protected $fillable = [
        'message',
        'chat_id',
    ];

    public function chat()
    {
        return $this->belongsTo(TelegraphChat::class, 'chat_id');
    }
}

<?php

namespace App\Models;

use DefStudio\Telegraph\Models\TelegraphChat;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Message extends Model

{

use HasFactory;

protected $fillable = [

'message',

'chat_id',

];

public function chat()

{

return $this->belongsTo(TelegraphChat::class, 'chat_id');

}

После того как вы создали миграцию и модель, примените миграцию, чтобы создать таблицу в базе данных:

php artisan migrate

Так же мы создадим ресурсы для управлением сообщениями и чатами

php artisan make:filament-resource Message --simple --generate --view
php artisan make:filament-resource TelegraphChat --model-namespace=DefStudio\Telegraph\Models --simple --generate --view

Создание команды для отправки случайного сообщения

Пример отправки тестового сообщения

<php
 
namespace DefStudio\Telegraph\Handlers;
 
use App\Models\Message;
use Illuminate\Support\Facades\Http;
 
class EmptyWebhookHandler extends WebhookHandler
{
    public function start(){
        $this->chat->html('Hi my bot')->send();
     }
 
     public function getText()
    {
        $params = '&type=json&number=3';
        $response = Http::get('https://fish-text.ru/get?'.$params);
 
        if ($response->successful()) {
            $data = $response->json();
            Message::create([
                'chat_id' => $this->chat->id,
                'message' => $response['text'],
            ]);
            $this->chat->html($response['text'])->send();
        } else {
            $this->chat->html("ERROR")->send();
            }
 
    }
}

<php

namespace DefStudio\Telegraph\Handlers;

use App\Models\Message;

use Illuminate\Support\Facades\Http;

class EmptyWebhookHandler extends WebhookHandler

{

public function start(){

$this->chat->html('Hi my bot')->send();

}

public function getText()

{

$params = '&type=json&number=3';

$response = Http::get('https://fish-text.ru/get?'.$params);

if ($response->successful()) {

$data = $response->json();

Message::create([

'chat_id' => $this->chat->id,

'message' => $response['text'],

]);

$this->chat->html($response['text'])->send();

} else {

$this->chat->html("ERROR")->send();

}

Отправим нашему боту тестовое сообщение и проверим результат

Настройка фильтров и виджетов в ресурсе сообщений

После отправки сообщения боту появится первое сообщение. Исправим немного ресурс для отображения:

форма редактирования

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Select::make('chat_id')
                    ->relationship('chat','name')
                    ->required(),
                Forms\Components\MarkdownEditor::make('message')
                    ->required()
                    ->columnSpanFull(),
            ]);
    }

public static function form(Form $form): Form

{

return $form

->schema([

Forms\Components\Select::make('chat_id')

->relationship('chat','name')

->required(),

Forms\Components\MarkdownEditor::make('message')

->required()

->columnSpanFull(),

]);

}

Таблица

 ->columns([
	Tables\Columns\TextColumn::make('chat.name')
		->description(fn (Message $record): string => Str::limit($record->message,60))
		->sortable(),
	Tables\Columns\TextColumn::make('created_at')
		->dateTime()
		->sortable()
		->toggleable(isToggledHiddenByDefault: false),
	Tables\Columns\TextColumn::make('updated_at')
		->dateTime()
		->sortable()
		->toggleable(isToggledHiddenByDefault: true),
])

->columns([

Tables\Columns\TextColumn::make('chat.name')

->description(fn (Message $record): string => Str::limit($record->message,60))

->sortable(),

Tables\Columns\TextColumn::make('created_at')

->dateTime()

->sortable()

->toggleable(isToggledHiddenByDefault: false),

Tables\Columns\TextColumn::make('updated_at')

->dateTime()

->sortable()

->toggleable(isToggledHiddenByDefault: true),

])

Фильтр

В нашем примере можно будет искать сообщения по дате создания От — До и можно выбрать несколько чатов в фильтре.

->filters([
	Filter::make('created_at')
	->form([
		DatePicker::make('created_from'),
		DatePicker::make('created_until'),
	])
	->query(function (Builder $query, array $data): Builder {
		return $query
			->when(
				$data['created_from'],
				fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
			)
			->when(
				$data['created_until'],
				fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
			);
	}),
	SelectFilter::make('chat')
		->relationship('chat', 'name')
		->multiple()
		->searchable()
		->preload()
])

->filters([

Filter::make('created_at')

->form([

DatePicker::make('created_from'),

DatePicker::make('created_until'),

])

->query(function (Builder $query, array $data): Builder {

return $query

->when(

$data['created_from'],

fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),

)

->when(

$data['created_until'],

fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),

);

}),

SelectFilter::make('chat')

->relationship('chat', 'name')

->multiple()

->searchable()

->preload()

])

Виджет

Filament поставляется с шаблоном виджета «обзор статистики», который вы можете использовать для отображения нескольких различных статистических данных в одном виджете без необходимости создания пользовательского представления.

Начните с создания виджета с помощью команды:

php artisan make:filament-widget StatsOverview --stats-overview

Эта команда создаст новый StatsOverview.php файл. Откройте его и верните экземпляры Stat из метода getStats()

В созданном виджете создадим несколько информационных блоков

Например для получения количества всех Сообщений можно использовать объект Stat

 Stat::make('Messages', Message::query()->count()),

Добавим информацию о чатах

Stat::make('Chats', TelegraphChat::query()->count()),

И количество сообщений за сегодня

Stat::make('Current datye message',  Message::query()->whereDate('created_at', '>=', Carbon::now())
                                                                ->whereDate('created_at', '<=', Carbon::now())
                                ->count()),

Добавим в файл app\Filament\Resources\MessageResource\Pages\ManageMessages.php следующую функцию и зарегистрируем ранее созданные виджет

В результате у нас получится следующий виджет

Заключение

Таким образом, разработка административной панели для Телеграм-бота представляет собой важный шаг к упрощению управления ботом и повышению эффективности его работы. Внедрение различных инструментов и функций позволяет администраторам эффективно контролировать работу бота, собирать статистику, отслеживать активность пользователей и оперативно реагировать на их запросы. Благодаря использованию стандартных библиотек и фреймворков, процесс разработки становится более структурированным и предсказуемым, что облегчает внедрение новых функциональностей и обновление существующих.

Как создать админку для своего телеграмм бота (Laravel, Filament3, Telegraph)

Установка проекта

Установка Laravel

Установка Telegraph

Установка и настройка Filament 3

Установка ngrok

Настройка бота

Создание модели и ресурсов

Создание команды для отправки случайного сообщения

Настройка фильтров и виджетов в ресурсе сообщений

форма редактирования

Таблица

Фильтр

Виджет

Заключение