Поточна версія на 10:58, 25 листопада 2018

Основи інтерфейсу командного рядка NativeScript

У цій статті ви дізнаєтеся основи інтерфейсу командного рядка NativeScript, зокрема, як створювати нові програми, як запускати ці програми на пристроях, і як налаштувати робочий процес для розробки, який дає змогу швидко попрацювати.

ПОРАДА: Ви можете скористатися командою tns help, щоб переглянути довідкову документацію NativeScript CLI в вашому веб-переглядачі.

Створення додатків

У NativeScript ви створюєте та запускаєте програми, використовуючи CLI NativeScript. Після інсталяції CLI NativeScript доступний у вашому терміналі або командному рядку як команда tns, скорочення для Telerik NativeScript.

tns create

Відкрийте термінал або командний рядок і запустіть таку команду, щоб створити нову програму NativeScript.

tns create HelloWorld --template tns-template-blank-ng

Тут ви передаєте дві речі для команди створення: HelloWorld, який визначає назву додатку, який ви створюєте, та опцію --template, яка повідомляє клієнтський інтерфейс NativeScript, що необхідно використати попередньо визначений шаблон з назвою "tns-template-blank-ng ".

Порада. Щоб спробувати інші шаблони, запустіть tns create без параметра --template; CLI NativeScript запропонує вам на вибір шаблони за допомогою інтерактивних підказок.

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

tns create MyApp --template typescript
tns create MyApp --template angular

короткий запис

tns create MyApp --tsc
tns create MyApp --ng

Коли команда закінчиться, перейдіть до папки нової програми.

cd HelloWorld

Додати платформи

Після створення вашого проекту ви можете почати додавати цільові платформи. Щоб мати можливість побудувати свій проект у пакеті додатків для вибраної цільової платформи, спочатку потрібно додати платформу до вашого проекту. Наразі ви можете націлюватися на Android і iOS на проекти NativeScript.

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

tns platform add android
tns platform add ios

Підготовка до побудови

Коли ви запускаєте збирання, CLI NativeScript використовує ресурси з підкаталогу для платформи у каталозі платформ. Щоб заповнити спеціальний підрозділ для платформи з правильними ресурсами програми, потрібно запустити підготовку.

tns prepare android
tns prepare ios

Побудова проекту

Після того як ви підготували свій проект, ви можете побудувати його для цільових мобільних платформ.

tns build android
tns build ios

CLI NativeScript викликає SDK для вибраної цільової платформи та використовує її для побудови вашої програми локально.

Коли ви будуєте для Android, клієнтський інтерфейс NativeScript зберігає пакет програм у форматі APK у platforms → android → bin.

Коли ви створюєте для iOS, CLI NativeScript буде або створити для пристрою, якщо до нього приєднано пристрій, або для нативного емулятора, якщо до нього немає пристроїв. Щоб активізувати створення власного емулятора, коли приєднано пристрій, встановіть прапорець --emulator.

Пакет зберігається як APP в platforms → ios → build → емулятор.

Пакет зберігається як IPA у platforms → ios → build → device.

Емуляція проекту

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

tns run android --emulator
tns run ios --emulator

Ця операція називає SDK для вибраної цільової платформи, створює вашу програму локально, запускає емулятор живого пристрою для вибраної цільової платформи та запускає ваш проект на віртуальному пристрої.

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

Для iOS, CLI NativeScript запускає додаток у Симуляторі iOS.

Запуск додатків - швидка установка

Тепер, коли ви створили додаток, давайте подивимося, як отримати та запустити нове додаток на пристрої.

! Встановіть додаток NativeScript Playground, знайдіть "NativeScript Playground" у магазині iOS App Store чи Google Play.

У NativeScript ви використовуєте команду tns preview команди CLI, щоб пов'язати програму, яку ви розробляєте локально, до програми NativeScript Playground для вашого пристрою iOS або Android.

Виконайте наступну команду у своєму терміналі або в командному рядку.

tns preview

Ви побачите QR-код на своєму терміналі

Відкрийте додаток NativeScript Playground на пристрої iOS або Android.

У програмі Playground торкніться опції Сканувати QR-код і скануйте QR-код, який з'являється у вашому терміналі або командному рядку.

Після сканування ви повинні побачити свою програму на своєму пристрої.

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

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

Внесіть деякі зміни до вашого коду, щоб ви могли побачити це в дії.

Відкрийте новий проект у вашому улюбленому текстовому редакторі або IDE наприклад Visual Studio Code.

Відкрийте файл app/app.css вашого додатка та опишіть стиль, наприклад для label

Запуск додатків - повна настройка

ПРИМІТКА. Для завершення цього розділу необхідно завершити повну настройку CLI NativeScript.

Швидка настройка коду NativeScript дозволяє вам розробляти додатки локально та тестувати свої програми на фізичних пристроях iOS або Android за допомогою програми NativeScript Playground. Хоча цей робочий процес чудово підходить для початку роботи, він має обмеження.

Після завершення повної настройки CLI NativeScript ви зможете скомпілювати додатки iOS та Android локально та натискати ці додатки безпосередньо на симулятори iOS, Android Virtual Devices або на фізичні пристрої. Крім того, ви отримуєте такий же швидкий робочий процес, який ви використовували при швидкій установці.

У NativeScript ви використовуєте команду tns run CLI, щоб створювати свої програми локально та встановлювати їх на пристроях iOS або Android. Почнемо з Android.

Виконайте на терміналі наступну команду, щоб запустити додаток на емуляторі Android.

tns run android

Для цієї команди потрібно створити принаймні один AVD (віртуальний пристрій Android), який буде налаштовано на вашому комп'ютері для розробки, щоб запустити вашу програму за допомогою емулятора Android.

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

Відлагодження додатків

Існує два основні шляхи, які можна виконати, коли ви хочете налагодити програму NativeScript:

Типовим способом налагодження програми NativeScript є інтеграція з Chrome. Ви можете знайти більше інформації тут.

chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

Код Visual Studio Одним із бажаних способів налагодження програми NativeScript є розширення NativeScript для коду Visual Studio.

Ви захочете ознайомитися з інструментами розробки Chrome Dev та відладчиком Visual Studio, оскільки вам потрібно пройти через ваш код JavaScript або TypeScript-код, але на даний момент давайте розглянемо, як зробити простий вхід у свої програми.

Один з найпростіших способів налагодження програм у будь-якому середовищі - це запис у журнал системи. У протоколі NativeScript працює дуже багато в Інтернеті, оскільки більшість тих же консольних API, які працюють в Інтернеті, також працюють у NativeScript.

Щоб побачити цю дію, відкрийте файл додатка app/home/home.component.ts та замініть його вміст на наведений нижче код.

import { Component } from "@angular/core";
@Component({
 selector: "my-app",
 template: `
   <ActionBar title="My Apple" class="action-bar"></ActionBar>
   <Image src="https://user-images.githubusercontent.com/544280/42960643-66d498ac-8b5a-11e8-8946-7224eefea6a5.jpg"></Image>
 `
})
export class HomeComponent {
 constructor() {
   console.log("Hello World");
 }
}

Після того, як NativeScript CLI оновить ваш додаток, поверніться на свій термінал або командний рядок. Ви повинні побачити повідомлення "Hello World" внизу.

Функція console.log() відмінно підходить для виведення примітивних значень, таких як рядки, числа та логічні елементи, але це не так добре для об'єктів. Для таких ситуацій вам буде потрібно використовувати інший метод консольного об'єкту, призначений для виведення складного об'єкта: console.dir().

Щоб побачити це в дії, замінити вміст вашого файлу app/home/home.component.ts за допомогою наведеного нижче коду, який використовує консоль.dir()

import { Component } from "@angular/core";
@Component({
 selector: "my-app",
 template: `
   <ActionBar title="My Apple" class="action-bar"></ActionBar>
   <Image src="https://user-images.githubusercontent.com/544280/42960643-66d498ac-8b5a-11e8-8946-7224eefea6a5.jpg"></Image>
 `
})
export class HomeComponent {
 constructor() {
   console.dir({
     type: "Apple",
     color: "Red"
   });
 }
}