Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Cordova
Code

Как создать To-Do приложение с помощью Polymer и Cordova

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Final product image
What You'll Be Creating

Введение

Еще в ранние дни Android, когда еще не было хороших фреймворков для пользовательского интерфейса, и большинство устройств Android были недостаточно мощными, создание гибридных приложений-приложений, разработанных с использованием веб-технологий, таких как HTML5, CSS и JavaScript, было действительно плохой идеей.

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

В этом уроке я покажу вам, как создать простой, гибридный список дел для Android. Интерфейс приложения будет соответствовать спецификации material дизайна от Google, родному внешнему виду Android Lollipop и Marshmallow. Для этого мы будем использовать Polymer, Polymer paper elements и Apache Cordova.

Предпосылки

Чтобы следовать, вам понадобятся:

  • Последняя версия Android SDK
  • Последняя версия Node.js
  • Android-устройство или эмулятор под управлением Android 5.0 или более поздней версии
  • Базовое понимание HTML5, CSS и JavaScript

Если вы новичок в Cordova, то найдите время, чтобы прочитать это введение от Вернера-Бел Анчета. Это введение должно прибавить вам скорости.

1. Зачем использовать Polymer?

Polymer - это фреймворк, который позволяет быстро создавать пользовательские веб-компоненты, полимерные элементы. Используя элементы Polymer, вы можете сделать свои веб-приложения более модульными, а ваш будет легче повторно использовать. После создания элемент может использоваться так же, как и другие теги HTML на HTML-страницах. Например, если вы создали пользовательский элемент с именем my-element, его можно использовать на любой HTML-странице, используя следующий код:

Более того, используя платформу Polymer, вы можете использовать функции привязки данных, которые она предоставляет, чтобы сделать ваш код JavaScript более простым и менее подверженным ошибкам.

2. Что такое Polymer Paper Elements?

Paper элементы - это полимерные элементы, которые были созданы в соответствии с material дизайном. Они могут использоваться как альтернативы обычным элементам HTML. Например, если вы хотите добавить кнопку на свою страницу, вы можете использовать элемент paper-button. Код для этого выглядит так:

Аналогичным образом, если вы хотите добавить карточку или кнопку плавающего действия, вы можете использовать paper-card или paper-fab. Я уверен, что вы сейчас начинаете понимать полезность элементов Polymer и Paper.

3. Что такое Apache Cordova?

Приложение, созданное с использованием элементов Polymer и Polymer, в основном представляет собой набор файлов HTML, CSS и JavaScript. Это означает, что для запуска требуется браузер. Тем не менее, оно может работать внутри веб-представления, собственного элемента пользовательского интерфейса, который ведет себя как безымянный браузер.

Apache Cordova - это среда, которая позволяет создавать собственное приложение, содержащее веб-представление, и указывать страницы HTML, которые вы хотите отобразить. В этом уроке мы будем использовать Apache Cordova для запуска приложения списка дел на устройствах Android.

4. Настройка веб-проекта

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

Создайте новый каталог для проекта и назовите его todoWebApp.

Чтобы управлять зависимостями проекта, мы будем использовать Bower. Если вы не установили Bower, используйте npm для его глобальной установки.

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

Это завершает настройку веб-проекта.

5. Создание пользовательского полимерного элемента

Теперь создадим пользовательский элемент Polymer, содержащий код как для макета, так и для функциональности веб-приложения списка дел. Начните с создания нового файла и назовите его tasks-list.html.

Шаг 1: Импорт элементов Paper

Каждый Paper элемент, используемый в компоновке настраиваемого элемента, должен быть импортирован отдельно. Чтобы создать интерфейс веб-приложения, мы будем использовать следующие элементы:

  • paper-toolbar для создания панели инструментов
  • paper-button для создания различных кнопок
  • paper-fab для создания кнопки с плавающим действием
  • paper-listbox для создания списка, содержащего задачи
  • paper-item для создания отдельных задач внутри списка
  • paper-checkbox для создания флажков, которые пользователь может выставить, чтобы отметить задачи как завершенные
  • paper-icon-button для рисования кнопок с иконками
  • paper-input для рисования текстового поля, которое пользователь может использовать для ввода имени задачи
  • paper-dialog для создания модального диалога
  • iron-icons для рисования иконок

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

Шаг 2: Создание DOM

Полимерные элементы можно рассматривать как HTML-страницы. Подобно HTML-страницам, элементы Polymer имеют собственное дерево DOM, содержащее различные теги для элементов пользовательского интерфейса, теги style для стилизации и теги script для кода JavaScript.

Чтобы создать DOM, мы должны использовать тег dom-module и установить его атрибут id для имени элемента. Давайте назовем этот элемент tasks-list. Обратите внимание, что имя должно содержать дефис.

Шаг 3: Создание макета

Создание макета с использованием элементов Polymer так же просто, как создание макета с использованием HTML-элементов, только теги будут немного разные. Однако вы должны убедиться, что все детали макета находятся внутри тега template.

Вот код, который вы можете добавить в dom-module, чтобы создать макет приложения списка дел:

Это может показаться большим количеством кода, но если вы знакомы с выражениями HTML и handlebars, вы обнаружите, что он довольно интуитивно понятен.

Как вы можете видеть, теги элементов Polymer можно свободно использовать вместе с тегами HTML, а встроенные стили можно использовать для настройки их внешнего вида.

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

Вы также заметили, что помимо элементов Polymer и HTML-тегов мы использовали хелпер dom-repeat у тега template. Если вы еще не догадались об этом, он работает как оператор for и может использоваться для прокрутки всех элементов массива. В нашем макете он используется для создания отдельных задач, относящихся к массиву задач.

Шаг 4: Регистрация элемента

Прежде чем мы сможем использовать пользовательский элемент Polymer в HTML-страницах, мы должны зарегистрировать его, используя функцию Polymer. Эта функция ожидает один объект JavaScript, который содержит функции и свойства элемента. По крайней мере, объект должен иметь свойство is, определяющее имя настраиваемого элемента.

Добавьте тег script после тега template и добавьте к нему следующий код:

Шаг 5: Инициализация элемента

В макете нашего элемента мы использовали два свойства внутри выражений дескриптора, tasks и lastTaskName. Однако элемент еще не обладает этими свойствами. Чтобы добавить и инициализировать их, мы должны использовать ready метод. На данный момент мы можем просто инициализировать tasks пустым массивом и lastTaskName пустой строкой.

Добавьте следующий код после свойства is:

Шаг 6: Хранение, обновление и удаление данных

Чтобы навсегда сохранить задачи, которые пользователь добавляет в список дел, мы будем использовать локальное хранилище через объект localStorage. Давайте теперь напишем код для добавления задачи в локальное хранилище.

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

Благодаря двусторонней привязке данных Polymer все, что пользователь вводит в paper-input диалогового окна, доступно сразу в свойстве latestTaskName. Поэтому внутри прослушивателя on-click кнопки «Добавить» мы можем просто добавить lastTaskName в localStorage с помощью метода setItem.

LocalStorage хранит данные в виде пар ключ-значение. Чтобы сохранить задачу, мы будем использовать имя задачи в качестве ключа и будет ли оно завершено или нет как значение. Поскольку localStorage работает только со строками (в настоящее время булевы не поддерживаются), мы сохраним «yes», если задача будет завершена, и no в противном случае.

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

Аналогично, когда пользователь проверяет или отменяет флажок, связанный с задачей, мы можем обновить значение, хранящееся в объекте localStorage, путем вызова метода setItem. Поскольку мы использовали хелпер dom-repeat у тега template для рисования отдельных элементов paper-listbox мы можем использовать объект model, присутствующий в событии on-change, чтобы получить имя задачи, связанной с этим флажком. Кроме того, перед тем, как сохранить его в localStorage, нам нужно преобразовать логическое значение checked флажков в состояние «yes» или «no».

Если пользователь хочет удалить задачу, он может щелкнуть по paper-icon-button, связанной с этой задачей. Чтобы удалить задачу навсегда, вызовите метод removeItem объекта localStorage в прослушивателе on-click у paper-icon-button.

Шаг 7. Отображение задач

Возможно, вы заметили вызовы updateTasks в методах addTask и deleteTask. В методе updateTasks мы обновляем массив tasks, который мы инициализировали в методе ready, чтобы отразить содержимое объекта localStorage. Это необходимо, поскольку хелпер dom-repeat у template используемый для отображения списка задач, работает только с массивом.

В массиве tasks мы используем объекты JSON для представления задач. Каждый объект JSON имеет два поля: taskName и isComplete. TaskName - это строка, содержащая имя задачи, а isComplete - логическое значение, указывающее, завершена ли задача.

Чтобы позволить Polymer обнаруживать изменения в массиве tasks, вместо использования стандартных функций массива, мы должны использовать методы манипуляции массивом, присутствующие в элементе Polymer. На данный момент мы будем использовать метод splice для удаления всех элементов из массива за один раз и метод push для добавления элементов в массив.

Следующий код создает метод updateTasks, который пробегает по всем элементам объекта localStorage и добавляет их в массив tasks.

В настоящий момент массив tasks обновляется только тогда, когда пользователь добавляет или удаляет задачу. Чтобы отображать задачи сразу после открытия приложения, мы должны добавить вызов метода updateTasks внутри метода ready.

Наш пользовательский Polymer элемент готов к использованию.

6. Использование пользовательского Polymer элемента

Давайте теперь создадим HTML-страницу и добавим к ней пользовательский элемент. Создайте новый файл, назовите его index.html и добавьте в него HTML теги head и body.

Прежде чем использовать элемент, мы должны добавить тег link для импорта tasks-list.html. Кроме того, чтобы удалить отступы и поля, а также использовать гибкий макет, добавьте в тег body CSS классы fullbleed, layout и vertical. Поскольку эти классы CSS определяются элементом iron-flex-layout, мы должны добавить тег link для его импорта.

При наличии указанных выше имён мы можем добавить тег tasks-list в тег body. Теперь ваш файл должен выглядеть следующим образом:

7. Запуск приложения в браузере

Наше настоящее веб-приложение списка задач готово. Поскольку для структуры Polymer нужен HTTP-сервер для запуска приложения, запустите его с помощью модуля SimpleHTTPServer Python внутри каталога проекта.

Теперь вы можете посетить http://localhost:8000/ для использования своего приложения.

App running in Google Chrome

8. Настройка проекта Cordova

Теперь, когда нам удалось успешно запустить приложение в браузере, пришло время преобразовать его в приложение для Android, вставив его в проект Cordova.

Это означает, что сначала нам нужно глобально установить интерфейс командной строки Cordova (интерфейс командной строки) с помощью npm:

Чтобы создать новый проект Cordova, мы можем использовать команду create cordova. В качестве аргументов команда ожидает имя каталога, в котором должен быть создан проект Cordova, идентификатор имени домена приложения и имя приложения.

Чтобы внедрить наш веб-проект внутри проекта Cordova, нам также необходимо включить опцию copy-from и указать местоположение веб-проекта.

Следующая команда создает проект Cordova для приложения под названием To-do внутри каталога todo и содержит веб-проект, расположенный в todoWebApp:

Проект Cordova, который мы только что создали, пока еще не поддерживает платформу. Чтобы добавить поддержку платформы Android, перейдите в каталог todo и используйте команду cordova platform.

9. Запуск приложения

Не написав ни одной строки кода наш проект Cordova уже готов к работе. Давайте построим его с помощью команды corova build. Прежде чем продолжить, убедитесь, что значение переменной окружения ANDROID_HOME установлено в местоположение Android SDK.

Если сборка завершится неудачно, показывая что файл web-animations.min.js.gz не может быть добавлен к APK, попытайтесь удалить файл и попробовать снова собрать проект.

Как только сборка завершится успешно, разверните приложение на своем Android-устройстве, используя команду cordova run.

Теперь вы должны увидеть приложение, запущенное на вашем устройстве.

App running on Android device

Заключение

В этом уроке вы узнали, как использовать элементы Polymer и Polymer Paper для создания веб-приложения списка задач. Вы также узнали, как встраивать веб-приложение в проект Cordova, чтобы он работал как гибридное приложение на устройствах Android. Несмотря на то, что мы сосредоточены только на платформе Android, вы также можете запустить приложение на устройстве iOS без каких-либо изменений кода. Чтобы сделать эту работу, вам нужно снова использовать команду cordova platform, чтобы добавить поддержку платформы iOS.

Чтобы узнать, как создавать более сложные интерфейсы с использованием Polymer, я хотел бы направить вас к документации Polymer.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.