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

Разработка приложения для ресторанного бизнеса

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

mobile-app-for-restaurants

Ресторанный бизнес работает в постоянной интеракции с клиентами. По сути это пользователи его сервисов, с которыми всегда хотелось бы быть на связи. Одна из главных задач ресторана, это облегчить “работу” потенциального клиента по заказу и оплате своего товара. В моем примере в качестве товара может выступать ужин, обед, и т.п. Клиент должен иметь максимально быстрый и простой способ заказа и оплаты, в противном случае велика вероятность того, что он перейдет к “более удобным” конкурентам. Одним из инструментов решения этой проблемы может быть мобильное приложение.

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

  1. Просмотр меню и цен
  2. Быстрый доступ к данным – как доехать, как позвонить
  3. Заказ столика, доставки
    • Ввод адреса – проверка района на то делаем ли доставку
    • Опционально изменяем время доставки и ее цену в зависимости от района
  4. Хранить предыдущие адреса пользователя для быстрого доступа
  5. Показывать историю заказов для простоты пользователя
  6. Продвижение спец предложений ресторана.

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

Итак, какие же есть преимущества у мобильного приложения:

  1. Сбор статистики о пользователя (как результат – продвижение интересных ему товаров)
  2. Прямая связь с клиентом (push notifications)
  3. Клиенту просто оформить заказ без ожидания на телефоне и без нужды говорить с представителем ресторана.

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

Поделиться:

Баш очень порадовал сегодня

Баш, сегодня был особенно хорош:

xxx: Вот заводят люди себе семьи, находят девушек, обзаводятся хобби, а потом удивляются, почему они так плохо знают архитектуру x86_64.

Поделиться:

Выбор на чем строить веб приложение не так важен

Мне достаточно часто приходят письма с вопросами о том какие технологии лучше использовать в том или ином проекте. Причем не смотря на то, что я пишу во основном про ангулар люди спрашивают об использовании очень разных библиотек. На javascript’е их написано такое количество, что об всех я просто даже и не знаю :] Но вопрос не в этом, дело в том, что подход для решения поставленной задачи не должен начинаться с того какую библиотеку использовать. Нужно сначала обозначить задачи клиента.

web-technologies

Я как веб разработчик безусловно всеми руками за то, чтобы все системы управления (CRM, бухгалтерия, поддержка клиентов и т.п.) были в интернете. Плюсы тут очевидны – ничто не привязано к одному компьютеру, есть доступ из любой точки мира. Достаточно сложно скопировать и украсть все данные, разумеется если при этом правильно раздаются права и уровни доступа. При этом не нужно беспокоиться о том какая операционка стоит на компьютере и заниматься обновлением программного обеспечения.

При всех этих плюсах клиент может не понимать, что от него потребуется для перехода на эту систему. Если у него вся работа завязана на десктопном софте от тех же 1С, то переход на новый формат может быть достаточно болезненным. Ведь этот процесс не ограничится только написанием и тестированием нового программного обеспечения. нужно будет скопировать всю базу, дать доступ всем сотрудникам, проверить все ли работает нормально, обучить персонал, выслушивать и отвечать на жалобы о том, как все плохо и как раньше было лучше.

Все это в природе людей и нужно быть к этому готовым. Если вопрос об этом улажен и все морально готовы, то уже тут стоит озаботиться выбором технологий. Опять таки в этом случае все уже упирается в предпочтения подрядчика – если его команда использует Ruby для серверной части, я для клиентской Backbone, то врятли они перейдут на PHP и React.

Поделиться:

Как быстро и не трудозатратно стать веб программистом?

Никак! Нужно пахать!

PS
Накипело…

Поделиться:

Интерактивная круговая диаграмма на Snap.svg – Interactive Pie Chart Snap.svg

Сегодня я расскажу о достаточно интересной библиотеке для работы с векторной графикой snap.svg. Библиотека разрабатывается командой от фирмы Adobe, в которую входит Дмитрий Барановский – разработчик библиотеки Raphaël.

Итак в чем же преимущество работы со Snap.svg – ответ достаточно тривиальный, как и в случае с jQuery – можно писать меньше кода и получить тот же результат, либо даже лучше. В моем случае – мне было необходимо создать круговую диаграмму (Pie Chart), каждый сектор которой реагировал бы на клик мыши. все это хотелось бы разумеется сопроводить приятной анимацией.

Для создания круговой диаграммы потребуется знание нескольких вещей:

  • Рисование сектора
  • Обработка клика
  • Изменение масштаба элемента
  • Анимация изменений

Для создания простейшего сектора нам потребуется следующий код:

Для наглядности все данные можно представить следующим образом:

piechart-sector-arc

Обработка клика тоже решается достаточно просто. Snap.svg предоставляет необходимый функционал:

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

