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...*

Task #819144

open

Архитектура приложения

Added by Олег Седухин over 3 years ago. Updated over 3 years ago.

Status:
Approved
Priority:
High
Assignee:
-
Start date:
Due date:
% Done:

100%

Estimated time:

Description

Описать кратко платформу, на которой создается приложение, API и сторонние сервисы, с которыми работает приложение, и схему взаимодействия пользователя с приложением (начать с пункта 1: "Пользователь заходит в группу ВКонтакте").


Схема взаимодействия пользователя с приложением:
  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 - окно турнирной таблицы
    больше методов Mobile SDK

Related issues

Related to oleg-redmine - Feature #819483: Интерфейс: просмотрApproved

Actions
Actions #1

Updated by Олег Седухин over 3 years ago

Описать кратко платформу, на которой создается приложение, API и сторонние сервисы, с которыми работает приложение, и схему взаимодействия пользователя с приложением (начать с пункта 1: "Пользователь заходит в группу ВКонтакте").

Предлагаемые решения:

1) Приложение создается как приложение Вконтакте, и будет доступно для десктопной и мобильной версий сайта.
2) Приложение работает с API сайта ВКонтакте

Actions #2

Updated by Олег Седухин over 3 years ago

  • Status changed from New to Assigned
  • Assignee set to Тигр Полосатый

Назначаю эту задачу техническому специалисту

Actions #3

Updated by Тигр Полосатый over 3 years ago

  • Status changed from Assigned to In Progress
Actions #4

Updated by Тигр Полосатый over 3 years ago

ВКонтакте поддерживает IFrame приложения, таким образом, приложение работает на стороннем сервере. Внутри окна приложения можно расместить любой html, js код. Можно расместить виджеты, например, виджет "запись": https://vk.com/dev/Post - для предпросмотра записи в группе.

Actions #5

Updated by Тигр Полосатый over 3 years ago

Стоит обратить внимание на виджет "статьи": https://vk.com/dev/Article

Actions #6

Updated by Тигр Полосатый over 3 years ago

Приложение можно добавить в сообщество как ссылку
(как здесь: https://vk.com/ierarp )
или как виджет
(как в таких примерах: https://vk.com/community_apps )

Actions #7

Updated by Тигр Полосатый over 3 years ago

  • % Done changed from 0 to 50

Research проведен.

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

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

Updated by Тигр Полосатый over 3 years ago

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

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

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

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

Actions #9

Updated by Тигр Полосатый over 3 years ago

  • % Done changed from 50 to 80
Actions #10

Updated by Тигр Полосатый over 3 years ago

  • % Done changed from 80 to 90

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

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 - окно турнирной таблицы
    больше методов Mobile SDK
Actions #11

Updated by Олег Седухин over 3 years ago

Неясный момент: возможно ли использовать ссылки в приложении для установки "w=wall..." для отображения поста в группе поверх окна приложения?

Actions #12

Updated by Тигр Полосатый over 3 years ago

  • Status changed from In Progress to Resolved
  • Assignee changed from Тигр Полосатый to Олег Седухин
  • % Done changed from 90 to 100

Насчет использования w=wall пока неизвестно.
Суммирую все в описании задачи.

Actions #13

Updated by Тигр Полосатый over 3 years ago

  • Description updated (diff)
Actions #14

Updated by Олег Седухин over 3 years ago

  • Status changed from Resolved to Approved
Actions #15

Updated by Олег Седухин over 3 years ago

  • Assignee deleted (Олег Седухин)
Actions #16

Updated by Олег Седухин over 3 years ago

Also available in: Atom PDF