Project

Profile

Help

HostedRedmine.com has moved to the Planio platform. All logins and passwords remained the same. All users will be able to login and use Redmine just as before. *Read more...*

Описание проекта

Разрабатывается приложение для группы ВКонтакте по географии. Каждая запись в группе посвещена какому-то географическому объекту, и нужно разместить эти объекты на карте мира. Пользователи должны иметь возможность зайти в приложение по ссылке из группы, рассмотреть карту мира с отмеченными на ней объектами, выбрать любой объект и увидеть посвященную ему запись в группе.

Для понятности приведем пример, созданный с помощью Google My Maps: Пример
Для приложения требуется более провинутая функциональность, чем в Google My Maps (оговорена ниже).

Требования к функциональности:

  1. Навигация по карте мира, размещение на ней миниатюрных изображений, при нажатии на которые открывается соответствующая запись (пост) в группе
  2. Слияние миниатюр в группы при уменьшении масштаба по избежание переполнения, показ списка объектов при нажатии на группу
  3. Редактирование объектов с помощью ручного редактирования человекочитаемой базы данных (json)
  4. Указание типа для записей, возможность фильтрации объектов на карте типу
    1. по объему и типу поста (просто фото, короткая статья 2-3 абзаца, длинная статья (5-6+ абзацев), вики-статья, опрос, видео)
    2. чекбокс "только выбор редакции" (самые интересные посты, выбранные редакцией)
    3. по типу географических объектов (общество, рельеф, живая природа, моря и реки и пр.)
  5. Указание для объектов области на карте в дополнение к точке (для протяженных географических объектов)

Поставляемые результаты проекта:

  • Разработанное и протестированное приложение
  • Исходный код приложения
  • Подробное руководство по развертыванию и техническому сопровождению приложения

Расписание контрольных событий

Контрольное событие (веха) Ответственная сторона Дата
1. Начало реализации проекта в рамках курсов "Практика
управления ИТ проектами" и "Коллективная разработка ПО"
Менеджер проекта, Преподаватель курса, Бакалавры сент. 2019 г.
2. Завершение реализации проекта Менеджер проекта, Преподаватель курса, Бакалавры дек. 2019 г.

Руководитель проекта

Олег Седухин, владелец группы Terra Incognita и исполнитель проекта по совместительству.

Интеграция приложения с ВКонтакте

Схема взаимодействия пользователя с приложением:
  1. Пользователь заходит в группу ВКонтакте
  2. Пользователь открывает приложение через виджет либо ссылку в боковом меню
  3. Для пользователя открывается iframe-приложение
  4. Пользователь может смотреть записи группы внутри приложения или вернуться на страницу группы

API Вконтакте и отображение различных окон поверх приложения - по необходимости.


Информация для разработчиков

Для подключения приложения нужно выполнить следующее:

  1. Зарегистрировать приложение
  2. Развернуть приложение на некоем сервере, чтобы оно было доступно по https. Пусть окно приложения для десктопа будет доступно по адресу А, окно для мобильных устройств - по адресу В.
  3. Ввести в настройках приложения ВК ссылки А и В (для пользователей они будут отрываться в iframe)
  4. Подключить на страницах A и B Javascript SDK, Mobile SDK или другие SDK, чтобы приложение на страницах A и B могло взаимодействовать с ВК.

Виджеты в сообществах

Также являются iframe-приложениями. В настройках приложения ВК нужно указать ссылку, по которой будет находиться страница с js-кодом. Этот код должен вызвать метод VK.callMethod("showAppWidgetPreviewBox", type, code);
Передав json-код, описывающий внешний вид виджета.

Пример создания виджета
Краткая документация на официальном сайте
Примеры json-кодов виджетов: страница 1 страница 2

Можно также подключить готовые виджеты

Методы, связанные с интерфейсом приложения:

Javascript SDK

Client API - только для iframe-приложений

  • showSettingsBox - окно настройки разрешений для приложения
  • showRequestBox - окно сообщений с другим пользователем
  • showInviteBox - окно приглашения друзей в приложение
  • showOrderBox - окно покупки товара
  • showSubscriptionBox - окно подписки в приложении
  • resizeWindow - изменение размера окна приложения
  • scrollWindow - скролл окна приложения
  • setTitle - установить заголовок вкладки браузера
  • setLocation - для поддержки кнопок назад/вперед в браузере
  • showInstallPushBox - отправка ссылки на мобильную версию ("открыть с телефона")
  • showAllowMessagesFromCommunityBox - окно разрешения сообщений от сообщества
  • checkUnitySupport, checkFlashSupport - поддержка unity и flash
  • showAppWidgetPreviewBox - чтобы приложение установило виждет в вашу группу

