Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Перекомпиляция ядра VirtualBox – ошибка в работе Genymotion

Несколько дней назад я переустановил модули Android SDK, после этого как-то не случилось запускать эмулятор Genymotion и вот сегодня я его таки запустил, а он отказался работать. Говорит ищи ошибку в стороне VirtualBox. И действительно сразу после запуска VirtualBox появляется окошко с сообщением об ошибке.

Хм, говорит, что нужно перекомпилировать ядро VirtualBox, сам он не может. Звучит конечно сложно, но все решается командой в одну строку:

В линуксе зачастую проблемы решаются запускам команд с правами администратора.

Ссылка по теме:
Как установить Genymotion на Ubuntu (англ.)

Поделиться:

Как при помощи javascript определить, что мобильная клавиатура открыта

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

Быстрый поиск по сети дает достаточно очевидный ответ – ловить фокус на элементах ввода, таких как input, textarea. Почему именно фокус? Ну тут все просто – у браузера нет события, которое вызывается при открытии клавиатуры, поэтому нам остается только следить за симптомами и надеяться, что именно они вызывают то, что нужно. Первые же тесты показывают, что focus и blur во многих случаях решают проблему и действительно сообщают о том, что клавиатура открыта.

smartphone-keyboard

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

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

На выходе получаем примерно вот такой класс:
(Написан на CoffeeScript, исходный код в JS можно посмотреть вот тут)

Поделиться:

Как изменить цветовую схему в Eclipse

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

В итоге получается достаточно симпатично и не так грустно (да, да это скриншот из еклипса):

eclipse-color-theme

Итак, что нужно сделать:

Если вы используете Eclipse 3.5 (Galileo), то вам нужно открыть меню Help → Install New Software…, нажать Add Site и ввести в поле имени Eclipse Color Theme и http://eclipse-color-theme.github.com/update в поле URL. Затем выбрать новый пункт в окне Work with, ответить Eclipse Color Theme для инсталляции и нажать продолжить.

Если вы используете Eclipse 3.6 (Helios), то вы можете просто воспользоваться Eclipse Marketplace. Откройте Help → Eclipse Marketplace…, введите в поле поиска Eclipse Color Theme, после чего нажмите установить.

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

После инсталляции, откройте меню Window → Preferences → General → Appereance → Color Theme здесь вы сможете сменить цветовую схему.

Ссылка по теме:
http://eclipsecolorthemes.org/?view=plugin

Поделиться:

Доступ к localhost из Virtual Box

В продолжение предыдущего поста о доступе к localhost из эмулятора Genymotion. Хотелось бы иметь возможность достучаться до локального сервера из системы установленной через Virtual Box. Разумеется простое использование localhost в адресной строки браузера ничего не даст.

Вместо этого существует специальный IP адрес для доступа к локальному серверу родительской машины: http://10.0.2.2/ Этот адрес как раз и привязан к localhost

Поделиться:

Сегодняшний баш :)

xxx> Я умею читать чужие мысли!
yyy> А я умею читать чужие регулярные выражения
xxx> Ок, ты победил

Поделиться:

Доступ к localhost из эмулятора Genymotion

Одна из проблем в разработке под смартфоны – это тестирование. Скорее всего эту проблему смело можно назвать одной из основных. Понятно, что тестирование в конечном итоге должно пройти на настоящем устройстве, но во время разработке хотелось бы иметь возможность быстренько все проверять в эмуляторе. Для андроида самый лучший эмулятор это Genymotion, потому что родной жестко тормозит (да, вот такая ирония).

Так вот если я разрабатываю браузерное приложение, то 80% тестов естественно проходят в эмуляторе. А чтобы все проходило просто, то хотелось бы запускать код с локального сервера не заливая каждый раз в интернет. Разумеется нельзя просто написать localhost в смартфоновском браузере и надеяться, что все будет работать. Однако решение есть.

Genymotion запускается через Virtualbox, который по-молчанию устанавливает сетевую конфигурацию в Host-Only. Этот метод эмулирует физическую сеть, которая используется как Genymotion так и самим компьютером, на котором все это запущено. Имя самой сети vboxnet0, и если запустить в терминале команду ifconfig vboxnet0 (или ipconfig vboxnet0 для Windows), то вы получите ее характеристики, в том числе и адрес IP вашего localhost. Скорее всего это будет 192.168.56.1. Через этот IP вы получите доступ к локальному серверу.

