Создаем мобильное веб-приложение мониторинга транспорта Санкт-Петербурга минимальными усилиями

    Предыстория

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

    Идея создать приложение для каждой из платформ отпала сразу — это займет много времени и у меня нет возможности протестировать свои программы на всех этих устройствах. Поэтому был выбран вариант web-приложения, работающего в браузере. Это открывает возможность его работы в большинстве мобильных ОС, имеющих браузер с поддержкой JavaScript. Таким образом, мы получаем немаленький список: Android, iPhone, iPad и другие iOS-устройства, Maemo, Windows 7 phone, webOS, MeeGo, Moblin… и так далее (в теории). Еще остаются обычные, non-touch телефоны, на которых, обычно, используется OperaMini. Для неё постараемся адаптировать интерфейс того же приложения.

    В итоге получилось вот что: spbtransport.ru
    Приложение Android СПБ Транспорт

    UPD 1. Через некоторое время после публикации статьи, сервер ГКУ «Организатор перевозок» ушел на прошилактические работы. Надеюсь он скоро вернется в строй и показ транспорта возобновится.
    UPD 2. Cервер ГКУ «Организатор перевозок» снова в строю.


    Создание приложения


    Итак, для начала нужно оценить, что мы имеем. На сервере СПб ГКУ «Организатор перевозок» расположен MapServer, способный генерировать карты нужного нам размера и масштаба, в виде картинок png с прозрачным фоном. Способа получать информацию в текстовом виде я не обнаружил. В качестве библиотеки для вывода карт было решено использовать Open Layers. Для решения общих задач на странице — jQuery mobile.

    В моем случае мне повезло, и на сайте Open Layers в примерах уже была страница с использованием jquery. Её я взял за основу.

    В качестве карт я оставил Open Street Map: они достаточно детализированы, что является несомненным плюсом пользователю, который захочет сориентироваться на местности. Поставщиком поиска был выбран сервис Nominatim от Open Street Map. Он позволяет искать в выбранном участке карты и содержит большое количество отметок — можно искать по названию остановок, метро, магазинов и многих других ориентиров.
    Среди других возможностей присутствует автоматическое определение местоположения, доступен выбор отображаемых слоев.

    Теперь осталось выбрать, что использовать для серверной части. Для обработки запросов карт использован сервис AWS Elastic Beanstalk с jsp-скриптами на Apache Tomcat. Это позволит системе автоматически масштабироваться в зависимости от нагрузки.

    Версия для Android


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

    Воспользовавшись руководством и поместив код страницы в assets, получилось приложение уже для Android. Этим можно убить сразу двух зайцев: код программы расположен локально и не грузится с сервера каждый раз. Второе — карты сохраняются в кеше приложения, что тоже значительно снижает трафик.

    Версия для не сенсорных устройств


    Тут я подразумеваю Opera Mini. Для нее нужно предусмотреть кнопки перемещения по карте и убрать кнопку определения положения.

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

    Итог


    Как и в любом проекте, в этом тоже есть минусы. Маячки еще установлены не на всем транспорте, но с каждым днем их становится все больше. Несмотря на то, что эта затея всего лишь эксперимент, думаю, сервис сможет предоставить необходимую информацию большому кругу пользователей. Возможно, в будущем получится сотрудничество с ГКУ «Организатор перевозок» для получения актуальной информации в текстовом виде. Это позволило бы установить свои серверы генерирования карт и снизить нагрузку на сервер карт, используемый сейчас.

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

    Ссылки по теме


    Spb Transport J2ME
    Spb Transport Online
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 12

      0
      Очень хорошее приложение! Надеюсь на развитие проекта и то, что скоро приложение сможет ответить на вопрос: «Так сколько же ждать ближайший автобус?»
        +2
        Надеяться надо не на приложение, а на api от Организатора перевозок. Пока он отдаёт только png-картинки, данные о времени ожидания (и другую интересную информацию) толком не извлечь.
          0
          О чем вы? Какие png картинки? У каждой остановки есть своя страничка — transport.orgp.spb.ru/Portal/transport/stop/2828 (правда там опять у нах отвалилось чё-то)
          Можно парсить странички с переодичностью пару раз в минуту, и зная где находится телефон сразу на экране писать «через 11 минут приедет автобус №62»
            0
            Сам вопрос не изучал, но автор этого и предыдущего топика утверждали, что нашли только png-данные.

            Значит всё не так плохо. Хотя и не так хорошо — придётся парсить огромное количество остановок, получать дублирующиеся данные, вместо получения информации о передвижении конкретных машин.
          0
          В планах много функций, одна из них как раз сбор статистики об интервале движения в конкретное время.

          Если не получится договориться насчет api, буду делать распознавание картинки. И уже на основании этого делать остальные функции.
          +1
          Спасибо большое за такое полезное приложение. Каждый день езжу в Петергоф на автобусах, до появления сайта организатора перевозок было не очень удобно, и очень не хватало такой информации.
          Надеюсь, что в ближайшем будущем появится API.
            0
            После появления топика о приложении для ОС Android, позволяющего следить за работой общественного транспорта Санкт-Петербурга

            Пожалуйста, подскажите ссылку, если не трудно.

          Only users with full accounts can post comments. Log in, please.