# Używanie lub uruchamianie edytora UI Builder i własne komponenty

> Otwórz edytor w chmurze lub uruchom go sam przez Node.js, co zawiera projekt i jak załadować własną listę komponentów parametrem components.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: pl
Content-SHA256: 2024b05dd8e6ddf20c7686b3eee8dff0b225fccdb9c947aebbb0e57e99f44ce3
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

## Edytor w chmurze

Najszybciej użyć wersji chmurowej edytora, [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

## Uruchomienie samodzielnie

Edytor to mała aplikacja Total.js 5, która serwuje pliki statyczne. README podaje trzy kroki:

```bash
npm install
node index.js
```

Najpierw pobierz kod źródłowy z [github.com/totaljs/uibuilder](https://github.com/totaljs/uibuilder). Aplikacja ma jedną trasę serwującą jej pliki (`ROUTE('GET /*')`), a plik `config` ustawia nazwę i CDN interfejsu (`cdn : //cdn.componentator.com`). Edytor nie potrzebuje bazy danych.

Co zawiera repozytorium:

| Folder lub plik | Co zawiera |
|---|---|
| `public/` | edytor: `ui.js` i `func.js`, formularze edytora (`forms/*.html`: ustawienia, komponenty, schemat, import, kod, ścieżki...) i obrazy szablonów |
| `public/templates/` | projekty startowe: `app.json`, `dashboard.json`, `flowboard.json`, `part.json` i `db.json` |
| `public/templates.json` | lista szablonów oferowanych przez edytor (aplikacja mobilna i panel HMI istnieją, ale są wyłączone) |
| `public/template.txt` | szkielet nowego komponentu ([tworzenie komponentu](/en/uibuilder/build-a-component/)) |
| `public/render.txt` | strona renderująca projekt z jComponent 20 |
| `cdn/uibuilder.min@1.js` | runtime renderujący projekt (obiekt `UIBuilder` strony) |

## Użycie własnej listy komponentów

Edytor odczytuje komponenty z listy. Możesz wskazać mu własną listę, dodając do adresu parametr `components` z adresem pliku JSON jako wartością:

```text
https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB
```

W ten sposób firma dostarcza własną bibliotekę komponentów bez ingerencji w edytor.

## Skąd pochodzą elementy

Projekt zapisany przez edytor niesie w polu `components` adres biblioteki zawierającej każdy komponent, więc projekt może później wyrenderować każdy, kto ma dostęp do tego adresu ([format JSON](/en/uibuilder/the-ui-json-format/)).