мобильное приложение на html css
Андроид игры и приложения на HTML+JS+CSS возможно ли?
Интересует ли вас можно ли делать приложения и игры для Android на платформе HTML с помощью стилей CSS и вычислений Javascript? Ну раз вы сейчас читаете эти строки, то наверняка вам это интересно. Поехали.
В этом материале вы сможете узнать о том как делать HTML приложения и игры на Андроид, какими инструментами пользоваться. Плюсы и минусы и всё в этом духе.
Во-первых приложения и игры на HTML+CSS+JS очень даже можно делать для Андроида. Главное только захотеть.
Тут можно пользоваться либо готовыми фреймворками для построения игр на Android (+куча других платформ) ну или делать всё ручками. Как становиться понятно первый способ это такой более шаблонный путь с шаблонными настройками и отсутствием полного контроля происходящего. Грубо, дерзко, быстро. Как топором по хлебу. Второй способ лишён этих весьма ощутимых недостатков, но подразумевает потрату большего времени (с нами у вас много времени это не займёт), но финишный продукт будет на ПОРЯДОК качественнее, оптимизированнее и круче. А ведь ради качества всё должно делаться.
Давайте рассмакуем эти два пути.
1. Фрейморк + HTML + CSS + JS
Для того чтобы быстро портировать с HTML в APK игру можно использовать своего рода фрейморк для этого заточенный. Такими являются PhoneGap и IndelXDK. Первый мне к счастью не довелось опробовать, а вот второй к сожалению да.
Какие от этого всего впечатления? Сыро. Плохо. Очень плохо.
На самом деле я не знаю кто использует эти продукты, но они выдают в итоге намного меньшее качество, чем если бы я установил Android SDK и сам всё начал запиливать и разбираться в низкоуровневом устройстве создания APK приложений. Лучше потратить немногим больше времени и игра не будет тормозит будет меньше занимать объём, будет легче её обновлять, связывать с Android функциями и тд.
Как уже говорилось используя фреймворк работа более автоматизирована с первой секунды. И эта автоматизация порождает все минусы:
— Тормознутость. Из-за большого количества навешанных, но неиспользуемых библиотек производительность может весьма опечалить.
— Ограниченность. Вы всё время ограничены в кастомизации настроек вашего приложения. Хотите поставить рекламу? ОГРАНИЧЬТЕСЬ!
— Размер. Конечный APK файл с приложением HelloWord был больше 6Мб (IntelXDK)
+ Разом на все платформы (Хоть криво и косо)
2. Android SDK + HTML + CSS + JS
Это уже совсем другой расклад. Хоть здесь придётся поработать ручками, зато вы получаете продукт совершенно другого качества. И это факт!
Итак, на чём же выполняется работа?
Как выглядит с технического окна весь процесс?
Как же это работает всё может возникнуть вопрос у человека, который задумал неладное создать своё игру на HTML под Android. Давайте разберёмся немного в последовательности действий:
1. Создание проекта в Eclipse (Ниже подробнее)
2. Создание проекта на HTML
3. Всовываем HTML в Android и отлаживаем
4. Экспортируем и подписываем приложение
5. Оптимизируем утилитой zipaling
6. Регистрируемся в Google Play
7. Там же опубликовываем приложение
Вот так делается игра без Android-фреймворков. От А до Я. Мы расписали самым подробным образом как сделать таким способом приложение или игру (фактически шаблон с Android стороны куда вы можете всовывать любой HTML проект попутно настраивая мелкие детали Android шаблона под нужды приложения/игры).
Если вы заинтересовались этой темой, значит вам интересно что поддерживает из HTML-технологий мобильная платформа и насколько успешно? Думаю я угадал, давайте коснёмся этой темы.
Итак, каким фреймворком и технологией делать игру или приложение на HTML?
Canvas
Очень глючен на андроиде любой версии. Мягкости нет никакой. Подёргивается порой даже на разрешении 320×480, не говоря уже о планшетах (с ростом разрешения производительность канваса теряется).
Несмотря на то что технология поддерживается давно, а SMIL анимация с Android 3.0, нет тоже стабильности в работе. Много почему-то не работает. Ведёт себя порой загадочно. Для анимирования мало подойдёт.
Подерживается всеми версиями андроида и очень на славу используется практически везде.
Начиная с Android 3.0 поддерживается CSS3 со всеми фичами. Анимация работает очень плавно и хорошо. На данный момент лучше всего анимировать обхекты и что-либо делать основываясь на возможностях CSS.
Создаем приложение для ANDROID быстро и просто
После успешной установки мы можем создать свой первый проект.
Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.
Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.
По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.
В идеале, вместо локальных файлов можно сделать загрузку со стороннего сайта. В этом случае Вы можете менять контент приложения без его обновления в AppStore и Google Play.
Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?
Все очень просто! JavaScript можно использовать для вызова функций Android:
Мы видим, что теперь программа ругается на Export так как не знает что это такое.
Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.
Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.
Немного модифицируем файл login.htm:
Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.
📱Создаем мобильное приложение для Android на JavaScript с помощью Apache Cordova
furry.cat
Распространение мобильных устройств в наше время достигло невероятных значений. Мобильный телефон есть у 2 из каждых 3 человек на планете. С помощью мобильных люди общаются, делают покупки, получают образование, играют. Это огромный рынок, который нельзя оставлять без внимания.
Однако чтобы разрабатывать приложения для мобильных платформ, нужно владеть определенным языком программирования. Swift – для iOS, Java или Kotlin – для Android. Или JavaScript – для iOS, Android и ряда других ОС!
Да-да, JavaScript везде, и на мобильных в том числе. На данный момент есть несколько известных и проверенных фреймворков для создания кроссплатформенных мобильных приложений на этом языке, например, React Native и Apache Cordova, а также основанные на ней проекты.
Для разработки на React Native требуется знание библиотеки React и основных паттернов работы с ней. Cordova же может взять обычное веб-приложение и обернуть его нужным кодом так, чтобы оно работало на мобильных ОС. Такие «гибридные» приложения не могут похвастаться высокой нативной производительностью, однако очень просты в разработке.
Cordova отлично подходит для создания простых проектов без сложной графики. Сейчас мы как раз разработаем один из них – классическое Todo App для Android на JavaScript.
Шаг #0. Настройка среды разработки
Так как мы пишем приложение для Android, нам понадобится JDK (Java Development Kit) и Android SDK – среда разработки для приложений Android. А также собственно Cordova.
Установочник для нужной платформы можно найти на сайте Oracle. Выбирайте версию не выше JDK 8, с более новыми Cordova не будет работать.
Android Studio
Для разработки под Android также потребуется установить Android Studio.
Добавьте в переменную PATH каталоги tools и platform-tools :
Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).
Создание эмулятора
Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.
Для этого зайдите в меню AVD Manager:
И создайте эмулятор с нужными параметрами.
Cordova
Осталось глобально установить npm-пакет Cordova:
Шаг #1. Превращение веб-страницы в Android-приложение
Подготовительные работы закончены, пора приступать к самому интересному.
Вероятно, самый интересный вопрос – как запустить обычную веб-страницу на устройстве Android. Чтобы ответить на него, создадим пустой проект Cordova и разберемся на практике.
Создание пустого проекта
Команда для создания нового проекта Cordova:
deviceready – это событие, которое вызывает сама Cordova. Нетрудно догадаться, что оно возникает после того, как устройство, на котором запущено приложение будет готово его воспроизводить. Так как мы запустили проект в обход Cordova, это событие не возникает, поэтому надпись Connecting to device не исчезает.
Добавление платформы
Укажем целевые платформы для проекта – у нас это только Android:
Сборка проекта
Команда для сборки проекта для Android-платформы:
Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!
Запуск на эмуляторе или устройстве
Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.
Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:
Кордова сама соберет проект, обнаружит устройство и запустит приложение
Можно обойтись и без реального устройства.
Запустите созданный ранее эмулятор в Android Studio:
и снова выполните команду:
На этот раз кордова найдет эмулятор и запустит проект на нем:
Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.
#Шаг 2. TODO-приложение
Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.
Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:
Отладка
Запущенное на эмуляторе или реально устройстве приложение Cordova можно отлаживать через браузер Chrome.
Для этого перейдите по адресу: chrome://inspect/#devices, найдите устройство в списке и нажмите Inspect.
Шаг #3. Использование функциональности платформы
До сих пор наше приложение использовало только функциональность веб-платформы. Однако Cordova предоставляет доступ и к возможностям мобильного устройства – через многочисленные плагины.
Для примера реализуем нативные диалоговые окна и оповещения.
Диалоговые окна
Теперь в коде приложения нам доступ объект navigator.notification с четырьмя методами:
Нам нужен метод confirm :
Напоминания о делах
Еще одна очень полезная функциональность – напоминание о делах в установленное время.
Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.
Использование в коде:
А для планирования оповещений понадобится плагин cordova-plugin-local-notification.
Использование в коде проекта:
Публикация проекта в Google Play
Приложение готово, осталось только собрать его для продакшена.
В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.
Чтобы выложить проект в Google Play, его нужно подписать.
Для этого нужно сгенерировать ключ:
Теперь скомпилируем проект с ключом:
Важно указать правильное имя ключа и алиас.
Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):
Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.
Мобильный HTML-интерфейс, взгляд изнутри
Меня зовут Сухоруков Роман, я сотрудник отдела мобильной разработки в компании «1С-Рарус».
Мы занимаемся разработкой тиражных решений на платформе 1С. Наши приложения ориентированы на широкий круг пользователей.
На сегодняшний момент наши приложения имеют более 5 000 активных платных подписок в App Store и Google Play.
Наши приложения установили более 3 000 000 пользователей.
25 000 из них поставили нам оценку
средний бал 4.5 (достаточно неплохой показатель)
В разное время наши приложения входили в Топ 10 в 88 странах мира в своих категориях.
Приложение Boss – для автоматизации малого и среднего бизнеса;
Fitness – приложение для занятий спортом в зале и дома;
Приложение Budget – помощник учета личных финансов;
Приложение Diets – поможет составить/ подобрать оптимальную диету по запросам пользователя.
Мобильные интерфейсы с использованием HTML/CSS/JavaScript
Любое успешное приложение должно быстро и эффективно решать проблему пользователя, и, к тому же, должно иметь приятный, красивый, функциональный и понятный интерфейс.
B своих решениях мы чаще всего используем интерфейсы на стеке HTML / CSS / JavaScript. Применение этого стека технологий дает нам большие возможности, и в принципе наши интерфейсы могут в какой-то степени даже конкурировать с интерфейсами нативных приложений.
Пример формы из приложения Fitness – это форма выполнения тренировки.
В начальных версиях она была реализована строго с применением инструментария, предоставляемого платформой 1С, и выглядела так, как показано слева.
А справа можно увидеть, как нам удалось её улучшить с помощью HTML.
Я думаю, разница очевидна – форма стала более красивой, более удобной, интерактивной и, в принципе, смотрится намного живее.
Календарь в мобильном приложении 1С
Сегодня я хотел бы поделиться некоторыми нашими наработками в этой области на примере вот такой формы календаря для мобильного приложения на 1С.
Форма календаря представляет собой динамический список месяцев, который при нажатии на дату календаря трансформируется в список задач.
Исходники этой формы можно скачать в моей публикации и познакомиться поближе.
Рассмотрим ее логику работы:
у нас есть динамический список месяцев, который в один момент времени хранит данные за 6 месяцев (три месяца, которые мы видим на экране и 3 месяца, выходящие за пределы экрана);
все остальные данные подгружаются по мере необходимости – во время прокрутки пользователем динамический список генерирует события, которые мы перехватываем на форме 1С, и в ответ отправляем скрипту на JavaScript необходимые ему данные (например, данные за следующий месяц).
Так структурно выглядит форма календаря в JavaScript:
у нас есть базовый класс View, который отвечает за отрисовку всех элементов на экране;
от него наследуются три класса – Calendar, Month, Task.
Класс Calendar, собственно говоря, реализует механизм динамического списка – при прокрутке по достижении предельного положения генерируется событие «MonthRequest», которое передает на форму 1С дату месяца, данные которого нам необходимо получить.
Класс Month может быть в двух режимах работы:
закрытый режим, когда пользователь видит перед собой месяц полностью;
и режим списка задач за день.
В момент нажатия на любую дату месяца на форме 1С генерируется событие «GetTasks», по которому мы передаем список задач на эту дату. Впоследствии представление месяца разворачивается на весь экран и становится списком задач.
Класс Task – это представление задачи, которое содержит ссылку 1С на элемент справочника «Задачи» и дату для отображения в списке.
Механизм взаимодействия
Чтобы реализовать такую логику, нам необходимо иметь возможность отправлять на HTML-форму данные (большие данные, не только примитивы) и получать обратную связь от формы в виде событий. Этим в форме календаря как раз и занимается подсистема конвертации.
Основное назначение подсистемы конвертации – это:
запуск кода JavaScript и получение переданных параметров из кода 1С;
и генерация событий на форме 1С.
Подсистема конвертации использует для этого два полезных события поля HTML-документа – это:
«ДокументСформирован» – событие, которое возникает, когда у нас в память полностью загружены структура HTML-документа и все скрипты, и мы можем обращаться к JavaScript-коду из кода 1С. Мы используем это событие для инициализации формы и её заполнения данными.
«ПриНажатии» – событие, которое возникает перед началом перехода по ссылке в поле HTML-документа, в него мы будем получать все события, которые генерируют HTML-интерфейс.
Выполнение JavaScript-кода из 1С
Чтобы передать какие-то значения, запустить JavaScript-код из кода 1С, нам необходимо воспользоваться свойством поля HTML-документа defaultView.
Свойство defaultView становится доступным на клиенте, когда документ полностью сформирован и загружен в память (после события «ДокументСформирован»).
Свойство defaultView соответствует объекту window в JavaScript и, по сути, является глобальным контекстом нашего скрипта.
Строго говоря, с помощью свойства defaultView мы можем напрямую из кода 1С вызвать любую функцию JavaScript. Но передавать в качестве параметров и получать в результате можем только примитивы – такие, как Число, Булево или Строка.
Но поскольку нам этого мало, мы путем сериализации в JSON передаем все, что угодно – для этого используется подсистема конвертации.
Организация обмена данными с полем HTML-документа
Но предварительно мы приводим к определенному формату все объектные данные и данные, несериализуемые в JSON по умолчанию – например, дата становится структурой с двумя полями – тип и значение, после чего полученные данные сериализуются в JSON.
Казалось бы, мы получаем строку, которую уже можно передать и выполнить на стороне JavaScript. Но на самом деле, это не так – мобильная платформа может передавать не все строки. Если в строке присутствуют фигурные скобки, переносы строк, какие-то непечатаемые символы, то она будет проигнорирована и функции JavaScript будет передано пустое значение, как будто мы вообще ничего не передавали. Поэтому дополнительно мы строку JSON кодируем еще в URL.
И на стороне JavaScript это преобразуется обратно – средствами подсистемы конвертации выполняются обратные преобразования и создаются необходимые нам сущности для работы на форме.
Таким образом мы можем передавать не только примитивы, но и практически любые данные – структуры, массивы, даты, ссылки на справочники и документы.
Например, в форме календаря ссылка на справочник «Задачи» передается в объект TaskRef, который содержит в себе идентификатор и представление ссылки. Получается, что мы с таким объектом можем практически работать так, как если бы мы работали из кода 1С на клиенте со ссылкой.
Генерация события из кода JavaScript
Теперь о получении событий. Как я уже говорил, все события мы получаем в обработчике «ПриНажатии», который срабатывает перед началом перехода по гиперссылке.
Но поскольку, при прокрутке календаря необходимо вызвать это событие программно, мы можем выполнить переход средствами JavaScript.
В этом нам поможет объект location, а точнее, его метод assign, куда мы передаем URL перехода – только в нашем случае это будет не просто URL, а сериализованное в JSON и кодированное в URL описание случившегося события.
На формуле календаря это выглядит примерно так:
мы вызываем метод assign, которому передаем сериализованную структуру с полями name и parameter – поле name содержит имя события, которое необходимо запустить на форме 1С, а поле parameter содержит передаваемый параметр;
плюс ко всему перед сериализованной строкой добавляем URL-схему и домен – это необходимая деталь, потому что без домена событие «ПриНажатии» может быть просто проигнорировано платформой.
На слайде показана строка, которая генерируется при получении от динамического списка календаря запроса события «MonthRequest» для вывода следующего месяца.
Получение данных события и их обработка
Строку с событием мы получаем в процедуре «ПриНажатии» в свойстве Href переданного параметра «ДанныеСобытия».
Вот так выглядит значение свойства href при получении данных от JavaScript-события – в данном случае, мы от динамического списка календаря в подсистему конвертации получили запрос события «MonthRequest», которое должно вывести данные за следующий месяц, и в качестве параметра передана дата 01.06.2020.
Как вы видите, здесь это значение уже автоматически декодировано из URL-формата, то есть нам достаточно только десериализовать и восстановить объектные значения.
На слайде показано, как выглядит обработчик оповещения формы календаря – здесь мы обрабатываем все события.
На основании структуры, которая передается в событии «ПриНажатии», мы запускаем процедуру «Оповестить» и оповещаем все обработчики оповещений 1С о случившемся событии – передаем имя события и параметр.
Например, если обрабатывается событие «MonthReguest», мы запускаем процедуру «addMonth», которая добавляет новый месяц в список календаря, а противоположный месяц удаляется с формы. Таким образом у нас динамический список всегда хранит только шесть месяцев.
При клике на определенный месяц календаря возникает событие «GetTasks», чтобы его обработать, мы передаем список задач методу «showTasks».
Преимущества использования web-стека
Формы web-стека дают нам дополнительные возможности, такие как:
возможность детально проработать любой пиксель на экране, любой отступ, генерировать анимацию каждого элемента;
мы можем обрабатывать touch-события – любой жест пользователя, свайп, движение одним-двумя-тремя пальцами тоже можно перехватить на форме и создать функциональный отзывчивый интерфейс;
это работает быстрее, чем форма 1С – например, в системе Android нажатия по ссылкам проходят без задержки. В iOS же при каждом клике генерируется задержка порядка полсекунды, в этот момент отрабатывает встроенная анимация нажатия Safari;
есть огромное количество готового кода, уже адаптированного под мобильные экраны – можно использовать любой фреймворк, который существует на JavaScript, мы в форме календаря для создания анимаций используем jQuery.
Как я и обещал, ссылка на исходный код календаря – кому интересно, можете посмотреть.
Данная статья написана по итогам доклада (видео), прочитанного на INFOSTART MEETUP Krasnodar. Больше статей можно прочитать здесь.