Начало работы с Telerik AppBuilder

() translation by (you can also view the original English article)

Введение

Многие веб-разработчики уклоняются от разработки мобильных приложений, думая, что им потребуется слишком много времени, чтобы изучить возможности разработки мобильных приложений. Они не совсем ошибаются, потому что изучение разработки собственных приложений для мобильной платформы обычно означает знакомство не только с новым языком программирования, но и с концепциями и шаблонами, которые часто зависят от платформы.

Если вы один из тех разработчиков, вам следует подумать о создании гибридных приложений, потому что тогда вы сможете работать с уже знакомыми вами языками: HTML5, CSS и JavaScript. Более того, вы можете использовать популярные фреймворки, такие как Twitter Bootstrap или jQuery Mobile для создания ваших приложений.

Теперь, когда я заполучил ваше внимание, давайте погрузимся в Telerik AppBuilder, мощную облачную среду разработки, которая делает невероятно легким создание гибридных приложений. В этом уроке мы рассмотрим, что AppBuilder может предложить, и при этом создадим простое, гибридное приложение.

Почему выбирают Telerik AppBuilder

Одной из наиболее веских причин для использования AppBuilder является его браузерный клиент, полнофункциональная среда разработки (Integrated Development Environment), работающая в браузере. Он позволяет создавать, тестировать и даже публиковать гибридные приложения с любого компьютера или мобильного устройства без необходимости устанавливать что-либо локально.

Возможность разработки приложений для iOS с использованием компьютеров под управлением Windows или Linux - еще одна причина, по которой вы хотели бы использовать AppBuilder. Имитаторы устройств iOS также могут использоваться из любой операционной системы.

Наконец, поскольку AppBuilder является частью платформы Telerik, это означает, что ваше приложение имеет легкий доступ к таким функциям, как аналитика, push-уведомления, аутентификация пользователей и облачное хранилище данных.

Предпосылки

Чтобы следовать этому руководству, все, что вам нужно, это учетная запись Telerik. Если у вас его еще нет, вы можете зарегистрироваться бесплатно и сразу же начать 30-дневную пробную версию.

1. Создание нового приложения

В этом уроке мы будем работать в основном с клиентским браузером AppBuilder. Откройте новую вкладку в своем браузере и войдите в Telerik Platform. После входа в систему вы увидите страницу со списком всех ваших приложений.

Чтобы создать новое приложение, нажмите кнопку Создать приложение. Теперь вам будет предложено указать различные детали приложения.

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

Затем укажите содержательное имя и описание приложения, заполнив поля Имя приложения и Описание. Я буду в качестве имени использовать My First App.

Наконец, нажмите кнопку Создать приложение, чтобы создать полностью настроенное гибридное приложение, которое по умолчанию использует фреймворк пользовательского интерфейса Kendo.

2. Создание представлений

После того, как приложение будет создано, вы попадете в службу Views. С помощью этой службы вы можете создавать все виды вашего гибридного приложения без необходимости писать HTML код.

В этом уроке мы создадим очень простое приложение, которое преобразует килограммы в фунты. Оно будет иметь два вида:

вид под названием Конвертер, в котором пользователь может ввести вес в килограммах
в представлении About будет отображается информация о приложении

Давайте сначала создадим представление About. Для этого выберите Home View и нажмите Изменить тип вида. Теперь вам будут представлены несколько шаблонов. Нажмите шаблон About

На следующем экране установите Title в About и щелкните Template заголовок, чтобы настроить содержимое представления. Как правило, экран "about" имеет имя, версию и описание приложения. Поэтому заполните эти поля соответствующим образом. Шаблон также включает социальные кнопки. Мы не будем использовать их сегодня, поэтому снимите флажки Contact us, Facebook button и Twitter button.

Как только вы нажмете кнопку Apply, вы сможете увидеть только что созданный вид.

Давайте теперь создадим представление Converter, нажав кнопку Add View. Вам будет предложено снова выбрать шаблон. На этот раз выберите шаблон Form, потому что это представление будет иметь два поля ввода:

одно поле для приема веса в килограммах
другое поле, чтобы показать вес в фунтах

На следующем экране установите для поля Title значение Converter и Name в converter. Чтобы добавить два поля ввода, сначала щелкните заголовок Form Fields и нажмите кнопку Add form fields. Теперь вам будет предложено выбрать тип поля формы.

Поскольку вес в килограммах должен быть числом, выберите Number input из списка параметров. Назовите его kgs и присвойте ему соответствующую метку.

Аналогичным образом создайте Text box и назовите его result. Удостоверьтесь, что вы даете ему соответствующую метку.

Теперь, когда поля формы готовы, щелкните заголовок Buttons. По умолчанию шаблон формы имеет кнопку подтверждения и кнопку отмены. Мы не нуждаемся в кнопке отмены, поэтому снимите флажок Cancel button.

Нажмите Apply, чтобы сохранить изменения. Теперь представление должно выглядеть так:

3. Настройка макета навигации

Чтобы пользователи могли перемещаться между двумя созданными нами представлениями, служба Views уже добавила макет навигации в наше приложение. Чтобы настроить его, перейдите в раздел Navigation Layout.

Вы увидите, что приложение в настоящее время использует Tab Menu в качестве макета навигации. Я собираюсь оставить это таким образом, но вы можете поэкспериментировать с другими доступными вариантами.

По умолчанию наше приложение использует представление About в качестве начального представления. Чтобы использовать Converter в качестве начального вида, щелкните заголовок Application start up и установите значение Initial view в Converter. Не забудьте нажать Apply, чтобы сохранить изменения.

Теперь макет навигации вашего приложения должен выглядеть следующим образом:

4. Добавление пользовательского кода

Теперь, когда пользовательский интерфейс нашего приложения готов, давайте напишем код JavaScript, чтобы выполнить фактическое преобразование с килограммов в килограммы.

Слева нажмите Code, чтобы открыть редактор кода. Это покажет структуру гибридного проекта. Вы увидите, что для каждого созданного нами представления есть каталог, содержащий файлы с именем view.html и index.js. Хотя view.html содержит HTML-код, который определяет макет представления, index.js содержит код JavaScript, который может обрабатывать различные события пользовательского интерфейса.

Откройте файл отображения Converter в файле index.js. Вы заметите, что AppBuilder уже создал объект kendo.observable, называемый convertModel, для управления созданной нами формой. Он имеет атрибут fields, содержащий имена элементов формы, которые мы создали. Он также имеет функцию submit, которая вызывается, когда пользователь нажимает кнопку Confirm. Как вы могли догадаться, весь наш код должен быть добавлен в функцию submit.

Код для преобразования от килограммов к фунтам почти тривиален. Все, что вам нужно сделать, это получить значение fields.kgs, умножить его на 2.2046 и обновить значение fields.result. Чтобы получить и установить атрибуты convertModel, вам придется использовать методы get и set. Добавьте следующий код в файл index.js:

// START_CUSTOM_CODE_converterModel
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

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

// END_CUSTOM_CODE_converterModel

Обратите внимание, что вы должны написать свой собственный код между автоматически сгенерированными комментариями START_CUSTOM_CODE и END_CUSTOM_CODE. Если вы этого не сделаете, ваш код будет потерян при внесении дальнейших изменений в ваши представления с помощью службы Views.

5. Использование симуляторов устройств

Наше приложение готово. Чтобы протестировать его, мы можем использовать один из многих симуляторов устройств, включенных в AppBuilder. На данный момент запустите iPhone-симулятор, нажав Control + F6. Когда приложение запустилось, проверьте, работает ли логика преобразования, набрав номер в первом текстовом поле и нажав кнопку Confirm.

Вы можете изменить ориентацию симулятора устройства, чтобы посмотреть, как он выглядит в ландшафтном режиме. Для этого нажмите одну из кнопок Rotate вверху.

AppBuilder также позволяет тестировать ваше приложение на разных версиях iOS. Вы можете изменить версию операционной системы, щелкнув раскрывающийся список Version вверху.

Теперь, когда вы увидели, как приложение выглядит и ведет себя на iPhone, давайте запустим его на другом симуляторе. Нажмите раскрывающийся список, содержащий список устройств, и выберите Android Phone.

Вы заметите, что приложение отлично работает и в эмуляторе Android. Однако оно не очень похоже на приложение для Android. Это потому, что наше приложение в настоящее время использует skin с именем flat. Чтобы придать ему внешний вид и дизайн material, откройте приложение app.js и измените значение skin на material.

Теперь приложение должно выглядеть так:

6. Использование приложения Companion от AppBuilder

Симуляторы устройств очень полезны во время разработки. Тем не менее, всегда полезно определить, как приложение работает на реальном телефоне или планшете. Используя AppBuilder companion app, запустить приложения на вашем устройстве так же просто, как запустить его на симуляторе.

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

Когда сборка завершится успешно, вы увидите следующий экран:

Теперь вы можете открыть приложение компаньона AppBuilder на своем устройстве и отсканировать QR-код для запуска вашего приложения.

7. Использование CLI AppBuilder

Если вы предпочитаете работать локально из командной строки, вы можете использовать CLI (интерфейс командной строки) AppBuilder, который может делать почти все, что может сделать клиент в браузере. Поскольку CLI представляет собой пакет Node.js, его можно легко установить с помощью npm (Node Package Manager).

1	sudo npm install -g appbuilder

Большинство функций, включенных в CLI, доступны только после входа в вашу учетную запись Telerik. Поэтому для входа в систему используйте следующую команду:

1	appbuilder login

После входа в систему вы можете использовать параметр -h, чтобы узнать, что команда appbuilder может сделать для вас.

1	appbuilder -h

Чтобы помочь вам начать, вот как вы можете загрузить весь код приложения, которое мы создали в браузере:

1	appbuilder cloud export "My First App"

Заключение

В этом уроке вы узнали, как использовать Telerik AppBuilder для создания простого, гибридного приложения. Вы также узнали, как использовать приложение-компаньон AppBuilder и симуляторы устройств для тестирования приложения. Несмотря на то, что сегодня мы сосредоточились на клиентском браузере, разработчики, предпочитающие использовать обычную IDE, AppBuilder также предлагает автономный клиент Windows и расширение Visual Studio.

Начните бесплатную пробную версию сегодня. Чтобы узнать больше о AppBuilder, вы можете обратиться к его всеобъемлющей документации.