NSCLI

Основи інтерфейсу командного рядка 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 необхідно завантажити декілька залежностей.

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

cd HelloWorld

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

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

! Встановіть додаток 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"
   });
 }
}