Mobile SDK - для iframe-приложений на мобильных устройствах

  • showInviteBox - окно приглашения друзей в приложение
  • showRequestBox - окно для отправки сообщения пользователю
  • showShareBox - окно "поделиться"
  • showSettingsBox - окно прав доступа
  • showOrderBox - окно покупки товара
  • showLeaderboardBox - окно турнирной таблицы

Основные элементы интерфейса и дизайна

Приложение включает следующие основные элементы интерфейса
  1. карта
  2. окно настройек фильтрации
  3. окно просмотра записей

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

Окно просмотра записей расположено сбоку от карты (его можно закрыть, чтобы растянуть карту).
Окно с фильтрами при открытии располагается там же, где окно просмотра записей.

Другой возможный вариант:

Расположение элементов интерфейса в мобильной версии:
Либо карта на полный экран, либо настройки на полный экран, либо запись на полный экран.

В заштрихованной области должна быть кнопка настроек и кнопка скрытия боковой панели.
Варианты на выбор:



Элемент интерфейса "карта"

Карта должна отрисовываться в блоке HTML. О взаимодействии пользователя с картой см. родительскую задачу "интерфейс: карта".

Предпочтительный вариант реализации (для разработчиков):

Отрисовка с помощью canvas. Перерисовка в ответ на действие пользователя.

Делаем в коде метод getmap(rectangle). Перенаправляем его вызовы на getmap_simple(rectangle), возвращающий вырезанный и увеличенный кусочек карты мира. Когда будет выбран сервис картографии и изучен его API (это тоже сложная работа, нужно найти бесплатный), то getmap(rectangle) будем, к примеру, перенаправлять на getmap_google(rectangle) или getmap_mapbox(rectangle), напишем соответствующие методы для работы с API картографических сервисов.

Слой маркеров на карте

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

Изображение и форма маркера определяется записью в базе данных (предположительно, поля "картинка", "форма", "размер" и "пресет").

Маркеры, расположенные ниже, должны перекрывать верхние. При сильном наложении друг на друга маркеры объединяются в группу.

Слияние маркеров

Группы близко расположенных маркеров сливаются в один значок. Конкретны алгоритм слияния будет выработан в ходе реализации. Слияние происходит при запуске приложения пользователем (в базе данных нет информации о слияниях).

При наведении мыши на группу появляется всплывающее окно: "XX объектов". При нажатии на группу карта НЕ масштабируется, сбоку от курсора во всплывающем окне появляется список (при необходимости - с ползунком), в котором показываются графические маркеры, названия и типы объектов.

Области на карте

С маркером может быть ассоциирована многоугольная область на карте. Тогда маркер показывается в центре этой области.

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

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

Мобильная версия карты

Единственная особенность: карта должна быстрее загружаться, используя картинки с меньшим разрешением.

Элемент интерфейса "просмотр записей"

При нажатии на маркер в боковом окне должна открываться запись. В ней должна быть возможность открытия фотографий, кнопки лайка, репоста, комментария.

Просмотр записей можно реализовать с помощью функций VK.Widgets.* в Javascript SDK от ВКонтакте.

Мобильная версия просмотра записей

В мобильных устройствах просмотр можно реализовать также с помощью VK.Widgets.* функций Js SDK от ВКонтакте.

Элемент интерфейса "фильтры"

Окно с фильтрами должно содержать фильтрацию:
  • по объему и типу поста (просто фото, короткая статья 2-3 абзаца, длинная статья (5-6+ абзацев), вики-статья, опрос, видео)
  • чекбокс "только выбор редакции" (самые интересные посты, выбранные редакцией)
  • по типу географических объектов (общество, рельеф, живая природа, моря и реки и пр.)

Все данные должны браться из базы данных.

После применения фильтров должен происходить пересчет слияний маркеров.

База данных и ее редактирование

База данных представляет собой человеко-читаемый json-файл.
Редактирование информации производится напрямую внесением изменений в файл базы данных.
При запросе пользователем страницы приложения вся база данных пересылается автоматически (она небольшая).

Пример записи в базе данных (json):

{

"id": 971,
"name": "Лосиный Остров",
"marker": {

"size": 50,
"style": "circle",
"image": "https://pp.userapi.com/c844521/v844521910/42bc8/TMIp2pS3bnU.jpg",

}
"filters": {

"post-type": "article-middle",
"object-types": ["forests"],
"editors-choice": false,

}

},

Кроссбраузерность

Приложение должно правильно работать в наиболее популярных в России браузерах: Firefox, Chrome, Яндекс-браузер, Samsung browser (Android), Safari.

Поддержка Internet Explorer не требуется, так как сайт ВКонтакте не поддерживает Internet Explorer.

Информационная безопасность приложения

Анализ и устранение уязвимостей проводится в ходе разработки приложения.