Pull to refresh

Отладка iframe приложения непосредственно в среде vk.com с использованием php + xdebug

Reading time 3 min
Views 7.3K

В этой статье вы узнаете, как можно отлаживать iframe приложение непосредственно внутри среды vk.com, то есть как белый человек. Разработка приложения непосредственно в среде не требует создания песочниц (эмуляции вконтакте), очень удобно работать непосредственно с API вконтакте, видя все переменные, которые передаются туда и обратно непосредственно в трейсе. Не претендую на оригинальность, я просто проверил, что такой статьи нету в тырнете и все, а идея очевидна и проста. Идею придумал за кружкой чая, ибо если бы я успел его допить, то начал бы гуглить.


Злость


У меня вызывает бурю негодования, когда я не могу нормально разрабатывать софт. В PHP для меня самым ненавистным является var_dump, print_r которыми я пользуюсь в экстренной ситуации, то есть в момент когда отладить им будет быстрее, чем настроить полный стек IDE для работы, то есть меньше чем пол часа, если с нуля — начиная с настройки апачи. Во всех остальных случаях, если нет нормального стека, меня это вымораживает и мне хочется всячески поправить эту ситуацию.

Проблема


Есть Iframe приложение, внутри vk.com. Оно постоянно взаимодействует с пользователем, API вконтакте и другими вещами, вроде голосов, используя разные секретные ключи и без них. Естественно все это чертовски трудно отлаживать. Из чего следует, что приложения начиная с определенного уровня будут стоить чрезвычайно много программист часов. В таких ситуациях частично исправляют ситуацию песочницы. Если брать в рассмотрение Iframe, то если чуть раскинуть мозгами песочница в любой её вариации теряет актуальнсть ввиду сложности и не универсальности, ведь приложение можно тупо замапить на сервер разработки, а там сидит программист с IDE и xdebug.

Стек разработки


XAMPP 1.7.4, PHP 5.3, NetBeans 7.01, vk.com(iframe), xdebug, DNS

Настройка стека


Извиняюсь за достаточно скудную текстовую информацию. Я подготовил видео, что бы было понятно.

— Настройка apache
Идем в virtual-host
<VirtualHost *:84>
	DocumentRoot D:\work\other\htdocs\ru-wartur-app\www\public-html
	ServerName app.wartur.ru

	ErrorLog D:\work\other\htdocs\ru-wartur-app\log\apache2\error.log
	CustomLog D:\work\other\htdocs\ru-wartur-app\log\apache2\access.log common

	<Directory D:\work\other\htdocs\ru-wartur-app\www\public-html>
		Options Indexes FollowSymLinks Includes ExecCGI
		AllowOverride All
		Order allow,deny
		Allow from all
	</Directory>
</VirtualHost>

Перезапускам наш локальный сервер разработки, в моем случае XAMPP (всем советую).
Не смущаемся по поводу 84-го порта. Думаю, если в фирме будет много разработчиков, то там и до 90-го дойти могут, а у меня они дома реально все забиты.

— Настройки dns
Создаем запись A. В моем случае app.wartur.ru — 188.134.79.140, то есть маппинг на роутер.

— Настройки vkontakte
Идем Вконтакте->настройки->Адрес IFrame: app.wartur.ru:84/

— Создание проекта NetBeans
Мы будем считать что xdebug у вас настроен, останавливаться на этом не будем.
Project Settings -> Run Configuration -> Project URL: в моем случае app.wartur.ru:84/

— Запускаем и радуемся жизни
— Ставим точку останова и запускаем на отладку внутри IDE, теперь у нас в браузере создалась сессия и IDE встала на режим отладки
— Запускаем приложение, в моем случае vk.com/app2820627, видим профит от клика по каждой новой ссылки, запуска API или еще чего вы захотите.

Видео


Извиняюсь за качество, как всегда нету времени переделывать, не судите строго


Надеюсь помог. Удачи всем. Очень люблю, когда статья за один час запиливается, а не растягивается на 3-4 часа.

UPD: Все что написано выше достаточно сложно. Все гораздо проще в случае, если вам не надо параллельно давать доступ из вне к своей рабочей машине
— Убираем из схемы настройки DNS и все что с этим связано.
— Ставим в настройках приложения какой-нибудь localhost, в моем случае app.warturru (мне самому не нравился этот порт 84, вот его убрал ура!!!)
Пасиба хабру за подсказки! Всем удачи!
Tags:
Hubs:
+21
Comments 20
Comments Comments 20

Articles