Подпишитесь на рассылку, и узнайте все новости самыми первыми!
Ваше имя
Email

Как создать приложение для Контакта

Для того чтобы создать приложение Вконтакте потребуются знания программирования Flash либо IFrame. Т.к. flash технология которая будет со временем вытенснена HTML5, то лучше ориентироваться на IFrame.

Для того, чтобы писать приложения на IFrame нужны базовые знания Javascript. Язык Javascript сам по себе не является сложным, т.к. это язык высокого уровня в отличии от таких языков как C и Assembler, в которых нужно следить за выделением памяти и еще многими вещами, которые отвлекают, усложняют и делают поиск ошибок весьма затруднительным занятием.

В Javascript все Ваше внимание будет сосредоточено на логике приложения. Разработчики Вконтакте достаточно хорошо потрудились чтобы создавать приложения было просто, с минимумом усилий и знаний.

Рассмотрим процесс создания IFrame приложения по шагам. Первым делом нужно зарегистрировать Ваше приложение в социальной сети. Для этого нужно воспользоваться ссылкой http://vkontakte.ru/apps.php?act=add. При этом Вам нужно будет зарегистрироваться Вконтакте или залогиниться в существующий аккаунт. Обратите внимание на правила Вконтакте. Нельзя созадавать приложения заглушки, приложения которые не несут никакой функциональной нагрузки, а также приложения скачивающие музыку или видео из социальной сети.

В появившемся окне нужно заполнить все необходимые поля: название, описание, тип приложения. Обратите внимание что для функционирования IFrame приложения необходимо располагать доступом к сайту, на котором это приложение будет размещаться. Т.е. IFrame приложение находится на самом деле не Вконтакте а на другом сайте. Социальная сеть просто подключает одну из страниц и выводит ее сождержимое у себя в интерфейсе.

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

<script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>

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

Затем вызываем функцию инициализации.

<script type="text/javascript">
  VK.init(function() {
     // code
  });
</script>

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

Т.к. наиболее удобной библиотекой для работы с javascript является JQuery, то мы будем использовать именно эту библиотеку для работы с javascript. В соответствии с документацией, которая доступна на сайте Vkontakte http://vkontakte.ru/developers.php?oid=-1, код инициализации может выполниться еще до загрузки всей страницы поэтому необходимо проследить за тем, чтобы страница полностью загрузилась. Напишем код, обрабатывающий все варианты загрузки страницы.

<script type="text/javascript">
  var g_init = false;
  VK.init(function() {
     g_init = true;
  });

  jQuery(document).ready(function($) {
    setTimeout('init()', 100);
  });

  function init()
  {
     if (!g_init)
     {
        jQuery('#message').html('Инициализация приложения...');
        setTimeout('init()', 100);
        return;
     }
     jQuery('#message').html('Аудио файлы на вашей странице');
  }

</script>

Теперь в функцию init() можно добавлять код, который будет выполняться после того как страница загрузилась и приложение проинициализировалось. Для вывода всех аудиозаписей пользователя необходимо воспользоваться функцией API audio.get.

<script type="text/javascript">
   function getaudio()
   {
       VK.api('audio.get', {}, function (data) {
          if (!data.response)
             return;

          var html = '';
          for (var i=0;i<data.response.count;i++)
          {
             html += '<a href="'+data.response[i].url+'">'+data.response[i].title+'</a>';
          }
          
          jQuery('#auido').html(html);
       });
   }
</script>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript">
      </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   </head>
   <body>
      <script type="text/javascript">
        var g_init = false;
        VK.init(function() {
           g_init = true;
        });

        jQuery(document).ready(function($) {
          setTimeout('init()', 100);
        });

        function init()
        {
           if (!g_init)
           {
              jQuery('#message').html('Инициализация приложения...');
              setTimeout('init()', 100);
              return;
           }
           jQuery('#message').html('Аудио файлы на вашей странице');
        }

        function getaudio()
        {
            VK.api('audio.get', {}, function (data) {
               if (!data.response)
                  return;

               var html = '';
               for (var i=0;i<data.response.count;i++)
               {
                  html += '<a href="'+data.response[i].url+'">'+data.response[i].title+'</a>';
               }
          
               jQuery('#auido').html(html);
            });
        }

      </script>
      <div id="message"></div>
      <div id="audio"></div>
   </body>
</html>
 -14
Опубликовано 09.12.2011
Комментарии
+29
Опубликовано 10.02.2012
кто скажет как создать
+22
Опубликовано 12.02.2012
мне ничего не понятно(
 -243
Опубликовано 25.02.2012
я создал тюрягу)
+11
Опубликовано 20.03.2012
а кто может понять что тут написано
+8
Опубликовано 31.03.2012
Учтите HTML CSS и Javascript тогда поймете. Код если честно очень прозрчный
 -49
Опубликовано 08.04.2012
А как просмотреть то что получилось?
 -5
Опубликовано 27.05.2012
закинул данную страницу в приложение в контакт, но список не формируется
я думаю по той причине что у приложения недостаточно Прав . как получить права, скажем на использования информации об аудио?
+3
Опубликовано 29.05.2012
> Язык Javascript сам по себе не является сложным, т.к. это язык высокого уровня в отличии от таких языков как C++ и Assembler
C++ - низкоуровневый язык?
 -14
Опубликовано 05.06.2012
Хоть бы описали где что куда вписывать) нечего не понятно Что куда написали что надо написать а что куда )
 -19
Опубликовано 30.10.2012
>> Язык Javascript сам по себе не является сложным, т.к. это язык высокого уровня в отличии от таких языков как C++ и Assembler
>C++ - низкоуровневый язык?

По сравнению с Javascript C++ вне всяких сомнений низкоуровневый, не прикапывайтесь к мелочам)
Новый комментарий

Добавить картинку

Смайлы

Закрыть
© 2010, okontakte.info, все права защищены