Ось готовий урок, створений спеціально для тебе у стилі David Malan (CS50). Ми розберемо тему Pipes (Пайпи) на прикладі Angular (найпопулярніша реалізація цього патерну у фронтенді), але сама логіка є універсальною для багатьох технологій.

🎓 CS50: Pipes — Мистецтво Трансформації Даних

Ласкаво просимо! Радий бачити вас. Сьогодні ми поговоримо про те, що робить наші програми не просто "робочими", а зручними та людяними.

1. 🔥 Вступ: Проблема «Сирого М’яса»

Уявіть, що ви прийшли до ресторану. Ви голодні. Ви замовляєте стейк. Офіціант приносить вам... шматок сирого м'яса, поруч кладе дрібку солі, перець і каже: "Ну, технічно це стейк. Склад той самий. Смачного!"

Ви будете задоволені? Навряд чи.

У програмуванні ми постійно отримуємо "сирі" дані з сервера (бекенду): * Дату у форматі 2023-10-05T14:48:00.000Z (хто взагалі так говорить у житті?) * Ціну як 10500.5 (це гривні? долари? скільки знаків після коми?) * Текст, який занадто довгий і ламає верстку.

Риторичне питання: Чи маємо ми змінювати ці дані назавжди в базі даних тільки для того, щоб показати їх користувачеві гарно? Звісно, ні!

Навіщо нам Pipes? Нам потрібен механізм, який бере "сирі інгредієнти" (дані) і "готує" їх (форматує) безпосередньо перед подачею на стіл (екран), не змінюючи саму суть продукту.

Уявіть це як фільтр для води. На вході — вода з-під крана (брудна, технічна). Всередині фільтра відбувається магія. На виході — чиста питна вода. Але водопровід ви при цьому не перебудовуєте. Це і є Pipe.

2. 🧠 Теоретична база: Що там «під капотом»?

Давайте відкинемо складні терміни. Pipe (Пайп/Труба) — це просто функція. І все.

Як це працює?

Це настільки просто, що здається магією. 1. Ви маєте вхідне значення (Input). 2. Ви кидаєте його в трубу (Pipe). 3. Труба щось робить з цим значенням. 4. З іншого боку випадає результат (Output).

Формула (запам'ятайте це):

$$Input \rightarrow Pipe(Transform) \rightarrow Output$$

Синтаксис

У більшості мов та фреймворків (від Linux терміналу до Angular) використовується символ вертикальної риски |.

{{ дані | назва_пайпу }}

Це означає: "Візьми дані ліворуч і передай їх у функцію праворуч".

Інтуїтивне розуміння:

Пайпи не змінюють ваші дані у пам'яті комп'ютера. Якщо у вас є змінна price = 100, і ви застосували пайп валюти, на екрані буде $100.00, але змінна price залишиться просто числом 100. Це лише косметика. Це "маска" для даних.

3. 🧪 Приклади: Від простого до власного

Приклад 1: Вбудовані пайпи (Класика)

Припустимо, у нас є змінна userName = "david malan". Ми хочемо вивести її в заголовку.

Код:

<h1>{{ userName | uppercase }}</h1>

Питання до вас: Що ми побачимо на екрані? (Пауза для роздумів) . . Результат: DAVID MALAN Чому: Пайп uppercase взяв рядок і застосував до нього метод .toUpperCase(). Просто, елегантно.

Приклад 2: Пайпи з параметрами (Реальність)

Часто нам потрібно налаштувати, як саме форматувати дані. Візьмемо дату: today = new Date().

Код:

<p>Дата замовлення: {{ today | date:'dd/MM/yyyy' }}</p>

Тут ми через двокрапку : передаємо аргумент — формат дати. Це наче сказати кухарю: "Приготуй стейк, ступінь прожарки — Medium".

Приклад 3: Створення власного Pipe (Level Up)

А що, якщо вбудованих інструментів не вистачає? Уявіть задачу: нам треба скоротити довгий опис товару і додати три крапки "...", якщо текст занадто великий.

Як це виглядає у коді (TypeScript/Angular стиль):

// 1. Створюємо клас і кажемо: "Ти - Пайп!"
@Pipe({ name: 'shorten' })
export class ShortenPipe implements PipeTransform {

  // 2. Метод transform - це серце нашого пайпу
  transform(value: string, limit: number = 10): string {
    // Якщо тексту нема — повертаємо нічого
    if (!value) return null;

    // Якщо текст коротший за ліміт — повертаємо як є
    if (value.length <= limit) {
      return value;
    }

    // Інакше: обрізаємо і додаємо три крапки
    return value.substr(0, limit) + '...';
  }
}

Використання:

<p>{{ 'Цей курс навчить вас програмувати' | shorten:10 }}</p>

Очікування: Що побачить користувач? Результат: Цей курс н...

Ми створили інструмент, який тепер можемо використовувати в усьому проєкті!

4. 🛠 Практична частина

Прийшов час забруднити руки кодом. Ось ваші завдання.

🔹 Завдання 1: Розігрів

У вас є число pi = 3.1415926535. Використайте вбудований пайп number, щоб вивести тільки дві цифри після коми (3.14). Підказка: формат виглядає як '1.2-2'.

🔹 Завдання 2: Валютний брокер

У вас є ціна cost = 5000. Виведіть її як 5 000 ₴ (гривня), використовуючи пайп currency. Змініть код валюти з 'USD' на 'UAH'.

🔹 Завдання 3: Bug Fix (Знайди помилку)

Студент написав власний пайп для множення числа на 2, але він не працює.

transform(value: number) {
  value * 2;
}

Питання: Чому на екрані нічого не змінюється або зникає? Чого не вистачає в функції?

🔹 Завдання 4: Міні-кейс «Секретний агент»

Створіть власний Pipe з назвою hidePassword. Логіка: 1. Приймає рядок (пароль). 2. Замінює всі символи на зірочки *. 3. Кількість зірочок має дорівнювати довжині пароля. Вхід: "secret" -> Вихід: "******"

🔹 Завдання 5: А що, якщо...?

Що станеться, якщо у ваш пайп shorten (з прикладу вище) передати не текст, а число 12345? Як захистити код від помилки? (Підказка: перевірка типів або перетворення у рядок).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі в роботі з пайпами?

❌ Типова помилка новачка:

Писати функцію форматування прямо всередині компонента (контролера). Приклад: Ви в кожному файлі пишете функцію, яка додає значок "$" до ціни. Чому це погано: Якщо завтра бос скаже змінити "$" на "€", вам доведеться правити 50 файлів. Pipe дозволяє змінити це в одному місці.

🧠 Як думає інженер:

Reusability (Повторне використання): "Я буду використовувати це форматування більше ніж один раз? Якщо так — роблю Pipe".
Performance (Продуктивність): Пайпи викликаються часто. Не пишіть у методі transform важких обчислень або запитів до сервера. Це має бути швидка, легка, "чиста" функція.
User Experience: Дані в базі для машин, дані на екрані — для людей. Pipe — це міст між цими світами.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? 1. Зрозуміли, що Pipe — це фільтр, який перетворює "сирі" дані на красиві. 2. Вивчили синтаксис |. 3. Створили власний інструмент для обрізання тексту.

Тепер ви вмієте не просто виводити дані, а презентувати їх. Ви володієте магією перетворення нудних чисел та рядків на інтерфейс, яким приємно користуватися.

Що далі? Дані ми відформатували. Але що, якщо нам потрібно не просто змінити вигляд однієї змінної, а керувати логікою відображення цілих блоків (показати/приховати, повторити список)? На наступному уроці ми розберемо Директиви. Це як Pipes, але на стероїдах.

А поки що... це був CS50. Побачимось!