Для начала создадим новое приложение в Facebook. Идем по ссылке и нажимаем кнопку
Оставим пока как есть, поменять всегда можно.
Кликаем Continue, вводим капчу, оказываемся на экране редактирования приложения.
Кликаем App on Facebook, открывается окошко с возможностью ввести URL страницы, которая будет отображаться внутри iFrame фейсбука. Оставим пока все как есть.
Наша флешка будет коннектиться к фейсбуку, отображать имя и аватарку пользователя.
Если делать программу в FlashDevelop или FlashBuilder, она автоматически завернется в SWFObject, что нам в последствии пригодится. Сделаем простенькое приложение. В текстовое поле будем выводить полученное имя, а загрузчиком грузить аватарку.
Теперь самое интересное. Нужно зайти в папку с проектом/bin и скопировать index.html куда-нибудь как бэкап. На случай если что-нибудь испортится. Теперь внесем необходимые изменения в сам файл
Придется поменять параметры ширины и высоты при вызове функции swfobject.embedSWF. По умолчанию стоит растягивание по всей ширине, а нам нужен конкретный размер. После параметров размеров идет параметр минимальной версии флеш плеера, тоже можно поменять при желании. Обратите особое внимание на параметр
По этому айди мы будем обращаться с нашей флешкой из JS кода. Можно поменять для удобства. Параметр wmode по умолчанию всегда равен "direct". Если ваше приложение не использует 3D движки, в том числе Starling, есть смысл поставить "opaque". В случае, если используется direct или window, флешка пропадает при вызове фейсбучных диалогов (отправка реквестов, открытие окон оплаты и т.п.), и в этом случае придется трюкачить с заменой флеш контента на заблюреный скриншот (но это другая история).
По-хорошему, нужно хранить JS скрипты в отдельном файле, но в нашем случае обойдемся одной страницей.
По совету Facebook, добавим асинхронную загрузку АПИ сразу после открытия тега <body>
Меняем appId на нужный
Теперь закинем наше приложение на хостинг (процесс описан очень коротко. Дополнительную информацию о развертке приложений на Heroku можно найти на оф. сайте).
Шаги ниже можно пропустить, если у вас установлен веб сервер или уже есть где захостить страницу с приложением.
Идем на heroku.com, регистрируемся, скачиваем и устанавливаем необходимое ПО. Создаем новое приложение, запоминаем имя репозитория и открываем Git Bash.
Логинимся командой heroku login и клонируем только что созданный репозиторий командой
git clone <адрес репозитория>
Скорее всего вам предложат сгенерировать новый SSL ключ. Не отказывайтесь. В итоге, если все сделано правильно, в папке C:\Users\Username появится папка с содержимым репозитория. В данный момент она пустая, поэтому копируем туда содержимое папки bin вашего проекта (вместе с папкой .js, иначе не будет работать swfObject). Теперь нужно переименовать index.html в index.php, тогда Heroku ничего не заподозрит и исправно развернет приложение.
Из консоли заходим в папку, которую только что наполнили содержимым, а затем добавляем, коммитим и пушаем приложение на Heroku
git add --all
git commit -am "change"
git push <название приложения> master
Если все сделано правильно, приложение запушается и запустится. В итоге вы должны получить следующее сообщение:
Идем на страницу настройки приложения на facebook и заполняем строки Canvas URL и Secure Canvas URL:
https://apps.facebook.com/<ваше App ID>
Если отображается загруженная флешка с надписью "My Name", все верно.
Долгожданный момент, переходим непосредственно к работе с API. Первым делом, после инициализации, проверим текущий статус пользователя. Если он не залогинился в приложение, логиним его. Пока проверим выводом в консоль. Добавим следующий код после инициализации FB API:
Можно определить информацию, которая будет использоваться в приложении. Для этого передается второй параметр - объект с перечисленными в нем требованиями к необходимой информации и действиям. Например, чтобы получить возможность публиковать записи на таймлайнах пользователей, нужен доступ к действиям "publish_actions" и "publish_stream". В данный момент у нас нет объекта, уточняющего необходимую информацию и действия, поэтому приложение загружается с правами по умолчанию - профиль пользователя и список его друзей. Если запустить приложение сейчас, оно выведет следующее сообщение:
Нам нужно зарегистрировать функции с "внешним" доступом, позволяя JS вызывать их со страницы
Предполагается, что мы передаем весь объект response.
Возникает два сценария загрузки приложения:
- Пользователь еще не установил приложение. Откроется диалог установки, и флешка скорее всего успеет полностью загрузиться и зарегистрировать функции.
- Пользователь установил приложение. Наиболее вероятно, что АПИ загрузится быстрее флешки, и она не успеет зарегистрировать внешние функции.
Добавляем две переменные перед вызовом FB.init, и в отдельный тег добавляем функцию flashIsLoaded
После регистрации всех внешних функций, вызываем из флешки функцию flashIsLoaded, теперь страница знает, что приложение загрузилось.
Добавим следующий код во флеш приложение:
А на страницу следующее (во второй блок script):
Теперь при загрузке приложения флешка должна отображать имя пользователя и аватарку. Проверим
Осталось отладить момент первого захода в приложение. Добавим еще один флаг dataSendPending, который выставляем в true, если пользователь не залогинен, а флешка уже требует информацию о пользователе.
После полной инициализации АПИ, можно обращаться к фейсбук апи напрямую, через FB.api(..) Можно завернуть эти вызовы в свои функции, которые можно вызывать из флеш приложения напрямую.
Полные исходники можно скачать тут
No comments:
Post a Comment