Как написать приложение для андроид на javascript

Как написать приложение для андроид на javascript

Приложение для Android на HTML+CSS+JS с помощью PhoneGap

Всем доброго времени суток.

Многим из нас хотелось бы написать приложение для мобильного устройства, но учить Java или Objective C хочется далеко не всем. Теперь этот вопрос решается намного проще. PhoneGap — именно так называется библиотека для превращения веб-сайта в самое настоящее приложение для мобильного устройства, будь то iOS устройство, Android, Symbian, BlackBerry OS, Palm OS или Windows Mobile. Приложение на PhoneGap может использовать функции телефона, к примеру звонить или получать снимки с камеры.

В этой статье я расскажу как настроить среду для разработки и сделать простейшее приложение с использованием PhoneGap.

1. Установка инструментов

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

1. Eclipse classic 3.6.2 или выше;
2. jdk последней версии (32-битная версия, даже если ПК настроен на 64 бита);
3. Android SDK;
4. Android ADT plugin.

Загружаем разные SDK Platform, нам обязательно понадобится Android 2.2:

ADT Plugin устанавливается немного необычно: открываем Eclipse, нажимаем Help → Install New Software → Add.

Откроется диалоговое окно, в него необходимо ввести:

• Name: ADT Plugin
• Location: https://dl-ssl.google.com/android/eclipse/

Нажимаем «Oк», выбираем Developer Tools и ждем до конца установки.

Теперь покажем Эклипсу, где проживает Android SDK: Window → Preferences, слева нажимаем Android → SDK Location → указываете адрес вашего Android SDK → Apply → Ok.

Теперь заходим в Мой компютер → (Правая кнопка мыши) → Дополнительные параметры системы → Переменные среды → Системные переменные → Создать:

• Имя: JAVA_HOME
• Значение: путь до jdk, к примеру (C:Program Files (x86)Javajdk1.6.0_24)

Затем находите переменную Path и добавляете в конец: %JAVA_HOME%bin;

2. Создание проекта

Теперь создаем проект: открываем Eclipse → File → New → Project → Android project и делаем все как на скриншоте:

В папке с вашим проектом создайте две новые папки:

• /libs
• /assets/www

Скачиваем PhoneGap. В новой версии PhoneGap 1.0 какие-то проблемы с переходами между локальными файлами — чтобы их избежать нужно создать вторую activity в AndroidMainfest.xml

Внимание: не пытайтесь заменить ваш activity (.App), вместо этого вставьте данный код сразу после закрывающего тега вашего изначального activity.

Открываем архив и находим папку «Android». Копируем:

• phonegap.js в папку /assets/www
• phonegap.jar в папку /libs
• папку xml в папку /res (только в версии 1.0)

Теперь в Eclipse откроем наш проект и покажем ему, где живет библиотека PhoneGap: нажимаем правой кнопкой мыши по libs → Build Path → Configure Build Path и далее как на скриншоте:

Открываем .java файл и вносим изменения: подключаем phonegap (строка 5), убираем скролбары (строки 12 и 13) и загружаем нашу главную страницу (строка 14).

Займемся файлом AndroidMainfest.xml:

Строки с uses permission включают взаимодействие с железом устройства. Все uses permission в данном файле будут показаны в android market. если вы будете загружать туда свое приложение, так что не переборщите.

3. Hello World!

Теперь пишем нашу страницу index.html:

Сохраняем в /assets/www/.

4. Запускаем

Правый клик по проекту и нажмите Run As → Android Application. Eclipse попросит создать эмулируемое устройство. Введите характеристики и запустите:

Что получилось в эмуляторе:

Чтобы запустить на устройстве, убедитесь, что USB debugging включено на вашем устройстве и подключите его к компютеру (Settings → Applications → Development). Правый клик по проекту и нажмите Run As → Android Application.

На сегодня все, успехов!

Да и еще статья о разработке приложений на iOS

Автор: Владимир Павлов

Mobile разработчик. Разбирается в Javascript, интересуется кроссбраузерным программированием с использованием PhoneGap. Создатель DTW Technologies.

Находки программиста

Решения конкретных задач программирования. Java, Android, JavaScript, Flex и прочее. Настройка софта под Linux, методики разработки и просто размышления.

четверг, 26 июля 2012 г.

PhoneGap: пишем для Android на Html и JavaScript

Разработка для мобильных платформ становится всё популярнее, затягивая всё больше программистов из смежных отраслей. Если вы писали, к примеру, серверный Java-код, то проблем с освоением платформы Android у вас скорее всего не будет. А если «в прошлой жизни» вы делали сайты на html+css+javascript? Тут нужно не только учить новый язык, но и осваивать «настоящее» ООП, которое не сразу и не каждому даётся. Если же вы решили охватить и IPhone/IPad, то учить нужно ещё и Objective-C. Что же делать, если учить новые технологии некогда, а подарить миру своё приложение для смартфонов хочется уже сейчас?
Фреймворк PhoneGap помогает решить эту проблему. Пишите приложение как локальную веб-страницу, а доступ к возможностям смартфона предоставит PhoneGap. Тут я постараюсь дать пошаговое руководство, как сделать простое Android-приложение на Html и JavaScript с помощью PhoneGap. Писать будем в IntelliJ IDEA. Эта замечательная IDE в последнее время сумела выбросить Eclipse из моего компьютера 🙂
Итак, приступим. Тут будет много скриншотов: лучше один раз увидеть, чем один раз прочитать.
Создаём Android-проект в IntelliJ IDEA

Выбираем тип модуля — Android:

Указываем имя проекта, имя основного пакета и т.п.:

Получаем самый обычный Android-проект, в который теперь будем добавлять библиотеки PhoneGap.

Добавляем немного PhoneGap.

Из архива, который можно скачать тут, нам понадобится:

1. Файл cordova-2.0.0.jar из lib/android копируем в libs
2. Файл cordova-2.0.0.js из lib/android копируем в assets/www
3. Каталог xml из lib/android копируем в res

В результате получим такую структуру файлов в нашем проекте:

Библиотеку cordova-2.0.0.jar добавляем в зависимости нашего модуля:

Теперь меняем код главного Activity:

Тут мы изменили имя абстрактного предка на DroidGap, убрали метод setContentView, который устанавливал «андроидную» разметку и выполнили загрузку локальной html-страницы, в которой дальше всё и будет происходить. Кстати и создадим её в каталоге assets/www:

Желательно ещё не забыть подправить файл AndroidManifest.xml:

Вся это гора разрешений, которую мануалы PhoneGap рекомендуют нам запросить у пользователя, несомненно заставит его задуматься о вменяемости разработчика. Поэтому уберите те uses-permission, которые вам реально не нужны.

А дальше всё пишем на Html5

Теперь можно забыть о загадочной платформе Android и вернуться в милый уютный мир html, css и javascript. Открываем index.html и пишем там:

Запускаем проект на эмуляторе и получаем:

Наше приложение выводит то, что мы рисуем в html а также данные, которые PhoneGap получил от устройства: IMEI и разрешение экрана. Как мы добились этого от PhoneGap? У нас есть несколько объектов, которые представляют нам доступ к свойствам системы (например device и screen). Всё что мы хотим от устройства, мы получим от них. Полное описание объектов и их свойств можно получить в документации к PhoneGap.

Как cделать мобильное приложение на Vue.js

Год назад я мечтал сделать свое собственное мобильное приложение на iPhone, а учить Swift мне не хотелось. Так вышло, что Swift я учить начал, но дело продвигалось слишком медленно, ведь я давно не студент и работы на основном месте завались, что-то учить с запоем уже не выходит.

И тут я натыкаюсь на Quasar, инструмент с MIT лицензией, с помощью которого можно создавать кроссплатформенные приложения под Android и iOS. Все что нужно знать программисту — это JavaScript и потрясающий реактивный фреймворк Vue.js.

