Для того чтобы создавать IFrame-приложения ВКонтакте, нужно знать WEB технологии, например HTML, CSS, JavaScript, PHP и MySQL.
Если вы ничего из этого не знаете, то вряд ли вам удастся понять и создать приложение в первый же день. На изучение всего этого может потребоваться несколько месяцев или даже несколько лет.
Начните с изучения HTML
IFrame-приложение (очень простое приложение из статических страниц) может быть создано без CSS, JavaScript, PHP или MySQL, но без знаний HTML не обойтись.
Напишите в Яндексе или Гугле «Учебник HTML» и начните изучать HTML. Если будете стараться, то в течение недели вы уже будете понимать HTML. Продолжая изучать другие языки программирования, вы будете улучшать свои знания HTML.
Изучите JavaScript или PHP
Чтобы создавать функциональные IFrame-приложения ВКонтакте, нужно изучить язык программирования.
Можно изучить только один из этих языков и уже создавать динамические приложения, но для более серьезных приложений нужно изучить оба языка программирования.
Курс по HTML5/CSS3. iframe. Часть 7
Для начала выберите любой из них. Напишите в Яндексе или Гугле «Учебник JavaScript» или «Учебник PHP».
Вам будет нужно понять логику программирования. Не обязательно досконально изучать JavaScript или PHP до того как создать первое простое приложение, но совсем без понимания языка программирования вряд ли что-то получится.
В процессе создания своих простых приложений, постепенно усложняйте их, ищите информацию в учебниках и просто в интернете.
Не пытайтесь сразу связать приложение с ВКонтакте API. Для начала изучите только язык программирования.
Если вы изучаете JavaScript, то можете дополнительно изучить работу с библиотекой jQuery. Изучение этой библиотеки сделает изучение JavaScript более интересным. На форуме есть Уроки jQuery для начинающих.
Учтите, что на изучение основ JavaScript или PHP, вам будет нужен примерно месяц.
Может быть вам потребуется больше или меньше времени, это зависит от того как серьезно вы настроены научиться создавать свои IFrame-приложения ВКонтакте.
Изучите MySQL
Если хотите создавать серьезные приложения, которые будут хранить какую-то информацию, то научитесь работать с базами данных.
«MySQL + PHP» — в Яндексе или Гугле.
Изучите CSS
Этот этап был бы логичен прямо после изучения HTML. CSS поможет сделать IFrame-приложения более красивыми. Но наверняка вы хотели создать своё первое приложение побыстрее.
Напишите в Яндексе или Гугле «Учебник CSS» и изучите его.
Для приобретения опыта работы с CSS можете украсить свои приложения, созданные ранее. Или уже с приобретенными знаниями HTML, CSS, Javascript и PHP создать новое приложение, ведь теперь у вас должно быть достаточно знаний, чтобы понять документацию ВКонтакте или уроки на этом форуме.
Вы уже знаете что такое переменные, массивы, условные операторы и циклы? Если чего-то из этого не знаете, то изучите это.
Уроки HTML, CSS Как отобразить другой сайт внутри вашего сайта, тег iframe
Если вы считаете, что уже имеете представление как работать с HTML, CSS, JavaScript и PHP, то можете заглянуть в документацию по ВКонтакте API.
После прочтения документации, загляните в раздел уроков на форуме, чтобы на примерах увидеть как можно работать с API.
Цель уроков — помочь начинающим понять как научиться создавать приложения. Уроки не заменят документации по HTML, PHP, JavaScript, MySQL и ВКонтакте API.
В уроках даются только конкретные примеры. Более подробную информацию надо искать в книгах и документациях.
Рекомендую такой порядок
Источник: flapps.ru
Разработка Iframe приложений на VK API. От первых шишек до двухмиллионной аудитории
Здравствуйте, в этом посте речь пойдет о том, как я создавал Iframe приложения в одной известной социальной сети. Пост будет скорее повествовательным, чем познавательным, хотя я постараюсь ответить на многие вопросы, которые поставили меня в ступор на начальном этапе.
С API Контакта познакомился сравнительно недавно. Тогда оно казалось мне жутко сложным и неоднозначным, с минимумом пояснений и полным отсутствием примеров использования. Сейчас, подтянув знания в javaScript, не испытываю абсолютно никаких трудностей. Наоборот даже приятно, что разработчики во многом подумали за меня.
Работать с javascript API Вконтакте просто до безобразия. Нужно лишь подключить файл xd_connection.js, инициализировать VK API, и делать запросы не чаще трех раз в секунду. Также стоит отметить, что и безо всяких запросов Вк передает в Iframe много необходимых параметров в виде объекта flashVars. Из него можно вытащить id пользователя, токен, упрощающий авторизацию пользователя на стороннем сервере, язык интерфейса и другие нужности.
Первый пошёл
С первым приложением я решил не мудрить и сделать психологический тест с последующим постингом результата на стену пользователю. Возможно, многие сейчас скажут фу и дальше читать не станут. Признаться, я и сам не фанат всего этого шаманства с психоанализом и астрологией, однако, как выяснилось позже, такие приложения быстро набирают аудиторию.
Но тестов было море, и нужно было придумать что-то лестное, что интриговало бы пользователей и подталкивало их делиться результатом на своей стене. И я решил сделать тест на психологическую зарплату. Вам нужно ответить на несколько простых вопросов, после чего приложение предлагает разместить запись с результатом на Вашей стене. Называется он «Какую зарплату ты заслуживаешь?». На данный момент у него 1’700’000 установок.
На создание у меня ушло три дня. И 90% из всего времени было затрачено на то, чтобы заставить постинг на стену работать. Нехитрый алгоритм на основании выбранных ответов высчитывал результат, отправлял запрос на сервер, который генерировал картинку (Наложение текста на картинку использовал при помощи этого класса) с нужной зарплатой и загружал на сервер вк.
Важно: не забудьте в настройках приложения выбрать, к какой персональной информации вам понадобится доступ. Иными словами то, что Вы будете запрашивать через api, в противном случае Вконтакте не выдаст вам эту информацию.
Пост выглядит так:
Я решил добавить изюминку в приложение и в конце сделал подсчет, сколько и чего можно купить на Вашу «психологическую» зарплату
Модерация
Когда приложение создано и включено в настройках, оно может быть запущено по прямой ссылке любым пользователем. Для того, чтобы попасть в поиск и каталог, оно должно пройти модерацию. Для этого нужно оставить в качестве залога 10 голосов (внутренняя валюта вк) и ждать. Очень часто при первой модерации ответ от техподдержки выглядит так:
Внимание: уточнить, что именно модераторам не понравилось при таком ответе не получится. Вам вежливо скажут, что они не дают таких справок
В редких случаях техподдержка отклоняет заявку и сразу говорит Вам, что нужно поправить и даже присылает скриншот. Вероятнее всего, у них есть какой-то чеклист при помощи которого они проверяют приложения. Мою ситуацию спасло добавление кнопки «о приложении», которая не несет абсолютно никакой смысловой нагрузки, однако, после ее появления приложение, наконец-то, одобрили. Залог, кстати, всегда возвращали.
Важно: для корректной работы приложения без SSL сертификата не обойтись. Иначе приложение не будет открываться через https и вы потеряете половину пользователей. Самоподписанный сертификат не является решением проблемы
Взлёт
Дело осталось за малым. Друг, занимающийся группами, сделал несколько рекламных постов, и тут приложение как с цепи сорвалось:
За неделю посещаемость сама по себе подскочила до 125 тысяч в день. Признаться, такой нагрузки я не ожидал, поэтому пришлось даже арендовать сервер по мощнее. Воодушевленный таким успехом, я сделал еще несколько тестов на готовой платформе. они набрали 1’300’00, 300’000 и 100’000 тысяч установок на сегодняшний день. Рассказывать о них не вижу смысла, они аналогичные.
Первыми граблями, на которые я наступил, был лог файл php, разросшийся аж до 800гб. Произошло это из-за нескольких ошибок уровня notice, которые логировались при каждом прохождении теста пользователем.
Интересно, что в первый месяц существования, тест пользовался популярностью у старшей аудитории (25+), однако месяцем позже школьники перехватили инициативу.
Любопытства ради, я добавил следующий вопрос «Как вы думаете, доллар завтра подорожает?» и начал вести по нему статистику, чтобы предугадывать курс валют по настроениям населения. Но до дела так и не дошло, так что, если кому интересно, могу предоставить базу данных для анализа.
Меняем курс
При всей вирусности тестов, у них есть один большой недостаток — малый возврат аудитории. По второму разу заходить в такое приложение будут единицы. Поэтому я решил сделать игру. Точнее, я взял за основу игру 2048 Gabriele Cirulli, тогда о ней еще никто не знал. Не смотря на то, что игра opensource, я всё-таки спросил разрешения лично у автора.
Получив положительный ответ, я принялся за дело. Спустя несколько дней игра под названием «Стаккер 2048» прошла модерацию.
Внезапно появились и вторые грабли. На следующее же утро приложение взломали простейшей XSS атакой. О том, что пользовательским данным нельзя доверять, я тогда попросту не знал. Школьник подставил скрипт вместо своего имени в списке «Топ 100», в результате чего матерные алерты не давали игрокам ничего сделать.
В процессе заделывания дыр я познакомился со многими видами ухищрений, на которые способны малолетние хакеры-робингуды, которые после того, как напакостили, писали в личку, что это мне за то, что я украл игру. Я заделывал дыры по мере их проявления. Были и SQL инъекции и CSRF уязвимости. Один раз мне снесли всю базу данных.
Кто-то даже пытался положить сервер генерируемыми картинками, подавая на вход файлу-генератору случайную строку 10 раз в секунду. Теперь, набив шишек, я использую токен и сессии для каждого пользователя, передаю все данные POST запросом, прикрепляя хэш от всех передаваемых данных, который проверяется на сервере. С тех пор ничего страшного, к счастью, больше не происходило.
Граблями номер три стали генерируемые картинки. Если для 2048 число набранных очков для многих пользователей совпадает и проще хранить картинки с результатами, чем каждый раз генерировать их снова, то для тестов исход всегда разный и картинок накапливается очень много. Поэтому приходится при помощи планировщика Cron чистить папку с картинками каждые 10 минут.
На данный момент в «Стаккер» играют 180’000 человек, причем возвращаемость пользователей очень высокая
Для игр Вконтакте предусмотрен специальный стартовый влив трафика — добавление приложения в категорию новые, на самый верх. Стоит это 1000 голосов, при этом нужно выждать полтора месяца в очереди и обязательно иметь в приложении встроенные покупки
Монетизация
Как только посещаемость пошла в гору, я всерьез задумался о монетизации своих приложений. Особого выбора не было, так как партнерских программ, работающих напрямую с Вконтакте не так много. Я остановился на прелоудере, который показывает короткий рекламный ролик каждый раз при входе в приложение, если пользователь попадает под целевую аудиторию. Это примерно 60% всей аудитории.
И рекламные объявления в стиле тех, что контакт показывает сам. При текущей посещаемости, доход с четырех моих приложений составляет в среднем 2000р в сутки. Для отслеживания посещаемости я сделал отдельную страницу, на которой при помощи HTML canvas вывожу графики активности пользователей.
Послесловие
Для меня лично, такой независимый заработок стал прорывом и отличным стимулом. Чем больше я занимаюсь приложениями, тем больше идей у меня появляется. Планирую в ближайшем будущем заняться разработкой чего-нибудь более серьезного. Надеюсь, этот пост был полезен и интересен.
- vk api
- вконтакте api
- приложение vkontakte
- первые шаги
- пассивный доход
- Разработка игр
- ВКонтакте API
Источник: habr.com
Как создать iframe-приложение для в контакте и что с ним потом делать
Почти год назад в «В Контакте» появилась возможность создавать не только flash-приложения, но и iframe-приложения. Приложения, созданные через iframe, представляют собой обычные веб-страницы, заключенные в iframe-теги, и потому, при наличии некоторых навыков, создавать их совсем не сложно.
Но, мало кто задумывается о дальнейшей судьбе только что сотворенного приложения. В этой публикации я расскажу вам, не только как создать приложение, но и как раскрутить его до состояния «курицы, несущей золотые яйца».
Итак, что же нужно знать, чтоб создать iframe-приложение для «В Контакте»? Перво-наперво, вам нужно научиться, правильно использовать Javascript API в IFrame-приложении. Ну, а потом все как на самых обычных веб-сайтах.
Готовое приложение должно пройти проверку администрации «ВКонтакте», и только после этого его смогут увидеть и добавить себе простые пользователи. Отправление приложения на проверку будет стоить вам некоторых затрат: придется оставить в залог 10 голосов (примерная стоимость – 70 рублей). Прежде чем отправлять готовое приложение на проверку, не лишним будет ознакомиться с правилами размещения, ведь, если оно будет забраковано администрацией, то заплаченные деньги просто пропадут.
Кроме того, перед тем как преступить к разработке собственного приложения, позаботьтесь о том, чтоб оно по своему функционалу не слишком походило на одно из уже существующих приложений. Может выйти и так, что из-за недоработок ваше приложение пройдет проверку далеко не с первого раза, так что будьте внимательны к каждой мелочи.
Допустим, ваше приложение создано и даже успешно прошло проверку, теперь пришло время поговорить о том, как на нем заработать.
Раскрутка приложения производится по средствам рассылки пользователям приглашений в него. И когда число страниц пользователей в контакте, на которых установлено созданное вами приложения, достигнет тысячи, администрацией этой социальной сети будет предоставлена возможность добавления рекламных таргетированных объявлений, за клики по которым вы будете получать голоса.
Голоса эти не только повышают ваш статус и самооценку, но и могут быть обналичены через «Robox» или «ВКонтакте». Примерная стоимость одного голоса – три рубля.
Пока разработкой приложений для социальной сети «В Контакте» не занимаются крупные компании, специализирующиеся на создании онлайн игр, а это значит, что любой простой пользователь, наделенный хотя бы небольшим талантом программиста, может успешно самореализоваться, прославится и даже разбогатеть, работая в этом направлении. Удачи!
Источник: vkontaktehit.ru