Інтеграція Trello API з сайтом

Інтеграція Trello API з веб-сайтом

Trello використовується як легкий таск-менеджер для невеликих команд. Інтеграція з сайтом дозволяє автоматично створювати карточки з заявок, відображати публічну дорожну карту з Trello-дошки та синхронізувати статуси завдань.

Аутентифікація

Trello використовує API Key + Token:

$apiKey   = config('services.trello.api_key');
$apiToken = config('services.trello.api_token');

// Базовий URL для всіх запитів
$base = "https://api.trello.com/1";
$auth = "?key={$apiKey}&token={$apiToken}";

Створення карточки з форми

class TrelloService
{
    public function createCard(string $listId, array $data): array
    {
        $resp = Http::post("https://api.trello.com/1/cards", [
            'idList' => $listId,
            'name'   => $data['subject'],
            'desc'   => "**Від:** {$data['email']}\n\n{$data['message']}",
            'pos'    => 'top',
            'key'    => config('services.trello.api_key'),
            'token'  => config('services.trello.api_token'),
        ]);

        $card = $resp->json();

        // Додаємо мітку за пріоритетом
        if ($data['priority'] === 'high') {
            Http::post("https://api.trello.com/1/cards/{$card['id']}/idLabels", [
                'value' => config('services.trello.urgent_label_id'),
                'key'   => config('services.trello.api_key'),
                'token' => config('services.trello.api_token'),
            ]);
        }

        return $card;
    }
}

Публічна дорожна карта з Trello

async function getRoadmap(boardId: string): Promise<RoadmapColumn[]> {
  const lists = await fetch(
    `https://api.trello.com/1/boards/${boardId}/lists?cards=open&key=${KEY}&token=${TOKEN}`
  ).then(r => r.json());

  return lists
    .filter((list: any) => !list.closed)
    .map((list: any) => ({
      id:    list.id,
      name:  list.name,
      cards: list.cards.map((card: any) => ({
        id:          card.id,
        title:       card.name,
        description: card.desc,
        labels:      card.labels.map((l: any) => l.name),
        url:         card.shortUrl,
      })),
    }));
}

Webhooks

// Створення webhook в Trello (один раз під час налаштування)
Http::post("https://api.trello.com/1/webhooks", [
    'callbackURL' => route('webhooks.trello'),
    'idModel'     => $boardId,
    'key'         => $apiKey,
    'token'       => $apiToken,
]);

// Обробник
Route::post('/webhooks/trello', function (Request $request) {
    $action = $request->input('action');
    if ($action['type'] === 'updateCard') {
        $card      = $action['data']['card'];
        $newListId = $action['data']['listAfter']['id'] ?? null;
        if ($newListId) SyncTrelloCardStatus::dispatch($card['id'], $newListId);
    }
    return response('ok');
});

Графік

Створення карточок з форм + дорожна карта: 2–3 робочих дні.