Ссылка по теме:
Доступ к localhost из Virtual Box

Поделиться:

Работа современных веб приложений

Не так давно я столкнулся с достаточно интересным определением того чем выделяются современные веб приложения по сравнению с традиционными. Просто противостояние старого и нового миров ^_^ но это нормальная практика, еще со времен Геродота, так что не будем впадать в панику раньше времени.

Под традиционными веб приложениями я подразумеваю классическую клиент-серверную работу, когда браузер посылает http запрос на сервер и в итоге получает готовую страницу, которую уже и показывает пользователю. Система отработана годами, все четко давно понятно и вряд ли можно найти разработчика, который ее не использовал. Схематично (а я люблю схемы) ее можно представить следующим образом:

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

Как вы наверняка успели заметить – логика приложения переходит на сторону клиента, в то время как сервер начинает выдавать только ответы на API запросы. Задача сервера при этом сводится к проведении запросов к базе данных и выдаче оных в виде стандартных JSON объектов. Формированием html занимается сам браузер.

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

Поделиться:

Библиотека для пошагового обзора сайта – intro.js

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

Итак: intro.js. Что она делает? Это библиотека предназначена для того, что ввести посетителя в курс дела. показать ему все интересные штуки и приятности вашего сайта. А то вот мучаешься вопросом – все ли пользователь понял, все ли увидел, а тут взял его за руку и провел по всем разделам.

intro-js

Intro.js работает автономно и не требует дополнительных библиотек, а то что-то многие просят последнее время jQuery, совсем разучились писать на чистом JS.

Мне идея нравится и кажется достаточно практичной. Думаю, что многие маркетологи были бы в восторге иметь возможность “водить пользователя за руку” по сайту. После этого дать им еще полную статистику с адресами и именами посетителей и они от восторга не смогут уснуть ^_^

Ссылка на саму библиотеку:
https://github.com/usablica/intro.js

Поделиться:

Структура приложения для ресторана – доставка

В этом посте я продолжаю тему мобильных приложений для ресторанного бизнеса. Мой предыдущий пост, вы можете прочитать перейдя вот по этой ссылке: Разработка приложения для ресторанного бизнеса

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

В чем преимущество ресторанного бизнеса – в том, что люди никогда не перестанут кушать. А в чем проблема ресторанного бизнеса – сложная конкуренция. В этой отрасли крайне важно создавать свой стиль, свою кухню, меню, иначе клиенту будет сложно выделять твой бизнес от других, а это значит, что он будет заходить реже, чем хотелось бы. Опять так, я делаю предположение, что еда в ресторане не только съедобная, но и достаточно вкусная, иначе тут уже ничто не спасет.

food-app

Есть несколько разных задач которое приложение должно решать. Объединять все их в одно не имеет смысла – это приведет к нагромождение и пользователю в итоге будет сложно им пользоваться. Самое правильное – это очертить круг задач, которые должны будут решены и как можно быстрее выходить на рынок, а уже потом по отклику делать доработки.

Если приложение в первую очередь предназначено для оформления доставки, то его работа (flow) может быть описана следующим образом:

Screenshot from 2014-12-29 23:37:17

Очень важная роль ложиться на первый экран приложения – ввод адреса доставки. Он должен выполнять сразу несколько функций:

  1. Прием адреса
  2. Проверка корректно ли введен адрес
  3. Проверка выполняется ли доставка в этот район
  4. Вывод дополнительных опций, в случае если нет доставки, ресторан закрыт, спец предложения.

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

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

Поделиться:

С Наступающим!

У меня есть уверенность, что следующий год покажет еще более сильное развитие мобильных приложение, сервисов, решений, да и индустрии в целом. Поэтому если вы еще сомневаетесь входить в эту индустрию или нет, то вы уже опаздываете ^_^

А в целом – хорошего Нового Года!

Happy-New-Year-2015-Greetings

Поделиться: