Создаем приложение для ANDROID быстро и просто
Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio.
▍Шаг 1 — Переходим на сайт и Скачиваем бесплатную версию Community.
▍Шаг 2 — Запускаем установку и выбираем параметры. Нас интересует XAMARIN. Но Вы также можете выбрать другие параметры.
После успешной установки мы можем создать свой первый проект.
▍Шаг 3 — Запускаем Visual Studio. Создать проект. В фильтре пишем xamarin, платформа Android, язык c# (Если желаете другой язык можете его выбрать)
▍Шаг 4 — Далее. Указываете имя для своего приложения, выбираете каталог где его сохранить. Создать.
▍Шаг 5 — Указываем пустое приложение и выбираем минимальную версию андроида для запуска этого приложения.
▍Шаг 6 — Жмем ок. Visual Studio автоматически создает код для приложения
Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.
▍Шаг 7 — Теперь немного модифицируем код. В данном случае мы вообще не будем использовать Java. Так как мы будем кодить на C#.
Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.
▍Шаг 8 — Создадим там папку Content.
▍Шаг 9 — Добавим в папку Content файл login.html
▍Шаг 10 — Далее уже пишем на привычном нам HTML CSS JS. Можем нажать на F5 и увидеть результат нашей работы.
По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.
В идеале, вместо локальных файлов можно сделать загрузку со стороннего сайта. В этом случае Вы можете менять контент приложения без его обновления в AppStore и Google Play.
Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?
Все очень просто! JavaScript можно использовать для вызова функций Android:
▍Шаг 1 — Немного модифицируем наш файл MainActivity
▍Шаг 2 — Далее создаем класс JavaScriptInterface на который будет ругаться Visual Studio
Мы видим, что теперь программа ругается на Export так как не знает что это такое.
▍Шаг 3 — Добавим нужную библиотеку
▍Шаг 4 — В фильтре напишем mono
▍Шаг 5 — Найдем Export и поставим галочку
▍Шаг 6 — Жмем ок и видим что ошибка пропала.
Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.
Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.
Немного модифицируем файл login.htm:
Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.
Источник
7 лучших HTML-редакторов для Android
Редактор Вебмастера Lite
Этот достаточно простой редактор, поддерживающий не только HTML-файлы, но и JavaScript, CSS, PHP. Здесь вы не найдете каких-то интересных возможностей, зато базовые вещи здесь реализованы невероятно качественно. Среди них такие простые радости жизни, как подсветка синтаксиса, нумерация строк, удобный проводник и кнопки быстрого доступа. Кроме того, Редактор Вебмастера Lite поддерживает доступ к файлам FTP.
В общем, прекрасное бесплатное приложение для исполнения ваших основных веб-потребностей. Есть небольшой минус — за то, чтобы снять ограничение по размеру кода и открыть доступ к предпросмотру, придется заплатить 199₽.
AWD — сокращение от Android Web Developer, и это уже куда более мощный продукт. Помимо стандартных JavaScript, CSS, PHP, HTML, он поддерживает JSON, а также позволяет управлять проектами на FTP, FTPS, SFTP и WebDAV.
Здесь также есть подсветка синтаксиса, автодополнение кода, нумерация строк, функция просмотра, поиск и замена функций, автосохранение, интеграция с Git, разного рода форматирование текста и многое другое.
Здесь вы можете скачать это приложение.
DroidEdit
DroidEdit — по сути, клон Notepad++ для Windows. Кроме стандартного набора языков, данный редактор также поддерживает C, C++, C#, Java, Python, Ruby, Lua, LaTeX и SQL. Кроме того, мое личное мнение, в данном приложении лучше всего реализована подсветка синтаксиса с точки зрения контрастности и цветов.
Платная версия обойдется вам всего в 149 рублей, но если вам действительно приходится часто кодить на ходу — это сущие мелочи. В качестве бонуса за щедрость вы также получите доступ к Dropbox и Google Drive, таким образом сможете напрямую сохранять свои проекты в облако.
Но если вам это не надо, можно и скачать бесплатную версию. Прямо отсюда.
Quoda Code Editor
Не самый известный редактор даже в данном рейтинге, но всё же присмотритесь к нему. Первая причина — огромное количество поддерживаемых языков: ActionScript, C, C++, C#, CSS, Haskell, HTML, Java, JavaScript, Lisp, Lua, Markdown, Objective-C, Perl, PHP, Python, Ruby, SQL, Visual Basic и XML. Вторая причина — масса полезных бонусов, таких как шаблоны или готовые куски кода, настройка «горячих клавиш» для увеличения вашей производительности, автопроверка кода и многое другое.
К сожалению, как и в случае с DroidEdit, полная версия стоит денег — 225 рублей. Но и ограниченная версия должна вам очень понравиться.
Jota Text Editor
Ну а если вам надоели все эти навороченные редакторы кода, то вот вам простой и мощный инструмент для работы с HTML (и не только). Около 5 миллионов скачиваний и рейтинг, близкий к максимальному, наглядно демонстрируют качество работы с Jota Text Editor. За нулевые вложения вы получаете элементарный редактор, способный лишь определять и подсвечивать синтаксис, а также ограничение в миллион символов. Но надо ли вам больше?
Если нет, то тогда устанавливайте Jota.
Еще одна аббревиатура в названии (AIDE — Android Integrated Development Environment), скрывающая большие возможности разработки. Это некое руководство по созданию приложений для Android, от мобильных до игровых. При этом, это не просто собрание лекций и видео, а полноценный редактор с возможностями отладки, верификации и тестирования.
Приложение полностью совместимо с такими привычными инструментами разработки, как Eclipse и Android Studio, поэтому вы не потратите ни секунды драгоценного времени для перехода с мобильной версии на полноценное рабочее место.
Главное, не забыть скачать себе на мобильное устройство AIDE.
anWriter
Закончим рейтинг бесплатным HTML-редактором с поддержкой CSS, JavaScript и Latex. Это в бесплатной версии. Если заплатите 210 рублей, получите также поддержку PHP и SQL. Кроме того, в комплекте вы найдёте совместимость с HTML 5, CSS 3, jQuery, Bootstrap и Angular, возможности работы с FTP и Google Drive.
В общем, переходите прямо сейчас по ссылке и наслаждайтесь.
А вы пользуетесь мобильными редакторами кода?
Как вы используете свой Android-смартфон? Звоните, фотографируете, играете, переписываетесь, читаете новости? Пора ему помочь вам и в вашей работе веб-разработчика! Вот 7 наиболее популярных и качественных HTML-редакторов из Play Store.
Редактор Вебмастера Lite
Этот достаточно простой редактор, поддерживающий не только HTML-файлы, но и JavaScript, CSS, PHP. Здесь вы не найдете каких-то интересных возможностей, зато базовые вещи здесь реализованы невероятно качественно. Среди них такие простые радости жизни, как подсветка синтаксиса, нумерация строк, удобный проводник и кнопки быстрого доступа. Кроме того, Редактор Вебмастера Lite поддерживает доступ к файлам FTP.
В общем, прекрасное бесплатное приложение для исполнения ваших основных веб-потребностей. Есть небольшой минус — за то, чтобы снять ограничение по размеру кода и открыть доступ к предпросмотру, придется заплатить 199₽.
AWD — сокращение от Android Web Developer, и это уже куда более мощный продукт. Помимо стандартных JavaScript, CSS, PHP, HTML, он поддерживает JSON, а также позволяет управлять проектами на FTP, FTPS, SFTP и WebDAV.
Здесь также есть подсветка синтаксиса, автодополнение кода, нумерация строк, функция просмотра, поиск и замена функций, автосохранение, интеграция с Git, разного рода форматирование текста и многое другое.
Здесь вы можете скачать это приложение.
DroidEdit
DroidEdit — по сути, клон Notepad++ для Windows. Кроме стандартного набора языков, данный редактор также поддерживает C, C++, C#, Java, Python, Ruby, Lua, LaTeX и SQL. Кроме того, мое личное мнение, в данном приложении лучше всего реализована подсветка синтаксиса с точки зрения контрастности и цветов.
Платная версия обойдется вам всего в 149 рублей, но если вам действительно приходится часто кодить на ходу — это сущие мелочи. В качестве бонуса за щедрость вы также получите доступ к Dropbox и Google Drive, таким образом сможете напрямую сохранять свои проекты в облако.
Но если вам это не надо, можно и скачать бесплатную версию. Прямо отсюда.
Quoda Code Editor
Не самый известный редактор даже в данном рейтинге, но всё же присмотритесь к нему. Первая причина — огромное количество поддерживаемых языков: ActionScript, C, C++, C#, CSS, Haskell, HTML, Java, JavaScript, Lisp, Lua, Markdown, Objective-C, Perl, PHP, Python, Ruby, SQL, Visual Basic и XML. Вторая причина — масса полезных бонусов, таких как шаблоны или готовые куски кода, настройка «горячих клавиш» для увеличения вашей производительности, автопроверка кода и многое другое.
К сожалению, как и в случае с DroidEdit, полная версия стоит денег — 225 рублей. Но и ограниченная версия должна вам очень понравиться.
Jota Text Editor
Ну а если вам надоели все эти навороченные редакторы кода, то вот вам простой и мощный инструмент для работы с HTML (и не только). Около 5 миллионов скачиваний и рейтинг, близкий к максимальному, наглядно демонстрируют качество работы с Jota Text Editor. За нулевые вложения вы получаете элементарный редактор, способный лишь определять и подсвечивать синтаксис, а также ограничение в миллион символов. Но надо ли вам больше?
Если нет, то тогда устанавливайте Jota.
Еще одна аббревиатура в названии (AIDE — Android Integrated Development Environment), скрывающая большие возможности разработки. Это некое руководство по созданию приложений для Android, от мобильных до игровых. При этом, это не просто собрание лекций и видео, а полноценный редактор с возможностями отладки, верификации и тестирования.
Приложение полностью совместимо с такими привычными инструментами разработки, как Eclipse и Android Studio, поэтому вы не потратите ни секунды драгоценного времени для перехода с мобильной версии на полноценное рабочее место.
Главное, не забыть скачать себе на мобильное устройство AIDE.
anWriter
Закончим рейтинг бесплатным HTML-редактором с поддержкой CSS, JavaScript и Latex. Это в бесплатной версии. Если заплатите 210 рублей, получите также поддержку PHP и SQL. Кроме того, в комплекте вы найдёте совместимость с HTML 5, CSS 3, jQuery, Bootstrap и Angular, возможности работы с FTP и Google Drive.
В общем, переходите прямо сейчас по ссылке и наслаждайтесь.
А вы пользуетесь мобильными редакторами кода?
Источник
Мобильная веб-разработка: HTML5 приложение для Android
Вступление
К счастью, есть более чем один способ написать приложение для мобильного телефона. Можно сделать сайт, упаковать его специальным образом, и вуаля, вот вам и приложение! Именно такой подход предлагает нам проект phonegap.com именно об этом методе и пойдет речь в этой статье.
Уверен что ни стоит обсуждать экономическую целесообразность данного подхода. Она на лицо. Да, знаний нужно больше чем у среднестатистического веб разработчика, но все же, это сайт! Это понятно! Это тот же HTML, это тот же броузер, тот же Javascript. Найти разработчика ни так сложно, как скажем “нативного”. А уж если умножить на кроссплатформенность данного решения, так и вообще может показаться что это панацея. Конечно, мы то с вами знаем, что ни какой “пилюли” не существует, но в ряде случае, это действительно best practic
Итак, мое рабочее задание звучало так: Разработать клиентское приложение, под ОС Android. Приложение — игра. Квест. Суть игры заключается в следующем: группа людей, желающих интересно отдохнуть, делятся на команды. Каждой команде дается по смартфону. В смартфоне приложение. Открываем приложение. Приложение соединяется с сервером и оттуда приходят вопросы. Для каждой команды они свои. Вопросы могут выглядеть как обычные вопросы с вариантами ответов, ну скажем Сколько лет городу Санкт-Петербург?, так и вопросы локации. Найдите парадный вход в инженерный замок. Команда двигается, находит вход, нажимает Мы на месте и координаты уходят на сервер. От сервера ответ, верно или нет. Есть также вопросы фотографии. Например Сфотографируйте себя на фоне инженерного замка. В сумме, все ответы оцениваются и в итоге одна из команд выигрывает, набирая больше очков. Вкратце все.
Шаг 1 — протитипы
В общем задание нам понятно. Предположим что техническое задание уже составлено. Что еще? Нужны прототипы. Вот они:
Шаг 2 — макеты
Следующий шаг. Нужно их от рисовать. Беремся за работу, получается следующее.
Шаг 3 — выбираем фреймворк
Возьмем Sencha Touch. Фреймворк сделан на подобие ExtJS. Большое количество классов. Компонуем их, настраиваем — получаем приложение. Доступ к HTML элементам есть, но на уровне фреймворка управлять элементами крайне не разумно. Грубо говоря, поменять стандартное визуальное отображение элементов крайне затруднительно. Зато данные от сервера получать в формате JSON одно удовольствие.
И наоборот. Jquerymobile это доступ к элементам, по сути расширенный Jquery. Добавляются теги к элементам. После загрузки фреймворк по этим тегам дополняет элементы стилями и другими элементами. Вот только подружить фрейморк с JSON данными от сервера у меня не получилось. Jquerymobile ждет от сервера html код. Безусловно можно получать JSON и его на стороне клиента преобразовывать в html код, что собственно и делает Sencha. Но это ни есть хорошая практика. Это идет в разрез с идеологией фреймворка. Возникает огромное количество проблем, решить которые крайне сложно.
Стоп. А зачем нам фреймворк? Что первый, что второй, по сути, это, так сказать, готовая элементная база, готовые решения, цель которых помочь вам сделать приложение (сайт) визуально похожим на нативное приложение. А нужно нам это? Нет. А как же PhoneGap? А что он, ему все равно, что вы используете. Ни где ни каких ограничений нет. Ну тогда давайте просто сверстаем приложение, как обычный сайт и дело с концом!
Шаг 4 — верстаем
Сам процесс верстки ни чем ни отличается от стандартного. Есть безусловно нюансы, вот о них и поговорим. Первым таким нюансом являются метатеги.
Без этой строчки в заголовке html кода, ваше приложение будет отображаться как обычный сайт. Броузер будет его зумировать, что реалистичности приложению совсем не добавляет.
В отличии от десктоп броузера, броузер мобильного телефона (вероятно ни всех) добавляет рамку к элементам, на которых установлен фокус. Подобная рамка, при наведении фокуса, есть по умолчанию в Google Chrome, в момент когда мы вводим данные в очередное поле . Лечится это аналогично.
И самый последний нюанс это position:fixed. И это действительно проблема, ибо универсальных решений тут нет. Все упирается в сами мобильные броузеры, они просто не поддерживают, или поддерживают но не полностью, такой функционал. Ни получается закрепить панели управления одним решением для всех случаев. К примеру, jquerymobile, до версии 1.1, в случае если броузер не поддерживает position: fixed, эмулировал скроллирование и динамически менял позицию закреплённых элементов, что в общем-то не придавала реалистичности и порой выглядело “ни айс”.
Вот по этой ссылке есть описание мобильных броузеров, которые поддерживают position: fixed
bradfrostweb.com/blog/mobile/fixed-position
а также есть ссылки на Javascript библиотеки, которые эмулируют работу position: fixed и процесса скроллирования. К сожалению работу ни одного из них удовлетворительной назвать нельзя.
В моем конкретном случае, мобильная платформа была указана как Android 2.3, а она поддерживает position: fixed, но при этом пользовательский zoom работать не будет, что по сути в приложении ни к чему. Указываем в заголовке viewport
И прописываем стили
Шаг 5 — эмуляторы
Очевидно, что верстать и смотреть в броузере, в окне монитора, затруднительно. Разрешение андроид приложение, скажем 320×480, а какие размеры экрана у вашего монитора? На помощь приходят эмуляторы. Самый простой эмулятор уже есть в вашем броузере! Если вы загрузите сверстанные страницы в Google Chrome и нажмете Ctrl+Shift+I, броузер покажет вам инструменты разработчика. В правом нижнем углу вы можете найти иконку с шестеренкой, нажимайте на нее. Далее выбираем вкладку Override и вот он, ваш эмулятор. Выбираем User Agent и ставим галочку Device Metric. На первом этапе этого будет достаточно.
А еще есть эмулятор от самого PhoneGap! emulate.phonegap.com
Называется Ripple. Ставится в виде дополнений к Google Chrome. Ура! Наши возможности резко увеличились. В случае, если в своем приложении вы используете библиотеку cordova для расширения функционала приложения, скажем для работы с камерой телефона или компасом, то Ripple даст вам возможность симулировать данные процессы.
Ну и раз пошла речь про эмуляторы, нельзя ни сказать и про эмулятор, который ставиться вместе с Eclipse, если следовать инструкции от Phonegap
docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Этот эмулятор уже ведет себя совсем как настоящее устройство. Все ошибки, какие были найдены на этом эмуляторе, все аналогичным образом были найдены и на устройстве. Ну и конечно нужно сказать, что пользоваться этим эмулятором оперативно сложно. Долго грузится, трудно текст набирать и т.д. Подходит он для самой последней стадии. Когда ваше приложение уже работает прекрасно на всех других ранее перечисленных эмуляторах.
Шаг 6 — программируем
Хоть статья и для программистов, размешать весь код тут просто глупо. Опишу в общем. Программирование веб приложение, по сути, ни отличается от программирование небольшого сайта. Тут те же методы и подходы, но выполнены на Javascript. Тот же MVC, те же паттерны: синглетон, компановщик и т.д.
Вот фронт контроллер
* В javascript нет магических методов. Если скажем в PHP мы можем использовать __call, и вызывать App.SomeSome(‘ ’), то тут нужно будем писать App.Run(‘SomeSome’, ‘ ’)
Вот пример контроллера:
Вот небольшой пример модели
Вот пример представления
По сути, тут тоже самое, что и в случае, если бы сайт писался на PHP. За исключением фундаментального принципа, Javascript — асинхронный язык и без callback тут ни как (если не использовать специальные библиотеки конечно же)
Отдельно хочется остановится на нюансах, а именно работа с фотокамерой смартфона. Из коробки javascript не умеет этого делать. На помощь приходит библиотека Cordova, которую предлагает подключить PhoneGap. А вот ссылка, на описание работы с камерой телефона
При работе с расширенными функциями Javascript и в частности с камерой, я ждал от них больше всего проблем. И не напрасно. Первое, с чем пришлось столкнутся, это с тем, что после фото съемки, камера просто показывала черный экран и не возвращалась обратно в приложение. Как оказалось, это связано с тем, что по умолчанию фотография делалась максимального качества и файл получался большой. Процесс его переноса в приложение, в следствие не большой мощности самого телефона, занимает существенное время. Пришлось внести изменения в демонстрационный код
Но и это оказалось еще не все. Метод getPicture возращает base64 закодированную картинку, а вот данные между сервером и клиентом передаются в виде запросов JSONP.
Очевидно что передать такое количество данных через GET запрос невозможно. Серверная часть, кстати, не помню говорил я или нет, на PHP. Да, не самое лучшее решение, про WebSocket можно забыть. Проксирование тоже не сделать. Вероятно, решение данной проблемы была одна из самых сложных. А решение нашлось следующее. Время идет и стандартные классы расширяются, добавляются новые методы. Так вот класс XMLHttpRequest обзавелся новыми событиями. Кроме стандартного onreadystatechange появилось также событие onload. Если обработчик ответа от сервера “повешать” на него, и в заголовке Content-Type указать application/x-form-urlencoded, то броузер будет делать кроссдоменный запрос методом POST, что, собственно нам и нужно. Вот пример
И еще, очень важный момент. Кроссдоменный запрос, не важно как он реализован, является синхронным, даже не смотря на то, что выше приведенный код выглядит как асинхронный.
Столкнулся я также и с проблемой Same Origin Policy. Решение этой проблемы лежит на серверной стороне. В конфигурационных файлах прописывается разрешение на кросс доменный запрос и дело с концом.
Хочется также отметить, что в случае, если вам не нужны расширенные функции работы с телефоном: акселерометр, компас, камера, медиа и т.д. подключать библиотеку cordova не обязательно (а это примерно 300 килобайт). Геолокация, кстати, доступна и без нее.
Шаг 7 — отлаживаем
Вот наше приложение готово. Сверстано и прекрасно работает на эмуляторе Ripple (см. раздел про эмуляторы). Начинается самое интересное, а именно отладка на телефоне. Но сначала, попробуем запустить приложение на эмуляторе, в eclipse. Перед каждым запуском приложения на эмуляторе, система просит отчистить проект. Project -> Clean. Не забываем это делать. Нажимаем Run — поехали!
После загрузки эмулятора, в панели LogCat Eclipse будет огромное количество сообщений. Первым вопрос который возникает — какие наши? Для того, чтобы видеть только свои ошибки, и в частности, видеть сообщения которые приложение выводит в консоль console.log, нужно настроить фильтр. В панели LogCat, слева, есть отдельный блок, Saved Filters. Открыв ее, вы конечно увидите пустой список, ибо фильтров у нас пока нет. Нажимаем на плюсик и видим окно
Вводим в Log Tag web console, как на картинке и теперь Log консоль будет показывать сообщения от вашего веб приложения.
Как и ожидалось, эмулятор в броузере, далеко не то что эмулятор в Eclipse. Действительно, появились ошибки, которых ранее не было.
Начинаем изучать ошибку. Очевидно что ошибка вызывается в момент получения данных с сервером. Ошибка говорит что приходит статус 0. Начинаем искать решение в Google, и вот что находим
simonmacdonald.blogspot.ru/2011/12/on-third-day-of-phonegapping-getting.html
stackoverflow.com/questions/11230685/phonegap-android-status-0-returned-from-webservice
Делаем вывод: вероятно нужно добавить статус 0, как верный статус, для продолжения обработки ответа сервера. Ищем, где же это сообщения JSCallback и находим его в файле cordova.js на строке 3740 (cordova-2.1.0.js)
Пробуем заменить if (xmlhttp.status === 200) на if (xmlhttp.status === 200 || xmlhttp.status === 0) и вуаля — ни какого эффекта!
Дальше не буду рассказывать как я потратил целый день, кружа вокруг этой ошибки. Скажу только, что был готов отчаяться, ибо ни что не могло мне помочь. Приложение все равно падало, пока я просто не решил закомментировать часть кода. И о чудо! Ошибка исчезла! Возвращая, по частям, свой код, я нашел его часть, которая приводила к ошибке.
Почему смена Хеша, приводила к такой ошибке, для меня осталось загадкой. Если у кого какие будут мысли на этот счет — велком.
Шаг 8 — запускаем
Чтобы запустить приложение уже не посредственно на телефоне, достаточно войти в решим настройки, выбрать раздел Разработка и там взвести галочку напротив пункта Отладка USB. Далее, нажимая RUN в eclipse, среда определит что у вас подключен телефон к USB, а я надеюсь вы уже это сделали, и начнет запускать приложение уже на аппарате.
Источник
