Структура проєкту Ionic: основні компоненти та файли

Лекція: Структура проєкту Ionic: основні компоненти та файли

1. Вступ

При створенні мобільних додатків на базі Ionic, важливо розуміти структуру проєкту, оскільки це допомагає ефективно організувати код та спрощує його підтримку. У цій лекції ми детально розглянемо, які компоненти та файли створюються за замовчуванням при ініціалізації нового проєкту в Ionic, та як з ними працювати.

2. Створення нового проєкту в Ionic

Перш ніж розібратися зі структурою проєкту, давайте швидко пригадаємо, як створюється новий проєкт.

1. Для створення проєкту використовується команда:

ionic start myApp blank

1. Тут:

   • myApp — назва вашого проєкту.

   • blank — шаблон додатка (також доступні інші шаблони, наприклад, tabs чи sidemenu).

2. Після створення проєкту перейдіть до його каталогу:

cd myApp

1. Запустіть проєкт локально:

ionic serve

Додаток відкриється у вашому браузері за замовчуванням.

3. Основна структура проєкту

Після створення проєкту ви побачите наступну структуру папок та файлів:

myApp/

├── e2e/

├── node_modules/

├── src/

│ ├── app/

│ ├── assets/

│ ├── environments/

│ ├── theme/

│ ├── index.html

│ ├── main.ts

│ ├── polyfills.ts

│ ├── styles.css

│ └── test.ts

├── .editorconfig

├── .gitignore

├── angular.json

├── capacitor.config.ts

├── ionic.config.json

├── package.json

├── tsconfig.json

└── README.md

4. Детальний огляд основних файлів і каталогів

4.1. src/ — Вихідні файли проєкту

Цей каталог містить основний код додатка.

• app/ — основний модуль вашого додатка.

• assets/ — каталог для зберігання статичних ресурсів (зображень, іконок, шрифтів тощо).

• environments/ — містить файли налаштувань для різних середовищ (наприклад, environment.ts для розробки і environment.prod.ts для продакшену).

• theme/ — містить файли стилів, які визначають загальний вигляд вашого додатка.

• index.html — головний HTML-файл, що завантажується при старті додатка.

• main.ts — файл, з якого починається завантаження та ініціалізація Angular-додатка.

• polyfills.ts — використовується для забезпечення сумісності з різними браузерами.

• styles.css — файл для глобальних стилів додатка.

• app.module.ts — головний модуль, який визначає всі компоненти, модулі та сервіси, що використовуються в додатку.

• app.component.ts — кореневий компонент, що містить основну розмітку додатка (наприклад, <ion-app>).

• app-routing.module.ts — файл маршрутизації, що визначає маршрути (шляхи) для навігації між сторінками.

• variables.scss — файл для налаштування змінних стилів (кольорів, шрифтів тощо).

4.2. node_modules/ — Залежності проєкту

Цей каталог містить всі бібліотеки та пакети, які встановлюються через npm. Ви не повинні вручну змінювати файли в цьому каталозі.

4.3. e2e/ — Тестування кінцевого користувача

Тут зберігаються файли для end-to-end тестування вашого додатка за допомогою інструментів, таких як Protractor або Cypress.

4.4. Конфігураційні файли

• angular.json — налаштування Angular CLI, яке включає конфігурації для збірки, сервера та тестування.

• capacitor.config.ts — конфігураційний файл для інтеграції з Capacitor (для доступу до нативних API пристрою).

• ionic.config.json — містить налаштування для Ionic CLI.

• package.json — файл, що містить інформацію про проєкт, включаючи залежності, скрипти та метадані.

• tsconfig.json — налаштування TypeScript.

5. Основні компоненти Ionic

Ionic пропонує набір UI-компонентів, які можна використовувати для створення інтерфейсу користувача:

• ion-header — заголовок сторінки.

• ion-toolbar — панель інструментів, що міститься в заголовку.

• ion-content — основний контейнер для вмісту сторінки.

• ion-button — кнопка з різними стилями.

• ion-list та ion-item — для створення списків.

Приклад використання компонентів в home.page.html:

<ion-header>

 <ion-toolbar>

 <ion-title>My Ionic App</ion-title>

 </ion-toolbar>

</ion-header>

<ion-content>

 <ion-button expand="full" (click)="showAlert()">Click Me</ion-button>

</ion-content>

6. Поширені помилки та їх вирішення

• Помилка при збірці проєкту: переконайтеся, що всі залежності встановлені (npm install).

• Проблеми з маршрутизацією: перевірте app-routing.module.ts на правильність шляхів.

• Стилі не застосовуються: перевірте підключення variables.scss у global.scss.

7. Підсумок

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

Питання для вихідного контролю

1. Яка команда використовується для створення нового проєкту в Ionic?

2. Для чого використовується файл app.module.ts?

3. Що міститься в каталозі assets/?

4. Яке призначення файлу environment.ts?

5. Де зберігаються глобальні стилі для Ionic-додатка?

6. Яка роль файлу angular.json?

7. Що таке Capacitor і де знаходиться його конфігурація?

8. Як запустити локальний сервер для перевірки Ionic-додатка?

9. Які основні UI-компоненти надає Ionic?

10. Що робить файл main.ts у проєкті?