Загрузка фотографий ВКонтакте и постинг через VK API

другие уроки, мануалы, советы по Construct 2

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 20 авг 2016, 12:54

Всем привет!
Сравнительно недавно я разобрался с тем, как нужно загружать фотографии в социальную сеть ВКонтакте из приложения на Construct 2 и сегодня я решил запилить урок, чтобы помочь с этим остальным.
Честно говоря, я убил на поиски информации и реализацию как минимум год, при этом что-то начало получаться лишь через 10 месяцев.
Сразу скажу: этот урок никак не связан с плагином Cocoon Share. Рассматривается загрузка c использованием модифицированного плагина AquaBarbus и PHP.

Что потребуется для данного урока:
1. Модифицированный плагин VK.API [прикреплён]
2. Плагин Canvas или поведение ExtractImage для объекта Sprite
3. Версия PHP 5.6 и выше
4. Хостинг приложений с поддержкой PHP и HTTPS (Я использовал Heroku)

Итак, начнём!
 1. Создание приложения ВК
Для начала, зайдём ВКонтакте на страницу https://vk.com/apps?act=manage и нажмм на большую синюю кнопку "Создать приложение"
2016-08-19 (1).png

Далее, заполняете необходимую информацию вроде имени приложения и его типа.
После этого нас бросает на страницу управления приложением. Переходим на вкладку "Настройки" и копируем оттуда ID нашего приложения. Страницу можно не закрывать.
2016-08-19 (3).png
После этого можно перейти к следующему этапу

 2. Работа в Construct 2
ПРЕДУПРЕЖДЕНИЕ!При экспорте проекта стоит отключить минимизацию js, так как в консоли браузера будет появляться ошибка onload и приложение будет виснуть намертво!

Заходим в Construct, создаём новое пустое приложение и добавляем следующие плагины:
Vkontakte (Для взаимодействия с API)
Array (В него мы запишем данные для отправки на сервер)
AJAX (При помощи него мы и отправим)
Canvas (Нужен, чтобы было что отправлять)
Touch (Для работы с Canvas)
Ну и добавим один textbox и одну кнопку, чтобы отправлять данные и отслеживать результат.
2016-08-20 (1).png


Перейдём в параметры плагина VK и в поле ID приложения вставим ID, полученное в шаге 1.
2016-08-19 (4).png

Разместим в любом месте canvas, кнопку и текстбокс и перейдём в Event Sheet.

Чтобы не отправлять каждый раз одну и ту же картинку, я решил внести игровой элемент, кому это не нужно, могут пропускать От сюда..
Добавим условие: если пользователь касается canvas то мы рисуем линию от точки прикосновения до левого верхнего угла объекта выбранным из метода choose цветом:
2016-08-19 (9).png

В браузере это выглядит следующим образом:
2016-08-19 (10).png

И до сюда
Теперь добавим следующее условие: если мы нажали на кнопку, то VK получает адрес для загрузки изображения (В нашем случае на стену)
И, если адрес получить удалось, то формируем следующий массив данных:
В ячейку с индексом X = 0 мы пишем сервер от вк в том виде, в каком он пришёл к нам,
с индексом 1: Canvas.imageurl то есть base64 изображения, которое мы отправим
и с индексом 2 отправим ID Пользователя, найти который можно в Expressions плагина VK
2016-08-20 (3).png


Сформировали массив данных? самое время его отправить!
Создам POST запрос в AJAX к полному адресу скрипта на вашем сайте и в теле запроса отправляем тег, по которому сервер определит что это и есть данные (На скриншоте подписано как "up_data") и далее наш массив в формате, пригодном для отправки.

Сразу добавим условия, что если запрос успешно выполнен, то мы сохраняем фотографию методом Save Wall Photo (Именно Wall!), и если получиться сохранить то отправляем запрос на добавление записи на стене с полученной ссылкой на фото.
2016-08-19 (20).png


Так же, если запрос не выполняется, то в текстбокс пишем, что у нас "Не получилось..."
Полный код должен выглядеть так:
2016-08-19 (34).png

Теперь переходим к серверной части вашего приложения

 3. Пыхтим над PHP
Самая сложная для меня часть, так до этого я ни разу с ней не работал. Сразу скажу, что этот код работает на PHP версий 5.6 и больше. Для более старых версий можно найти скрипты в Интернете, но за их работоспособность я, конечно, не отвечаю.
Открываем любой удобный для вас текстовый редактор (Я использую Notepad++, но и Блокнот подойдёт) и начинаем писать серверную часть.
1. Добавим два заголовка, которые позволят отправлять приложению POST запросы, если они у вас на разных доменах:
2016-08-19 (22).png


2. Добавим строку, которая позволит вам загрузить запрос целиком (Не знаю, почему, но без этой строки запрос иногда доходил не полностью)
2016-08-19 (23).png

Ну и дальше начинается магия: мы получаем запрос по тегу который указали в проекте на C2, расшифровываем его, создам файл, конвертируем его в файл, годный к отправке и инициализируем отправку изображения на сервер ВК, адрес которого мы также передали в запросе. На скриншоте всё неплохо прокомментированно, в конце также приложу исходный файл.
2016-08-19 (31).png

Сохраняем под именем upload.php

 4. Загружаем код и настраиваем приложение
Думаю, с загрузкой особых проблем не возникнет, но обычные хосты типа Dropbox или GoogleDrive(Пока он ещё есть) не подойдут, так как они не поддерживают выполнение php скриптов.
Я использую платформу для развёртывания Heroku, кому интересно, вот ссылка по настройке и загрузке проекта + на странице приложения на Heroku тоже будет короткая инструкция.

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

