Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript
Code

Створіть свій перший додаток NativeScript

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by Irina Medvedeva (you can also view the original English article)

В останній статті я познайомив вас з NativeScript. Тут ви дізналися про основи NativeScript і про те, як він відрізняється від інших основ мобільної розробки. Цього разу ти будеш руйнувати свої руки, створивши свій перший додаток NativeScript. Я покажу вам весь процес створення додатку з NativeScript, від настроювання середовища розробки до запуску додатка на вашому пристрої. Ось короткий опис того, що я обговорю:

  1. Налаштування NativeScript
  2. Створення додатка
  3. Запуск додатка
  4. Налагодження програми

Ми будемо спеціально запускати додаток на платформі Android. Але ви все ще можете дотримуватися, якщо хочете розгорнути на iOS, оскільки код буде майже таким же.My budemo spetsialʹno zapuska Єдина відмінність полягає у створенні NativeScript та команд, які ви виконуєте під час запуску додатка.

Заповнений вихідний код для цього додатка доступний у посібнику GitHub repo.

1. Налаштування NativeScript

Щоб налаштувати NativeScript, спочатку потрібно встановити Node.js. Після інсталяції Node.js, ви можете встановити інструмент командного рядка NativeScript, виконавши команду npm install -g nativescript на вашому терміналі.

Останній крок - встановити інструмент розробки для кожної платформи, яку ви хочете розгорнути. Для Android це SDK для Android. Для iOS це XCode. Ви можете прочитати інструкцію з встановлення на веб-сайті NativeScript, щоб отримати докладніші інструкції щодо налаштування необхідного програмного забезпечення для вашого середовища розробки.

Після того як ви налаштуєте своє середовище, запустіть tns doctor, щоб переконатися, що ваше середовище готово для розробки NativeScript. Якщо ви використовуєте Linux або Windows, ви побачите щось подібне, якщо ваше середовище готово:

Тут є примітка, що ви можете розробити для iOS тільки в системах Mac OS X. Це означає, що якщо ви перебуваєте на комп'ютері, ви зможете розгорнутись лише на пристроях Android. Однак, якщо ви працюєте на Mac, ви зможете розгортати його на платформах iOS і Android.

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

2. Створення програми

Додаток, яке ми збираємося побудувати, - це програма для записок. Це дозволить користувачеві створювати нотатки, кожен із яких має необов'язкове вкладене зображення, яке буде знято за допомогою камери пристрою. Нотатки зберігаються, використовуючи параметри програми NativeScript, і їх можна видалити окремо.

Ось що буде виглядати приклад:

NativeScript app

Почніть виконання такої команди, щоб створити новий проект NativeScript:

noter - це назва проекту, і com.yourname.noter - це унікальний ідентифікатор додатка. Це буде використано пізніше, щоб ідентифікувати ваше додаток, як тільки ви надішлете його в Play або App Store. За замовчуванням команда tns create створює для вас наступні папки та файли:

  • додаток
  • node_modules
  • платформи
  • package.json

Зазвичай вам потрібно лише торкнутися файлів у каталозі додатків. Але є також випадки, коли вам може знадобитися редагувати файли всередині платформ / directory android.Zazvychay vam potribno lyshe torknutysya fa Одна така ситуація полягає в тому, що плагін, який ви намагаєтеся використовувати, не автоматично пов'язує потрібні вам залежності та ресурси.

Потім перейдіть до каталогу додатків та видаліть усі файли, крім папки App_Resources. Потім створіть наступні файли:

  • app.js
  • app.css
  • notes-page.js
  • notes-page.xml

Це файли, які будуть використовуватися під час виконання NativeScript. Так само, як при створенні веб-сторінок, файли .csss використовуються для стилю, а файли .js для функціональності. Але для розмітки додатка ми використовуємо XML, а не HTML. Зазвичай ви створюєте окрему папку для кожного екрана додатка (наприклад, для входу в систему, реєстрації або інформаційної панелі) та файлів XML, CSS та JavaScript у кожній папці. Але оскільки цей додаток має лише один екран, ми створили всі файли всередині кореневого каталогу.

Але оскільки цей додаток має лише один екран, ми створили всі файли всередині кореневого каталогу.

3. Файл точки входу

Відкрийте файл app.js і додайте наступний код:

Це точка входу для програми NativeScript. Він використовує модуль додатків та його метод запуску для визначення модуля, який використовується для початкової сторінки додатка. У цьому випадку ми вказали сторінку нотаток, що означає, що модуль є notes-page.js, розмітка є notes-page.xml, а стиль для сторінки - notes-page.css. Це конвенція, що використовується в NativeScript, для якої всі файли для певної сторінки повинні мати однакове ім'я.

4. Додавання позначки інтерфейсу користувача

Відкрийте файл Notes-page.xml та додайте наступний код:

При створенні сторінок додатків у NativeScript завжди слід починати з тега . Так NativeScript знає, що ви намагаєтеся створити нову сторінку. Атрибут xmlns визначає URL-адресу схеми, яка використовується для файлу XML.

Якщо ви відвідуєте вказану URL-адресу схеми, ви можете побачити визначення всіх тегів XML, які можна використовувати в NativeScript. Атрибут завантаження визначає функцію, яка буде виконуватися після завантаження сторінки. Ми розглянемо визначення цієї функції пізніше в файлі notes-page.js.

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

Нижче ми використовували синтаксис вуса для виведення значення app_title, визначеного у файлі notes-page.js. Ось як ви виводите значення, пов'язані з цією сторінкою.

Щоб визначити кнопки, спочатку використовуйте як батьківський елемент, а кожний буде кнопками, які ви хочете визначити. Атрибут tap визначає функцію, яка буде виконуватися під час відтворення кнопки, тоді як os.position і android.position - позиції кнопки на iOS і Android.

Щоб вказати текст кнопки, ви можете використовувати текстовий атрибут . Однак NativeScript наразі не дозволяє змінювати колір тексту кнопки за допомогою CSS. Ось чому замість цього ми використовували , щоб визначити вміст кнопки та встановити його колір тексту.

Наступний фактичний вміст сторінки. Ви можете організувати різні елементи за допомогою одного або декількох контейнерів макета. Нижче ми використовували два з доступних макетів: StackLayout та GridLayout.

StackLayout дозволяє створити всі елементи всередині нього. За замовчуванням орієнтація цього макета є вертикальною, так що кожен компонент інтерфейсу вкладено вниз під останню. Подумайте про лего-цеглу з потоком вниз.

З іншого боку, GridLayout дозволяє організувати елементи у структурі таблиці. Якщо ви коли-небудь використовували Bootstrap або інші схеми сітків CSS, це здається вам природним. GridLayout дозволяє визначати рядки та стовпці, серед яких можна розташувати кожен компонент інтерфейсу. Ми розглянемо, як це буде виконано пізніше. До цих пір перейдемо до коду.

Спочатку давайте визначимо форму для створення нової нотатки. Як і в HTML, ви можете визначити атрибути, такі як id та cssClass (еквівалентний атрибуту класу HTML). Атрибут id додається до елемента, якщо ви хочете керувати ним з коду. У нашому випадку ми хочемо анімувати форму пізніше. cssClass використовується для визначення класу CSS, який ви будете використовувати для стилю елемента.

Всередині форми є текстовим полем для введення заголовка замітки, кнопки для додавання зображення, обраного зображення та кнопки збереження нотатки. Елемент зображення видно лише тоді, коли attachment_img має значення truthy. Це буде таким випадком, якщо раніше зображення було додано.

Далі знаходиться список, який показує примітки, які вже були додані користувачем. Списки створюються за допомогою компонента ListView. Це приймає елементи як обов'язковий атрибут. Значення може бути як звичайним масивом, так і видимим масивом.

Якщо вам не потрібно виконувати будь-яку форму оновлення (наприклад, видалення або оновлення поля) для кожного елемента в масиві, буде виконаний простий масив JavaScript. В іншому випадку використовуйте видимий масив, який дозволяє виконувати оновлення масиву та автоматично відображати його в інтерфейсі користувача. Ми розглянемо, як спостережний масив визначається пізніше.

Також зауважте, що в ListView може бути атрибут itemTap, який дозволяє вказати функцію, яка буде виконуватися, коли буде використано елемент у списку ViewView. Але в цьому випадку ми цього не додаємо, оскільки нам не потрібно виконувати жодних дій при передачі елемента.

Елементи ListView можна визначити, використовуючи . Тут ми використовуємо , щоб створити два рядки та два стовпці. Атрибут column використовується для того, щоб вказати, скільки стовпців ви хочете в кожному рядку.

У цьому випадку *, * означає, що є два стовпці, кожен з яких займає однакову кількість вільного місця в поточному рядку. Тож якщо цілий рядок має загальну ширину 300 пікселів, кожен стовпець буде шириною в 150 пікселів. Отже, в основному кожен * представляє один стовпець, і ви використовуєте комою, щоб відокремити кожен з них.

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

Після визначення стовпців та рядків у GridLayout ви все одно повинні вказати, хто з його дітей належить до того рядка та стовпця. Перший рядок містить заголовок елемента (1 стовпець) та кнопку видалення (2-а колонка). Другий рядок містить зображення, яке було додано до елемента (1-а колонка). Рядок і стовпці визначаються за допомогою атрибута row і col для кожного елемента.

Також зверніть увагу на використання horizontalAlignment і verticalAlignment. Ви можете подумати про це, як про еквівалент атрибуту вирівнювання тексту HTML у NativeScript. Але замість тексту ми вирівнюємо компоненти інтерфейсу користувача. horizontalAlignment може мати значення вправо, вліво, в центрі або розтягнути, тоді як verticalAlignment може мати значення верхнього, нижнього, центру або розтягу. Більшість з них є незрозумілими, за винятком розтягу, яка розтягується, щоб зайняти доступний горизонтальний або вертикальний простір.

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

Ми не вказали атрибут itemTap для ListView. Замість цього ми хочемо додати дію видалення, яка буде виконуватися кожного разу, коли буде видалено кнопка видалення в елементі списку. Кожен елемент має атрибут index, який ми передаємо як спеціальний атрибут для кнопки видалення. Це унікальний ключ, який використовується для ідентифікації кожного елемента, щоб ми могли легко звертатися до них у разі потреби.

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

5. JavaScript-код

Тепер ми готові розглянути JavaScript, що робить все це продуктивним. У цьому розділі ми будемо кодувати файл notes-page.js.

Ініціалізація

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

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

Далі імпортуйте всі інші модулі, які ми будемо використовувати на цій сторінці:

  • камера: для роботи з камерою пристрою.
  • вид: для посилань на конкретні елементи на сторінці. Подумайте про це як еквівалент document.getElementById у NativeScript.
  • ui / enums: глобальний словник постійних значень для всього, що пов'язано з інтерфейсом користувача.
  • ui / анімація: для анімаційних елементів.
  • Налаштування програми: для збереження локальних даних.
  • файл-система: для роботи з файловою системою.

Далі, ініціалізуйте значення для змінних, які будуть використовуватися в усьому файлі. Сторінка використовується для зберігання посилання на поточну сторінку, notesArr - це звичайна копія масиву поточних нотаток на сторінці, а current_index - початкове значення індексу, який використовується як унікальний ідентифікатор для кожної нотатки.

Функція pageLoaded ()

Функції стають доступними в контексті сторінки за допомогою використання експорту. Раніше у файлі notes-page.xml ви бачили, що функція pageLoaded () виконується, коли сторінка завантажується.

Всередині функції pageLoaded () ми почнемо з посилання на цю сторінку. Потім ми покажемо форму для створення нової нотатки та отримаємо поточно збережені значення нового заголовка замітки та примітки у налаштуваннях програми.

Потім, як і раніше в межах функції pageLoaded (), перевірте наявність приміток, які зберігаються локально. Якщо ні, ми створюємо масив нотаток. Цей масив буде служити за замовчуванням для нових користувачів додатка. Однак, якщо деякі примітки зберігаються локально, ми перетворюємо їх в масив, а потім натискаємо ці дані на видимий масив.

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

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

Анімація форми для створення нових нотаток. Ми робимо це, використовуючи функцію getViewById у виді та передаючи в контексті (поточну сторінку) як перший аргумент і атрибут id, призначений для елемента, який ви хочете маніпулювати.

Далі, зателефонуйте до анімаційної функції. Це приймає об'єкт, що містить анімаційні налаштування. Тут ми хочемо, щоб форма зсунула вниз 160 пікселів з початкової позиції протягом 800 мілісекунд.

The newNote() Function

Функція newNote () виконується, коли користувач стирає елемент дії нового елемента у заголовку. Це приховує і показує новий елемент ListView і перетворює форму вгору або вниз залежно від поточного значення showForm.

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

Функція btnLoaded ()

У файлі notes-page.xml ми маємо атрибут завантаження в цій кнопці для видалення примітки. Ця функція виконується, коли відбувається така подія.

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

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

Функція openCamera ()

Далі - функція openCamera (), яка запускається, коли користувач натискає кнопку Attach Image. Поточний стан не підтримується при використанні модуля камери, тому спочатку потрібно зберегти назву нової нотатки в настройках програми.

Після цього ми можемо запустити пристрій за замовчуванням камери на пристрої, викликаючи метод takePicture (). Цей метод приймає об'єкт, що містить параметри зображення. Після того, як користувач зробив знімок і натиснув кнопку «Зберегти» на пристрої Android або кнопку «Використовувати зображення» на пристроях iOS, обіцянка буде вирішена, а функція зворотного виклику, що передається до (), буде виконана.

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

Функція збереження ()

Функція saveNote () виконується, коли користувач натискає кнопку Save Note. Це отримує поточне значення тексту заголовка нотатки та шляху зображення, збільшує current_index і натискає новий елемент у масив звичайних нот і видимих масивів нот. Потім він зберігає поточні нотатки та current_index в налаштуваннях програми, знімає значення для нової нотатки з налаштувань програми, оновлює інтерфейс користувача таким чином, що форма відображає порожній стан і відображає цей список при приховуванні нової нотатки.

Функція deleteNote ()

Нарешті, ми маємо функцію deleteNote (), яка запускається, коли користувач натискає кнопку видалення всередині елемента списку. Як ви вже бачили з попередніх функцій, об'єкт переданий як аргумент функціям, які додається як обробник подій для певного компонента. Цей об'єкт має властивість об'єкта, яка відноситься до самого компонента.

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

6. Додавання стилів

Відкрийте файл app.css і додайте наступні глобальні стилі:

Якщо ви хочете застосувати стилі, специфічні для сторінки, ви також можете створити файл notes-page.css та визначити там свої стилі.

7. Запуск і налагодження програми

Ви можете запустити додаток на своєму пристрої за допомогою команди tns, а потім платформи, на якій ви хочете розгорнути. Ось приклад для android:

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

Налагодження

Подібно до будь-якої іншої програми, NativeScript дозволяє розробникам налагоджувати додаток. Це зроблено за допомогою інструментів Chrome dev. Існує два способи цього зробити:

  1. Якщо пристрій вже запущено, ви можете відкрити нове вікно термінала та запустити tns debug android -start, щоб приєднати відладчик до поточного запущеного примірника додатка.
  2. Якщо у вас ще немає додатка, запустіть tns debug android --debug-brk, щоб створити екземпляр програми з доданим до нього дебаггер.

Незалежно від того, який варіант ви виберете, це відкриє нову вкладку в браузері Google Chrome, яка дає змогу налагодити додаток як звичайне веб-програму для веб-переглядача. Це означає, що ви можете використовувати console.log у вихідному коді для перевірки вмісту змінних, з якими ви працюєте.

Висновок та наступні кроки

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

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

  • Створіть додаток для керування продуктів харчування, дотримуючись посібника для початківців NativeScript.
  • Якщо ви знаєте кутовий, і ви хочете використовувати його для побудови прикладних програм NativeScript, ви також можете слідкувати за навчальним посібником про створення додатків з NativeScript і Angular 2.
  • Перегляньте список перевірених плагінів та деяких плагінів, доступних у npm, щоб мати уявлення про різні функції, які можна включити до наступного додатку, не торкаючись Native API, який показує NativeScript.
  • Якщо ви хочете дізнатись, як краще викладати свої програми, перегляньте статтю про демістифікацію макетів NativeScript Джена Лоупера.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.