Как сделать приложение агрегатор
Сегодня создано много веб приложений и сервисов, у которых одинаковая цель, но различный подход к исполнению. Так как информация разбросана по сети, пользователям приходится посещать множество аналогичных сервисов для того, чтобы увеличить эффект работы. К примеру, заказчик хочет разместить задачу на тендерной площадке. Для того, чтобы увеличить количество поданных заявок, он тратит время на повторяющуюся работу: создание офера и заполнение данных о проекте — на различных фриланс-биржах. Появляются сайты агрегаторы, которые пытаются решить эту проблему, но их поддержка становится все более затруднительной с появлением новых сервисов тематики агрегатора. Необходимо интегрировать все новые функции, и структуры данных, которые отличаются от сервиса к сервису. К счастью, мы не первые, кто создает и поддерживает подобные вещи: уже существуют паттерны, которые упрощают поддержку таких приложений и позволяют создавать гибкую архитектуру. В этой статье я хотел бы привести пример архитектуры агрегатора, который позволяет объединить тендерные площадки для фрилансеров — такие как Odesk, Freelancer, Elance и другие.
в то время как Odesk отвечает следующим образом:
Создаем интерфейс
Итак, первое, что необходимо сделать — создать интерфейс для того, чтобы скрыть реализацию в каждом конкретном классе и дать возможность вызывать единый набор методов для различных сервисов.
Создаем сервис адаптеры
Далее, для каждого сервиса мы создаем сервис адаптеры (вариация паттерна «Adapter» применительно к веб сервисам), которые будут реализовывать этот интерфейс. Оба класса работают с сервисами через API, но скрывают разницу в реализации вызовов.
Freelancer Service Adapter:
Odesk Service Adapter:
Обратите внимание, что оба класса имплементируют интерфейс ServiceInterface, но реализация метода authorize различна для каждого. Тут необходимо упомянуть также модель ModelCredential, которая хранит данные для авторизации. При Oauth авторизации это token и secret.
Создаем фабрику
В будущем нам необходимо легко добавлять новые сервисы, не изменяя кода существующих классов (Следуем OCP принципу). Для этого воспользуемся паттерном «Factory Method».
Мы также добавили проверку на то, что данный класс реализует ServiceInterface. Для чего здесь используется интерфейс и проверка на его реализацию классами сервисов? В случае, если разработчик ошибется и забудет имплементировать какой либо метод интерфейса, php не даст возможности запустить код в принципе. Это дает нам уверенность в том, что метод реализован. Также это дает понимание, какие конкретно методы необходимы будут системе для работы. По этому поводу поделюсь своей историей.
На одном из проектов, над которым я работал, была поставлена задача имплементировать сервис адаптер для Google+. В проект уже были интегрированы Facebook и Twitter адаптеры. Когда я открыл класс одного из них, я ужаснулся от количества кода внутри. Я не понимал, какие из методов мне необходимо реализовать, для того чтобы сервис заработал, а какие были вторичными. Пришлось сравнивать несколько классов, уточнять у тех разработчиков, которые писали этот код. Это заняло время. Если бы у нас был один интерфейс для таких сервис адаптеров — было бы сразу понятно какие из методов нужно было создать.
Собираем все вместе
Итак, мы подготовили классы сервис-адаптеры и фабрику, которая будет создавать их. Давайте посмотрим как эти части работают вместе:
Данная архитектура позволяет интегрировать новые сервисы более прозрачно и разработчику нет необходимости помнить различия в названиях методов или их вызовах.
В статье рассказываю, как я проводила UX-исследования и создавала интерактивный прототип веб-сервиса.
Привет! Я Мария, UX/UI-дизайнер, интернет-маркетолог.
На курсе по UX-дизайну от Дэна Потапова и Алекса Волошина разработала веб-сервис, с помощью которого люди находят и арендуют автомобили во время путешествий в разные города и страны. Результат шести недель серьёзной, скрупулёзной работы — интерактивный прототип будущего сайта, который решает проблему клиента. В этой статье хочу поделиться своим опытом, наблюдениями и результатом.
UX, юзабилити, юзАбельный интерфейс — слова, смысл которых не все понимают. Шаг за шагом я опишу все этапы, которые проходит UX-дизайнер при проектировании сайтов, разложу всё по полочкам и расскажу, что же всё-таки представляет собой «магическое юзабилити».
Некоторые этапы UX-исследования сидели у меня на подкорке и зачастую я их использовала в проектах интуитивно. Не было единой картины, структуры. Моя цель на курсе — научиться создавать сайты в мире клиента, которые решат задачи бизнеса и принесут прибыль. А ещё проектировать удобные, функциональные интерфейсы сайтов, приложений и программ. Теперь пазл сошёлся и появилась система, которую нужно сразу внедрять: целиком или частями.
«Когда погружаешься в UX, ты становишься крутым дизайнером, который думает сценариями. А именно: как человек попал на сайт, какую проблему он хочет решить, через какие шаги он должен пройти, чтобы достичь цели, и что в итоге он должен получить».
Подготовительный этап
Во время работы важно всё фиксировать, визуализировать и ничего не забывать. Поэтому, чтобы распланировать весь процесс, я создала доску в Trello с карточками по этапам работы и задачами на каждом из них. Кроме этого, завела Проектный документ в Гугл-док, где также отобразила все шаги и куда вносила все выводы, анализы, важные ссылки, скриншоты.
Главное преимущество Trello и Гугл-доков — возможность поделиться ими с другими людьми. А самое важное — с заказчиком, чтобы он не волновался, а видел объём работ, какая задача на каком этапе выполнения находится и результаты.
1. Цели и потребности бизнеса
Чётко сформулировав цели и потребности бизнеса, а также бизнес-требования к продукту, я понимаю, что в конечном итоге должна получить. А именно: веб-сервис, с помощью которого человек может выбрать и взять автомобиль напрокат. Это агрегатор, на котором собрана информация из разных источников. Благодаря удобному веб-сервису, мы помогаем легко и просто взять авто напрокат, а с каждой аренды получаем процент от компаний, которые предоставляют эту услугу.
Бизнес-требования к продукту
- пользователи должны иметь возможность искать авто по городам/странам;
- пользователи должны иметь возможность выбирать автомобиль по типу;
- пользователи должны иметь возможность получить всю необходимую информацию об условиях аренды: цена, условия, какие нужны документы.
2. Исследования и сбор информации
Наиболее важный и трудоёмкий этап. Без погружения и качественно проведённых исследований не достигну цели. Зачастую дизайнер не понимает ту предметную область, для которой разрабатывает сайт или приложение. И ему обязательно нужно «въехать в тему», чтобы предложить эффективные решения.
Поэтому первое, что я анализировала — конкуренты и похожие проекты. Вникала, изучала, как устроены их сервисы, как и что они предлагают, на каком языке разговаривают со своей целевой аудиторией, проходила путь пользователя. Определяла сильные и слабые стороны, плюсы и минусы интерфейса, отмечала для себя идеи, которые можно взять на заметку для вдохновения.
Исследования целевой аудитории
На этом этапе я воспользовалась следующими инструментами:
- онлайн-анкетирование,
- полевые исследования или личный опыт,
- живые интервью.
Онлайн-анкета
Онлайн-анкету с открытыми вопросами опубликовала в своих соцсетях и за 2–3 дня её заполнили 37 человек.
Следующая задача — проанализировать полученные результаты.
В итоге я проанализировала и отдельно выделила следующие пункты:
- основные цели аренды авто в путешествиях,
- основные цели аренды авто для рутинных дел,
- какими критериями руководствуются люди при выборе онлайн-сервиса или сайта по аренде авто,
- проблемы, с которыми сталкивались респонденты при выборе авто онлайн, бронировании и оплате аренды онлайн,
- какая информация об авто и условиях аренды, по мнению респондентов, наиболее важна на сайте.
Всё это даёт понимание, в каком направлении двигаться дальше после завершения этапа исследования целевой аудитории.
Полевые исследования или личный опыт
Тут всё просто. Я смоделировала ситуацию и представила, что отправляюсь в путешествие и мне нужно найти и арендовать авто в другой стране. Я наугад выбрала 2 сервиса конкурентов и прошла весь путь бронирования. Описала процесс, результаты и выводы, которые также помогут мне при проектировании.
Живые интервью
Всё не так страшно, как кажется. Главное — заранее подготовить вопросы.
Провела 6 живых интервью и результаты каждого из них расписала по параметрам:
- цель аренды,
- как искали компанию по аренде авто,
- основной критерий выбора компании и авто,
- как проходил процесс бронирования,
- какой информации не хватало на сайте компании,
- что не понравилось/ понравилось,
- проблемы — если были,
- рекомендации или идеи — если есть.
По итогу этапа исследований целевой аудитории я поняла, что цели аренды могут быть разные. Например, добраться из центра города до дома, не быть привязанным к общественному транспорту, чувствовать себя удобно и свободно передвигаться, ни от кого не зависеть, в путешествии самостоятельно объехать и осмотреть окрестности. А это значит, что на ситуацию начинаешь смотреть под другим углом и глубже понимать. А также сможешь предложить релевантные решения.
Итак, анализ бизнес-требований, проблем пользователей, конкурентов нужны, чтобы понять реальную ситуацию.
3. Систематизация и анализ полученных данных
Профиль пользователя
Проработав, проанализировав и подытожив всю полученную информацию, я приступила к описанию профиля пользователя. Это некий общий, вымышленный персонаж, который будет решать свою проблему с помощью моего сервиса. Также на основе выводов прописала основные и эмоциональные цели, основные проблемы и как сейчас наш пользователь решает проблемы. Если вообще решает. Всё это даёт понимание, на чём стоит сконцентрироваться при проектировании.
Customer Journey Map, CJM, или карта пути пользователя
Карта пути пользователя даёт возможность систематизировать полученную информацию, разбить процесс решения задачи на чёткие шаги и сфокусироваться на главном:
- какая задача стоит на каждом шаге,
- что человек делает на каждом шаге,
- что важно на каждом шаге,
- какие есть проблемы на каждом шаге,
- какие есть идеи — если есть.
Всего я выделила 6 шагов:
- переход на сайт компании,
- поиск авто,
- выбор конкретного авто,
- заполнение данных водителя, оплата, подтверждение,
- получение авто,
- сдача авто и отзыв.
4. Анализ проблем и генерация идей
Чтобы более наглядно разложить проблемы и предложить решения, я оформила данные в майндмэп. Туда вынесла шаги, на которых есть проблемы у пользователей, и там же буду прописывать решения. А чтобы это сделать, снова возвращаюсь к конкурентам и смотрю, какие варианты предлагают они, но уже с точки зрения существующих проблем. И на основе этого начинаю генерировать собственные идеи.
В этот же майндмэп внесла свои идеи по решению каждой проблемы и отмечаю те, которые планирую внедрять в текущей версии сайта.
Для дополнительного понимания процесса бронирования и проблем, возникающих во время него, загуглила сервисы, выбрала наугад один и прошла полностью весь путь поиска и резервации авто.
После такого глубокого анализа необходимо сразу фиксировать всё, что приходит в голову. И не важно, какие это идеи: от самых дурацких и кажущихся невыполнимыми до крутых. Впоследствии неудачная идея, коей казалась изначально, может оказаться самой гениальной.
Привет моим верным подписчикам и лиге вэб разработчиков! В данном посте я поведаю о:
- паре забавных случаев, возникших при разработке новой версии моего агрегатора котиков и мемасиков (а так же новостей, видео, пабликов, групп, RSS и Telegram каналов );
- текущем состоянии дел и планах развития.
Около 800 дней назад я опубликовал первую версию агрегатора контента и сделал пост на пикабу. Сервис получился неплохим и мои цели удовлетворял. Я пользовался им каждый день, для просотра мемасиков и котеек. Но, к сожалению, большого интереса у пользователей не вызывал. А в комментариях знающие люди советовали весь функционал перенести на сервер, что бы на клиентских устройствах все работало максимально быстро.
Так как по своей натуре я перфекционист, то идея сделать все "красиво" не давала мне покоя и в 2017 году я наконец сдался и решился переписать все с 0, нанять хорошего дизайнера и выкатить ресурс который заткнет за пояс конкурентов :) Получилось ли у меня или это очередное фиаско, я надеюсь узнать сегодня, в комментариях к этому посту :)
Итак, начнем с пары интересных задач, которые пришлось решить при разработке.
1. Как я добавлял вывод телеграмм каналов.
В последний год появляется все больше популярных телеграм-каналов. Но лично мне не удобно читать их в приложении, хотя я не пробовал :). Я сразу запланировал, что в новой версии агрегатора обязательно должна быть возможность вывести в свою ленту посты из любых публичных телеграм-каналов вместе со всеми другими источниками.
Обилие инструкций по работе с телеграм-ботами воодушевляло и я рассчитывал, что задача не займет много времени. И еще я не понимал, почему никто не сделал аналогичного сервиса :)
Как это всегда бывает в разработке, препятствия возникли на ровном месте: оказалось, что для того, что бы бот мог читать какой-то канал, бота надо туда добавить. Поэтому вариант сразу отпал. И я перешел к чтению мануалов на основной API телеграма.
Через 30 минут изучения документации я был в отчаянии.
Несколько дней поиска привели меня к решению: использовать на сервере opensource php телеграм клиент. Дада! Можно использовать телеграм под php, и там даже есть поддержка звонков! Это чудо называется madelineProto и исходники доступны на гитхабе.
В итоге, через 3 дня настройки и две блокировки моего аккаунта из-за чрезмерного количества попыток авторизации я настроил клиент и решил задачу. Теперь у меня есть свой шлюз из telegram в web! А пользователи могут читать любые публичные телеграмм каналы у меня на сайте без регистрации и смс.
2. Парсинг youtube каналов.
С API youtube'a вообще вышло забавно. Их справка предлагает использовать php плагин от гугла для доступа к API. От их API мне нужно было не много: список видео на канале с метаданными, название канала и его логотип. У vk или fb такой запрос создается парой строчек кода и разобраться можно за пол часа.
Но у гугла свой путь разработки :)
Я смирился с тем, что плагин для доступа к API весит более 30 мегабайт. Но я еще и не смог настроить его за 3 часа!
В итоге, кликая на все подряд в справке гугла, оказалось, что плагин можно вообще не использовать, а для получения всей информации - воспользоваться стандартным get запросом, как везде. На формирование запроса мне понадобилось ровно 10 строк кода и 15 минут, вместо 30 мегабайтного плагина.
3. Что сейчас с агрегатором?
- Добавить прямые ссылки на отдельные источники
- Расширять список источников: imgur, rutube, reddit, новостные сайты.
- Привлечь ядро активных пользователей, что бы были данные для формирования ленты популярных постов;
- Добавить в ленту вывод видео и гифок, что бы сократить число внешних переходов;
- Е-маил рассылки с лучшими постами за день/неделю (естественно при желании пользователя);
- Сотрудничество с создателями контента для совместного продвижения.
5. Техническая часть.
Для тех кому интересно то под капотом следующий стек технологий:
Backend: самописный, доставшийся мне в наследство на одном из проектов и переписаный мной под свои нужды. Используется шаблонизатор smarty.
Fron-end: HTML + Angular JS 1, так же используется Jquery 2 (в 3-й версии scroll события в firefox не работают периодически) для анимаций.
Парсинг осуществляю с помощью библиотеки php-query или через API раз в 5 минут по CRON'у в порядке живой очереди с приоритетом на публичные источники. Т.е. если за 4 минуты сайт не успел пройтись по всем источникам, то скрипт останавливается. А в следующий раз в начале очереди находятся те источники, которые дольше всего не обновлялись. Очереди для публичных и персональных источников разные - по 2 минуты и на те и на другие.
Разработчики популярных веб-ресурсов стараются сделать все возможное, чтобы клиентам было комфортно потреблять предоставляемый контент. В частности, нередко можно встретить, что из сайта они создают отдельное приложение. С помощью приложения можно информировать посетителей о новинках, если подключить всплывающие уведомления, либо использовать его как метод дополнительного продвижения. В общем, преимуществ у такого подхода много.
Что для этого нужно, сложно ли сделать такое приложение и какие знания для этого потребуются? Поговорим об этом в сегодняшней статье.
Зачем создавать из сайта приложение
Мы давно привыкли говорить «веб-приложение», подразумевая под этим простое приложение. Чаще всего приложения похожи по функциональности на обычные мобильные версии сайта, но все-таки есть некоторые отличия. В полномасштабном приложении мы получаем доступ к различным функциям, которые на сайте попросту отсутствуют. Например, это может быть функция встроенных уведомлений, хотя сейчас и такое можно спокойно организовать через браузер.
Приложения из сайтов популярны среди новостных ресурсов и других веб-сайтов, насыщенных контентом. Если вы столкнулись с тем, что вам нужно конвертировать сайт, но до сих пор не уверены, нужно ли вам это, то давайте разбираться в преимуществах такого подхода.
- Приложение из сайта – это то, что нужно для хорошего ресурса. Когда пользователь читает что-либо на странице браузера, то он может спокойно перемещаться между вкладками. В приложении такого не будет – таким образом, посетитель с большей вероятностью останется на ресурсе на долгое время.
- Мобильные приложения позволяют использовать такие функции, как push-уведомления, повторяющиеся подписки и т.д.
- Не стоит забывать и том, что миллионы пользователей ежедневно посещают Google Play и AppStore. Если там будет лежать ваше веб-приложение, то посещаемость сайта может заметно вырасти.
Что для этого нужно?
Разработка собственного приложения из веб-сайта – довольно сложная задача, которая требует особых знаний в области программирования. Для самостоятельного изучения вы можете найти много гайдов по данному вопросу, но не факт, что они легко дадутся. В этом деле довольно много нюансов, которые будут посильны только специалисту.
Если самостоятельно сделать его не получается, то надо ли непременно искать программиста? Да, но только тогда, когда нужен высококачественный продукт со своими фишками. В противном случае можно обратиться к онлайн-сервисам, которые выполняют конвертацию сайта в приложение всего за несколько минут. Кроме того, если ваш сайт работает на CMS WordPress, то его можно легко преобразовать в приложение. Сделать это можно с помощью специальных сервисов и плагинов, распространяющихся как в бесплатном, так и платном доступе.
Лучшие сервисы для создания приложения из сайта
Обратите внимание на то, что ни один бесплатный сервис не сможет обеспечить высокую функциональность вашему приложению. Обычно они предназначены для того, чтобы сделать что-то простое, приближенное к демоверсии. Если нужно получить функциональный продукт для широкой аудитории, то лучше обратиться к специалисту либо к платным сервисам.
Подробнее о них мы и поговорим далее – рассмотрим как профессиональные решения, так и более простые.
Tadapp Native
Tadapp Native – это лучшее решение для тех, у кого нет времени ждать. Сервис заверяет, что может создать приложение для Android и iOS всего за 5 минут и бесплатно опубликовать его в Google Play. Единственное, с чем могут возникнуть проблемы, так это с адаптацией сайта. Если ее нет, то конвертация, вероятнее всего, пройдет некорректно.
Особенности:
- возможность подключения бесплатных push-рассылок;
- личный кабинет позволяет управлять сразу несколькими приложениями;
- доступна возможность загрузить собственный экран загрузки приложения, иконки;
- есть техподдержка – скорость ответа составляет около 2 часов.
Стоимость: от 890 рублей
Ссылка на официальную страницу: Tadapp Native
Appmaker
Appmaker – сервис с 14-дневным пробным периодом, во время которого пользователю предоставляется возможность создать из сайта полноценное приложение на платформе iOS или Android. Appmaker предлагает 3 варианта создания приложений: на WordPress, c WooCommerce и в виде Web App (веб-версия). На официальном сайте можно найти истории успешных компаний, которые использовали данный сервис.
Особенности:
- поддерживает более 2000 различных плагинов;
- работа с WordPress и WooCommerce;
- пробный период;
- круглосуточная поддержка.
Стоимость: от $9.90
Официальная страница: Appmaker
Appverter
Appverter – это профессиональный сервис для тех, кто не хочет тратить свои деньги впустую. Он предлагает пользователям переложить свою проблему на высококвалифицированных специалистов. Всего за $50 можно получить полноценное Android-приложение из сайта; для iOS эта цена возрастает до $100.
Особенности:
- быстрая разработка за 1 день;
- уникальное приложение – никаких шаблонов;
- консультация и поддержка входят в стоимость;
- есть тариф со 100% гарантией публикации;
- некоторые тарифные планы включают пункт «Публикация под ключ».
Стоимость: от $50
Официальная страница: Appverter
AppPresser: плагин для WordPress
AppPresser – это сервис, позволяющий создавать мобильные приложения для Android и iOS с использованием собственного компоновщика. Хотя сам плагин и является бесплатным, тарифные планы сервиса начинаются от $19 в месяц. Для работы с ним не нужны особые знания в программировании. Если вы хорошо владеете WordPress, то с данным инструментом не возникнет никаких проблем.
Особенности:
- возможность создавать приложения из любого сайта на WordPress;
- работает как конструктор: масса различных настроек;
- на официальном сайте есть документация на английском языке.
Стоимость: от $19
Официальная страница: AppPresser
MobiLoud: плагин для WordPress
MobiLoud – это еще одно решение для веб-ресурса, созданного на WordPress. Он очень похож на предыдущий сервис, но здесь есть некоторые отличия. MobiLoud предоставляет несколько «предустановок» приложений, которые можно использовать в зависимости от того, какие функции необходимо реализовать. Второе отличие – стоимость, и она заметно выше.
Особенности:
- 100% синхронизация приложения с сайтом;
- возможность создать приложение менее чем за сутки;
- приложение от MobiLoud часто монетизируются;
- есть бесплатная демоверсия;
- отличная кастомизация.
Стоимость: от $200
Официальная страница: Mobiloud
Создаем приложение из сайта
Лучшие сервисы мы рассмотрели, теперь давайте воспользуемся одним из них и попробуем создать приложение на основе веб-сайта. Для примера возьмем сервис Appmaker с бесплатным пробным периодом.
Чтобы сделать приложение, выполним следующее:
- Переходим на официальную страницу и на главной выбираем «Get Started for Free».
- На отобразившейся странице нам предлагают ввести URL веб-сайта на WooCommerce. Если у вас его нет, то просто введите любой другой адрес – это требуется, чтобы перейти на нужную нам страницу.
- Выбираем, на основе чего будет создано приложение. Если сайт не на WordPress или WooCommerce, то жмем «Create web app».
- Вам будет предложено зарегистрировать аккаунт – заполняем все нужные поля и идем дальше. В новом окне вводим адрес сайта, который нужно преобразовать, а также указываем свою электронную почту. Затем жмем «Proceed».
- В результате перед нами отобразится окно конфигурации. Процесс создания приложения может занять некоторое время – все зависит от веса сайта.
Как только создание приложения будет завершено, будет предоставлена ссылка на скачивание файла. На этом все!
Читайте также: