Текстовая версия урока
В сегодняшнем уроке я расскажу как сделать интернет магазин Вконтакте используя движок интернет магазина HEEG.HTML . Такой магазин будет полностью на вашем ресурсе и будет стоить вам ноль рублей в месяц.
Приступим. Как и в предыдущем уроке мы начнем создание нашего магазина со скачивания шаблона. Единственное отличие в том, что нам нужен шаблон, содержащий в названии архива код vk, который говорит нам о том, что в шаблоне уже установлен модуль API Вконтакте. Заходим на сайт heeg.ru, переходим в раздел СКАЧАТЬ. Как мы видим на момент урока доступна версия магазина вконтакте номер 3.6.
Скачаем архив и распакуем на рабочий стол.
Посмотрим что в архиве. Набор фаилов архива абсолютно такой же как и в стандартном магазине heeg.html, поэтому если вы не делали предыдущий урок вам необходимо установить на компьютер node.js и установить wiki запустив startwiki.bat если вы это уже делали в предыдущем уроке, то вам конечно этого делать не нужно.
Курс по HTML5/CSS3. iframe. Часть 7
Давайте сразу откроем шаблон нашего магазина heeg.html. На первый взгляд это точно такой же магазин как и в предыдущем уроке. Немножко отличается меню в товаре и меню галочка добавился новый пункт «Верхнее меню» В прошлом уроке я подробно рассказывал как создавать новые товары и разделы при помощи меню «галочка» в этом уроке я об этом рассказывать не буду. Лучше давайте представим, что у нас есть уже готовый магазин семян предыдущей версии 3.5 и нам нужно из него перекинуть все товары и разделы в новую версию 3.6, а заодно сделать магазин вконтакте. Для начала перенесем папку с картинками из старого проекта.
В системе tiddlywiki очень много вариантов импорта и экспорта. Самый простой это вариант «перетаскивания» любых статей из одной wiki в другую. Давайте откроем магазин из предыдущего урока и перетащим в наш новый магазин один раздел и один товар. Удобнее всего открыть 2 вкладки хрома.
Перетащим раздел, товар, нажмем импорт и увидим, что статьи появились в нашем магазине. Мы можем перетаскивать любые статьи. Давайте переключимся на тему Green и заменим эту тему темой, которую мы делали в прошлом уроке. Перетаскиваем и тема поменялсь.
Метод «перетаскивания» нам подойдет если нам нужно перенести одну или несколько статей, а что же нам делать если в старом магазине у нас тысяча товаров и разделов. В этом случае нам подойдет вариант экспорта через формат json.
Перейдем в поиск на вкладку с фильтрами и найдем все наши статьи, которые мы считаем товаром или разделом. Мы с вами помним что все товары у нас помечены меткой (или тегом) $:/Note, а все разделы у нас помечены меткой $:/TOC давайте зададим эти фильтры и посмотрим, что нам покажет поиск напишим первый фильтр [tag[$:/Note]] и тут же второй [tag[$:/TOC]] внизу мы увидим все товары и разделы нашего магазина. Рядом с поисковой строкой (НЕ путать с меню «Галочка») нажмеме кнопку экспорта и выберем формат json и сохраним его. Обращаем внимание, что ie нам поставил не то расширение, поэтому меняем его вручную на json.
Уроки HTML, CSS Как отобразить другой сайт внутри вашего сайта, тег iframe
Теперь если мы перетащим наш новый файлик на новый магазин, в него перенесутся все статьи из него. Давайте удалим все товары и разделы из нашего вк магазина и зальем наши товары…. КРОМЕ статьи !heeg Обращаем внимание что у нас перестали отображать пункты верхнего меню. Почему так.
Мы помним, каждый раздел собирает в себе товары и разделы содержащие метку совпадающую с названием (точнее кодом) данного раздела. В версси 3.5 верхнее меню собирало разделы с меткой «Распродажа», что было не очень логично, а в новой версии 3.6 в верхнем меню собираются разделы с меткой Верхнее меню. То есть чтобы отобразить старые разделы верхнего меню в новой версии магазина, нам нужно метку «Распродажа» заменить на метку «Верхнее меню» . Мы конечно могли бы заменять метки заходя в каждый раздел, но давайте поучимся менять метки пакетом. Для этого перейдем в настройки на вкладку «заменить метки» ищем метки «Распродажа» и заменяем на метки «Верхнее меню» все ок наши старые разделы появились в верхнем меню.
Будем считать, что наш магазин готов. Мы познакомились с двумя способами импорта-экспорта через «перетаскивание» и формат json. Есть еще один полезный метод импорта через таблицы excel Этот метод нам может понадобится, если мы захотим массово поменять в таблице цены или описания. Постараюсь рассмотреть его в своем следующем уроке.
Теперь о еще об одной особенности версии 3.6. В этой версии все заказы приходят в специальную гугл форму, а на адрес клиента и магазина высылается только уведомление о том, что заказ поступил. С одной стороны с таблицей работать на много приятнее, тем более что она автоматически обновляется и можно раздавать разные права на доступ и редактирование. Но создать свою форму и привязать к своему магазину довольно непросто. Поэтому наберитесь терпения и слушайте. На всякий случай откройте хелп по этому вопросу на сайте heeg.ru
По умолчанию к магазину привязана форма демо- магазина. Давайте сделаем заказ и посмотрим где он появится. Закажем… перейдем в табличку и посмотрим как отобразился наш заказ. Все это конечно здорово но нашего магазина нам нужна своя форма заказа. Давайте создадим ее.
Для этого у вас должна быть зарегистрирована почта на г-меил.
Через посковик находим где у на делаются гугл формы и нажимаем «Открыть гугл формы» как видите у меня уже сесть несколько форм, в том числе форма для магазина новые подарки. Вот так она выглядит. Нам она не нужна, нам нужно создать точно такую же, но под наш магазин семян.
Жмем красный плюс в правом нижнем углу, и создаем в форме те же текстовые поля, что написаны в хелпе с сайта Heeg.ru переписываем названия полей….. и нажимаем глазик, чтобы посмотреть что у нас получилось. Отлично все поля на месте, закроем и отправим форму к себе на почту. -Ставим галку «включить форму в сообщение» вбиваем свою почту и смотрим, что нам пришло. Так форма к нам пришла, теперь ее код нужно перенести к нам в магазин. Щелкам правой кнопкой мыши в начало формы на слово Если и выбираем «проверить элемент» если ваш браузер IE или «посмотреть код» если вы в хроме.
Перед вами откроется DOM-дерево из которого мы должны скопировать код нашей формы он будет начинаться с или что-то если у вас гугл почта. В любом слулае это будет самый верхний раскрытый треугольник, который означает начало содержимого письма с формой.
Щелкаем на код этого див правой кнопкой мыши и выбираем «изменить как HTML» копируем в буфер (CTRL+C) выделенный текст и переходим в наш магазин. Ищем статью, которая называется google_form через поиск на системной панели. Выбираем редактировать и вставляем код из буфера. Это еще не все. Теперь этот код нам нужно немножко отредактировать.
Ищем место, где начинается наша форма. Она начинается с тега
Источник: heeg.ru
Создание iframe приложений Вконтакте
Не так давно, а именно в январе 2010 «вконтакте» добавил возможность создавать приложения не только через flash, но и через iframe. Айфрейм приложения по сути являются обычными веб страницами, заключенными в frame. По ходу дела мне тоже стало интересно и я попытался создать своё приложение.
Что вам нужно знать чтобы его сделать ? Ну для начала использование Javascript API в IFrame-приложении, а дальше все как на обычных сайтах.
Чтобы приложение могли добавлять и смотреть простые пользователи, оно должно пройти проверку администрацией вконтакте. Чтобы отправить его на проверку вам придется дать в залог 10 голосов (~70 WMR), вам их вернут если с приложением будет все нормально, или же они пропадут бесследно, так что не спешите его отправлять, посмотрите чтобы он соответствовал всем правилам размещения.
Также перед разработкой приложения учтите, если вы сделаете приложение которое сильно напоминает функциональностью уже существующее, то его отклонят.
По опыту скажу что когда я делал приложение для его проверки и подтверждения мне понадобилось отправлять его 8 раз, и я потерял 20 голосов, из-за недоработок.
Как с них заработать ? После того как приложение проверено, вы начинаете его раскрутку, рассылкой приглашений в приложение занимаются те же кто раскручивает группы вконтакте, и только после того как аудитория (те кто установил к себе на страницу) приложения будет больше 1000 вы сможете добавить таргетированные рекламные объявления, которые будет вам предоставлять сама сеть вконтакте, за клики по которым вы будете получать голоса.
Голоса вконтакте можно обналичить двумя путями: через Robox (1 голос = 3 wmr); через ВКонтакте (1 голос = 3.2 wmr, но только если прибыль приложения > 30000 голосов в месяц).
Моё приложение было проверено модератором позавчера, теперь буду заказывать рассылку приглашений, о дальнейших результатах развития приложения возможно отпишусь позже.
Источник: syblog.ru
Разработка Iframe приложений на VK API. От первых шишек до двухмиллионной аудитории
2014-06-09 в 11:26, admin , рубрики: game development, vk api, Вконтакте API, первые шаги, приложение vkontakte, метки: vk api, вконтакте api, первые шаги, приложение vkontakte
Здравствуйте, в этом посте речь пойдет о том, как я создавал 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 вывожу графики активности пользователей.
Послесловие
Для меня лично, такой независимый заработок стал прорывом и отличным стимулом. Чем больше я занимаюсь приложениями, тем больше идей у меня появляется. Планирую в ближайшем будущем заняться разработкой чего-нибудь более серьезного. Надеюсь, этот пост был полезен и интересен.
Источник: www.pvsm.ru