Иногда бывает потребность в создании приложения сайта, блога, клиента социальной сети на андроид или простое расчетное приложение. Один из способов это создание мини сайта внутри нашего андроид приложения.
Шаг 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. Создание дизайна приложенияНа данном шаге создадим дизайн нашего приложения. Этот шаг будет достаточно прост и увлекателен, так как построение дизайна приложения и проверка корректности происходит непосредственно в браузере.
Вот что получилось у меня:
И, естественно опишем код, который дал нам такой дизайн:
Расчет калорий Расчет калорий
Введите ваш вес: | |
Введите возраст: | |
Введите рост(см): | |
Активность: | Отсутствует 1-3 в неделю 3-5 в неделю 6-7 в неделю Несколько раз в день |
Цель: | Держать вес Набрать вес Сбросить вес Быстро сбросить вес |
Пол: | Мужчина Женщина |
- О программе
- Рассчитать
Это мини программа для того чтобы расчитывать дневную норму калорий для человека
Описание к пункту активности
Разделяют пять типов физической активности: минимальный (никаких физических нагрузок), низкий (физические нагрузки 1-3 раза в неделю), средний (3-5 дней в неделю), высокий (6-7 раз в неделю), очень высокий (тренировки чаще, чем раз в день).
Рассмотрим что здесь и к чему.
– указываем что у нас будет использоваться HTML5. Это даст возможность использовать больше возможностей фреймворка.
– указываем как отображать, зумировать нашу страничку. А также, ставим кодировку для поддержки русского текста.
В одном документе может быть несколько “страниц” – готовых видов(view). У нас их будет 2. Основное и “О программе”.
... ...
– шапка
– тело, основная часть где будет весь контент
– футер. Здесь мы поместили наши кнопки управления. Навигационная панель.
К блоку main не даю объяснения, так как там размещен обычный HTML код. Где мы описываем элементы которые хотим видеть. У нас это табличка, внутри которой элементы формы. Каждый элемент содержит уникальный идентификатор. Понадобиться для получения данных. Переходим к футеру.
– создание навигационной панели.
href=’#info’ – id “page” внутри документа, если используем “#”. При нажатии нам покажется блок “page” с этим id, Или же можем ссылаться на вовсе другой файл или ресурс(URL ).
data-icon=’info’ – устанавливаем иконку.
И последнее, в этом файле, блок второй страницы
Назад – кнопка в шапке для возврата на главную страницу.
А также наши стили для страничек.
Result-block{ text-align: center; font-size: 20px; font-weight: bold; color: green; }
Шаг 5. Создание бизнес логикиНа этом шаге мы напишем скрипт, который будет получать наши данные, считать их и возвращать на страничку.
Var MAN_COEFFICIENTS={ main: 88.36, weight: 13.4, height: 4.8, age: 5.7 }; var WOMAN_COEFFICIENTS={ main: 447.6, weight: 9.2, height: 3.1, age: 4.3 }; var INCREASE = 1.2; var DECREASE = 0.8; var QUICK_DECREASE = 0.4; var ACTIVITY_COEFF = function forMan(weight, height, age, active){ return (MAN_COEFFICIENTS.main + (MAN_COEFFICIENTS.weight * weight) + (MAN_COEFFICIENTS.height * height) + (MAN_COEFFICIENTS.age * age)) * ACTIVITY_COEFF; } function forWoman(weight, height, age, active){ return (WOMAN_COEFFICIENTS.main + (WOMAN_COEFFICIENTS.weight * weight) + (WOMAN_COEFFICIENTS.height * height) + (WOMAN_COEFFICIENTS.age * age)) * ACTIVITY_COEFF; } function getData(){ var data={ weight: parseFloat(document.getElementById("weight").value), age: parseInt(document.getElementById("age").value), height: parseInt(document.getElementById("height").value), active: parseInt(document.getElementById("active").value), target: parseInt(document.getElementById("target").value), sex: parseInt(document.getElementById("sex").value) }; return data; } function calculateData(){ var result; var data = getData(); switch (data.sex){ case 1: result = forMan(data.weight, data.height, data.age, data.active); console.log(result); break; case 2: result = forWoman(data.weight, data.height, data.age, data.active); } switch (data.target){ case 1: return result; case 2: return result * INCREASE; case 3: return result * DECREASE; case 4: return result * QUICK_DECREASE; } } function showData(){ document.getElementById("result").innerHTML = calculateData(); }
Чтобы скрипт заработал, подключаем его к документу:
И добавляем вызов функции при клике на кнопку “Рассчитать”.
После этого, при нажатии на кнопку будет происходить расчет данных и вывод информации.
Шаг 6. Добавляем в Андроид проектПосле того, как мы подготовили все файлы, осталось настроить наш проект. Андроид приложение можно строить в любой среде в которой удобно. Первым пунктом будет добавление наших файлов проект. Их нужно разместить в папке assets. Если приложение построено в Eclipse или intelijIdea то эта директория находиться в корне проекта. Добавляем эти файлы туда. Если структура приложения построена в AndroidStudio с помощью Gradle то, нужно создать эту директорию по пути src/ main/assets. Я добавил файлы в папку www/ внутри которой находятся наши странички.
Теперь передаем нашему компоненту путь к файлу, который будет загружаться по умолчанию при открытии приложения. Это все происходит у классе, который создается средой по умолчанию. В нем меняем поведение метода который генерирует view :
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/www/index.html"); }
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. После этого, стоит поменять ссылки странички на фалы, которые мы только что выкачали:
А также не забываем убрать в манифесте разрешение на доступ в интернет, он теперь нам не нужен. В общем, это и все.
Теперь, у вас есть маленькое рабочее приложение под андроид. Скорость, правда, уступает нативном варианту создания, но это можно будет поправить. С маленьким приложением Вас:-) Надеюсь все было доступно и интересно)
Так как у разработчиков Android нету многих правил, стандартов и требований, которых нужно следовать при разработке приложений, они не сильно волнуются о создание аккуратных веб-сайтов для своих веб-приложений. У многих признанных приложений для Android даже нет веб-сайта, но зато у них есть Twitter, Facebook страницы, и т.д. Это и стало причиной почему мы не смогли найти много примеров, чтобы показать в этой статье. Поэтому ниже приведены некоторые веб-сайты, посвященные как Android, так и iPhone.
Веб-сайты Android-приложений
FxCamera
FxCamera позволяет делать креативные фотографии на выбор из более чем 40 фильтров.
Таймер - это красиво и чисто разработанное приложение для вашего Android.
Находите интересные веб-страницы, где бы вы не находились, а затем читайте их у себя дома или в дороге, даже без подключения к интернету.
Приложение, которое мотивирует вас пойти в тренажорный зал. Зарабатывайте деньги при походе в спортзал, за счет друзей, которые не пошли с вами.
Maluuba - это альтернатива Сири, которая может быть вашим голосовым помощником на Android.
Foodster
Foodster поможет вам найти и приготовить лучшие рецепты со всего интернета. С более чем 10 000 рецептов от лучших веб ресурсов и новыми пополнениями каждый день, вы можете быть уверены, что найдете что-то вкусное и легкое в готовке.
Pattrn Wallpapers
Pattrn - это уникальное приложение заставок для телефонов и планшетов, которое даст вам доступ к огромной коллекции картинок.
doubleTwist
DoubleTwist Будильник это самое красивое приложения в своей категории, в магазине Play Google.
ClockworkMod
Раскрытие потенциала вашего телефона, по одному приложению за раз.
Веб-сайты Android и iPhone-приложений
Авокадо ™ - это лучший способ оставаться на связи с самым важными вам людьми через чаты, календари, эскизы, фотографии и многое другое!
Страва позволяет спортсменам со всего мира испытать на себе социальный фитнес, котрый включает в себя обмен, сравнение и конкуренцию друг с другом на основе личных фитнес данных, при помощи мобильных и интернет-приложений.
Оказывается, для того, чтобы нормально кодить под Android, достаточно знаний HTML5, CSS3 и JavaScript. Конечно, не просто так, а в сочетании с сервисами, обзор которых мы для тебя подготовили. Ну а если ты не понаслышке знаком с PHP (Ruby, ASP.NET), то после прочтения этой статьи, можешь смело предлагать свои услуги по продвинутой мобильной разработке:). INFO Владельцам блогов, интернет-магазинов и различных сайтов, имеющих готовую мобильную версию, этот материал поможет быстро создать приложение (практически с нулевыми затратами денег и времени) для поднятия имиджа и привлечения новых посетителей на свой ресурс. Наше тестирование В этой статье мы будем сравнивать четыре платформы для создания приложений. Каждый обзор - описание общих впечатлений, найденных проблем и интересных отличительных особенностей в процессе превращения HTML-кода в файл apk с помощью текущего инструмента. Для чистоты эксперимента будем создавать одно и то же приложение с помощью разных сервисов. Суть нашего элементарного приложения в следующем. Предположим, есть компания «Бобровый жир Транскорпорейшен». И генеральному директору захотелось, чтобы у каждого человека в компании было установлено приложение: мини-справочник номеров, по которым можно дозвониться до других сотрудников. Вот его код: /*Стили позаимствованы у Fries, фреймворка для создания интерфейсов мобильных приложений на HTML5*/ body { /* Для Android-дизайна часто применяются специальные шрифты: Roboto, Droid Sans и подобные */ font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.67em; color: white; background-color: #111111; } h1 { /* Тестировать верстку для мобильных приложений стоит в браузерах на движке WebKit (к примеру, Safari) */ -webkit-box-sizing: border-box; box-sizing: border-box; display: block; padding: 7px 7px 5px; margin-top: 10px; width: 100%; border-bottom: 4px solid #33B5E5; font-size: 17px; font-weight: bold; line-height: 18px; text-transform: uppercase; color: #FFFFFF; } .itemname { display:block; font-weight:700; line-height: 38px; padding-left:5px; } .itemphone { color: #CCCCCC; font-size: 15px; line-height: 12px; text-overflow: ellipsis; padding-left:8px; } Бобровый жир корпорейшенБобромордов Евсей Севьянович (генеральный директор)
7(495) 728-89-80Бобромордова Карина Евсеевна (финансовый директор)
7(495) 728-89-80Бобромордов Карен Евсеевич (курьер)
7(495) 728-89-80 С кодом все ясно? Отлично, а теперь давай потестим его на разных сервисах. AppsGeyser AppsGeyser Заходим на сайт. Регистрируемся. Нажимаем кнопку Create App. Нажимаем на иконку в виде тега HTML. Попадаем на страницу создания приложения. Вставляем наш код, придумываем название с описанием, загружаем файл с иконкой, снова нажимаем Create App. Все, теперь ты Android-разработчик! Плюсы- Приложений можно делать сколько угодно и абсолютно бесплатно.
- Материалом для создания проекта может быть масса разнообразных источников (вeб-страница, канал YouTube, PDF-документ, RSS-лента, галерея фотографий, аудиофайл и прочее).
- При наличии готового материала (документа, ссылки на новостную ленту, исходного кода и так далее), время, затраченное на создание приложения, измеряется в десятках секунд.
- При завершении создания приложения, помимо ссылки на файл apk, на экране появляется QR-код (сделал и сразу поставил себе на телефон) и кнопка для публикации в Google Play.
- Самое яркое преимущество AppsGeyser - предпросмотр приложения (как оно будет выглядеть и работать на устройстве). Эта фича здесь реализована в разы удобнее, чем у конкурентов. Круче только у Android SDK - камеру, датчик движения и производительность конкретной модели телефона на AppsGeyser не потестишь.
- Также интересной особенностью сервиса является конструктор тестов (Quiz).
- Превью игнорирует AJAX. При том что в готовой сборке эта технология прекрасно работает.
- Имеется отличный визуальный редактор для создания приложения с поражающей разнообразием панелью инструментов. Просто перемещая указатель мыши, можно добавить в приложение невероятно широкий спектр элементов: от простого TextBox до датчика местоположения пользователя!
Минусы
- Создание приложения из нашего кода здесь более трудоемко. Сначала надо сохранить исходник с расширением html и залить его на сервер. Потом в рабочем пространстве перетащить на поле приложения элемент Web Viewer, в настройках которого указать адрес страницы с нашим приложением. Теперь с помощью меню Build можно получить готовую сборку.
- Главный минус App Inventor в том, что скомпилированному приложению для работы необходимо соединение с интернетом (в отличие от созданного в AppsGeyser).
- Есть возможность создавать несколько рабочих областей, устанавливать между ними связи, выделять пространство под рекламные блоки - всего около сотни различных настроек. Функционал - на глаз, примерно 80% того, что есть у AppsGeyser, и 90% от App Inventor. И еще куча своих личных фишек. И все хозяйство быстро, красиво и ладно работает.
Вывод Общее впечатление позитивное. Поначалу я даже хотела наградить его первым местом в этом обзоре, но томительное ожидание письма и попытка отжать денег на создание второго приложения меня огорчили. appsbar appsbar Этот сервис упомянут в статье во благо тех товарищей, кого в детстве стукнула клавиатурой по голове учительница информатики (пока они решали квадратное уравнение на Pascal), чем отбила у них желание даже смотреть на программный код. А затаенная обида все равно подмывает их к тотальному захвату галактики. С помощью appsbar можно реализовать свои самые смелые фантазии, получив на выходе кросс-платформенное (!) приложение. Плюсы
- Превью по скорости и качеству работы не уступает AppsGeyser.
- Богатая коллекция шаблонов оформления, в сочетании с возможностью переделать их до неузнаваемости.
- Интерфейс пронизан креативом целиком и полностью. К примеру, на первой странице раздела создания программы необходимо выбрать тип приложения из 38 вариантов (это сделано чисто для смеха, при нажатии на разные иконки попадаешь в одно и то же место).
Appsbar: удивительно, что нет иконки Public Toilet 🙂 Минусы
- Код вставлять некуда. Надо работать руками.
- Есть функция публикации приложений, но appsbar пока не в курсе, что Android Market уже давно известен под именем Goggle Play.
- Интерфейс местами тормозит и отличается изобилием «оригинальных» решений. Практически постоянно думаешь о загадочной душе и неординарном мышлении его создателей.
- Создание телефонного справочника компании из нашего примера кода с помощью этого сервиса невозможно, но встроенными средствами можно сделать нечто аналогичное. Для клепания приложения-визитки appsbar вполне годится.