Мобильное приложение на HTML5 со штатным интерфейсом

Опубликовано 5/28/2014

Недавно я побывала на конференции Front Trends 2014 в Варшаве. Конференция очень крутая, обязательно посетите её в следующем году. У них всегда интересная основная программа, и кроме неё есть ещё мини-доклады от всех желающих. В этом году одним из таких докладов был мой, о фреймворке и инструментах для разработки HTML5/JavaScript мобильных приложений Steroids. Если вы не были на конференции, то можете прочесть мою презентацию в тексте.

Я совсем новичок в разработке мобильных приложений, но всё равно решилась показать, как пользоваться Steroids, потому что благодаря ему я смогла сделать приложение с системным интерфейсом (native UI) и безболезненно пройти через весь цикл разработки за считанные минуты.

Инструменты Steroids — это пакет с command line интерфейсом. Вместе с ним вы получите JavaScript-фреймворк Steroids. А также инструменты обеспечат вам сборку проекта, удобный процесс разработки, отладки и релиза. Всё написано под NodeJS, так что потребуется его установить.

Нужна версия 0.10.25. В инструкции Installation and Setup Guide подробно написано, как устанавливать.

Самая первая команда, которой вы воспользуетесь, — это steroids create. Затем, в получившейся папке проекта наберите steroids connect --watch — запустится процесс steroids. Флаг --watch нужен, чтобы Steroids отслеживал изменения файлов и каждый раз пересобирал проект и обновлял его на подключенных устройствах.

Вы можете подключить к проекту реальный телефон. После запуска steroids connect откроется окно браузера с QR-кодом. Считайте этот QR-код мобильным приложением AppGyver Scanner — и проект окажется в вашем телефоне (а кроме того — будет обновляться).

Appstore Googleplay

Другой способ — открыть проект в Simulator. Для этого наберите simulator в окне терминала, где запускали steroids connect.

Теперь можете изменить исходный код приложения. Например, напишите свой текст в файле www/index.html. После этого можете проверить, что приложение в подключенном телефоне или в симуляторе изменилось.

Научиться, как сделать более серьезные изменения в проекте, вы можете из примеров и туториалов. Запустите steroids generate, и получите нужный код.

Можете смотреть, как устроены эти примеры, учиться по туториалам и API документации. Дальше я покажу как использовать в вашем приложении некоторые штатные элементы интерфейса, то есть писать на HTML5/JavaScript приложение с native UI.

Давайте начнем с табов.

Вы можете найти закомментированный пример использования табов в файле config/application.coffee. Это список табов с их иконками и ссылками, на которые они ведут.

В моём приложении я создаю 3 таба для следующих страниц:

  • index.html
  • notificationExample.html
  • knowledge.html
steroids.config.tabBar.enabled = true
steroids.config.tabBar.tabs = [
  {
    title: "Index"
    icon: "icons/pill@2x.png"
    location: "http://localhost/index.html"
  },
  {
    title: "Notifications"
    icon: "icons/bell.png"
    location: "http://localhost/notificationExample.html"
  },
  {
    title: "Knowledge base"
    icon: "icons/coding.png"
    location: "http://localhost/knowledge.html"
  }
]

Положите html-файлы этих страниц в папку www. Пока они могут быть пустыми. Также не забудьте об иконках, можете взять из моего репозитория всю папку icon folder.

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

Дальше можно поиграть с нотификациями.

Разместите код этих кнопок внутри тега <body> на странице www/notificationExample.html.

<button
  class="button button-block"
  ontouchend="showAlert()">Show alert dialogue</button>
<button
  class="button button-block"
  ontouchend="showConfirm()">Show confirm dialogue</button>
<button
  class="button button-block"
  ontouchend="showPrompt()">Show prompt dialogue</button>
<button
  class="button button-block"
  ontouchend="vibrate()">Vibrate the device</button>

Кнопки реагируют на прикосновения пользователя и запускают различные JavaScript-функции. Чтобы сделать страницу работающей, нужно задать эти функции в <head> или *.js файле страницы. Каждая из них иллюстрирует работу своего вида нотификации, такого как: a kind of notification which are:

  • navigator.notification.alert
  • navigator.notification.confirm
  • navigator.notification.prompt
  • navigator.notification.vibrate

Код функций можете взять из моего репозитория.

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

Следующий системный элемент — кнопка на навигационной панели (navigation bar).

Навигационная панель может быть изменена при помощи JavaScript-хелперов фреймворка Steroids. Если вы хотите сделать её одинаковой для всех страниц приложения, то разместите код в файле www/javascripts/application.js, который подключен ко всем *.html файлам.

var loginButton = new steroids.buttons.NavigationBarButton();
loginButton.title = "the Button";

loginButton.onTap = function() {
    navigator.notification.alert(
        'You tapped the button!',
        function(){},
        'the Alert',
        'I did!'
    );
}

steroids.view.navigationBar.update({
    buttons: {
      right: [loginButton]
    }
})

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

И последний пример штатного интерфейса в этом приложении — модальное окно.

Разместите эту кнопку в файле www/index.html:

<a
  class="button button-block"
  ontouchend="showModal()">Open modal</a>

И определите функцию showModal, которая открывает модальное окно с соответствующим содержанием.

function showModal() {
  var webView =
    new steroids.views.WebView("/views/modalExample/show.html");
  steroids.modal.show(webView);
}

Что показывать в модальном окне, должно быть написано в файле app/views/modalExample/show.html. Кстати, не забудьте, что там должна быть кнопка закрывания модального окна. Чтобы всё прошло быстрее, позаимствуйте код из репозитория приложения.

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

Когда приложение закончено (или даже в процессе), вы можете захотеть показать его другу, клиенту или даже маме.

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

Если вы хотите показать приложение удаленно, разместите код в облаке. Для этого есть команда steroids deploy. В результате вы тоже получите страницу с QR-кодом. Его можно считать при помощи AppGyver Scaner и получить в своём телефоне приложение прямо из облака.

Вы можете делиться всеми своими приложениями из облака. А также настраивать их и собирать релизы. Всё это делается через web-интерфейс cloud.appgyver.com.

Отсюда же приложения можно отправлять в AppStore и GooglePlay.

Видите, это просто. Настолько просто, что даже новичок может не только разработать приложение, но и сделать об этом презентацию с живым кодом на конференции.

Узнать больше о Steroids и Cordova (в основе Steroids лежит PhoneGap) можно в AppGyver Academy. Там есть:

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

И, конечно, вы можете читать этот блог. Я собираюсь делиться своими следующими открытиями относительно Steroids в ближайшее время :-)