6 мая 2014 в 16:12

Правильный подход к использованию API Вконтакте

  • PHP ,
  • Вконтакте API

Привет, Хабр!

В своё время, бороздя просторы интернета на предмет рационального использования API Вконтакте, я не смог найти чего-то вразумительного, единственные библиотеки, которые были найдены мной были реализованы без использования каких-либо общепринятых практик и без красивого кода. Я решил исправить, сложившееся недоразумение и написал свою библиотеку для работы с API Вконтакте.
Животрепещущие подробности и подходы под хабракатом.

Так уж сложилось, что API Вк, реализован довольно хорошо, за исключением некоторых не логичных моментов, о которых я упомяну позднее. Но речь, сегодня не о качестве, а о конкретном применении.

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

  • Серверная авторизация(т.н. авторизация сайтов)
  • Клиентская авторизация(Standalone)
  • Авторизация сервера приложения
Самое интересное для разработчика, представляют первые два. Первый, позволяет авторизовать пользователя на сайте и получить его ключ доступа, второй позволит авторизовать ваше приложение, например Dekstop или Mobile. Забегая, вперёд, второй вариант предоставляет нам огромные возможности, а первый, лишь малую их часть.

Алгоритм получения в первом случае сводится к выполнению следующих пунктов:

  • Мы выводим ссылку для авторизации пользователя, которую форматируем в соответствии с документацией
  • Пользователь переходит по ней и авторизуется
  • Пользователя перенаправляют на REDIRECT_URI нашего приложения с GET параметром code
  • Наше приложение должно выполнить запрос к API содержащий code, чтобы получить ключ доступа пользователя
  • API отвечает, либо с объектом, содержащим ключ доступа, либо ошибкой.

Пример кода, с помощью которого можно провернуть это не хитрое дело.

$auth = getjump\Vk\Auth::getInstance(); $auth->setAppId("3470411")->setScope("SCOPE")->setSecret("SECRET CODE")->setRedirectUri("http://localhost/test.php"); $token=$auth->startCallback(); printf("LINK", $auth->getUrl());

Предполагается, что наш домен это localhost, а текущий файл test.php. Если, всё прошло хорошо, то в нашей переменной $token, будет содержаться ключ доступа пользователя, который прошёл авторизацию.

С момента, когда мы имеем ключ доступа, мы можем выполнять запросы к API . Общая логика запросов проста, вы передаёте специально сформированный запрос на URL API. Запрос должен содержать, название метода и аргументы.

api.vk.com/method/METHOD_NAME?PARAMETERS&access_token=ACCESS_TOKEN

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

При использовании библиотеки нам необходимо создать базовый объект, например так:
$vk = getjump\Vk\Core::getInstance()->apiVersion("5.5")->setToken($token);

Пара примеров запросов с использованием библиотеки:

Через анонимную функцию в each, пройдёт ровно 100 объектов, содержащих данные о пользователях от 1 до 100. Заметьте, если мы уберём вызов функции, то не произойдёт никакого запроса, всё потому что вернётся объект, у которого переопределены магические методы __call и __get, что позволяет нам делать запрос, когда нам это действительно необходимо.
$vk->request("users.get", ["user_ids" => range(1, 100)])->each(function($i, $v) { if($v->last_name == "") return; print $v->last_name . "
"; });

Одна из вещей, что открывает, нам использование генераторов - пакетное получение. То есть, мы получаем данные только тогда, когда они нам нужны. Следующий пример, позволит нам получить ВСЕ наши сообщения, запросами по 100. Будьте внимательны, метод требует от вас прав для messages, Standalone приложения, такой-же авторизации и соответственно передачи ключа доступа.
foreach($vk->request("messages.get")->batch(100) as $data) { $data->each(function($i, $m) { if(isset($m->body)) print $m->body . PHP_EOL; }); }

Хороший метод, который можно отыскать в API - execute . Он принимает параметр code в качестве аргумента, code - некий псевдо JavaScript, который позволяет нам выполнять наш код на стороне сервера, так-же он позволяет выполнять хранимые процедуры, которые мы можем создать при редактировании нашего приложения.

Эту вещь я не смог обойти стороной и реализовал её в библиотеке. В двух словах, она позволяет выполнить несколько запросов, как один. Смотрите следующий пример кода.

$js1 = $vk->request("messages.get", ["count" => 200, "offset" =>0 * 200])->toJs(); // Вернёт объект типа VkJs $js2 = $vk->request("messages.get", ["count" => 200, "offset" =>1 * 200])->toJs(); $js3 = $vk->request("messages.get", ["count" => 200, "offset" =>2 * 200])->toJs(); $js4 = $vk->request("messages.get", ["count" => 200, "offset" =>3 * 200])->toJs(); $js1 ->append($js2) // Мы прибавляем js2 к js1 ->append($js3) ->append($js4) ->execute() // Мы хотим выполнить это(на самом деле это вернёт RequestTransaction) ->response //Запрос исполнится только сейчас ->each(function($i, $v) //Первая анонимная функция нужна для обхода всех элементов массива полученного от execute(массив из 4 элементов, 4 запроса) { $v->each(function($c, $d) { // Следующая для прохода всех 200 сообщений в каждом массиве if(isset($d->body)) print $d->body; //Выведем сообщение если такое поле присутствует }); });

Как и обещал, одно из тех недоразумений, которое вы можете встретить в текущей версии API(5.21), метод

Привет, Хабр!

В своё время, бороздя просторы интернета на предмет рационального использования API Вконтакте, я не смог найти чего-то вразумительного, единственные библиотеки, которые были найдены мной были реализованы без использования каких-либо общепринятых практик и без красивого кода. Я решил исправить, сложившееся недоразумение и написал свою библиотеку для работы с API Вконтакте.
Животрепещущие подробности и подходы под хабракатом.

Так уж сложилось, что API Вк, реализован довольно хорошо, за исключением некоторых не логичных моментов, о которых я упомяну позднее. Но речь, сегодня не о качестве, а о конкретном применении.

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

  • Серверная авторизация(т.н. авторизация сайтов)
  • Клиентская авторизация(Standalone)
  • Авторизация сервера приложения
Самое интересное для разработчика, представляют первые два. Первый, позволяет авторизовать пользователя на сайте и получить его ключ доступа, второй позволит авторизовать ваше приложение, например Dekstop или Mobile. Забегая, вперёд, второй вариант предоставляет нам огромные возможности, а первый, лишь малую их часть.

Алгоритм получения в первом случае сводится к выполнению следующих пунктов:

  • Мы выводим ссылку для авторизации пользователя, которую форматируем в соответствии с документацией
  • Пользователь переходит по ней и авторизуется
  • Пользователя перенаправляют на REDIRECT_URI нашего приложения с GET параметром code
  • Наше приложение должно выполнить запрос к API содержащий code, чтобы получить ключ доступа пользователя
  • API отвечает, либо с объектом, содержащим ключ доступа, либо ошибкой.

Пример кода, с помощью которого можно провернуть это не хитрое дело.

$auth = getjump\Vk\Auth::getInstance(); $auth->setAppId("3470411")->setScope("SCOPE")->setSecret("SECRET CODE")->setRedirectUri("http://localhost/test.php"); $token=$auth->startCallback(); printf("LINK", $auth->getUrl());

Предполагается, что наш домен это localhost, а текущий файл test.php. Если, всё прошло хорошо, то в нашей переменной $token, будет содержаться ключ доступа пользователя, который прошёл авторизацию.

С момента, когда мы имеем ключ доступа, мы можем выполнять запросы к API . Общая логика запросов проста, вы передаёте специально сформированный запрос на URL API. Запрос должен содержать, название метода и аргументы.

api.vk.com/method/METHOD_NAME?PARAMETERS&access_token=ACCESS_TOKEN

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

При использовании библиотеки нам необходимо создать базовый объект, например так:
$vk = getjump\Vk\Core::getInstance()->apiVersion("5.5")->setToken($token);

Пара примеров запросов с использованием библиотеки:

Через анонимную функцию в each, пройдёт ровно 100 объектов, содержащих данные о пользователях от 1 до 100. Заметьте, если мы уберём вызов функции, то не произойдёт никакого запроса, всё потому что вернётся объект, у которого переопределены магические методы __call и __get, что позволяет нам делать запрос, когда нам это действительно необходимо.
$vk->request("users.get", ["user_ids" => range(1, 100)])->each(function($i, $v) { if($v->last_name == "") return; print $v->last_name . "
"; });

Одна из вещей, что открывает, нам использование генераторов - пакетное получение. То есть, мы получаем данные только тогда, когда они нам нужны. Следующий пример, позволит нам получить ВСЕ наши сообщения, запросами по 100. Будьте внимательны, метод требует от вас прав для messages, Standalone приложения, такой-же авторизации и соответственно передачи ключа доступа.
foreach($vk->request("messages.get")->batch(100) as $data) { $data->each(function($i, $m) { if(isset($m->body)) print $m->body . PHP_EOL; }); }

Хороший метод, который можно отыскать в API - execute . Он принимает параметр code в качестве аргумента, code - некий псевдо JavaScript, который позволяет нам выполнять наш код на стороне сервера, так-же он позволяет выполнять хранимые процедуры, которые мы можем создать при редактировании нашего приложения.

Эту вещь я не смог обойти стороной и реализовал её в библиотеке. В двух словах, она позволяет выполнить несколько запросов, как один. Смотрите следующий пример кода.

$js1 = $vk->request("messages.get", ["count" => 200, "offset" =>0 * 200])->toJs(); // Вернёт объект типа VkJs $js2 = $vk->request("messages.get", ["count" => 200, "offset" =>1 * 200])->toJs(); $js3 = $vk->request("messages.get", ["count" => 200, "offset" =>2 * 200])->toJs(); $js4 = $vk->request("messages.get", ["count" => 200, "offset" =>3 * 200])->toJs(); $js1 ->append($js2) // Мы прибавляем js2 к js1 ->append($js3) ->append($js4) ->execute() // Мы хотим выполнить это(на самом деле это вернёт RequestTransaction) ->response //Запрос исполнится только сейчас ->each(function($i, $v) //Первая анонимная функция нужна для обхода всех элементов массива полученного от execute(массив из 4 элементов, 4 запроса) { $v->each(function($c, $d) { // Следующая для прохода всех 200 сообщений в каждом массиве if(isset($d->body)) print $d->body; //Выведем сообщение если такое поле присутствует }); });

Как и обещал, одно из тех недоразумений, которое вы можете встретить в текущей версии API(5.21), метод

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

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

Итак, сегодня мы рассмотрим пример работы с VK API, в котором будем получать список пользователей c именем «Маша» в городе «Москва». Будем искать Маш в Москве.:)

Первым делом нам нужно создать приложение. Для создания приложения переходим по ссылке (https://new.vk.com/dev -> Создать приложение ).

Вводим название и поскольку мы разбираем пример на PHP используя веб-сервер, выбираем тип приложения — «Веб-сайт «. Указываем адрес вашего сайта и базовый домен(если делаете на локальном веб-сервере, пишем http://localhost ). Нажимаем кнопку «Подключить сайт» и ваше приложение создано, часть пути пройдена.

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

Для получения доступа к методам API, нужно выполнить несколько шагов:

  1. Авторизировать пользователя;
  2. Получить ключ доступа;
  3. Получить access_token;
  4. Выполнить запрос к методу;

4 простых шага, но на деле немного сложнее.

Авторизируем пользователя:

session_start(); $client_id = "1234567"; $redirect_uri = "http://localhost"; $display = "page"; $scope = "friends,groups"; $response_type = "code"; $auth_uri = "https://oauth.vk.com/authorize?client_id={$client_id}&display={$display}& redirect_uri={$redirect_uri}&scope={$scope}&response_type={$response_type}&v=5.52";

Разбираем по пунктам, что же тут написано:

  • $client_id — идентификатор вашего приложения, присвоенный системой;
  • $redirect_uri — страница на которую будет перенаправлен пользователь после успешной авторизации;
  • $display — как отображается страница входа, в данном случае это будет отдельная страница;
  • $scope — разрешения для приложения, указывать через запятую. Полный список ;
  • $response_type — тип ответа, в данном случае будет предоставлен JSON;
  • $auth_uri — формируем строку для авторизации пользователя, передвая нужные параметры;

Получаем access_token:

if(isset($_GET["code"])){ $code = $_GET["code"]; $client_secret = "you_application_password"; $acces_uri = "https://oauth.vk.com/access_token"; $fields = array("client_id" => $client_id, "client_secret" => $client_secret, "redirect_uri" => $redirect_uri, "code" => $code); $acces_uri .= "?client_id={$fields["client_id"]}&"; $acces_uri .= "client_secret={$fields["client_secret"]}&"; $acces_uri .= "redirect_uri={$fields["redirect_uri"]}&"; $acces_uri .= "code={$fields["code"]}"; $res = file_get_contents($acces_uri); $response_string = json_decode($res,true); $_SESSION["token"] = $response_string["access_token"];

Тут все довольно просто, записываем полученный код в переменную $code , формируем ссылку с нужными нам данными — $access_uri . Далее при помощи функции file_get_contents выполняем запрос и в ответ получаем JSON объект который сразу же декодируем в массив. В конце просто полученный токен записываем в переменную сессии. Не очень хороший подход, лучше сразу писать в базу данных, однако цель этого руководства не в этом.

$client_secret — «Защищенный ключ » вашего приложения, без него работать не будет 🙂

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

Формируем:

If (isset($_SESSION["token"])) { $name = "Маша"; $url = $url = "https://api.vk.com/method/users.search?city_id=1&q={$name}&count=1000&access_token={$_SESSION["token"]}"; $res = file_get_contents($url); $users_data = json_decode($res,true); $users_count = array_shift($users_data["response"]); $users_list = $users_data["response"]; }

Данный запрос вернет нам 1000 пользователей с Москвы. На выходе мы получим количество затронутых записей и ассоциативный массив с пользователями записанный в переменную $users_list , который уже можем использовать на свое усмотрение.

Единственный нюанс в том, что API не позволяет выбрать большее количество пользователей, даже если использовать параметр offset в строке запроса. К сожалению такое ограничение в VK API.

Полный список параметров VK API для запроса можете посмотреть в

Соцсети уже прочно вошли в наш быт и собрали миллионы пользователей. И нашему брату флэшеру открылись новые области для творчества. В частности - Flash-приложения сетевого проекта ВКонтакте , для которых создан специальный API, позволяющий легко интегрировать приложение в систему ВКонтакте.

Итак, что же нам предлагает API ВКонтакте - давайте разберемся.

Обзор

Как обычно, для начала почитаем, что об этом пишут наши коллеги.

Однако, никаких вразумительных статей, кроме материалов в рамках самого "ВКонтакте" найти не смог. Если кто-нибудь видел таковые - пожалуйста, киньте ссылочку в комменты. Итак:

Возможности API ВКонтакте

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

Работа с пользовательскими данными

Приложение имеет доступ к следующим данным:

  • Установил ли пользователь, который просматривает приложение себе на страницу данное приложение
  • Данные по любому пользователю, на основании его ID:
    - имя,
    - фамилия,
    - псевдоним,
    - пол,
    - дата рождения,
    - город,
    - страна,
    - часовой пояс,
    - url-адреса фото малого, среднего и большого размеров,
    - известен ли его мобильный телефон,
    - рейтинг
  • Баланс пользователя на счету приложения
  • Доступ к данным пользователя, просматривающего приложение:
    - разрешить отправлять ему уведомления,
    - доступ к друзьям,
    - доступ к фотографиям,
    - доступ к аудиозаписям,
    - доступ к предложениям,
    - доступ к вопросам,
    - доступ к wiki-страницам,
    - доступ к меню слева,
    - публикация на стенах пользователей.
  • Список групп, в которых состоит пользователь с общей информацией о каждой группе.

У каждого пользователя ВКонтакте есть друзья - другие пользователи ВКонтакте. Доступные данные друзей пользователя:

  • Список друзей текущего пользователя.
  • Список друзей текущего пользователя, которые уже установили данное приложение.

Приложение может так же осуществлять следующие действия:

  • Поднять рейтинг пользователя от имени приложения
  • Если пользователь установил приложение в меню слева, приложение может задать краткое имя приложения, а так же вывести счетчик рядом с названием приложения - например, счетчик уведомлений.
  • Устанавливать и считывать строку статуса приложения.

Работа с фотографиями пользователя

Пользователь ВКонтакте может создавать множество альбомов с фотографиями в разделе "Мои Фотографии". API предоставляет широкий выбор возможностей по работе с альбомами и фотографиями.

Фотографии должны иметь формат JPG, PNG или GIF.

Приложение может получить:

  • Список фото-альбомов с общими данными о каждом альбоме.
  • Список фотографий из какого-либо альбома (или непосредственно по ID фотографии) с набором ссылок на изображения различных размеров и качества.

Приложение может осуществлять следующие действия с альбомами и фотографиями:

  • Создавать альбом (с описанием и контролем доступа к нему).
  • Редактировать данные существующего альбома.
  • Изменять порядок в списке альбомов.
  • Изменять порядок фотографий в альбоме.
  • Переносить фотографии из альбома в альбом.
  • Делать фотографию обложкой альбома.
  • Загружать фотографии на сервер ВКонтакте, на стену пользователя, на страницу пользователя.

Работа с аудиозаписями пользователя

Пользователь может загружать аудиозаписи и прослушивать их в разделе "Мои Аудиозаписи".

Аудиозапись должна быть в формате MP3, не превышать 10Мб и не нарушать авторских прав.

API предоставляет широкий выбор возможностей для работы с аудиозаписями:

  • Получать список аудиозаписей пользователя или группы с общей и подробной информацией о каждой записи.
  • Получать текст песен аудиозаписей.
  • Осуществлять поиск по аудиозаписям.
  • Загружать, удалять, восстанавливать удаленные аудиозаписи.
  • Редактировать данные аудиозаписи.
  • Добавлять аудиозапись на страницу пользователя или группы.
  • Менять порядок следования аудиозаписей.

Работа с видеозаписями пользователя

API позволяет получать список видеозаписей пользователей, групп с общей информацией о каждой видеозаписи.

Стена пользователя

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

API предоставляет приложению доступ к следующим функциям:

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

Работа с SMS

Приложение ВКонтакте может задействовать столь мощные сервисы, как отправка и прием SMS:

  • Отправка SMS-уведомления. При этом со счета приложения списывается 0.1 голоса.
  • Просмотр списка SMS-сообщений, полученных от пользователей приложением.
  • Просмотр истории SMS-уведомлений, посланных приложением.
Отправка SMS-сообщения бесплатна (стоимость обычного SMS-сообщения). Отправка осуществляется на телефон +7 921 000 00 07, а чтобы приложение получило свое сообщение, API предоставляет возможность установить приложению префикс, который пользователь должен указать в начале своего SMS-сообщения.

Работа с сервисом "Предложения"

С помощью сервиса "Предложения", пользователь получает возможность создать свое уникальное предложение. Это предложение смогут увидеть все пользователи ВКонтакте -этот сервис независим от личной странички. Любое предложение начинается со слов "Хотели бы Вы", далее следует сам текст, а в конце уже стоит вопросительный знак. Пользователи могут посматривать предложения других пользователей, принимать чужое предложение нажатием варианта «Да, конечно» или отказываться нажатием варианта «Нет».

Итак, функции для работы с предложениями:

  • Редактировать, открыть для общего доступа, и закрыть предложение пользователя, просматривающего приложение.
  • Просматривать, искать предложения пользователей.
  • Принимать и отклонять предложения пользователей.
  • Просматривать ответы на предложение пользователя.
  • Получать список ответов на предложения, принятые пользователем.
  • Удаление и пометка о прочтении ответов пользователей.

Работа с сервисом "Вопросы"

Аналогичный предыдущему сервис, позволяющий задавать вопросы и получать на них ответы от других пользователей. В API так же есть всё необходимое для управление этим сервисом из приложений.

Работа с Wiki-страницами

Пользователям предоставляется система редактирования страниц, которая позволяет участникам групп совместно создавать бесконечное количество страниц с перекрестными ссылками. Таким образом, пользователи могут создавать в группах библиотеки или мини-энциклопедии. Кроме того, пользователи могут использовать особую wiki-разметку для оформления страниц.

Приложения имеют возможность работать с Wiki-страницами:

  • Получать текст и полную информацию о wiki-странице.
  • Редактировать и сохранять текст и настройки wiki-страницы.
  • Получать список wiki-страниц в группе.
  • Транслировать wiki-разметку в html-разметку.

Организация чата

API позволяет создавать в приложении чат, используя очередь сообщений - 127 сообщений. Для этого предусмотрены функции добавления сообщения в очередь и просмотра всей очереди сообщений.

Сохранение игровых рекордов

API предусматривает специальные функции для сохранения результатов игры пользователя и получения списка результатов.

Работа с переменными

Для хранения данных, API предоставляет каждому приложению 4096 уникальных переменных по 255 байт.

Причем, переменные распределяются по следующим диапазонам:

  • Глобальные переменные: могут использоваться для данных, которые общие для всех экземпляров данного приложения, например, это таблица рекордов игрового приложения.
  • Переменные пользователя: эти переменные уникальны для каждого пользователя данного приложения и могут служить, к примеру, для сохранения игры пользователя.
    Примерно к половине переменных предоставляется доступ другим пользователям. Часть переменных является зарезервированной для разных нужд.
  • Переменные сессии: при работе с переменными, в запросе можно задавать идентификатор сессии (сеанса или комнаты). Таким образом, переменные этого диапазона будут общими для всех пользователей, которые в данный момент просматривают приложение. Соответственно, приложения могут осуществлять многопользовательское общение в реальном времени - чаты, многопользовательские игры и прочее.
  • Переменные, содержащие временные данные, которые уникальны для текущего просматриваемого приложения, и при его закрытии пропадут.

Однако, количество переменных не велико - всего по 1024 переменные на диапазон, и это без учета зарезервированных переменных.


Работа с удаленным сервером разработчика

Приложение ВКонтакте является обычным Flash-приложением и обладает одним большим недостатком. Его нельзя считать защищенным от взлома. Точнее говоря, затраты на взлом flash-приложения не столь велики как, к примеру взлом сервера. Существует достаточное количество программ SWF-декомпиляторов, при помощи которых можно легко получить исходный программный код, выяснить логику приложения и подтасовать запросы к API.

Поэтому, некоторые функции, которые были перечислены выше, работают только с удаленного сервера разработчика, минуя flash-приложение, а именно:

  • Работа с рейтингом пользователя
  • Вывод короткого статуса пользователя в приложении на его главной странице
  • Отправка уведомлений пользователя (только пользователям, которые установили себе данное приложение)
  • Работа с голосами (платежные операции)
  • Установка счетчика на приложение и работа с строкой статуса приложения
  • Отправка и просмотр SMS-уведомлений

Таким образом, чтобы иметь возможность осуществлять эти операции, приложение должно не напрямую обращаться к API, а запрашивать свой специально предусмотренный сервер-прослойку, который в свою очередь будет общаться с API ВКонтакте и выдавать приложению полученные данные.

А вообще, конечно, для крупных проектов, работающих в формате приложений ВКонтакте, безусловно, именно этот специальный сервер и должен являться "мозгом", отрабатывающим всю логику приложения. Flash-приложение в этом случае всего лишь "тонкий клиент", который лишь красиво отображает результат работы сервера.

Локализация приложений

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

Использование Flash-контейнера приложения

Альтернативный способ внедрения flash-приложения в страницу ВКонтакте - через Flash-контейнер.

Flash-контейнер предоставляет следующие возможности для приложения:

Особенности API ВКонтакте

Итак, мы ознакомились со всеми возможностями, которые предоставляет API ВКонтакте. Хочется выделить особенности (скорее недостатки) API, с которыми мне пришлось столкнуться:

Итог

Flash-приложения ВКонтакте обладают достаточно мощным API, который решает основные задачи, и может полностью обеспечить проекты средней сложности. Все остальные потребности, разработчик может решить, используя свой веб-сервер.

  • Перевод
  • Tutorial

Beacon API - это основанный на JavaScript интерфейс для:

отправки небольшого количества данных на сервер с браузера, без ожидания ответа. В этой статье, мы рассмотрим в каких случаях будет полезен Beacon API, чем он отличается от использования XMLHTTPRequest (Ajax) для тех же целей и как его использовать.

Для чего нам очередной API?

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


Метафора с открытками, это такие карточки которые люди посылают/посылали друг другу. Как правило, на них писали небольшой по объему текст ("Ты где? А я на море лол.", "Тут у меня шикарная погода, не то что у тебя в офисе"), кидали в почту и забывали. Никто не ожидал ответа по типу "Я уже выехал за тобой", "У меня в офисе чудесно".


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

Отслеживание статистики и Аналитическая информация

Это первое, что приходит на ум. Такие большие решения как Google Analytics могут предоставлять хороший обзор на базовые вещи. Но если мы хотим, что-то более кастомизированное? Нам необходимо написать немного кода для отслеживания того, что происходит на странице (как пользователи взаимодействуют с компонентами, как далеко они скролят, какие страницы были отображены до первой продажи), затем отправить эти данные на сервер когда пользователь покидает страницу. Beacon идеально подходит для решения такой задачи, так как мы просто отправляем данные, и нам ненужен ответ от сервера.

Дебаг и Логирование

Другое применение это логирования информации из JavaScript кода. Представьте себе ситуацию когда у вас большое приложение с богатым UI/UX. Все тесты зеленые, а на проде периодически всплывает ошибка о которой вы знаете, но не можете продебажить ее из за не хватки информации. В данном случае вы можете ипользовать Beacon для диагностики.


На самом деле любая задача с логированиям может быть решешина с использованием Beacon. Это может быть создание точек сохранения в играх, сбор информации об использоании нового функционала, запись результатов тестирования и так далее. Если это, что-то, что происходит в браузере и вы хотите, что бы сервер знал об этом, Beacon это, то, что нужно.

Разве мы не делали этого ранее?

Я знаю о чем вы думаете. Ничто из этого не ново? Мы общаемся с севером посредством XMLHTTPRequest уже более 10 лет. Недавно мы начали использовать Fetch API, что по факту делает то же самое, просто с новым Promise интерфейсом. Так зачем нам еще один Beacon API?


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


C Beacon API не нужно дожидаться лучшего момента для CPU, сети. Просто добавить в очередь запрос с помощью beacon практически нечего не стоит.


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


Обычно это делают на unload или beforeunload . Подобный код может заблокировать выполнение и если происходит задержка выгрузки страницы, то и загрузка следущей страницы тоже задерживается. Это приводит к не лучшему UX.


Вы же понимаете насколько HTTP запросы медленные? И последнее, что вы хотите, так это впихивать HTTP запрос между переходами.

Пробуем Beacon API

Базовый пример использования очень прост:


let result = navigator.sendBeacon(url, data);

Использование navigator.sendBeacon()

navigator.sendBeacon принимает два параметра. Первый это URL на который будет послан запрос, второй это данные которые необходимо отправить. Запрос имеет вид HTTP POST .


data - этот параметр может принимать несколько форматов данных, все те с которыми работает Fetch API. Это может быть Blob, BufferSource, FormData или URLSearchParams и тд.


Мне нравится использовать FormData для простых key-value данных, это не сложный и простой в использовании класс.


// URL куда отправить данные let url = "/api/my-endpoint"; // Создание нового FormData let data = new FormData(); data.append("hello", "world"); let result = navigator.sendBeacon(url, data); if (result) { console.log("Добавлено в очередь!"); } else { console.log("Ошибка."); }

Поддержка браузерами

Поддержка этого API вполне себе солидная. Единственный браузер который не поддерживает, это Internet Explorer (не ожидал я такого) и Opera Mini. Но в Edge все работает. В большинстве случаев поддержка есть, но лучше на всякий случай проверить:


if (navigator.sendBeacon) { // Beacon код } else { // Использовать XHR? }

Пример: логируем время проведенное на странице

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


Так как нас интересует только время проведенное на странице, а не настоящее время, мы можем использовать performance.now() для получения базового timestamp при загрузке страницы:


let startTime = performance.now();

Давайте обернем небольшой кусочек логики в удобную в использовании функцию:


let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, e.g. let url = "/api/log-visit"; // Data to send let data = new FormData(); data.append("start", startTime); data.append("end", performance.now()); data.append("url", document.URL); // Let"s go! navigator.sendBeacon(url, data); };

И наконец нам надо вызвать эту функцию когда пользователь покидает страницу. Первая мысль была использовать unload , но Safari на Mac, похоже блокирует запрос по соображениям безопасности. По этому лучше использовать beforeunload:


window.addEventListener("beforeunload", logVisit);

Когда страница выгружается (или перед этим), наша функция logVisit() будет вызвана и если браузер поддерживает Beacon API, отправит запрос на сервер.

Пару моментов

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

GDPR

Просто помните о нем.

DNT: DO NOT TRACK

В дополнение, браузеры имеют опцию которая позволяет пользователям обозначить, что они не хотят, что бы их активность отслеживалась. Do Not Track отправляет HTTP хедер, который выглядит так:


DNT: 1

Если вы отслеживаете данные которые могут индицировать пользователя и в хедерах запросов есть DNT: 1 , то лучше послушать пользователя и не сохранять какие-либо данные. Например использую PHP это можно проверить следующим образом:


if (!empty($_SERVER["HTTP_DNT"])) { // Не хочу, не надо }

В заключение

Beacon API действительно очень удобный способ для отправки данных на сервер, особенно в контексте логирования. Поддержка браузерами на достаточно хорошем уровне и позволяет вам легко логировать любую информацию без каких либо негативных последсвий для производительности и отзывчивости вашего UI. Non-blocking природа этих запросов играет в этом очень хорошую роль, это горазно быстрей альтернатив XHR и Fetch.


Теги: Добавить метки