Введение (или дисклеймер)

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

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

Перед началом.

Если вы хотите сделать приложение для Android, то вам понадобится установить на рабочий компьютер Android Studio, Java SDK 8, Gradle и настроить корректно все системные переменные ($path на Mac и Linux или “Системная переменная” на Windows).

Если вы хотите сделать приложение для iOS, понадобится Xcode и компьютер с операционной системой Apple.

Как видите, вам придется не один час потратить на установку и отладку своего виртуального окружения.

Зачем компьютер от Apple

Ограничение, которое наложило Apple на разработчиков. Без этого невозможно собрать приложение под iOS. Не хотите тратить деньги? Можете поставить хакинтош. И точка.

Если кто-то подумает что может это как-то можно обойти, забегу вперед и расстрою: нет. Пока никто не придумал, как собирать яблочные приложения не из-под Mac.

Знакомство c Quasar

Quasar — это фреймворк (для фреймворков, но об этом чуть позже). Сам он имеет набор собственных тегов, а весь JavaScript располагается во Vue компонентах.

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

В остальном, это обычный Vue.js, и здесь нет ничего “необычного” кроме его собственных тегов и некоторых методов из документации. Все также вызываем корневой экземпляр Vue, в каждом модуле заполняем data и пишем методы. Все это дело собирается через webpack (dev server с hot reload в комплекте). Classic. Если вдруг не поняли мое последнее предложение, прочитайте статью про webpack по ссылке выше.

Ах да, в установочном пакете (об этом позже) из коробки есть поддержка scss и stylus (что просто божественно).

Резюмируя: если вы работали с Webpack и Vue, знаете как без проблем передавать данные между Vue компонентами, знакомы с , знакомы со store (vuex), знакомы с webpack переменными, у вас достаточно энергии и сил разбираться с грядущими проблемами сборки и есть желание копаться в Android Studio и Xcode — тогда проблем с разработкой не будет.

Как оно работает

Да тех, кому интересно как же JavaScript работает в мобильном устройстве. Все очень просто, ваше приложение — это браузер.

Quasar- это инструмент, который позволяет элегантно вписать ваш Vue.js код в программное обеспечение Cordova. А Cordova это уже сам браузер (образно), который запускает ваш JavaScript.

Также, Cordova содержит в себе ряд плагинов, которые через JavaScript (внутри браузера Cordova) позволяют обращаться к камере, push уведомлениям, геолокации, контактам, bluetooth и.т.д. Полный список поддерживаемых функций можно найти здесь.

Конечно, можно обойти Quasar и напрямую работать с Cordova. Возможно, у вас получится подружить Cordova с React. Хотя у последнего для мобильной разработки есть React Native.

Боже, да, я знаю людей, которые на JQuery писали программу и превращали ее в приложение через Cordova. Правда, результат их работы выглядел очень мерзко. Представьте реакцию пользователя, который нажимает на “каталог” в такой “программе” и вместо реактивного изменения компонента (беззагрузочной подстановки страницы) получает обычную загрузку страницы как в браузере.

Vue.js позволяет создавать шикарные SPA и PWA приложения, которые запускаются в браузере, но выглядят как натуральные мобильные и десктопные приложения! Блин, современные SPA и PWA почти ничем не отличаются от программ, лишь наличие браузера показывает пользователю, что он находится все еще на сайте. Quasar позволяет стереть эту грань.

Первые шаги

Давайте создадим проект. Для начала нам понадобится Node.js, а конкретно менеджер пакетов npm. Скачать можно отсюда.

После установки Node.js идем на страницу установки Quasar. Отсюда берем команду:

npm install -g @quasar/cli

Если вы используете Mac OS или Lunix, добавьте команду sudo перед установкой пакетов.

Далее создаем Quasar проект командой:

Важно: название проекта должно быть написано единым словом, иначе при сборке все полетит к чертям. Рекомендую не запариваться и использовать Camel Case. Все равно название приложение можно будет потом поменять.

Далее вам зададут 8 вопросов.

1. Заполните имя проекта (пишете как хотите).
2. Заполните описание.
3. Заполните автора приложения.
4. CSS препроцессор выбирайте по вкусу.
5. Если понимаете о чем речь, выбирайте сами. Если нет — включайте автоимпорт.
6. Подключите дополнительные функции на выбор (я тут обычно отказываюсь от всего, хотя, думаю, вещи из этого списка типа Axios вам знакомы)
7. Введите cordova id. Это будет что-то вроде уникального сертификата для сборки приложения в дальнейшем.
8. Выбирайте NPM.

После установки проекта перейдите к нему в папку с помощью команды:

И запускайте проект с помощью команды:

После команды у вас откроется классический localhost сервер с hot reload. Предлагаю вам свернуть статью на это время и пошалить с вашим будущим приложением. Сделайте пару статических страниц, напишите маленькое приложение, например, to do list или калькулятор шашлыка. Я не знаю, просто творите.

Вопрос: особо технически грамотные могут спросить: «Макс, а вот пользователь вносит какие-то данные в программу, но после перезагрузки браузера данные же стираются (если их не сохранять в cookie или базу данных), здесь не будет так же (после перезагрузки приложения)?»

Ответ: естественно, здесь будет также. Как и на любом другом сайте, так и в приложении от Cordova данные после выключения будут потеряны. Но вы можете использовать Local Storage или попытаться приделать своему приложению Web SQL. Грубо говоря, вам нужно воспользоваться готовым API от браузера (Cordova), чтобы сохранять введенные пользователем данные. Вот ссылка на документацию.

Эмуляция: проблемы и головная боль

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

В quasar.conf.js в разделе manifest можно задать имя и описание проекта. Имя из manifest пойдет в название приложения (под иконкой). Возможно, здесь я ошибаюсь, так как название приложения я обычно меняю позже в config.xml в папке src-cordova, которая появляется после запуска проекта в dev режиме на мобильном устройстве.

Запускать проект в тестовом режиме для iOS можно командой:

quasar dev -m cordova -T ios

quasar dev -m cordova -T android

Если возникли какие-то проблемы с эмуляций, читайте тут. Здесь я вам вряд ли помогу. Проблем, которые могут на вас обрушиться на данном этапе миллион, но давайте я перечислю парочку, которые возникли у меня, вдруг я смогу вам помочь.

Проблемы с эмуляцией Android

Например, у меня никак не получалось запускать через Терминал команду “quasar dev -m cordova -T android”.

Сначала у меня была ошибка, в которой компилятор сказал якобы у меня нет Gradle.

Данную проблему я решил довольно просто: перед стартом dev/build команды я добавляю путь к Gradle к системной переменной $PATH:

Я надеюсь, вы понимаете, что путь после …$PATH. у вас совсем другой будет. Тем более это решит проблему на Mac, но не на Windows. Как это сделать на Windows читайте тут.

Также, у меня была ошибка “PANIC: Missing emulator engine program for ‘x86’ CPUS”, (после того как я разобрался с Gradle) поэтому я сначала “собрал финальную сборку” проекта без эмуляции через команду:

quasar build -m cordova -T android

Ведь у меня больше не было проблем с Gradle. А после открыл проект (билд) через Android Studio

Далее я полез в AVD Manager, чтобы создать эмуляцию телефона. Иначе без этого запустить приложение нельзя. Можно кстати попытаться подключить свой.

После, студия попросила меня поставить пакет системных картинок. К слову, сначала я поставил пакет ‘R’, и вроде бы у меня все заработало, эмулятор стал запускаться (через нажатие на зеленую кнопку пуск в navbar внутри android studio), но терминальная команда до сих пор не работала. После я вычитал здесь, что нужно поставить Oreo и, о боже, у меня теперь все запустилось через терминал.

Теперь, когда я вызывал через терминал команду “quasar dev -m cordova -T android” у меня наконец-то открывалась эмуляция.

Проблемы с эмуляцией iOS

К моей радости, на этом этапе работы я не столкнулся с проблемами. Но это не значит, что их нет.

Сборка: финал

Для “финальной” сборки используются команды.

quasar build -m cordova -T ios

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/ios, здесь будет файл название_проекта.xcodeproj. Можете его запустить, и у вас откроется Xcode.

quasar build -m cordova -T android

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/android. Просто откройте этот путь в Android Studio и увидите свой проект.

Теперь вы можете работать в этих “системах”. Например, можно выпустить приложение к себе на телефон и проверить его работоспособность. Или бесконечно эмулировать на различных устройствах, ища баги. Ах да, еще не забудьте установить иконки для своего приложения, это можно сделать по инструкции от Quasar или через Xcode и Android Studio.

Если все хорошо, можно выпускать приложение в Apple Store или Google Play. Но это уже другая история и достойна отдельной статьи. Если интересно, можете почитать соответствующий раздел в документации Quasar. Хотя, там не все так подробно описано как хотелось, но мне хватило. Свою же статью на эту тему постараюсь написать попозже.

P.S: По «секрету» хотелось добавить: Хотя получившиеся приложение получилось кроссплатформенным (т.е это как бы браузер), его исходный код все равно можно расширить через написание нативных плагинов под Cordova. Т.е нет особого труда в том, чтобы добавить в свое приложение Face/Touch ID, хотя изначально это не предусмотренно фреймворком Quasar и Cordova.

P.S.S: Если интересно как локализировать iOS приложение на Swfit с помощью Xcode, Storyboard и NSLocalizedString, милости прошу пройти по ссылке выше.

Опубликовано: 2020-06-05 9:55

Нужен сайт?

Готов за разумную плату разработать сайт, CRM-систему или внедрить дополнительный функционал в существующий проект.

📱Создаем мобильное приложение для Android на JavaScript с помощью Apache Cordova

Распространение мобильных устройств в наше время достигло невероятных значений. Мобильный телефон есть у 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 не будет работать.

Запомните, куда установился пакет, и сохраните этот путь в переменной окружения JAVA_HOME .

А также добавьте его в переменную PATH .

Android Studio

Для разработки под Android также потребуется установить Android Studio.

После установки зайдите в программу и откройте меню SDK Manager (при открытом проекте Tools -> SDK Manager).

Здесь вы найдете путь к Android SDK (Android SDK Location), сохраните его в переменную окружения ANDROID_SDK_ROOT .

Добавьте в переменную PATH каталоги tools и platform-tools :

Затем убедитесь, что установлен пакет Android SDK Build-Tools (во вкладке SDK Tools).

Создание эмулятора

Наконец, создадим эмулятор, на котором можно будет запускать приложение в процессе разработки.

Для этого зайдите в меню AVD Manager:

И создайте эмулятор с нужными параметрами.

Cordova

Осталось глобально установить npm-пакет Cordova:

Шаг #1. Превращение веб-страницы в Android-приложение

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

Вероятно, самый интересный вопрос – как запустить обычную веб-страницу на устройстве Android. Чтобы ответить на него, создадим пустой проект Cordova и разберемся на практике.

Создание пустого проекта

Команда для создания нового проекта Cordova:

• Первый аргумент – todo-app – это название новой папки, которую Cordova создаст в текущем каталоге.
• Второй аргумент – com.furrycat.todo – это идентификатор проекта.
• Третий аргумент – TodoApp – имя приложения.

Появилась новая папка todo-app . Перейдите в нее и запускайте все дальнейшие команды уже внутри этой директории.

Внутри находится файл config.xml , которые содержит все мета-данные, а также папка www – именно в ней и расположен код веб-приложения. Сейчас это простейшая страница – index.html – с логотипом Cordova и парой надписей, к ней подключен файл стилей и скрипт. Вы можете открыть эту страницу в браузере:

