Знайомство з Telerik AppBuilder



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

Якщо ви належите до числа таких розробників, вам варто звернути увагу на розробку гібридних додатків, так що ви зможете працювати з мовою, який ви вже знаєте, будь то: HTML5 або JavaScript. Більш того, ви можете використовувати популярні фреймворки, наприклад: Twitter Bootstrap або jQuery Mobile для розробки своїх програм.

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

Чому Telerik AppBuilder?

Однією з основних причин використовувати AppBuilder є повноцінна онлайн IDE. Вона дозволяє створювати, тестувати і навіть публікувати гібридні програми з будь-якого комп'ютера або мобільного пристрою, без необхідності в його завантаженні.

Можливість створювати iOS додатки працюючи на Windows або Linux ще одна перевага.

І на останок, приналежність AppBuilder до Telerik Platform дає вам можливість користуватися такими фічами як аналітика, спливаючі повідомлення, авторизація користувачів і хмарним сховищем.

Приступимо до створення програми!
Все, що вам потрібно для початку, це аккаунт на Telerik. Якщо у вас його ще немає, ви можете створити використовуючи безкоштовну 30 денну версію.

Відкриваємо нове вікно в браузері і заходимо в Telerik Platform. Відразу після авторизації ви потрапляєте на сторінку зі списком ваших додатків.



Після натискання на Create app вас буде поставлено декілька питань, стосовно розроблювального додатка.

Спочатку потрібно вибрати тип розроблювального додатка, ми виберемо Cordova Hybrid так як ми будемо створювати програми з використанням Apache Cordova, популярного фреймворку для розробки гібридних додатків.



Тепер дамо нашому додатком ім'я і опис.



Натискаємо Create App для генерації налаштованого гібридного застосування, яке використовує фреймворк Kendo UI за замовчуванням.

Створюємо Views
Як тільки додаток створено, ви потрапите в Views service. За допомогою цього сервісу ви можете створювати views без HTML коду.

Створимо простий додаток конвертер. Воно буде мати два views:

Converter в якому користувач буде вводити вагу в кілограмах
About буде показувати відомості про програму

Почнемо з About. Виберемо Home View і натиснемо Change view type. Ви побачите кілька шаблонів. Натискаємо на шаблон About.



На наступному скріні, ми задаємо заголовок для About і натискаємо на Template, щоб налаштувати вміст подання. Як правило, «about» має: ім'я, версію і опис. Тому, заповніть ці поля належним чином. Шаблон включає в себе кнопки соціальних мереж. Ми не будемо їх використовувати сьогодні, тому знімаємо прапорець з кнопок Contact us, Facebook і Twitter.

Як тільки ви натиснули на кнопку Apply, у вас з'явиться можливість побачити view, який ви тільки що створили.



Тепер давайте натиснемо на кнопку Add View і створимо конвертер view. Вам ще раз запропонують вибрати шаблон. Цього разу вибираємо шаблон Form, так як цей view буде мати два поля:

  • Перше поле для введення ваги в кілограмах.
  • Другий буде показувати вартість.
На наступному скріні, заповнюємо поле Title Name і для конвертера. Для того, щоб додати поля введення натискаємо на Form Fields і після натискаємо на кнопку Add form fields. Тепер вам потрібно вибрати типи полів.



Так як вага повинен бути в кілограмах вибираємо input Number. Назвемо його kgs і дамо йому відповідну мітку.

Аналогічним чином, створюємо текстове поле і назвемо його result. Переконайтеся, що ви, так само, дали йому відповідну позначку.

Тепер, коли поля готові натискаємо на Buttons. Шаблон форми включає в себе кнопки confirm і cancel. Нам не потрібна кнопка cancel тому знімаємо прапорець з неї.

Натискаємо Apply, зберігаємо зміни. Тепер view має виглядати так:



Налаштовуємо шаблон навігації
Створимо можливість перемикання між вікнами, для цього будемо використовувати шаблон навігації. Для налаштування навігації перемкнемося до розділу Navigation.

Додаток буде використовувати Tab Menu як шаблон для навігації.

About, за замовчуванням, є головною сторінкою програми. Щоб використовувати конвертер в якості головної сторінки, натиснемо на Application start up і виберемо Converter як Initial view.



Навігаційне меню буде виглядати наступним чином:



Створюємо логіку роботи програми
Тепер, коли користувальницький інтерфейс готовий, давайте за допомогою JavaScript коду побудуємо механізм конвертації.

Щоб відкрити редактор потрібно натиснути на Code. Там ви знайдете директорію для кожної зі створених сторінок, які містять файли view.html і index.js.



Відкриваємо Converter, файл index.js ви помітите, що AppBuilder вже створив об'єкт kendo.вами з назвою converterModel для управління створеною формою. Він має fields містять імена форм, які ми створили. У ньому також є функція submit, яка викликається при натисканні на кнопку Підтвердити. Як ви вже здогадалися, весь наш код повинен бути розміщений у функції submit.

Тепер, все що нам потрібно це дістати значення fields.kgs, помножити його на 2.2046 і оновити значення поля fields.result. Щоб дістати і задати значення converterModel нам потрібно використовувати методи get і set. Додамо наступний код у файл index.js:

// START_CUSTOM_CODE_converterModel

var model = app.converter.converterModel;
model.set("submit", function() {
var lbs = model.get("fields.kgs") * 2.2046; 
model.set("fields.result", lbs + " lbs"); 
});

// END_CUSTOM_CODE_converterModel

Зауважте, що вам потрібно писати код між автоматично згенерованими коментарями START_CUSTOM_CODE і END_CUSTOM_CODE.

Тестування
Наше додаток готове. Щоб протестувати його ми можемо використовувати вбудовані в AppBuilder симулятори. Запустимо iPhone симулятор, натисненням на клавіші Ctrl + F6. Після запуску програми перевіряємо чи працює конвертація.



AppBuilder також дозволяє протестувати програму на різний версіях iOS.

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



Додаток працює коректно і на Android симуляторі. Тим не менше, воно виглядає незвично як для Android, додатки. Це тому, що наш додаток використовує skin з назвою flat. Щоб надати йому material design вигляд, відкриємо app.js і змінимо значення skin на material.

Додаток буде виглядати так:



Використання AppBuilder Companion App
Симулятор дуже корисний у процесі розробки. Тим не менш, ніколи не завадить протестувати і на реальному девайсі. З допомогою AppBuilder's companion app, можна легко і швидко це зробити.

Після того як ви завантажили companion app на пристрій, відкрийте редактор і натисніть Ctrl + B. Далі вас попросять вибрати платформу на якій ви хочете запустити додаток. Далі, виберіть опцію AppBuilder companion app і натисніть на кнопку Next.



Після завершення складання ви побачите наступне:



Тепер ви можете відкрити AppBuilder companion app на вашому пристрої і сканувати QR code, щоб запустити програму.

Використання AppBuilder's CLI
Якщо ви віддаєте перевагу працювати локально з командного рядка, ви можете використовувати AppBuilder's CLI (Command Line Interface). CLI являє собою пакет Node.js, який ви можете легко завантажити використовуючи npm (Node Package Manager).

sudo npm install -g appbuilder

Більшість функцій в CLI стають доступні після входу в Telerik. Тому, використовуйте наступну команду перш ніж робити які-небудь дії:

appbuilder login

Як тільки ви залогинились, ви можете використовувати опцію -h для того, щоб ознайомиться з командами, які appbuilder може вам запропонувати.

appbuilder -h

Висновок
У цьому керівництві ми ознайомилися з основними можливостями Telerik AppBuilder для розробки гібридних додатків, а також дізналися, як використовувати AppBuilder's companion app і device simulator для тестування додатків. Ми сфокусувалися на розробці в онлайн редакторі, але для тих хто воліє використовувати IDE, AppBuilder, також пропонує Windows клієнт Visual Studio розширення.

По посиланню нижче, ви можете знайти відео з обговоренням платформи Telerik AppBuilder та огляд основних можливостей.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.