Рабочий пример:

Весь код:

Поделиться:

Поиск с выпадающим списком на ангулар – AngularJS

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

Для начала подготовим сами теги:

dropdown-list – это и будет сама директива, которая принимает два атрибута:

  • data-items-list – лист, который будет отображаться в выпадающем списке
  • data-placeholder – текст, который будет в поле ввода, пока оно пустое.

Рабочий пример:

See the Pen Поиск с выпадающим списком by Artem Demo (@artemdemo) on CodePen.

Ссылка по теме:
Как использовать ng-model в новой директиве

Поделиться:

Автоматическое добавление многоточия длинному тексту – CSS

Люблю простые решения, казалось бы сложных задач.

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

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

Ну падать в грязь нам сто процентов не хочется. Так что уже задумываемся о том как писать функцию на JavaScript, которая бы решила все эти вопросы. Однако, есть способ проще! Можно воспользоваться не слишком известной CSS командой “text-overflow: ellipsis;” и все будет сокращаться с многоточием:

В действии:

See the Pen Автоматическое добавление многоточия длинному тексту by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Динамичное создание ссылок в Ангулар – ngHref AngularJS

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

Ничего особенно интересного тут не произайдет. Ссылка будет добавлена и все будет прекрасно работать, до тех пор пока вы будете использовать стандартные линки вида “http://artemdemo.me”. В приложениях же для смартфонов ситуация меняется и там порой требуется запускать ссылки вида “app://do.something”.

В этом случае ангулар будет недоволен и к каждой такой ссылке будет добавлять слово “unsafe:” –> “unsafe:app://do.something”. Само собой, что при таком раскладе ничего работать не будет. Нужно как-то с этим бороться.

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

Пример использования:

See the Pen Динамичное создание ссылок в Ангулар – ngHref AngularJS by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Немного о CSS препроцессорах или почему стоит попробовать LESS

Сказать по правде я достаточно долго не мог дойти до использования CSS препроцессоров. Мне все казалось, что нету лишнего времени потратить на изучение, ведь нужно еще подкрутить среду разработки, все тот же Grunt настроить, но в какой-то момент окунулся и ни разу не жалею. Если вы еще не знаете что такое CSS препроцессоры, то давайте я коротенько введу вас в курс дела.

Существует два самых распространенных CSS препроцессора: LESS и SASS, может есть и больше, но это два гиганта, которые широко распространены в индустрии. Причем работают они в двух совершенно разных средах, так что вроде бы и даже не конкурируют, но обо всем по-порядку.

Препроцессоры позволят добавить в CSS функционал языка программирования: циклы, переменные, классы (их подобие разумеется) и функции. Если вы занимаетесь веб разработкой, то наверняка сталкивались с тем, что по нескольку раз копировали один и тот же параметр (например цвет) в разные классы. Никакого другого метода кроме как копи-паст CSS не предлагает. Если нужно этот параметр потом поменять, то приходится вручную пройтись по всему списку и надеяться, что ничего не пропустил :] препроцессор решает эту проблему!

Можно использовать циклы:

Но моя самая любимая фишка – это дополнительный случайный параметр для картинок, которые я устанавливаю через background: url(); Дело в том, что они все хранятся в кеше браузера и чтобы увидеть изменения после обновления файла изображения нужно чистить кеш, что достаточно муторно. Есть отличное решение:

В общем сразу видно стоящая штука. Теперь поделюсь причиной, почему я выбрал для себя работу именно с LESS. Из-за лени господа и дамы. Вначале синтаксис SASS мне понравился больше и я уже собрался его ставить, как выяснилась неприятная особенность – дело в том, что “компилятор” SASS требует установки Ruby (языка программирования вместе с менеджером пакетов). Ничего против самого языка я не имею, но ставить дополнительный пакет только из-за препроцессора, как-то не хотелось.

Параллельно с этим LESS прекрасно работал с npm – а раз уж я и так пишу под Node.js и давно пользуюсь разными пакетами от npm, то вопрос с выбором оказался решенным.

Поделиться:

Будьте осторожны используя $index в ng-repeat

“Клиент жалуется на то, что удалял один элемент списка, а удалился вместо него другой!”

Это баг из той серии когда проблема не очевидна, а решение может занять достаточно много времени. При работе с AngularJS – эта ошибка может возникнуть из-за не очевидной работы $index в сочетании с ng-repeat.

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

Ничего подозрительного не видно, верное? Так и есть код работает корректно и багов в нем нет.

Теперь добавим фильтр

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

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

Как буд-то ничего такого не произошло, верно? Однако, мы только что добавили баг в работу нашего приложения.

Баг находится в работе вот этой функции:

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

У этой проблемы есть достаточно простое решение. Передавайте функции removeItem() сам элемент, а не $index.

 

Поделиться: