Добро пожаловать в часть 1 из 2 серии учебных пособий по использованию API Graph Facebook и Corona SDK для создания собственных социальных приложений для мобильных устройств. API Facebook имеет множество функций и может использоваться для создания мощных социальных приложений. В качестве отправной точки, самая основная и основная функция API Facebook состоит в том, чтобы позволить пользователю аутентифицировать себя в приложении, используя свои учетные данные Facebook. Это требует двухэтапного процесса, при котором пользователь не только войдет в приложение со своим именем пользователя и паролем Facebook, но и утвердит набор допустимых действий, которые приложение может выполнять со своими социальными данными.
Например, приложению может быть разрешен только доступ к их имени и профилю, но остальные личные данные останутся конфиденциальными. В качестве другого примера, приложению может быть предоставлен доступ к сообщениям на стенах их друзей. Область применения этой функции API действительно зависит от типа приложения, создаваемого для взаимодействия с Facebook.
В нашем приложении мы начнем с того, что позволим пользователю аутентифицировать себя с помощью своих учетных данных Facebook, чтобы получить токен доступа, который мы можем использовать во время нашего сеанса. Сеанс в этом случае определяется как одноразовое использование приложения. Чтобы начать этот процесс, нам нужно зарегистрировать приложение в Facebook, чтобы получить ключ API.
Если вы еще не присоединились к программе разработки приложений для Facebook, вам следует сделать это сейчас .
После того, как вы установили приложение в свою учетную запись, вам нужно нажать кнопку «Настроить новое приложение» в правом верхнем углу.
Каждому приложению в Facebook нужно уникальное имя, так что придумайте что-то специфичное для вашего проекта.
Facebook может попросить вас заполнить форму CAPTCHA на следующем шаге. Если это так, просто завершите его, чтобы продолжить.
Как только приложение будет создано, вы увидите список вкладок в левой части экрана, которые содержат различные настройки приложения. Нажмите на «Мобильные устройства»
На этом экране запишите свой «Идентификатор приложения» — длинный номер, который мы будем использовать позже. Кроме того, убедитесь, что вы установили переключатель с надписью «Нативное приложение» и нажмите «Сохранить изменения» ниже.
Теперь, когда у нас есть настройка приложения Facebook, давайте начнем с настройки приложения Corona. В качестве основных начальных элементов мы собираемся создать 2 файла с именами build.settings и config.lua . Они содержат основные данные конфигурации, которые информируют компилятор об ориентации отображения нашего приложения. Они заключаются в следующем:
build.settings:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
settings =
{
orientation =
{
default = «portrait»,
},
iphone =
{
plist =
{
UIPrerenderedIcon = true,
},
}
}
|
config.lua
|
1
2
3
4
5
6
7
8
9
|
application =
{
content =
{
width = 320,
height = 480,
scale = «letterbox»,
},
}
|
Далее мы начнем кодировать наше приложение в файле main.lua проекта. Код с этого момента будет размещен в main.lua.
|
1
2
3
4
5
6
7
8
|
ui = require(«ui»)
local facebook = require «facebook
[/lua]
Begin by including the main libraries.
[sourcecode language=»lua]
local appId = «APPLICATION ID HERE»
|
Затем мы создадим переменную с именем appId и сохраним в ней «идентификатор приложения», который мы получили, когда создавали наше приложение Facebook. Хотя это большое целое число, мы будем хранить его здесь как строку.
Нашим следующим шагом будет создание приятной на вид кнопки, которую пользователь сможет нажать, чтобы войти в наше приложение со своими учетными данными Facebook:
|
1
2
3
4
5
6
7
8
|
local myButton = ui.newButton {
defaultSrc = «fb.png» , defaultX = «300» , defaultY = «50»,
onEvent = onClick,
id = «myButton»
}
myButton.x = display.contentWidth / 2
myButton.y = display.contentHeight / 2
|
Создание кнопок с помощью библиотеки пользовательского интерфейса очень просто. В приведенном выше вызове вы заметите, что мы передаем 5 вещей методу newButton библиотеки UI:
- defaultSrc : файл изображения, который мы будем использовать в качестве нашей кнопки
- defaultX : ширина
- defaultY : высота
- onEvent : мы передаем метод с именем «onClick», который является функцией, которая будет вызываться при нажатии кнопки. Мы определим это позже.
- id : уникальный идентификатор для этого объекта кнопки
После этого мы просто разместим кнопку, установив свойства x и y нашего объекта myButton. Вы заметите, что мы используем специфический для Corona «экранный» объект для получения contentWidth и contentHeight экрана. Поскольку контрольной точкой по умолчанию для объектов в Короне является центр, поместив эту кнопку на половину ширины и высоты экрана, она появится прямо в мертвой точке.
Для целей данного руководства имеет смысл сначала определить кнопку перед действиями. Однако в реальной жизни нам нужно определить наши функции над кодом создания кнопки, чтобы компилятор знал о них, поскольку он интерпретирует код процедурно. Нашей первой функцией будет определение действия нажатия кнопки, называемого «onClick».
|
1
2
3
4
5
|
local function onClick( event )
if(event.phase == «release») then
facebook.login( appId, listener )
end
end
|
В этой простой функции мы вызываем нужную нам библиотеку Facebook и передаем две вещи методу входа в систему. Первый — это идентификатор приложения Facebook, который мы получили от Facebook.com при создании приложения, а второй — функция, которая будет срабатывать при любом событии обратного вызова из API Facebook. Мы также проверяем наличие фазы события, чтобы предотвратить случайное двойное нажатие кнопки.
Этот метод слушателя может быть запущен несколько раз, поэтому нам придется определять не только «тип» события, но и «фазу» события. Когда вызывается метод входа в Facebook, библиотека подключается к Facebook и отображает дружественный для мобильных устройств веб-сайт с экранами входа и аутентификации Facebook, как показано ниже:
Как только пользователь завершит процесс входа в систему, API Facebook начнет выполнять обратные вызовы для нашей функции слушателя. Вот наша функция слушателя, так как она обозначает первую часть этого урока:
|
01
02
03
04
05
06
07
08
09
10
|
function listener( event )
if ( «session» == event.type ) then
if ( «login» == event.phase ) then
facebook.request( «me» )
end
elseif ( «request» == event.type ) then
local response = event.response
print( response )
end
end
|
Как вы можете видеть, когда мы получаем наш первый обратный вызов из API Facebook, мы ищем тип события «сеанс». Это означает, что пользователь завершил действие сеанса. Чтобы убедиться, что он / она входит в систему, а не какой-либо другой тип действия сеанса, мы проверяем, что фаза имеет тип «вход в систему». Если эти проверки пройдут, мы теперь создадим отдельный «запрос» к API Graph Facebook для объекта данных. В этом случае мы будем запрашивать объект «я», который является сокращением для текущего пользователя, вошедшего в систему. См. ниже:
|
1
2
3
|
…
facebook.request( «me» )
…
|
Это событие сработает, и тогда наш тот же слушатель будет перезвонен после завершения события. На этот раз мы проверим тип события «request» и обработаем объект «response», который передается нам как JSON. Распечатка этого объекта даст что-то вроде этого (взято из примера FB API):
|
01
02
03
04
05
06
07
08
09
10
|
{
«id»: «220439»,
«name»: «Bret Taylor»,
«first_name»: «Bret»,
«last_name»: «Taylor»,
«link»: «http://www.facebook.com/btaylor»,
«username»: «btaylor»,
«gender»: «male»,
«locale»: «en_US»
}
|
Теперь API Facebook очень мощный и может делать кучу интересных вещей. Во второй части нашего руководства мы собираемся добавить функциональность для запроса данных о друзьях и отображения некоторых из их профильных изображений в виде коллажа. До тех пор я рекомендую вам ознакомиться со всеми возможностями API Graph Facebook: Документация FB Graph .