Однажды ко мне пришел инвестор одного проекта и сказал: «Давай сделаем планировщик путешествий по картам Google!» Я согласился. Тогда инвестор стал рассказывать, как техдиректор представлял себе архитектуру этого планировщика: он говорил что-то про связь с сервером, про ключ API, про запросы в Google, про деньги за запросы, которых будет много и т. д. Все выглядело сложно и красиво.
Однако затем мы стали внимательно читать документацию Google API и вдруг поняли, что на самом деле нам сервер не нужен. Вообще! Весь планировщик можно сделать на клиенте. А самое интересное — мы можем обойтись даже без API-ключа (при условии, что мы будем использовать JS API).
В итоге я за два дня смог написать такой планировщик, с логикой на стороне клиента, на основе Google API, без использования сервера. Все оказалось очень просто.
Я расскажу, как можно сделать простейший планировщик такого рода буквально за пару часов. Конечно, за это время можно собрать только прототип, но главное — он будет работать! Его главной функцией будет прокладка оптимального маршрута между достопримечательностями в интересующем нас городе; может присутствовать разбивка плана поездки по дням.
Как создавать собственные карты в Google Maps с нанесением меток и маршрутов
Все будет сделано на AngularJS с использованием Google Maps/Places API. Я расскажу об особенностях работы с этим API и о некоторых его возможностях, которые не указаны в документации. Также мы поговорим о выделении логики в клиентские приложения.
Итак, как именно будет выглядеть такой планировщик? Это будет просто строка поиска в браузере, в которую мы будем вводить название интересующего нас города или места. В ответ на такой поисковый запрос нам будет выдаваться это место на карте Google, список достопримечательностей в этом месте и ближайших окрестностях с описанием, фотографиями и отзывами. И, конечно, между достопримечательностями будет прокладываться оптимальный маршрут по картам Google c указанием примерного времени перемещения между ними. Также можно будет легко добавить возможность разбить план посещения достопримечательностей по дням.
Что нам понадобится?
Во-первых, нам понадобится библиотека Google Places. Это самое главное, что обеспечит работу планировщика:
— это Autocomplete, очень полезный проект для AngularJS, который оборачивает библиотеку Google Places и работу с автозаполнением. Rawgit — обвязка вокруг GitHub, у которой тоже есть CDN.
— это собственно AngularJS.
— это Bootstrap.
— это jQuery, который нужен Bootstrap’у.
— это таблицы стилей от Autocomplete и Bootstrap.
Вот и все внешнее, что у нас есть. Все это загружено с CDN — сервер нам не нужен вообще!
Ищем место на карте
Теперь попробуем сделать поиск интересующего нас города на карте. Вот как мы используем Autocomplete:
destinationData <>
Как мы видим, тут у нас один input:
Таким образом, благодаря Angular-проекту Google Places Autocomplete мы получаем работающее автозаполнение. Это значит, что мы можем начать вводить название места в форму поиска (даже с ошибками), и нам в поиске будут предлагаться подходящие варианты:
В итоге у нас получился поиск места с отображением его местоположения на карте Google:
Ищем ближайшие достопримечательности
Раньше (до версии 3) поиск по местам в Google API осуществлялся одним методом — там было очень много параметров, и все было очень сложно. Теперь поиск поделен на три метода. В частности, появился выделенный radar search — поиск по ближайшим интересным местам. Раньше такие места приходилось дополнительно фильтровать, т. к. в результатах поиска попадались города и страны. А сейчас все просто.
Как он работает?
Google обычно предлагает сразу показывать результаты поиска на карте. Но, на самом деле, нам это сейчас не нужно, ведь мы просто хотим получить список ближайших мест. Поэтому мы используем radar search ( service.radarSearch ) без карты в радиусе 50 км — это обычный радиус города и окрестностей. Мы ищем обычные туристические места вроде музеев, церквей, ночных клубов, зоопарков и т. д., которые мы перечисляем как типы Google ( types ).
$scope.destinationOptions = < location : destination.geometry.location, radius : 50000 >; $scope.popularPoints = []; $scope.map = new google.maps.Map(document.getElementById(‘map’), < center : $scope.destinationOptions.location, zoom : 5 >); var service = new google.maps.places.PlacesService($scope.map); var radarOptions = < location : $scope.destinationOptions.location, radius : $scope.destinationOptions.radius, types : [ ‘airport’, ‘amusement_park’, ‘aquarium’, ‘art_gallery’, ‘casino’, ‘church’, ‘city_hall’, ‘courthouse’, ‘hindu_temple’, ‘library’, ‘museum’, ‘night_club’, ‘park’, ‘stadium’, ‘synagogue’, ‘university’, ‘zoo’ ] >; service.radarSearch(radarOptions, function(points) < points.slice(0, 8).forEach(function(point) < service.getDetails(< placeId : point.place_id >, function(details) < $scope.popularPoints.push(details); >); >); $scope.$digest(); >);
Итак, мы получаем запрос к радар-поиску и вместо того, чтобы использовать рендерер и начать работать с картой, забираем все в Angular, и поиск выдает нам восемь первых мест (а возвращает он 200 результатов). Сразу же мы с помощью того же сервиса запрашиваем подробности о местах и добавляем к себе в ангуляровский scope: $scope.popularPoints.push(details) .
Так мы сделали поиск — когда находим место на карте, тут же отображается и список всех достопримечательностей в радиусе 50 км. Также, если это нужно, мы сможем раскрыть этот список и увидеть изображения этого места, а также разные подробности и комментарии пользователей с рейтингом.
Прокладываем маршрут
Но если бы я просто показал самые лучшие достопримечательности в результатах поиска, инвестор был бы недоволен, ведь хочется еще спланировать наилучший маршрут по этим местам. Поэтому под результатами поиска у нас будет кнопка, которая сможет показать нам этот маршрут. Как она работает?
Оказывается, и тут тоже Google всё сделал за нас — он предоставляет полный интерфейс к механизмам Google Maps по планированию и прокладке маршрутов — вплоть до промежуточных точек. Но, как любят говорить некоторые мои знакомые, API тут сделан «чужими для хищников». Потому что, если у меня есть список точек, я просто хочу передать их вместе и сказать, что собираюсь по ним поездить. Но оказывается, что так не бывает, а бывает так, что мы начинаем только в каком-то одном месте и заканчиваем в каком-то другом конкретном месте, и внутри нужно выцепить slice’ом промежуточные точки.
$scope.tripCalc = function() < var directionsService = new google.maps.DirectionsService(); directionsService.route(< origin : $scope.points[0].geometry.location, destination : $scope.points[$scope.points.length — 1].geometry.location, waypoints : $scope.points.slice(1, $scope.points.length — 1).map(function(point) < return < location : point.geometry.location >; >), travelMode: google.maps.TravelMode.DRIVING >, function(result) < $scope.route = result; $scope.$digest(); >); >
Однако мы нашли выход — замыкали точки начала ( origin ) и конца ( destination ) маршрута на отель, в котором отдыхает человек.
Также мы потом сделали и разбиение по дням — с учетом, что ночевать мы можем в разных отелях. Т. ч. можно сделать и так, например, что начальная точка — аэропорт, вторая — пункт аренды автомобилей, а конечная — отель первой ночи. Еще мы можем проложить маршрут так, чтобы искать в середине дня рестораны, чтобы пообедать. Все эти точки можно получить с помощью указания соответствующих типов в запросе к API Google Maps (параметр types ). На самом деле, это простая задача программирования — выстроить массив объектов и отразить его в waypoints . Так мы получаем готовый маршрут.
Самое интересное и самое приятное — возможность показывать дистанцию и время, которое будет потрачено на то, чтобы переместиться между двумя точками маршрута. Это значит, что, если мы, например, едем между точками шесть часов — это подсказка, чтобы подыскать ресторан по пути, а если едем через ночь — значит, хорошо бы подсказать и отель. Все это делается на клиенте.
Нужен ли сервер?
И тут мы подходим к интересной дискуссии, которая возникла у нас, когда мы делали этот планировщик путешествий. А действительно ли мы хотим сохранять все это на сервере? Нужно ли нам знать, что искал пользователь?
На самом деле, нам интересно только одно: чтобы пользователь заказал у нас то, что мы хотим продать. Не буду говорить, что мы хотели продать пользователю, но, допустим, это могут быть комнаты в отелях, которые он выбрал в этом планировщике. По большому счету, этот планировщик — просто added value, добавленная стоимость, всего лишь удобный сервис на сайте, который продает комнаты в отелях. Т. ч. нам на сервере сохранять ничего не нужно — все можно делать на клиенте. Таким образом, мы можем просто прикрутить кнопки для бронирования номеров в отелях там, где эти отели отображаются при планировании маршрута.
Конечно, какая-то аналитика нам все же может понадобиться, но и тут мы можем обойтись без сервера, если используем Google Analytics. Так, например, если нам нужно знать, какие места больше всего искали пользователи, текст поиска может без проблем прыгать через HTML5 API в URL, и Google Analytics это подхватит.
Все остальное нас уже не очень волнует. Мы можем теперь рекламировать страницу, а Google пусть справляется с нагрузкой — при этом будет ограничено только количество запросов с одного IP, т. е. от пользователя. Мы можем выложить страницу на Amazon S3 и тогда сможем вообще не думать о нагрузке и о том, что наша рекламная кампания может положить наши серверы. Если же мы добавим еще отзывы от пользователей, пользователь начнет завязываться на какой-то интерактив на сайте, который, на самом деле, весь загружен снаружи.
Так что планировщик мы практически сделали — еще немного, и его можно продавать.
На самом деле, именно такие способы организации интерфейса эффективнее всего. Сейчас большие поставщики действительно сделали все, чтобы нам ни о чем не надо было беспокоиться. Например, последние два года, когда мои знакомые спрашивали, как им сделать сайт, я не мог ответить им ничего лучше, кроме как: «Идите на blogspot». Ведь там все есть! Так и Google Maps предоставляет все, что нужно.
Но на каких условиях?
Условия использования GoogleMaps API
Если бегло читать официальные инструкции к Google Maps API, может показаться, что все обязательно должно происходить где-то на картах Google — мы должны что-то нарисовать и ничего с этим не делать. Но, если читать внимательней, оказывается, что, по условиям Google, все, что мы обязаны делать — это, грубо говоря, нарисовать в нижнем углу логотип Google и ссылки на всякие условия использования. Получается, что Google дал нам все необходимые данные, и мы на их основе можем хоть собственную карту рисовать и вообще распихивать эти данные, как нам угодно, лишь бы не забыть написать, что данные получены от Google. Поэтому вы можете делать на сайте все, что угодно на JavaScript, и без всякого сервера.
Источник: habr.com
Как создать виртуальную экскурсию и квест-истории с помощью Surprise Me
Приём цифровой дидактики Виртуальная экскурсия (Виртуальная прогулка) весьма популярен и востребован в образовательной практике. С помощью ряда онлайн сервисов вы можете совершить путешествие по любому региону земного шара, увидеть, как выглядит из космоса ваш населенный пункт или даже отдельный дом. Однако не всегда мы можем найти то, что необходимо.
И дело не столько в отсутствии скоростного Интернета, а в том, что нам часто необходим собственный алгоритм представления наглядности. Поэтому часто важны не готовые продукты, как бы они шикарно ни выглядели, а конструкторы по созданию такой цифровой образовательной единицы как Виртуальная экскурсия. Благодаря созданным авторским ресурсам, мы совершаем увлекательное путешествие по какому-то объекту, которым может быть населённый пункт, гробница фараона, внутренние органы человека и многое другое. С таким оригинальным отечественным конструктором виртуальных экскурсий хочу вас познакомить.
Surprise Me — это отличная российская платформа для создания квестов в виде мобильных приложений, созданная бывшим студентом из Санкт-Петербурга Александром Головатым.
Ныне это успешный коммерческий проект, занимающийся не только продвижением своего конструктора, но и продажей готовых квест-экскурсий. При настройке сценария экскурсии с помощью настраиваемых модулей вы можете создать свой алгоритм перехода от одного события к другому. Вместо обычной кнопки перехода вы можете назначить задание с использованием аудио и видео, тестовых вопросов или пазла. Инструменты приложения позволяют создать обычный квест с различного рода заданиями.
Созданные вами виртуальные экскурсии может работать автономно на телефоне, если загрузить на него ваш проект.
Несмотря на коммерческую направленность платформы, она имеет большой образовательный потенциал. Даже в бесплатном доступе мы можем сами или поручить ученикам создать виртуальную экскурсию или интерактивный квест дома или на улице. В вашем распоряжении следующие инструменты:
- Вопросы с выбором или вводом ответов
- Дополненная реальность для поиска артефактов
- Задания на правильную последовательность
- Поиск предметов через Google панорамы
- Фото и видео загадки
- Сборка фотопазлов
- Установка таймера для заданий
- Аудио задания в квесте
- GPS задания для квестов в местах без связи
- Статистика участников для выбора победителей
- Настройка подсказок в заданиях квеста
- Бонусные и штрафные баллы для квест-игр
В своём видео я показал лишь часть вариантов заданий. К примеру, чтобы создать задание для поиска артефактов, вы должны загрузить фотографию какого-то объекта в классе (комнате). Ученики проводят камерой по помещению. При наведение на объект, совпадающий с вашим изображением, ученик имеет право на переход к следующему событию.
При создании виртуальных туров вы должны использовать фотопанорамы Google Maps StreetView. Имеются и некоторые казусы при создании авторского проекта. Не совсем понятно, куда девается ссылка на видеоролик с YouTube.
Бесплатно вы можете подключить до 5-ти участников. Причём открыть ссылку можно лишь после создания аккаунта в Surprise Me. Это, конечно, вызывает определённые затруднения, так как обычно мы стараемся оградить учеников от лишних забот и проблем. Да и численность нашего класса в разы больше.
Между тем, имеется вариант работы учеников с телефонами. Для этого необходимо загрузить бесплатное мобильное приложение Surprise Me. Когда они откроют приложение они могут внести код доступа и работать с вашим заданием автономно без доступа в Интернет.
Один комментарий к “ Как создать виртуальную экскурсию и квест-истории с помощью Surprise Me ”
- Вера П говорит:
Обрадовалась такому конструктору, особенно переходу по найденным артефактам. Создала 2 события. Но пока разбиралась и тестировала, уже пишет, что лимит 5 скачиваний из 5 использован. Даже не смогла проверить как находится артефакт с помощью мобильного. Могу дальше создавать квест, но проверить его работу на мобильном уже нет возможности. В общем, ориентирован на бизнес.
На вопросы в чате не отвечают. Обидно и жалко потраченного времени.
Источник: didaktor.ru
Как создать мобильное тревел-приложение и зарабатывать на нём: Travel App от Travelpayouts
Если вы хотите создать своё мобильное тревел-приложение, вам поможет шаблон приложений Travel App от Travelpayouts. Рассказываем, это такое Travel App, как вы можете создать своё приложение и зарабатывать на нём. А также делимся простыми советами по продвижению такого проекта.
поделиться
В 2022 году интернетом пользовались почти 130 млн россиян. Причём 91,3% из них выходили в сеть с мобильных устройств и 42,5% покупали что-нибудь онлайн каждую неделю.
Если у вашего проекта уже есть мобильная версия, например, вы ведёте блог в социальных сетях или проработали мобильную версию своего сайта, значит, вы работаете с большой частью возможной аудитории. Но ещё вы можете охватить пользователей, которые привыкли совершать бронирования в приложениях. Простой шаблон мобильных приложений Travel App от Travelpayouts в этом поможет.
Что такое Travel App
Travel App от Travelpayouts — это шаблон для создания мобильного приложения поиска и покупки авиабилетов и/или бронирования отелей. С помощью Travel App вы можете легко сделать собственное приложение и опубликовать его в Google Play или App Store со своими названием и логотипом.
Пользователи смогут скачать ваше приложение, чтобы покупать авиабилеты и/или бронировать отели со своего Android- или iOS-устройства. За каждую продажу вы будете получать партнёрское вознаграждение по условиям партнёрских программ Авиасейлс и Hotellook: 50% от дохода брендов с каждого билета или отеля.
Travel App включает в себя:
- Библиотеку API (если упрощать, то все данные, которые собирают сервисы Авиасейлс и Hotellook). Это программное обеспечение делает так, что в вашем приложении пользователи видят такие же авиабилеты и отели, как на Авиасейлс и Hotellook, и могут сразу забронировать их.
- Шаблонный интерфейс основных экранов: дефолтный дизайн приложения, все поисковые формы, фильтры, кнопки и т. д. При желании вы можете их изменить в процессе настройки приложения.
- Поддержку русского и английского языков.
С какими партнёрками и сколько можно зарабатывать с приложением на Travel App
Как можно зарабатывать с приложением на Travel App
С партнёрскими программами
Travel App — это такой же партнёрский инструмент, как и более привычные ссылки или виджеты. Например, если вы разместите на сайте партнёрскую ссылку на Авиасейлс, пользователь по ней перейдёт и купит билет, то вы получите вознаграждение от бренда.
Также работает и приложение, созданное на Travel App. Если пользователь его скачает, найдёт и купит подходящий авиабилет, то вы заработаете 50% от дохода Авиасейлс с этого билета (примерно 1,1% от стоимости). Такая же история с отелями — вы заработаете 50% от дохода Hotellook за бронирование (в среднем $15–20). Это стандартные условия партнёрских программ этих брендов, которые распространяются на все инструменты.
Вы будете зарабатывать по условиям партнёрок Авиасейлс и Hotellook, потому что в Travel App встроены поиски именно этих брендов. Их нельзя заменить на программы других брендов из категорий «Авиабилеты» и «Отели, проживание».
Вы можете дополнительно зарабатывать на аренде авто, добавив соответствующую вкладку. Для этого вам нужно подключиться к любой партнёрской программе Travelpayouts из категории «Прокат авто и байков» кроме Economybookings.com (она не отслеживает мобильный трафик). Вы будете зарабатывать до 9% от суммы бронирования автомобиля. Точное вознаграждение зависит от условий партнёрской программы.
Со встроенной рекламой
Как владелец приложения на Travel App вы можете включить возможность дополнительно зарабатывать на встроенной рекламе через сервис Appodeal. Объявления будут отображаться на экранах загрузки авиабилетов и отелей, а вы будете получать вознаграждение за её показы. Чтобы включить рекламу и выводить полученные деньги, зарегистрируйтесь в Appodeal.
