Обзор веб-инструментов для создания приложений без использования Android SDK. Android. Создаем приложение используя JQueryMobile Примечательные проекты наших соотечественников
Бобромордов Евсей Севьянович (генеральный директор)
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 вполне годится.
Сравнительно недавно мобильные версии сайтов считались второстепенным ресурсом с сомнительной ценностью и ограниченными возможностями. Учитывая, что телефоны 4-5-летней давности, в массе своей, не могли похвастаться большими экранами и мощностями, пользователям гораздо удобнее было работать с полноценными десктопными веб-страницами.
Однако сейчас ни один серьезный интернет-ресурс невозможно себе представить без мобильной версии. Более того, с каждым годом пользователи все активнее выходят в интернет с мобильных устройств. На графике, который составлен специалистами аналитического ресурса StatCounter , видно, что объем интернет-серфинга на смартфонах и планшетах за последний год вырос с 41 до 53% при аналогичном падении десктопных версий.
Развитие мобильных технологий повлекло за собой еще одну интересную тенденцию. Раньше разработчики мобильных сайтов и приложений четко отделялись от рядовых пользователей, составляли своеобразную закрытую касту. Однако в 2017 году, благодаря гибким и удобным инструментам для разработки, многие юзеры без специального технического образования могут почувствовать себя настоящими программистами. Дружелюбная и отзывчивая мобильная среда Android, легкие в освоении шаблоны и немного практики помогут без особых трудностей своими руками создать сайт или приложение на Андроид.
В нашей статье мы рассмотрим, как сделать сайт на Андроиде, разработать приложение с помощью специальных конструкторов, а также способы для адаптации десктопного сайта под мобильные устройства.
Стоит отметить, что для полноценной разработки мобильных сайтов и приложений, желательно освоить хотя бы базовые принципы основных языков программирования PHP, CSS, JS, HTML и JSON. Первые шаги в этом направлении лучше всего делать с помощью онлайн-учебников и специальных видеоуроков в YouTube, например, на канале GeekBrains .
Приложения для создания сайтов на АндроидеВ цифровом магазине Google Play есть несколько бесплатных удобных приложений, с помощью которых можно создать мобильный сайт. Многие из них являются, по сути, текстовыми редакторами для продвинутых программистов. Однако мы нашли несколько программ, которые постепенно могут освоить даже те, кто только начинает «прокачивать» свои навыки веб-разработки.
Популярный текстовый редактор для разработки сайтов на Android, оптимизированный под мобильные устройства. В основе приложения - обычный виртуальный блокнот, который дополнен многочисленными инструментами программирования.
Основные особенности приложения:
- Удобный редактор кода с подсветкой синтаксиса;
- Программа рассчитана на более чем 40 языков программирования;
- Быстрая работа с объемными текстовыми файлами;
- Неограниченный откат и повтор шагов;
- Интуитивное редактирование кода;
- Вертикальная и горизонтальная прокрутка;
- Быстрый поиск нужного участка кода;
- Смена кодировки;Синхронизация с «облаками».
Тестировщики данного приложения шутят, что QuickEdit можно использовать, как обычный блокнот, например, для списка продуктов в магазине, из которого со временем можно выстроить настоящий мобильный сайт.
Android Web Developer способен превратить смартфон в полноценный инструмент для создания мобильного сайта. Понятная и отзывчивая среда приложения подойдет как для начинающих, так и для опытных программистов. AWD позволяет создавать сайты на HTML, JS, CSS и PHP, компилировать или редактировать файлы и подключаться к удаленным протоколам FTP, FTPS и SFTP WebDAV.
Одна из ключевых особенностей приложения - постоянная синхронизация с удаленным сервером для выгрузки файлов. То есть пользователь один раз проходит авторизацию, например, на FTP и далее работает с протоколом, как с локальным диском.
Основные функции приложения:
- Подсветка кода;Автоматическое определение кодировки;
- Автоматическое завершение кода;
- Проверка на ошибки;
- Автоматическое форматирование;
- Удобная нумерация строк;
- Быстрый поиск и навигация по коду;
- Быстрый тест в браузере;
- Автосохранение кода;
- Режим full-screen;
- Полноценное управление всеми файлами проекта (копирование, вставка, удаление, дублирование и так далее.).
Для больше удобства, разработчики приложения составили список доступных серверов, на которые можно выгружать программные проекты:
- Ulti Server;
- KSWEB;
- PAW Server;
- Bit Web Server.
В ближайших обновлениях станут доступны удаленные облачные сервера на Mercurial, Dropbox и Google Drive.
Если на освоение кода времени совсем нет, однако срочно нужно создать сайт на Андроид, проще всего воспользоваться мобильным конструктором сайтов. Одним из самых популярных приложений в этой области является Weebly.
В приложении уже заложены основные темы и шаблоны для создания с нуля сайта, блога или интернет-магазина. Пользователь лишь выбирает оформление, добавляет свой текст и изображения. Также с помощью приложения можно подключить веб-аналитику сайта. Weebly позволяет отслеживать всю активность пользователей в режиме реального времени:
- Комментарии и отзывы;
- Заказы;
- Трафик на сайт;
- Время просмотров и так далее.
Многие обращают внимание на то, что даже оптимизированная мобильная версия сайта не всегда бывает удобной для использования. Лишние функции, кнопки, картинки, интерактивные формы только отнимают время и сбивают с толку. В этом случае поможет инструмент, который превратит сайт в удобное приложение на Андроид.
Самым популярным сервисом для трансформации веб-сайта в апплет является Hermit. С помощью данного приложения можно создавать приложения на базе мобильных или десктопных сайтов, при этом пользователь сам решает, какие инструменты управления ему необходимы. Также Hermit интегрирует в новое приложения функцию уведомлений Андроид.
Важным преимуществом Hermit является его доступность при полном отсутствии встроенной рекламы. Более того, рекламный блокировщик заложен в самой утилите.
Как пользоваться приложением Hermit:
- Установить приложение на смартфон;
- Открыть утилиту;
- Нажать на круглую красную кнопку в правом нижнем углу;
- Набрать в поисковой строке адрес сайта;
- Выбрать название для нового приложения;
- Нажать Create;
- Перейти в раздел Customize;
- Настроить необходимые функции.
После завершения трансформации на рабочем столе смартфона появляется иконка нового приложения, которую можно поменять на пользовательскую. Также в настройках приложения можно поменять цвет текста, фона и загрузить картинки.
В данном видео можно посмотреть пример того, как с помощью Hermit мы сделали приложение из сайта британского производителя смартфонов Wileyfox :
Как мы уже отмечали открытый и доступный код операционной системы Android позволяет производить любые программные манипуляции. Если у пользователя уже есть сайт, например, интернет-магазин или блог, с помощью специальных веб-сервисов он может сконструировать для него отдельное приложение.
Среди множества сервисов для создания приложений наиболее удобными и легкими в освоении считаются:
Бесплатный онлайн-сервис для создания приложений, в котором необходимо пройти простую регистрацию для дальнейшей работы. С помощью данной службы можно за несколько минут создать приложений из доступных шаблонов, например, собственный мессенджер или игру. После чего приложение можно монетизировать напрямую в Google Play, а именно опубликовать в магазине, разместив в самой программе рекламу.
Основная «фишка» данного сервиса в том, что он предлагает готовый набор шаблонов для приложений под определенную индустрию. Например, пользователь может создать приложение для бронирования номеров в отеле, ночного клуба, юридической конторы и так далее. Сервис доступен на 23 языках.
Весьма удобная платформа для самостоятельного изготовления приложений, не требующая от пользователя навыков программиста. С ее помощью можно создавать не только приложения, но и каталоги, отчеты, резюме, сборники и многое другое. Все шаблоны приложений рассортированы по разделам: Образование, Питание, Путешествия, Культура и так далее.
Какой смартфон выбрать для самостоятельного создания сайтов и приложений на АндроидИтак, вы решили сконструировать собственный сайт или приложение на Андроид. Остается подобрать смартфон, который позволит без труда проделать всю ответственную работу. Для этого мобильный гаджет должен соответствовать определенным требованиям:
Мы рекомендуем обратить внимание на продукцию молодого британского бренда Wileyfox. Смартфоны логотипом в виде лисьей мордочки за последние 1,5 года завоевали широкое признание пользователей благодаря сочетанию высокой производительности, отличному качеству сборки, вдохновляющему дизайну и, самое главное, доступности.
Отличным инструментом для начинающего или продвинутого программиста станет смартфон . Данная модель, доступная всего за 12 990 рублей, предоставляет пользователю полную свободу действий по созданию веб-сайтов или программ за счет качественной и производительной начинки.
На борту смартфона установлен мощный 8-ядерный процессор на 1,4 ГГц и 3 Гб оперативной памяти, который легко запустит самое ресурсозатратное приложение для программирования, а также позволит быстро скомпилировать все данные проекта. Если пользователю не хватит и без того объемного внутреннего хранилища на 32 Гб, память всегда можно расширить до 128 Гб за счет внешней sd-карты.
Качественный 5.2-дюймовый 2.5D IPS-экран, выполненный по технологии Oncell Full Lamination, одновременно поддерживает 10 нажатий. На таком дисплее невероятно удобно производить мельчайшие манипуляции с программным кодом и текстом для контента. А разрешение FullHD значительно упростит просмотр и отбор иллюстраций для наполнения страницы или приложения.
За счет установленного модуля высокоскоростного интернета LTE 4G пользователю будет обеспечен мгновенный доступ к удаленным серверам и браузерам для тестирования проекта. Причем емкий литий-полимерный аккумулятор на 3010 мАч позволит не отключаться от Сети до 11 часов без перерыва.
Кроме того, пользователь данной модели может быть спокоен за все личные данные, которые он использует при создании приложения или сайта. Многоступенчатая защита новейшей версии ОС Android 7.0 дополняется надежным сканером отпечатка пальцев.
Таким образом, создание и публикация собственных приложений и сайтов с помощью современных мобильных инструментов не составляет особого труда. Пользователь может пойти по более простому пути и работать по шаблонам, либо освоить языки программирования, хотя бы на начальном уровне, и с их помощью создавать уникальные продукты.
Figure 1. You can make your web content available to users in two ways: in a traditional web browser and in an Android application, by including a WebView in the layout.
Android offers a variety of ways to present content to a user. To provide a user experience that’s consistent with the rest of the platform, it’s usually best to build a native app that incorporates framework-provided experiences, such as Android App Links or Search . Additionally, you can use Google Play-based experiences, such as App Actions and Slices , where Google Play services is available. Some apps, however, may need increased control over the UI. In this case, a WebView is a good option for displaying trusted first-party content.
Figure 1 illustrates how you can provide access to your web pages from either a browser or your own Android app. The WebView framework allows you to specify viewport and style properties that make your web pages appear at the proper size and scale on all screen configurations for all major web browsers. You can even define an interface between your Android app and your web pages that allows JavaScript in the web pages to call upon APIs in your app-providing Android APIs to your web-based application.
However, you shouldn"t develop an Android app simply as a means to view your website. Rather, the web pages you embed in your app should be designed especially for that environment.
Alternatives to WebViewAlthough WebView objects provide increased control over the UI, there are alternatives that may provide similar functionality with various advantages: they require less configuration, may load and perform faster, provide improved privacy protections, and can access the browser"s cookies.
Consider using these alternatives to WebView if your app falls into the following use cases:
- If you want to send users to a mobile site,
Иногда бывает потребность в создании приложения сайта, блога, клиента социальной сети на андроид или простое расчетное приложение. Один из способов это создание мини сайта внутри нашего андроид приложения.
Шаг 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. После этого, стоит поменять ссылки странички на фалы, которые мы только что выкачали:
А также не забываем убрать в манифесте разрешение на доступ в интернет, он теперь нам не нужен. В общем, это и все.
Теперь, у вас есть маленькое рабочее приложение под андроид. Скорость, правда, уступает нативном варианту создания, но это можно будет поправить. С маленьким приложением Вас:-) Надеюсь все было доступно и интересно)