VIP в Flash-приложении (secure.withdrawVotes, getProfiles)

[Александр]

VIP в Flash-приложении (secure.withdrawVotes, getProfiles)
ActionScript 3.0, PHP, ВКонтакте API 3.0

Для того чтобы понять этот урок, нужны некоторые знания создания Flash-приложений Вконтакте.

На сервере должен быть доступен cURL. Проверить можно способами из урока http://flapps.ru/forum/topic144.html



В уроке показано:
- работа с методом getUserBalance
- отправка данные на сервер с помощью ActionscScript
- получение данных от сервера в формате JSON и обработка в приложении
- списание голосов с баланса пользователя на счёт приложения



1. Создадим базу для хранения id пользователей, ip адресов и даты добавления

В phpMyAdmin выполнить запрос для создания базы данных

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. CREATE TABLE IF NOT EXISTS `app_vip` (
2.   `id` int(9) AUTO_INCREMENT,
3.   `uid` int(9) DEFAULT NULL,
4.   `ip` INT UNSIGNED,
5.   `add_date` datetime,
6.   PRIMARY KEY  (`id`)
7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8
8.  
9. INSERT INTO `app_vip` (`uid`, `ip`,`add_date`) VALUES (1306422,INET_ATON("127.0.0.1"),NOW());

2. Создадим файл настроек settings.php

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. <?php
2. // данные доступа к базе данных
3. $db_host="localhost";       // обычно не нужно изменять
4. $db_user="flapps";        // имя пользователя БД
5. $db_password="flapps";        // пароль БД
6. $db_name = "flapps";      // имя БД
7. $table_name = "app_vip";       // имя таблицы статистики. Если вы не меняли его в запросе, создающем БД, то и здесь менять его не надо
8.  
9. $api_id = 743131; // id приложения
10. $secret_key = 'aafflAppSU123VH45pPF'; // защищенный ключ
11.  
12. // соединение с БД
13. mysql_connect($db_host, $db_user, $db_password) or die (mysql_error());
14. mysql_select_db($db_name) or die (mysql_error());
15. mysql_query("SET NAMES 'utf8'");
16.  
17. /* http://flapps.ru */
18. ?>

Необходимо изменить данные на свои


3. Файл добавления пользователя в базу - add.php

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. <?php
2. header('Content-Type: application/json; charset=utf-8');
3. include('settings.php');
4. require 'vkapi.class.php';
5.  
6. $viewer_id = $_REQUEST['viewer_id'];
7. $auth_key = $_REQUEST['auth_key'];
8.  
9. $real_key = md5($api_id."_".$viewer_id."_".$secret_key);
10. if ($auth_key == $real_key){
11.     $error=false;
12.     $t='';
13.  
14.     // если добавляемый пользователь уже первый в списке, то не добавляем
15.     // выбираем последнего пользователя
16.     $query = 'SELECT `uid` FROM `'.$table_name.'` ORDER BY `id` DESC LIMIT 1;';
17.     $sql = mysql_query($query);
18.     $sql_data = mysql_fetch_array($sql);
19.     if ($sql_data['uid']==$viewer_id) {
20.         $t.= 'Вы уже на первом месте в списке!';
21.         $error=true;
22.     }
23.        
24.  
25.     // если нет ошибки - записываем
26.     if (!$error) {
27.        
28.         // списываем голоса и добавляем ссылку
29.         $VK = new vkapi($api_id, $secret_key);
30.         $resp = $VK->api('secure.withdrawVotes', array('uid'=>$viewer_id, 'votes'=>'100'));
31.        
32.         if ($resp['response']>0) {
33.             $ip = getenv("REMOTE_ADDR");
34.    
35.             $query = 'INSERT INTO `'.$table_name.'` (`uid`, `ip`,`add_date`) VALUES ("'.mysql_real_escape_string($viewer_id).'",INET_ATON("'.$ip.'"),NOW());';
36.             $sql = mysql_query($query);
37.             echo '{"success":{"msg":"Вы добавлены!"}}';
38.         } else {
39.             switch($resp[error][error_code]) {
40.                 case 502:
41.                     echo '{"error":{"msg":"На вашем балансе недостаточно голосов!"}}';
42.                     break;
43.                 default:      
44.                     echo '{"error":{"msg":"При добавлении ссылки произошла ошибка! Голоса не списаны."}}';
45.             }
46.         }
47.     } else { // ошибка
48.             echo '{"error":{"msg":"'.$t.'"}}';
49.     }
50. } // конец проверки auth_key
51. else {
52.     echo '{"error":{"msg":"Ошибка безопасности!"}}';
53. }
54.  
55. /* http://flapps.ru */
56. ?>
57.  

4. Файл получения id пользователей из базы, для вывода в приложении - getuids.php

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. <?php
2. header('Content-Type: application/json; charset=utf-8');
3. include('settings.php');
4.  
5. $viewer_id = $_REQUEST['viewer_id'];
6. $auth_key = $_REQUEST['auth_key'];
7.  
8. $real_key = md5($api_id."_".$viewer_id."_".$secret_key);
9. if ($auth_key == $real_key){
10.  
11.  
12.     $query = 'SELECT `uid` FROM `'.$table_name.'` ORDER BY `id` DESC LIMIT 7;'; 
13.     $sql = @mysql_query($query);
14.     $num_rows = mysql_num_rows($sql);
15.    
16.     $json_str = '{"response":"';
17.     while ($sql_data = @mysql_fetch_array($sql)) {
18.         $json_str .= $sql_data['uid'].',';
19.     }
20.     //удаляем последнюю запятую
21.     $json_str = substr($json_str, 0, -1);
22.     $json_str .= '"}';
23.    
24.     echo $json_str;
25. } // конец проверки auth_key
26. else {
27.     echo '{"error":{"msg":"Ошибка безопасности!"}}';
28. }
29.  
30. /* http://flapps.ru */
31.  
32. ?>
33.  

5. Содержимое файла vkapi.class.php

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. <?php
2.  
3. /**
4.  * VKAPI class for vk.com social network
5.  *
6.  * @package server API methods
7.  * @link http://vk.com/developers.php
8.  * @autor Oleg Illarionov
9.  * @version 1.0
10.  */
11.  
12. class vkapi {
13.     var $api_secret;
14.     var $app_id;
15.     var $api_url;
16.    
17.     function vkapi($app_id, $api_secret, $api_url = 'api.vk.com/api.php') {
18.         $this->app_id = $app_id;
19.         $this->api_secret = $api_secret;
20.         if (!strstr($api_url, 'http://')) $api_url = 'http://'.$api_url;
21.         $this->api_url = $api_url;
22.     }
23.    
24.     function api($method,$params=false) {
25.         if (!$params) $params = array();
26.         $params['api_id'] = $this->app_id;
27.         $params['v'] = '3.0';
28.         $params['method'] = $method;
29.         $params['timestamp'] = time();
30.         $params['format'] = 'json';
31.         $params['random'] = rand(0,10000);
32.         ksort($params);
33.         $sig = '';
34.         foreach($params as $k=>$v) {
35.             $sig .= $k.'='.$v;
36.         }
37.         $sig .= $this->api_secret;
38.         $params['sig'] = md5($sig);
39.         $query = $this->api_url.'?'.$this->params($params);
40.         $res = file_get_contents($query);
41.         return json_decode($res, true);
42.     }
43.    
44.     function params($params) {
45.         $pice = array();
46.         foreach($params as $k=>$v) {
47.             $pice[] = $k.'='.urlencode($v);
48.         }
49.         return implode('&',$pice);
50.     }
51. }
52. ?>
53.  

6. Создаём новый Flash документ и файл Main.as

В Main.as пишем код

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. /*
2.  
3. http://flapps.ru/forum/ - форум о создании приложений
4.  
5. */
6. package
7. {
8.     import flash.display.*;
9.     import flash.events.*;
10.     import flash.net.*;
11.     import vk.APIConnection;
12.     import vk.events.*;
13.     import vk.api.serialization.json.JSON;
14.     import flash.text.*;
15.     import fl.containers.UILoader;
16.  
17.     public class VipUsers extends Sprite
18.     {
19.         public var api_id:Number;
20.         public var viewer_id;
21.         public var sid:String;
22.         public var secret:String;
23.         var auth_key;
24.         var wasPayBox = false;// было открыто окно "Внесите 1 голос", при нажатии на кнопку "Добавить"
25.         var VK:APIConnection;
26.  
27.         public function VipUsers()
28.         {
29.             // получаем flashVars
30.             var flashVars:Object = stage.loaderInfo.parameters as Object;
31. /*
32.             // для тестирования локально, вводим свои данные здесь и раскоменчиваем код
33.             flashVars['api_id'] = 743131;
34.             flashVars['viewer_id'] = 1306422;
35.             flashVars['sid'] = 'a1006fd1e8gb9bd669e1119280166bc6cb9110b8a111550333bf041301';
36.             flashVars['secret'] = '7ef8l6a4p8';
37. */
38.             // присваиваем переменным значения из flashVars
39.             api_id = flashVars['api_id'];
40.             viewer_id = flashVars['viewer_id'];
41.             sid = flashVars['sid'];
42.             secret = flashVars['secret'];
43.             auth_key = flashVars['auth_key'];
44.  
45.             // инициализация VK
46.             VK = new APIConnection(flashVars);
47.  
48.             add_btn.addEventListener(MouseEvent.CLICK,addUid);
49.            
50.             // вешаем слушатель на событие изменения баланса
51.             VK.addEventListener('onBalanceChanged',onBalanceChanged);
52.            
53.             // обновляем аватарки пользователей
54.             updateUsers();
55.         }
56.  
57.  
58.  
59.         // добавление пользователя в базу
60.         function addUid(e:Event):void
61.         {
62.             // проверяем баланс
63.             VK.api('getUserBalance', {}, onBalanceLoaded, onError);
64.         }
65.  
66.         private function onBalanceLoaded(data: Object):void
67.         {
68.  
69.             if (data < 100)
70.             {// не достаточно голосов
71.                 VK.callMethod("showPaymentBox",1);
72.                 wasPayBox = true;
73.             }
74.             else
75.             {
76.                 var loader:URLLoader = new URLLoader();
77.                 var request:URLRequest = new URLRequest("http://flapps.ru/apps/vip/add.php");
78.                 request.method = URLRequestMethod.POST;
79.                 var vars:URLVariables = new URLVariables();
80.                 vars['auth_key'] = auth_key;
81.                 vars['viewer_id'] = viewer_id;
82.                 request.data = vars;
83.                 loader.addEventListener(Event.COMPLETE,uidAdded);
84.                 loader.load(request);
85.             }
86.         }
87.  
88.         // uid был отправлен и был получен ответ от сервера
89.         function uidAdded(event:Event):void
90.         {
91.             var json_data = JSON.decode(event.target.data);
92.             result_tf.text = json_data.error.msg;
93.  
94.             // обновляем аватарки пользователей
95.             updateUsers();
96.         }
97.  
98.  
99.         // обновление аватарок пользователей
100.         function updateUsers()
101.         {
102.             var loader:URLLoader = new URLLoader();
103.             var request:URLRequest = new URLRequest("http://flapps.ru/apps/vip/getuids.php");
104.             request.method = URLRequestMethod.POST;
105.             var vars:URLVariables = new URLVariables();
106.             vars['auth_key'] = auth_key;
107.             vars['viewer_id'] = viewer_id;
108.             request.data = vars;
109.             loader.addEventListener(Event.COMPLETE,onUsersUpdate);
110.             loader.load(request);
111.         }
112.  
113.  
114.         function onUsersUpdate(event:Event):void
115.         {
116.             var json_data = JSON.decode(event.target.data);
117.             // список id пользователей
118.             var uidsVip = json_data.response;
119.             // получаем профили
120.             VK.api('getProfiles', {uids:uidsVip,fields:'photo' }, onProfilesLoaded, onError);
121.         }
122.  
123.         private function onProfilesLoaded(data: Object):void
124.         {
125.             // количество полученных профилей
126.             var count = data.length;
127.  
128.             // массив блоков с информацией о пользователях
129.             var usersBoxArray = new Array();
130.            
131.             // стиль текста
132.             var textformat:TextFormat = new TextFormat();
133.             textformat.align = TextFormatAlign.CENTER;
134.             textformat.font = 'Tahoma';
135.             textformat.size = 11;
136.             textformat.color = 0x2B587A;
137.  
138.             for (var i=0; i<count; i++)
139.             {
140.                 // создаем MovieClip, в котором будет ава и имя пользователя
141.                 var user_box = new MovieClip;
142.                 // рамка блока
143.                 user_box.graphics.beginFill(0xDAE1E8);
144.                 user_box.graphics.drawRect(0,0,80,95);
145.                 // заливка блока
146.                 user_box.graphics.beginFill(0xF7F7F7);
147.                 user_box.graphics.drawRect(1,1,78,93);
148.                 user_box.graphics.endFill();
149.                
150.                 user_box.x = 10 + i * 85;
151.                 user_box.y = 10;
152.                 user_box.buttonMode = true;
153.                 user_box.useHandCursor = true;
154.                 user_box.mouseChildren = false;
155.                 // добавляем фото
156.                 var user_photo:UILoader = new UILoader  ;
157.                 user_photo.autoLoad = true;
158.                 user_photo.scaleContent = false;
159.                 user_photo.source = data[i]['photo'];
160.                 user_photo.move(15,10);
161.                 user_box.addChild(user_photo);
162.                 // добавляем имя
163.                 var user_name_tf:TextField = new TextField  ;
164.                 user_name_tf.width = 80;
165.                 user_name_tf.height = 40;
166.                 user_name_tf.wordWrap = true;
167.                 user_name_tf.defaultTextFormat = textformat;
168.                 user_name_tf.text = data[i]['first_name'] + "\n" + data[i]['last_name'];
169.                 user_name_tf.x = 0;
170.                 user_name_tf.y = 60;
171.                 user_box.addChild(user_name_tf);
172.  
173.                 usersBoxArray.push(user_box);
174.                 addChild(usersBoxArray[i]);
175.        
176.                 // записываем id пользователя в массив
177.                 usersBoxArray[i].uid = data[i]['uid'];
178.                 // клик по блоку
179.                 usersBoxArray[i].addEventListener(MouseEvent.CLICK, function(e:MouseEvent){
180.                                     //navigateToURL(new URLRequest('http://vkontakte.ru/id' + data[i]['uid']));
181.                                     trace('http://vkontakte.ru/id' + e.currentTarget.uid);
182.                                 });
183.             }
184.         }
185.  
186.  
187.         // если произошла ошибка
188.         private function onError(data: Object):void
189.         {
190.             result_tf.text = data.error_msg;
191.         }
192.        
193.         // баланс изменен
194.         private function onBalanceChanged(e:CustomEvent):void
195.         {
196.             // если пополнение баланса была вызвано приложением автоматически, то пробуем отправить снова
197.             if (wasPayBox) {
198.                 wasPayBox = false;
199.                 addUid(null);
200.             }
201.         }
202.        
203.     }
204. }
205.  
206. /* http://flapps.ru */

Ссылки http://flapps.ru/apps/vip/getuids.php и http://flapps.ru/apps/vip/add.php необходимо заменить на свои.


7. Загружаем swf файл в контакт

Приложение должно быть включено.
Без использования контейнера.

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

Исходник Чтобы увидеть ссылку - зарегистрируйтесь

[Evgesha]

Хороший урок!

[112]

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

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1.  
2.  var user_box = new MovieClip;
3. function onProfilesLoaded(data: Object):void
4.         {
5.  ...
6.  for (var i=0; i<count; i++)
7.             {
8.                 // создаем MovieClip, в котором будет ава и имя пользователя
9.                 // рамка блока
10.                 user_box.graphics.beginFill(0xDAE1E8);
11.                 user_box.graphics.drawRect(0,0,80,95);
12.                 // заливка блока
13.                 user_box.graphics.beginFill(0xF7F7F7);
14.                 user_box.graphics.drawRect(1,1,78,93);
15.                 user_box.graphics.endFill();
16.                
17.                 user_box.x = 10 + i * 85;
18.                 user_box.y = 10;
19.                 user_box.buttonMode = true;
20.                 user_box.useHandCursor = true;
21.                 user_box.mouseChildren = false;
22.  ...
23.             }
24. }
25.  
26. b_right.addEventListener(MouseEvent.CLICK, function(event:MouseEvent) {
27. user_box.x=user_box.x-85;
28.  
29. })

Все липнится на одно место

как решать то?

[Александр]

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

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. // удалить все с avatars_mc
2. while (avatars_mc.numChildren > 0) {
3.     avatars_mc.removeChildAt(0);
4. }

[112]

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

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. // удалить все с avatars_mc
2. while (avatars_mc.numChildren > 0) {
3.     avatars_mc.removeChildAt(0);
4. }

Т.е и имена тоже на мувиклип цеплять?Т.к их тоже надо перелистнуть,и смысл тогда мувиклипа?А координатами x,y ничего не сделать?

[Александр]

Да, целиком все user_box на один мувиклип.
Как ты хочешь сделать координатами? Сдвинуть все предыдущие блоки с информацией и добавить новые? Тогда лучше всё равно двигать один мувиклип, на котором будут находится другие.
Если у тебя всегда одинаковое количество блоков, то можно просто создать их вручную и только менять

Номера строк Вкл/Выкл | Показать/Скрыть | Выделить всё

1. user1_photo.source = data[i]['photo'];
2. //и
3. user1_name_tf.text = data[i]['first_name'] + "\n" + data[i]['last_name'];

[112]

Александр
Да...Именно хочу передвигать user_box ,user_box'у прибавлялось/отнималось бы по 85.Т.е пролистывалось бы ровно на 1 блок.Мне кажется это самый простой способ решение проблем.Вот я еще до сих пор не могу понять чем вызвано такое
ведь просто переменную вынес из цикла.
Вручную ,думал об этом.Но этих блоков будет не менее 100.Мне кажется ,что передвигать x'ом будет удобнее...или нет?
Еще так же можно передвигать массив usersBoxArray ,думаю так даже будет лучше...

[Евгений]

112, можно не парится и использовать уже готовый компонент Paged Carousel http://developer.yahoo.com/flash/astra- ... mples.html

[Bull]

Все делаю как сказано в статье. Загружаю swf в контакт и там только кнопка добавить которая не работает.

[112]

Евгений
Спасибо
Bull
Значит что-то не так,кроссдомен на хост есть?приложение включено?с аккаунта гл администратора тестишь?