Вступление
Многие веб-разработчики уклоняются от разработки мобильных приложений, полагая, что им потребуется слишком много времени, чтобы освоить веревки разработки мобильных приложений. Ну, они не совсем ошибаются, потому что изучение того, как разрабатывать нативные приложения для мобильной платформы, обычно означает знакомство не только с новым языком программирования, но также с концепциями и шаблонами, которые часто зависят от платформы.
Если вы один из этих разработчиков, вам следует подумать о создании гибридных приложений, поскольку вы можете работать с языками, с которыми вы уже знакомы: HTML5, CSS и JavaScript. Более того, вы можете использовать популярные платформы, такие как Twitter Bootstrap или jQuery Mobile, для создания своих приложений.
Теперь, когда я обращаю ваше внимание, давайте погрузимся в Telerik AppBuilder , мощную облачную среду разработки, которая делает невероятно простым создание гибридных приложений. В этом уроке мы рассмотрим, что может предложить AppBuilder, и при этом создадим простое гибридное приложение.
Почему стоит выбрать Telerik AppBuilder
Одной из наиболее веских причин для использования AppBuilder является его клиент в браузере, полноценная IDE (интегрированная среда разработки), которая работает в браузере. Он позволяет создавать, тестировать и даже публиковать гибридные приложения с любого компьютера или мобильного устройства без необходимости устанавливать что-либо локально.
Возможность разработки приложений для 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 . Для этого выберите Home View и нажмите Change type view . Теперь вам будет представлено несколько шаблонов просмотра. Нажмите на шаблон О.
На следующем экране установите заголовок « О» и щелкните заголовок « Шаблон», чтобы настроить содержимое представления. Как правило, экран «о» содержит название, версию и описание приложения. Поэтому заполните эти поля соответствующим образом. Шаблон также включает в себя социальные кнопки. Мы не будем использовать их сегодня, поэтому снимите флажки « Связаться с нами» , « Facebook» и « Twitter» .
После того, как вы нажмете кнопку « Применить» , вы сможете увидеть только что созданный вид.
Давайте теперь создадим представление Converter , нажав кнопку Add View . Вам будет предложено снова выбрать шаблон. На этот раз выберите шаблон формы , потому что это представление будет иметь два поля ввода:
- одно поле, чтобы принять вес в килограммах
- другое поле, чтобы показать вес в фунтах
На следующем экране установите в поле « Заголовок» значение « Конвертер», а в поле « Имя» — « Конвертер» . Чтобы добавить два поля ввода, сначала щелкните заголовок « Поля формы», а затем нажмите кнопку « Добавить поля формы» . Теперь вам будет предложено выбрать тип поля формы.
Поскольку вес в килограммах должен быть числом, выберите Ввод числа из списка параметров. Назовите его в килограммах и присвойте ему соответствующий ярлык.
Аналогичным образом создайте текстовое поле и назовите его result . Убедитесь, что вы также даете ему соответствующую этикетку.
Теперь, когда поля формы готовы, щелкните заголовок кнопки . По умолчанию шаблон формы имеет кнопку подтверждения и кнопку отмены. Нам не нужна кнопка отмены, поэтому снимите флажок кнопки Отмена .
Нажмите Применить, чтобы сохранить изменения. Теперь вид должен выглядеть так:
3. Настройка макета навигации
Чтобы пользователи могли перемещаться между двумя созданными нами представлениями, служба «Виды» уже добавила в наше приложение схему навигации. Чтобы настроить его, перейдите в раздел « Схема навигации ».
Вы увидите, что в настоящее время приложение использует меню вкладок в качестве макета навигации. Я собираюсь оставить это так, но вы можете экспериментировать с другими доступными вариантами.
По умолчанию наше приложение использует представление About в качестве начального представления. Чтобы использовать конвертер в качестве начального вида, щелкните заголовок запуска приложения и установите для параметра « Начальный вид» значение « Конвертер» . Не забудьте нажать « Применить», чтобы сохранить изменения.
Навигация вашего приложения должна выглядеть следующим образом:
4. Добавление пользовательского кода
Теперь, когда пользовательский интерфейс нашего приложения готов, давайте напишем некоторый код JavaScript для фактического перевода из килограммов в фунты.
Слева нажмите « Код», чтобы открыть редактор кода. Это покажет структуру гибридного проекта. Вы увидите, что для каждого созданного нами представления есть каталог, содержащий файлы с именами view.html и index.js . В то время как view.html содержит код HTML, который определяет макет представления, index.js содержит код JavaScript, который может обрабатывать различные события пользовательского интерфейса.
Откройте файл index.js представления конвертера . Вы заметите, что AppBuilder уже создал объект kendo.observable именем converterModel для управления созданной нами формой. У него есть атрибут fields содержащий имена созданных нами элементов формы. Он также имеет функцию submit которая вызывается, когда пользователь нажимает кнопку подтверждения . Как вы уже догадались, весь наш код должен быть добавлен в функцию submit .
Код для перевода из килограммов в фунты почти тривиален. Все, что вам нужно сделать, это получить значение fields.kgs , умножить его на 2.2046 и обновить значение fields.result . Чтобы получить и установить атрибуты converterModel , вам придется использовать методы get и set . Добавьте следующий код в файл index.js :
« `javascript // START_CUSTOM_CODE_converterModel // Добавить пользовательский код здесь. Для получения дополнительной информации о пользовательском коде см. Http://docs.telerik.com/platform/screenbuilder/troublesho//how-to-keep-custom-code-changes.
var model = app.converter.converterModel; model.set («submit», function () {var lbs = model.get («fields.kgs») * 2.2046; // получить fields.kgs и умножить на 2.2046 model.set («fields.result», lbs +) «Lbs»); // set fields.result});
// END_CUSTOM_CODE_converterModel « `
Обратите внимание, что вы должны написать свой собственный код между автоматически сгенерированными комментариями START_CUSTOM_CODE и END_CUSTOM_CODE . Если вы этого не сделаете, ваш код будет утерян, когда вы внесете дополнительные изменения в свои представления с помощью службы представлений.
5. Использование симуляторов устройства
Наше приложение готово. Чтобы проверить это, мы можем использовать один из множества симуляторов устройств, которые включает AppBuilder. На данный момент, запустите симулятор iPhone, нажав Control + F6 . Когда приложение запустится, проверьте, работает ли логика преобразования, введя число в первое текстовое поле и нажав кнопку « Подтвердить» .
Вы можете изменить ориентацию симулятора устройства, чтобы увидеть, как он выглядит в ландшафтном режиме. Для этого нажмите одну из кнопок поворота вверху.
AppBuilder также позволяет тестировать ваше приложение на разных версиях iOS. Вы можете изменить версию операционной системы, щелкнув раскрывающийся список Версия вверху.
Теперь, когда вы увидели, как приложение выглядит и ведет себя на iPhone, давайте запустим его на другом симуляторе устройства. Нажмите раскрывающийся список со списком устройств и выберите Android Phone .
Вы заметите, что приложение прекрасно работает и на симуляторе Android. Однако это не совсем похоже на приложение для Android. Это потому, что наше приложение в настоящее время использует skin под названием flat . Чтобы придать материалу внешний вид, откройте app.js и измените значение skin на материал .
Приложение теперь должно выглядеть так:
6. Использование AppBuilder’s Companion App
Симуляторы устройства очень полезны при разработке. Однако всегда полезно определить, как приложение работает на реальном телефоне или планшете. Используя сопутствующее приложение AppBuilder, запустить приложение на вашем устройстве так же просто, как запустить его в симуляторе.
После того, как вы установили сопутствующее приложение на физическое устройство, откройте редактор кода и нажмите Control + B, чтобы начать процесс сборки. Вам будет предложено выбрать платформу, на которой вы хотите запустить приложение. Убедитесь, что выбранная вами платформа соответствует устройству, на котором вы установили сопутствующее приложение. Затем выберите опцию приложения AppBuilder и нажмите кнопку « Далее» .
Когда сборка завершится успешно, вы должны увидеть следующий экран:
Теперь вы можете открыть приложение AppBuilder на своем устройстве и отсканировать QR-код, чтобы запустить ваше приложение.
7. Использование CLI AppBuilder
Если вы предпочитаете работать локально из командной строки, вы можете использовать CLI AppBuilder (интерфейс командной строки), который может делать практически все, что может сделать клиент в браузере. Поскольку CLI — это пакет Node.js, вы можете легко установить его с помощью npm (Node Package Manager).
bash sudo npm install -g appbuilder
Большинство функций, включенных в CLI, доступны только после входа в свою учетную запись Telerik. Поэтому используйте следующую команду для входа в систему, прежде чем делать что-либо еще:
bash appbuilder login
После входа в систему вы можете использовать опцию -h, чтобы увидеть, что команда appbuilder может сделать для вас.
bash appbuilder -h
Чтобы помочь вам начать, вот как вы можете загрузить весь код приложения, которое мы создали в клиенте в браузере:
bash appbuilder cloud export "My First App"
Вывод
Из этого руководства вы узнали, как использовать Telerik AppBuilder для создания простого гибридного приложения. Вы также узнали, как использовать сопутствующее приложение AppBuilder и симуляторы устройств для тестирования приложения. Несмотря на то, что сегодня мы сосредоточились на клиенте в браузере, для разработчиков, которые предпочитают использовать обычную среду разработки, AppBuilder также предлагает автономный клиент Windows и расширение Visual Studio .
Начните бесплатную пробную версию сегодня . Чтобы узнать больше о AppBuilder, вы можете обратиться к его полной документации .