Посібник зі встановлення, розгортання та створення вебзастосунків
TECHNO4 FRAMEWORK 2.0 — це швидка, модульна бібліотека та повноцінна екосистема для створення нативних мобільних (iOS, Android) та портативних вебзастосунків (PWA) з використанням відкритих вебтехнологій HTML5, CSS3 і чистого JavaScript (ESM). Оберіть зручний для вас спосіб розгортання — від миттєвого інтерактивного скафолдингу через CLI до ручного підключення ядра у власний бандлер Vite чи Rollup.
1. Встановлення інструментів командного рядка (CLI)
На компʼютерах під керуванням Windows, а також під root на macOS і Linux виконайте наступну команду для глобального встановлення:
npm install -g techno4-cli cordovaНа компʼютерах з операційними системами macOS та Linux, якщо потрібні права суперкористувача, використовуйте
sudo:sudo npm install -g techno4-cli cordovaПісля завершення встановлення перевірте працездатність та встановлені версії інструментів:
techno4 -V && cordova -v2. Запуск інтерактивного майстра створення проєкту з шаблону
Перейдіть до директорії, де ви плануєте створити проєкт, та виконайте команду створення застосунку:
techno4 createКонсольний майстер у діалоговому режимі запропонує обрати тип застосунку (вкладки Tabs, бічні панелі Split View або мінімальний каркас Blank), назву проєкту, налаштування компілятора Vite та цільову платформу Apache Cordova Android.
3. Інтерактивна консоль генерації та перевірки збірки (CLI Showcase)
Нижче представлена інтерактивна симуляція термінала створення проєкту на базі Techno4. Скористайтеся вкладками у верхній панелі термінала для перегляду кроків майстра, структури створених файлів, інтеграції платформи Cordova Android 15.1.0 та фінального звіту компілятора Vite:
Крок 1
Глобальний CLI
npm i -g techno4-cli
Крок 2
Генератор проєкту
techno4 create
Крок 3
Запуск сервера розробки
npm start
-
================================================================================ TECHNO4 FRAMEWORK2 CLI — ПРОЦЕС ГЕНЕРАЦІЇ ПРОЄКТУ (MONOSPACE CONSOLE LOG) ================================================================================ $ techno4 --version 2.0.0 $ cd cli-demos $ techno4 create [?] Techno4 може згенерувати стартовий проєкт у наступних форматах: [ ] Простий вебзастосунок [ ] PWA (Progressive Web App) [*] Cordova застосунок (цільові платформи iOS, Android, Electron для MacOS, Linux та Windows.) [ ] Capacitor застосунок (цільові платформи iOS, Android, Electron для MacOS, Linux та Windows.) [?] Назва застосунку (проєкт): Techno4 Tabs Cordova Android [?] Ідентифікатор пакунку (Bundle ID): io.techno4.tabsandroid [?] Цільові Cordova платформи: [ ] iOS [*] Android [ ] Electron (настільний застосунок) [ ] macOS (настільний MacOS застосунок) [?] Який тип Techno4 фреймворку обрати? > Techno4 Core [?] Який стартовий шаблон обрати? Пустий Один Перегляд (View) > Перегляд з вкладками (Tabs) Двопанельний перегляд (Split Panel) [?] Налаштувати проєкт з компілятором (Bundler)? > Компілятор Vite (рекомендовано) Без компілятора [?] Бажаєте налаштувати препроцесор CSS Pre-Processor? > Ні, все чудово з CSS Less Stylus SCSS (SASS) [?] Хочете визначити власний колір теми? > Ні, Залиште стандартні кольори теми. Так, я хочу визначити власний колір теми. [?] Ви хочете включити Techno4 Icons та Material Icons шрифт? > Так. Ні. -------------------------------------------------------------------------------- ВИКОНАННЯ ГЕНЕРАЦІЇ ТА ВСТАНОВЛЕННЯ -------------------------------------------------------------------------------- > [START] Генерація package.json. ✔ [DONE] Генерація package.json. > [START] Генерація структури файлів. ✔ [DONE] Генерація структури файлів. > [START] Генерація NPM залежностей. (Очікуйте, це може зайняти деякий час.) ✔ [DONE] Генерація NPM залежностей. > [START] Генерація NPM залежностей розробника. (Очікуйте, це може зайняти деякий час.) ✔ [DONE] Додавання NPM залежностей розробника. > [START] Генерація Cordova проекту. (Очікуйте, це може зайняти деякий час.). ✔ [DONE] Генерація Cordova проекту. > [START] Генерація файлів проекту. ✔ [DONE] Генерація файлів проекту. √ Виконано! 💪 i Подальші кроки: - 😎😉 Запустіть команду "npm install" для встановлення пакетів залежностей. - ✔✔ Запустіть команду "npm start" для запуску сервера розробки. - ✨✨ Офіційний сайт проєкту: https://techno4.online - 📖📖 Документація фреймворку: https://techno4.online/techno4-framework2 - 📖📖 Читайте README.md у файлах проєкту для отримання інструкцій. - 🚀🚀 GitHub репозиторій: https://github.com/CO-CF-TECHNO4/TECHNO4FRAMEWORK2 ================================================================================ ПІДСУМОК ГЕНЕРАЦІЇ ТА СТАТУС ПАКУНКІВ ================================================================================ ✔ Успішно згенеровано проєкт з шаблоном Tabs (Перегляд з вкладками) ✔ Налаштовано цільову платформу Cordova Android (io.techno4.tabsandroid) ✔ Підключено плагіни: statusbar, keyboard, splashscreen ✔ Підключено пакети з npm: techno4@2.0.0, dom64@0.1.1, rollup-plugin-techno4@2.0.0
4. Демонстраційний комплекс застосунку (Live App Showcase)
Ознайомтеся з реальними робочими екранами екосистеми TECHNO4 FRAMEWORK 2.0 (Boonker Studio та Threads Engine). Замість ненадійного й важкого вбудовування через
iframe, нижче інтегровано ергономічну адаптивну вітрину з підтримкою повноекранного 4K збільшення (UIkit Lightbox) та швидким перемиканням модулів:
5. Ручне підключення бібліотеки у готовий проєкт
Якщо ви вже маєте налаштований вебпроєкт на базі Vite, Rollup або Webpack, встановіть ядро інтерфейсу та рушій Dom64 безпосередньо з npm:
npm install techno4 dom646. Ініціалізація та налаштування точки входу
Підключіть стилі теми, набір піктограм t4-icons та ініціалізуйте ядро у вашому головному файлі (наприклад,
src/js/app.js):// 1. Імпорт стилів теми Techno4 та набору іконок
import 'techno4/css/bundle';
import 'techno4/icons/css';
// 2. Імпорт ядра фреймворку
import Techno4 from 'techno4/bundle';
// 3. Ініціалізація застосунку
const app = new Techno4({
el: '#app',
name: 'Мій Techno4 Застосунок',
theme: 'auto', // або 'ios', 'md'
store: store,
routes: routes,
});7. Каталог компонентів та швидка перелінковка
Скористайтеся бічним меню праворуч для швидкого переходу між розділами документації або відкрийте один із ключових компонентів:
Типи даних (Types)— повний довідник структур, властивостей, подій та параметрівДіалогові вікна (Dialog)— модальні вікна попередження, підтвердження, паролів та прогресуКартки (Cards)— гнучкі картки контенту та розширювані картки AppStoreТаблиці даних (Data Table)— структуровані таблиці даних з сортуванням і пагінацієюЕкран входу (Login Screen)— еталонний модальний екран автентифікації користувача
- TECHNO4 FRAMEWORK2
- Get Started
- Boonker
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Introduction
- Page
- Infinite Scroll
- Tabs
- Swiper
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar & Tabbar
- Tooltip
- Touch Ripple
- Treeview
- Virtual List
- Elevation
- Apache Cordova Integration
- Hardware: Web Audio API & Synth
- Hardware: Web MIDI Inspector
- Hardware: Web Serial UART Terminal
- Threads Studio: Visual Workflows
- Techno4 CLI: Scaffolding Reference
- DOM64: Selector Engine
- Rollup & Vite Component Compiler
- Початок роботи
- Techno4 Total
- Threads Components
- Types