Заглянем в файл js/index.js . Здесь очень простой код: установлен слушатель события deviceready , его обработчик просто добавляет класс .ready к одному из html-элементов.

deviceready – это событие, которое вызывает сама Cordova. Нетрудно догадаться, что оно возникает после того, как устройство, на котором запущено приложение будет готово его воспроизводить. Так как мы запустили проект в обход Cordova, это событие не возникает, поэтому надпись Connecting to device не исчезает.

Добавление платформы

Укажем целевые платформы для проекта – у нас это только Android:

Появилась новая директория platforms , а внутри нее – android . Весь код нашего веб-приложения вы можете найти в папке platforms/android/app/src/main/assets/www. Он просто копируется из внешней папки www при сборке. Все остальные файлы в папке android – это оболочка Cordova, необходимая для запуска на устройстве.

Сборка проекта

Команда для сборки проекта для Android-платформы:

В папке platforms/android/app появилась новая директория build . Внутри нее есть файл outputs/apk/app-debug.apk . По сути это уже рабочий apk, который можно запустить на Android-устройстве.

Загрузите его на смартфон, запустите – и вы увидите ту самую дефолтную веб-страницу. Все работает!

Как видно, надпись connecting to device сменилась на device is ready. Это значит, что кордова вызвала событие deviceready , а приложение отреагировало на нее.

Запуск на эмуляторе или устройстве

Нет необходимости вручную копировать apk на устройство при каждом изменение приложения.

Чтобы запустить проект на смартфоне, подключите его к компьютеру, разрешите отладку и запустите команду:

Кордова сама соберет проект, обнаружит устройство и запустит приложение

Можно обойтись и без реального устройства.

Запустите созданный ранее эмулятор в Android Studio:

и снова выполните команду:

На этот раз кордова найдет эмулятор и запустит проект на нем:

Теперь мы умеем запускать обычную веб-страницу как приложение на Android-устройстве.

#Шаг 2. TODO-приложение

Теперь заменим дефолтную страницу Cordova на собственное крутое Todo-приложение.

Это очень простое веб-приложение, написанное с использованием фреймворка Vue. Его исходный код находится в корне проекта в новой папке src . Сборка осуществляется с помощью webpack, собранные файлы помещаются непосредственно в папку www .

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

Откройте приложение в эмуляторе или на подключенном устройстве и убедитесь, что все работает:

Отладка

Запущенное на эмуляторе или реально устройстве приложение Cordova можно отлаживать через браузер Chrome.

Для этого перейдите по адресу: chrome://inspect/#devices, найдите устройство в списке и нажмите Inspect.

Шаг #3. Использование функциональности платформы

До сих пор наше приложение использовало только функциональность веб-платформы. Однако Cordova предоставляет доступ и к возможностям мобильного устройства – через многочисленные плагины.

Для примера реализуем нативные диалоговые окна и оповещения.

Диалоговые окна

Добавим подтверждение действия при удалении задачи – модальное окно с кнопками Отменить и Удалить. В вебе мы можем использовать для этого стандартное модальное окно confirm , но его нельзя кастомизировать. Поэтому мы должны получить доступ к нативным диалоговым окнам Android.

Теперь в коде приложения нам доступ объект navigator.notification с четырьмя методами:

1. navigator.notification.alert
2. navigator.notification.confirm
3. navigator.notification.prompt
4. navigator.notification.beep

Нам нужен метод confirm :

Напоминания о делах

Еще одна очень полезная функциональность – напоминание о делах в установленное время.

Для начала добавим возможность выбрать дату и время – нам понадобится плагин skwas-cordova-plugin-datetimepicker.

Использование в коде:

А для планирования оповещений понадобится плагин cordova-plugin-local-notification.

Использование в коде проекта:

Чтобы запланировать оповещение на определенное время, используется параметр trigger.at .

Публикация проекта в Google Play

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

В директории platforms/android/app/build/outputs/apk должна появиться новая папка release, внутри которой вы найдете неподписанный apk-файл.

Чтобы выложить проект в Google Play, его нужно подписать.

Для этого нужно сгенерировать ключ:

Имя ключа – todoapp.keystore , алиас – todoapp . При создании вам нужно будет ввести пароль и ответить на ряд вопросов (или пропустить их). В результате в текущей директории появится новый файл todoapp.keystore – не потеряйте его.

Теперь скомпилируем проект с ключом:

Важно указать правильное имя ключа и алиас.

Осталось запаковать проект в новый apk. Для этого понадобится утилита zipalign (она находится в папке build-tools в Android SDK):

Этот apk-файл можно добавлять в Google Play через ваш аккаунт разработчика.

Андроид игры и приложения на 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 SDK с Eclipse который туда входит. Если вы думаете что нужно быть каким-то JAVA-программистом чтобы делать таким образом приложения или игры — вы ошибаетесь. Достаточно практически копи-пастом определённые отрывки кода скопировать в Android-проект, понять зачем вы это скопировали (это нетрудно, мы объясним) и у вас получится что-то вроде шаблона куда вы потом можете вставлять любые игры и приложения написанные на HTML.

Как выглядит с технического окна весь процесс?

Как же это работает всё может возникнуть вопрос у человека, который задумал неладное создать своё игру на 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, не говоря уже о планшетах (с ростом разрешения производительность канваса теряется).

Однако на Canvas как раз делаются игры и есть очень хороший фреймворк под названием Phaser . В сети есть туториал создания клона Flappy Bird на этом фреймворке из которого можно немного обучиться.

SVG

Несмотря на то что технология поддерживается давно, а SMIL анимация с Android 3.0, нет тоже стабильности в работе. Много почему-то не работает. Ведёт себя порой загадочно. Для анимирования мало подойдёт.

JS

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

CSS

Начиная с Android 3.0 поддерживается CSS3 со всеми фичами. Анимация работает очень плавно и хорошо. На данный момент лучше всего анимировать обхекты и что-либо делать основываясь на возможностях CSS.

Android. Создаем приложение используя JQueryMobile

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

Шаг 0. Знакомимся с технологией

В данном уроке, мы используем JQueryMobile, как движок, для создания нашего приложения. Этот даст нам возможность создавать вид и некий функционал нашего приложения используя HTML5, CSS3, JavaScript. Такое приложение может быть доступно в двух режимах: оффлайн – когда все файлы(странички) находятся внутри приложения или онлайн – когда странички или данные мы получаем удаленно. О технологии и дополнительных возможностях можно почитать на офф. сайте: http://jquerymobile.com/.

Шаг 1. Постановка задачи

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

Шаг 2. Проектирование и сбор информации

Для расчетов мы используем формулу Харрис-Бенедикт. Выглядит она так:

Норма калорий = BMR x Уровень активности, где

Мужчины:

BMR = 88.36 + (13.4 x вес, кг) + (4.8 х рост, см) – (5.7 х возраст, лет)

Женщины:

BMR = 447.6 + (9.2 x вес, кг) + (3.1 х рост, cм) – (4.3 х возраст, лет)

и уровень активности в течении недели:

Минимальный уровень, норма калорий = 1.2
Низкий, норма калорий = 1.375
Средний, норма калорий = 1.55
Высокий, норма калорий = 1.725
Очень высокий, норма калорий = 1.9

А также 2 условия:

1. Если человек хочет набрать вес, то ему нужно “+ 20%”

2.Если нужно сбросить вес, то “- 20%”

3. Быстро сбросить вес, то “- 40%”

Шаг 3. Рисуем дизайн

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

На протяжении урока будем следовать этому шаблону и пытаться его реализовать. И так, приступаем к программированию непосредственно 🙂

Шаг 4. Создание дизайна приложения

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

Вот что получилось у меня:

И, естественно опишем код, который дал нам такой дизайн:

Рассмотрим что здесь и к чему.

– указываем что у нас будет использоваться HTML5. Это даст возможность использовать больше возможностей фреймворка.

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

Дальше идет подключение скриптов jQuery. А именно сам jQuery, jQuery Mobile. Дальше подключаем стили, также этой библиотеки и наши стили для приложения.

В одном документе может быть несколько “страниц” – готовых видов(view). У нас их будет 2. Основное и “О программе”.

Дальше, каждый блок страницы делиться на 3 основных части:

К блоку main не даю объяснения, так как там размещен обычный HTML код. Где мы описываем элементы которые хотим видеть. У нас это табличка, внутри которой элементы формы. Каждый элемент содержит уникальный идентификатор. Понадобиться для получения данных. Переходим к футеру.

О программе – каждый элемент списка, это один элемент панели. В котором.

href=’#info’ – id “page” внутри документа, если используем “#”. При нажатии нам покажется блок “page” с этим id, Или же можем ссылаться на вовсе другой файл или ресурс(URL).

data-icon=’info’ – устанавливаем иконку.

И последнее, в этом файле, блок второй страницы

Назад – кнопка в шапке для возврата на главную страницу.

А также наши стили для страничек.

Шаг 5. Создание бизнес логики

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

Чтобы скрипт заработал, подключаем его к документу:

И добавляем вызов функции при клике на кнопку “Рассчитать”.

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

Шаг 6. Добавляем в Андроид проект

После того, как мы подготовили все файлы, осталось настроить наш проект. Андроид приложение можно строить в любой среде в которой удобно. Первым пунктом будет добавление наших файлов проект. Их нужно разместить в папке assets. Если приложение построено в Eclipse или intelijIdea то эта директория находиться в корне проекта. Добавляем эти файлы туда. Если структура приложения построена в AndroidStudio с помощью Gradle то, нужно создать эту директорию по пути src/main/assets. Я добавил файлы в папку www/ внутри которой находятся наши странички.

Дальше нам нужно добавить на главный слой компонент WebView в котором будут отображаться наши странички:

Теперь передаем нашему компоненту путь к файлу, который будет загружаться по умолчанию при открытии приложения. Это все происходит у классе, который создается средой по умолчанию. В нем меняем поведение метода который генерирует view:

findViewById(R.id.webView) – получаем наш контейнер для отображения страничек

webView.getSettings().setJavaScriptEnabled(true) – включаем поддержку JavaScript

webView.loadUrl(“file:///android_asset/www/index.html”) – загружаем страничку которая лежит у нас в директории assets.

Теперь, так как наша страничка содержит подключение библиотек с сайта (удаленно), нужно добавить привилегии на доступ к интернету нашему приложению. Это делается в файле манифеста AndroidManifest.xml одной строчкой, в начале:

После этого осталось отправить приложение на устройство. И готово 🙂

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

Шаг 7. Делаем приложение оффлайн

Итак, нам понадобится выкачать нужные библиотеки. Первая, основная библиотека jQuery находиться по адресу: http://jquery.com/download/ там выбираем версию и выкачиваем. Мы используем вот эту версию: Download the compressed, production jQuery 2.1.0. Теперь выкачиваем jQueryMobile. Идем на официальный сайт: http://jquerymobile.com/ и скачиваем архив с файлами:

Внутри архива находиться множество файлов. Нам нужно только некоторые из них: jquery.mobile-1.4.0.min.css, jquery.mobile-1.4.0.min.js и иконки с директории images/. Данные файлы я помещу в корень папки /www. После этого, стоит поменять ссылки странички на фалы, которые мы только что выкачали:

А также не забываем убрать в манифесте разрешение на доступ в интернет, он теперь нам не нужен. В общем, это и все.

Теперь, у вас есть маленькое рабочее приложение под андроид. Скорость, правда, уступает нативном варианту создания, но это можно будет поправить. С маленьким приложением Вас 🙂 Надеюсь все было доступно и интересно)