> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Синхронізація в реальному часі

> Локальні додатки з підтримкою офлайну та автоматичною фоновою синхронізацією.

## Як це працює

Додатки із синхронізацією в реальному часі зберігають локальну базу даних на пристрої. Читання відбувається миттєво (локально), запис ставиться в чергу локально, а все синхронізується з сервером у фоні.

```text theme={"theme":"material-theme-darker"}
Запис користувача -> Локальна база даних -> Черга завантаження -> Сервер -> Postgres
                                                                              |
Читання користувача <- Локальна база даних <- Синхронізація реплікації <-----+
```

Результат: миттєве читання, без спінерів завантаження та додаток, який працює при поганому з'єднанні або офлайну.

## Що налаштовує ШІ

Попросіть ШІ створити додаток із синхронізацією в реальному часі. Він повторно використовує відповідну активну базу даних, якщо вона існує; інакше створює базу даних, вмикає сервіс синхронізації та будує двочастинний додаток:

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

Облікові дані зберігаються у [сховищі](/work/vault). ШІ підключає змінні середовища бази даних до компонента процесу за допомогою інструменту `db`.

Перш ніж додаток вважатиметься готовим, база даних повинна показувати `sync: ready`. Якщо синхронізація не готова, додаток може відобразитися, але синхронізація даних у реальному часі між пристроями не працюватиме.

## Практичні правила

* Записуйте локально спочатку. Дозвольте синхронізації завантажувати у фоні.
* Показуйте порожні стани, а не спінери завантаження, коли локальні дані існують.
* Зберігайте видимий користувачеві стан у синхронізованих таблицях, щоб він зберігся при оновленні та офлайн-використанні.
* Групуйте пов'язані локальні записи разом, щоб UI оновлювався як один крок.
* Перевірте здоров'я синхронізації перед завершенням роботи над додатком із синхронізацією в реальному часі.

## Оболонка офлайн-додатка

Шаблони UI можуть включати оболонку офлайн-додатка, щоб додаток міг повторно відкритися після першого відвідування без мережі. Оболонка додатка — це статичні HTML, JS, CSS та іконки.

* **Офлайн-оболонка** дозволяє додатку відкритися без мережі
* **Синхронізація** зберігає дані додатка придатними для використання офлайну

Разом: додаток відкривається без мережі, показує останні синхронізовані дані, ставить нові записи в чергу та синхронізується, коли з'єднання повертається.

## Коли використовувати синхронізацію в реальному часі

| Добре підходить                          | Надмірно                             |
| ---------------------------------------- | ------------------------------------ |
| Менеджери завдань та додатки для нотаток | Статичні маркетингові сторінки       |
| Інструменти для співпраці                | Одноразові відправлення форм         |
| Польові додатки зі слабким з'єднанням    | Сайти з інформацією лише для читання |
| Все, що повинно відчуватися миттєво      | Додатки без офлайн-цінності          |

## Змінні платформи

Kazzle автоматично вводить невеликий набір змінних середовища в кожен процес додатка. Вони відокремлені від ваших власних [секретів сховища](/work/vault).

| Змінна                            | Що це таке                                              |
| --------------------------------- | ------------------------------------------------------- |
| `PORT`                            | Порт, на якому повинен слухати ваш процес               |
| `HOST`                            | Ім'я хоста для прив'язки (зазвичай `0.0.0.0`)           |
| `KAZZLE_API_URL`                  | Базова URL, яку використовують помічники Kazzle runtime |
| `KAZZLE_APP_COMPONENT_<NAME>_URL` | Runtime URL компонента-сусіда                           |

### URL компонентів-сусідів

Коли додаток має кілька компонентів (наприклад, UI `web` та процес `server`), Kazzle може вводити URL для компонентів-сусідів:

```
# У частині "web":
KAZZLE_APP_COMPONENT_SERVER_URL=http://localhost:3001

# У частині "server":
KAZZLE_APP_COMPONENT_WEB_URL=http://localhost:3000
```

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