Выставляем: приложение включено и доступно всем, запрашивать доступ к стене, фотографиям, друзьям.
Тип приложения Iframe, вставляете ссылки на index.html вашего проекта, меняете размер под себя.
2016-08-19 (33).png

Готово! Можно приглашать друзей и загружать свои шедевры фотографиями к себе на стену
Протестировать мой вариант можно здесь: https://vk.com/app4534932

Проектные файлы:
Плагин с доработками и поддержкой новой версии API(5.53)
nbproject.zip
(29.04 КБ) Скачиваний: 81

PHP-скрипт здесь
 
Код: Выделить всё
<?php
header('Access-Control-Allow-Origin: http://yourhostingsite.com');
header('Access-Control-Allow-Origin: https://yourhostingsite.com');

ini_set('post_max_size', '23M');

//Получаем запрос от приложения с адресом загрузки и фотографией, декодируем его в массив и
//записываем в $c2ArrayData непосредственно нужный элемент данных ['data']
$jsonString = $_POST['up_data'];
$jsonAsArray = json_decode($jsonString,true);   
$c2ArrayData = $jsonAsArray['data'];

//Получаем base64 изображения и декодируем его
$encodedData = $c2ArrayData[1][0][0];
$encodedData = str_replace(' ', '+', $encodedData);
$decodedData = file_get_contents($encodedData);

//Создаем на сервере файл изображения с именем содержащим id пользователя
$file = 'file'.$c2ArrayData[2][0][0];
$fp = fopen($file,'w');
fwrite($fp, $decodedData);
$pngfile = basename($file) ;
fclose($file);

//Вызываем метод, конвертирующий файл в пригодный для отправки
$cfile = curl_file_create($pngfile, 'image/png', 'file.png');

//Записываем в переменную адрес загрузки и в объект данные созданного файла
$upload_url = urldecode($c2ArrayData[0][0][0]);
$request_params = array('photo' => $cfile);

//Инициируем запрос
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $upload_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request_params);
$response = curl_exec($ch);
$info = $response;
curl_close($ch);

//Возвращаем результат приложению
echo $info;
?>

Файл проекта
1.capx
(172.87 КБ) Скачиваний: 49

Плагин Canvas (обычный, можно не заменять, если он уже установлен)
canvas.zip
(10.23 КБ) Скачиваний: 42


На этом всё, спасибо, что прочитали урок. Для меня это первый опыт, поэтому может он будет не совсем удобен к прочтению :pardon:. Буду рад, если вы посмотрите моё приложение ВКонтакте, где также реализована загрузка изображений.
Аватара пользователя

Участник
Сообщений: 14
Я тут с 12 мар 2014
Откуда: Благовещенск
Двиг: Construct 2
Лицензия: Personal
Репутация 12 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 20 авг 2016, 14:04

Спасибо, но это слишком легко)
Хоть я и не пользуюсь больше С2, все равно спасибо))

Карантин
Сообщений: 33
Я тут с 30 окт 2015
Двиг: Construct 2
Skype: no
VK: no
Репутация 0 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 20 авг 2016, 19:41

моя рекомендация - никогда не использовать обычный блокнот для редактирования кода. он сохраняет в формате utf8+BOM, из-за этого потом возникает много вопросов, почему код не работает
Аватара пользователя

Администратор
Сообщений: 2406
Я тут с 06 сен 2012
Откуда: Санкт-Петербург, Южно-Сахалинск
Skype: sirg1987
Репутация 268 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 21 авг 2016, 10:25

да. лучше использовать Notepad++
Аватара пользователя

Администратор
Сообщений: 5820
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 392 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 21 авг 2016, 11:48

"да. лучше использовать Notepad++"
Лучше использовать Sublime text 3

Карантин
Сообщений: 33
Я тут с 30 окт 2015
Двиг: Construct 2
Skype: no
VK: no
Репутация 0 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 12 сен 2016, 10:17

Ребят, а как быть тем, кто хочет загрузить фото пользователя в свое приложение?
https://vk.com/app5343263
Аватара пользователя

Участник
Сообщений: 62
Я тут с 23 фев 2016
Двиг: Construct 2
VK: vk.com/danil_afan
Репутация 2 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 02 окт 2016, 05:16

danila_11 писал(а):Ребят, а как быть тем, кто хочет загрузить фото пользователя в свое приложение?
https://vk.com/app5343263

Если нужно получить фотографию, которая стоит на аватарке, то можно загрузить в массив ВК OwnDataJsonArr и посмотреть поля photo, photo_medium, photo_big
Аватара пользователя

Участник
Сообщений: 14
Я тут с 12 мар 2014
Откуда: Благовещенск
Двиг: Construct 2
Лицензия: Personal
Репутация 12 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 05 янв 2017, 14:49

а как канвас скрин загрузить на стену?
Повысьте мне репутацию, если я вам конечно же помог :)
Аватара пользователя

Участник
Сообщений: 337
Я тут с 16 окт 2016
Двиг: Конструкт 2
Лицензия: Bussines
VK: id344001451
Репутация 28 [ ? ]

Сообщение Загрузка фотографий ВКонтакте и постинг через VK API
» 09 янв 2017, 15:08

AlphaOne писал(а):а как канвас скрин загрузить на стену?

На скрипт отправляешь CanvasSnapshot вместо картинки из плагина. Не забудь только заснэпшотить сначала)
Аватара пользователя

Участник
Сообщений: 14
Я тут с 12 мар 2014
Откуда: Благовещенск
Двиг: Construct 2
Лицензия: Personal
Репутация 12 [ ? ]



Вернуться в Другие уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх