Статьи

Дайвинг-руководитель первым на платформе Telerik

Я делаю гибридное мобильное приложение с AppBuilder на OSX. Вот мой день # 1.

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

Итак, что строит тогда Кларк? Ну, год назад я купил этот вентилятор для дома, сделанный AirScape . Теперь вы можете смотреть на это высказывание: «Да, это немного излишне вождь». Возможно, но есть две причины, по которым я его купил:

  • Тихий. Я имею в виду, действительно тихо. Нет, на самом деле, вы понятия не имеете, насколько эта штука действительно тихая.
  • У него есть веб-сервер. Да, позвольте мне повторить, у него есть веб-сервер. Этот щенок выдвигает воздушные и угловые скобки. ФАКТ: прежде, чем я даже купил это, угловые скобки называли мое имя.

Со всем, что я сейчас делаю, казалось, что пришло время наконец взять эту маленькую идею и воплотить ее в жизнь. За прошедший год я уже написал маленькое приложение для Windows Phone.

Приложение Windows Phone AirEscape

Просто я знаю, но я \ мы используем это все время, и это обеспечило большую ценность. В этом также очень помогло то, как я думаю об общей схеме использования и сценариях, в которых мы ее используем. Я сделал много изменений, чтобы поддержать несколько разных идей, но суровая реальность, я просто не удосужился отправить его. Честно говоря, я был слишком одержим развертыванием iOS и Android, и я действительно не хотел поддерживать ряд различных кодовых баз. В конце концов, у меня есть дневная работа (новенькая на заметку), семья, и я управляю той конференцией . Излишне говорить, что у меня слишком много вещей происходит.

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

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

Personas

Давайте начнем с персон. Кто именно является пользователем этого? С самого начала это казалось бы простым, домовладельцы, но так ли это на самом деле? Есть ли другие? Теперь у меня двое детей, и за последний год они могут взять трубку, чтобы выключить вентилятор. Они также используют настенный выключатель, который не связан ни с одним мобильным приложением.

В целом, я думаю, будет справедливо сказать, что основным пользователем будет домовладелец, а вторым — остальные члены семьи, в том числе дети.

Теперь есть третья персона самого дома, но об этом в другой день.

Характеристики

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

  • Включите и выключите вентилятор.
  • Установите таймер на вентилятор.
  • Увеличьте скорость вращения вентилятора.
  • Понизьте скорость вентилятора.
  • Покажите какой-нибудь индикатор относительной скорости вентилятора.
  • Индикатор прогресса при вызове вентилятора.
  • Поддержка в iOS, Android, Windows Phone.
  • Управление: Адрес вентилятора.
  • Дисплей: версия полезной нагрузки.
  • Возможность дать: Обратная связь для меня.

Вне функциональности

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

Я хотел бы сделать еще один шаг и добавить что-то вроде следующего:

  • Нажмите уведомления о том, когда скорость вентилятора изменилась. Есть настенные выключатели, и было бы уведомлено, если вентилятор был включен случайно, скажем, возможно, окна закрыты.
  • Geofencing. Когда вы выходите из дома, будьте уведомлены, если вентилятор на самом деле все еще включен. Это может звучать как странная особенность, но этот вентилятор всасывает немного ОСНОВНОГО воздуха через дом и ОЧЕНЬ довольно. Поэтому, если вы спешите и выбегаете из дома, закрывая все окна, вы можете забыть выключить вентилятор.
  • Поддержка NFC. Я часто ложусь спать и просто устанавливаю вентилятор на скорость 2 и устанавливаю таймер на 2 часа. Для этого мне нужно открыть приложение, бла, бла. Почему бы просто не прикоснуться к наклейке NFC рядом с кроватью и автоматически установить ее. Вы можете себе представить, что это меняет способ взаимодействия с вентилятором и самим приложением. Я мог бы иметь наклейку NFC в гараже, которая сделала бы обратное и просто перекрыла все на пути к машине.
  • Какие-то пробные версии, да, я собираюсь взимать плату за это, так как немного пива было бы неплохо.

AppBuilder

Чтобы добиться всего этого, мы собираемся создать гибридное мобильное приложение с использованием Telerik’s AppBuilder . Начать работу в AppBuilder довольно просто:

  • Направляйтесь на platform.telerik.com
  • Создайте аккаунт и авторизуйтесь.
  • Создать новую рабочую область (коллекцию проектов).
  • Создайте проект и начните кодировать.

Сейчас есть несколько разных проектов (5 на самом деле), которые мы можем создать, а именно:

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

платформенные проекты

Привет мир

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

Новый проект

Я начинаю с шаблона проекта Kendo UI Mobile. По сути, это пустой шаблон с уже добавленным интерфейсом Kendo. Здесь вы можете увидеть проекты рядом, так как они не сильно отличаются друг от друга:

Шаблоны проектов бок о бок

Без базового шаблона, давайте просто запустим его в симуляторе.

Бег

Который выведет симулятор в новом окне браузера.

Бег

Если вы оставите этот симулятор в рабочем состоянии, вы увидите, когда изменения кода будут внесены в AppBuilder и сохранены, что симулятор обновится автоматически. Подобно тому, как работает что-то вроде LiveReload .

Попутно мне случайно удалось обнаружить сочетания клавиш. Я забыл, что был в браузере, нажал Ctrl + S , и все было сохранено, как и ожидалось. Мы все довольно привыкли к этим ярлыкам из нашей любимой IDE и, разумеется, очень приятное прикосновение.

Также не забудьте проверить создание нового проекта для более подробной информации.

Настройка CLI

Подождите минуту, я не хочу кодировать в браузере. Это круто, позвольте мне познакомить вас с CLI. Стратегия здесь одинакова для Windows и OSX, но в мире OSX есть несколько пробелов. Чтобы выйти из браузера, нам нужно убедиться, что у нас уже есть несколько настроек.

  1. OSX Mavericks (или Windows, если вы на компьютере с Windows)
  2. node.js и 0.10.22 или выше.
  3. Возвышенный текст . В этом случае я использую бета-версию v3.

При соблюдении базовых требований мы можем добавить CLI AppBuilder и пакет Sublime Text. Важно, прежде чем мы сможем установить пакет для Sublime, нам нужно настроить CLI. Существует пакет NPM для этого удобно называемого appbuilder .

npm install appbuilder -g

Теперь для меня это то, с чего началась #FAILWHALE. Мой пакет начал устанавливаться, а затем просто рванул из-за прав безопасности. Опять же, это моя первая неделя, и у меня есть машина, которая не была новой установкой, поэтому я пытался сделать все правильно. Мне удалось получить некоторые ошибки, такие как:

npm ERR! Please try running this command again as root/Administrator.

Изучив несколько вещей, оказалось, что у меня возникли странные проблемы с разрешениями, поэтому я запустил две разные команды:

sudo chown -R `whoami` ~/.npm
sudo chown -R $USER /usr/local

Переустановите установку npm, и она прошла прямо до конца.

Вы можете найти официальные системные требования для CLI AppBuilder здесь.

Далее, настройка Sublime

Если вы используете Sublime Text, первое, что нам нужно сделать (если вы этого еще не сделали), это настроить менеджер пакетов. Это просто, проверьте Установка Sublime Package Manager

Теперь, когда у нас есть менеджер пакетов, нам просто нужно установить наш пакет AppBuilder. Вы можете найти пакет здесь: https://sublime.wbond.net/packages/Telerik%20AppBuilder как Telerik AppBuilder. Он также появится в меню управления пакетами, как и следовало ожидать.

Связывание контроля версий

Теперь, когда у нас есть несколько таких настроек, нам действительно нужно настроить наш источник управления. Это действительно наша связь между platform.telerik.com и просто разработкой на местном уровне. Независимо, это просто хорошая идея, верно?

Для меня я создал новый проект на GitHub. Затем просто интегрировал его с моим проектом AppBuilder и клонировал его локально. Смотрите все подробности о том, как интегрировать контроль версий .

Сборка и запуск

После клонирования репо я открыл свою папку в Sublime и нажал Инструменты -> Telerik AppBuilder -> Построить и развернуть .

Построить и развернуть строку меню

Теперь, когда я сделал это, я получил:

There are no projects in your currently opened folders
Deploy failed

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

appbuilder build ios --compainion

Но удалось получить это:

No project found at or above '/Users/Sell/source/github/AirEscapeAppCopy/AirEscape' and neither was a --path specified.

примечание: мы можем запустить версию для Android или Windows Phone, а также сборку приложения для Android — compainion, сборку приложения для wp8 — compainion

Честно говоря, я понятия не имел, что здесь происходит. Почему это не работает, ведь мы говорим, что все работает в браузере. Кроме того, я мог видеть свой файл проекта прямо здесь, так что на самом деле было не так? Как оказалось, частью моей проблемы был тот факт, что мне не хватало другого файла проекта под названием .abproject .

Чтобы создать это, давайте вернемся к CLI. Найдите в нашем каталоге проектов и выполните следующее:

$ appbuilder init

Это создаст новый скрытый файл, снова называемый .abproject, из каталога, в котором вы выполнили команду. Это файл JSON, в котором содержится ряд параметров сборки. Эти настройки будут использоваться позже при создании наших пакетов для соответствующих магазинов приложений.

Быстрая боковая панель … Возможно, вы скрываете скрытые файлы и не видите файл .abproject . Если вы хотите показать все файлы в поисковике, запустите из терминала следующее:

defaults write com.apple.finder AppleShowAllFiles YES
relaunch your finder.

Создав наш файл .abproject, мы можем снова запустить его из терминала, и все будет работать так, как ожидается. Сказав, что Sublime Text по-прежнему не работает, так как он хочет подключиться к устройству. Это то, о чем я расскажу, когда мы пойдем дальше, и я знаю, что это немного отличается от OSX и Windows.

Бег

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

AppBuilder для iOS

Раньше, когда мы запускали appbuilder build ios —compainion, мы делали, чтобы облако создавало пакет, который мы можем установить в сопутствующем приложении. Вот почему вы увидели, что браузер открыт с QR-кодом после завершения сборки.

Чтобы установить наше приложение, откройте сопутствующее приложение и проведите тремя пальцами по экрану вправо. Здесь вы увидите меню « Мой проект» , « QR-сканер» и « Справка» . Выберите QR-сканер и отсканируйте тот QR-код, который выдал CLI. Это установит эту сборку вашего приложения. Теперь мы можем играть далеко, но наше приложение еще ничего не значит. После установки вы можете просто удерживать три пальца на экране, и он обновится самой последней версией.

Теперь мы работаем локально, И в облаке, что довольно круто. Теперь нам просто нужно что-то построить.

Следующие шаги

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

Быстрые ссылки

~ Кларк