Добро пожаловать во вторую из двух частей учебного пособия по созданию нативных социальных приложений для мобильных устройств. В первой части мы создали базовое приложение, которое использовало библиотеку аутентификации Facebook, чтобы позволить пользователю войти в систему со своими учетными данными Facebook. Результатом стал доступ к данным Facebook пользователя через токен сеанса, который мы получили, когда пользователь вошел в систему.
Когда у нас есть этот токен, API Graph Facebook можно использовать для создания различных приложений. Когда конечный пользователь входит в систему, приложение отвечает за передачу необходимых разрешений, необходимых для его запуска. Пользователь может разрешить или запретить приложению доступ к своим данным из Facebook. Это пытается по крайней мере уведомить конечного пользователя о том, что приложение может сделать со своими данными в надежде на повышение прозрачности.
Во второй части этого руководства мы собираемся изменить наше оригинальное мобильное приложение Facebook (которое, по общему признанию, мало что сделало), чтобы создать аккуратный коллаж из фотографий профиля друзей пользователя. API-интерфейс FB Graph в основном основан на объектах JSON, поэтому мы будем использовать библиотеку Lua JSON-обертки, которую можно найти в обмене кодами Ansca Mobile.
Для начала нам нужно добавить следующую библиотеку в начало нашего файла main.lua:
|
1
|
require(«Json»)
|
Опять же, эту библиотеку можно найти в обмене кодами на anscamobile.com. После включения у нас есть доступ к методам библиотеки через переменную под названием Json. Подробнее об этом позже.
До этого в нашем методе прослушивания мы прослушивали события, которые запускались из поля входа в Facebook, которое отображалось после нажатия кнопки в центре экрана. После успешного входа в систему мы получили доступ к объекту личных данных через API, чтобы доказать, что соединение было успешным. Этот код можно увидеть здесь:
|
1
2
3
|
if ( «login» == event.phase ) then
facebook.request( «me» )
end
|
Поскольку наше приложение в первую очередь касается доступа к изображениям профиля нашего друга, мы собираемся изменить код, чтобы таким же образом извлекать объект данных «Друзья» из API. Мы заменим приведенный фрагмент кода следующим:
|
1
2
3
|
if ( «login» == event.phase ) then
facebook.request( «me/friends», «GET» )
end
|
Документацию по этому объекту «Друзья» можно посмотреть здесь, в пользовательском документе FB Graph API (см. Соединения -> друзья). Вы заметите, что мы передаем вторичный параметр «GET» методу facebook.request. Поскольку API Graph более или менее соответствует REST, тип запроса, который мы делаем, имеет большое значение. «GET» по своей природе является запросом на чтение, поэтому мы «получаем» данные о друзьях вошедшего в систему пользователя. Если бы мы делали вызов API на основе записи (например, публикацию на стене), мы могли бы указать «PUT», чтобы указать это.
После вызова метода «facebook.request» слушатель будет захватывать новые события, которые будут запущены при возврате этого вызова API. В первой части руководства мы наблюдали за типом события «запрос», чтобы определить, что это результат нашего вызова API после входа в систему. Код был следующим:
|
1
2
3
4
|
elseif ( «request» == event.type ) then
local response = event.response
print( response )
end
|
Это в основном получило ответ от Facebook API и распечатало его. Это часть кода, которую мы собираемся заменить, чтобы создать коллаж из фотографий профиля друга. Приведенный выше код будет заменен следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
elseif ( «request» == event.type ) then
local response = Json.Decode( event.response )
local data = response.data
local function showImage( event )
event.target.alpha = 0
event.target.xScale = 0.25
event.target.yScale = 0.25
transition.to( event.target, { alpha = 1.0 , xScale = 1, yScale = 1} )
end
for i=1,#data do
display.loadRemoteImage(«http://graph.facebook.com/».. data[i].id ..»/picture»,
«GET»,
showImage,
«friend»..i..».png»,
system.TemporaryDirectory,
math.random(0,display.contentWidth),
math.random(0,display.contentHeight) )
end
end
|
Давайте разберем это, чтобы мы могли понять каждую часть:
|
1
2
|
local response = Json.Decode( event.response )
local data = response.data
|
В этой части кода мы просто декодируем ответ JSON, который мы получаем от API Facebook. Ответ сохраняется как атрибут объекта события (event.response), который передается слушателю. Когда объект JSON декодируется, он переводится в объект Lua, который мы храним в переменной с именем «response». Поскольку ключ корневого элемента этого объекта JSON — «данные», после его декодирования мы можем углубиться в объект, вызвав «response.data».
|
1
2
3
4
5
6
|
local function showImage( event )
event.target.alpha = 0
event.target.xScale = 0.25
event.target.yScale = 0.25
transition.to( event.target, { alpha = 1.0 , xScale = 1, yScale = 1} )
end
|
Этот метод является обратным вызовом, который запускается при загрузке удаленного изображения с URL-адреса. В следующем разделе будет описано, как это происходит. Как только этот метод запущен, он ожидает объект события, который будет содержать экранный объект изображения профиля внутри атрибута «target» (event.target). Как вы можете видеть, мы устанавливаем базовые атрибуты «альфа» в 0 или невидимые, а также масштаб в 1/4 от исходного размера изображения.
Метод transition.to принимает 2 параметра: первый — это объект, на который он будет воздействовать, а второй — табличный объект с параметрами и значениями, к которым он относится. Эффект этого перехода будет заключаться в постепенном отображении изображения и изменении его таким образом, чтобы оно составляло от 1/4 его размера и было невидимым до его полных размеров (масштаб = 1) и видимым (альфа = 1). Это делает для бедного человека математический эффект анимации на каждом изображении при его отображении. Это будет иметь больше смысла при запуске приложения.
|
1
2
3
4
5
6
7
8
9
|
for i=1,#data do
display.loadRemoteImage(«http://graph.facebook.com/».. data[i].id ..»/picture»,
«GET»,
showImage,
«friend»..i..».png»,
system.TemporaryDirectory,
math.random(0,display.contentWidth),
math.random(0,display.contentHeight) )
end
|
Поскольку объект «Друзья», который мы получаем от API Faceobok, является массивом, нам нужно пройти через него, чтобы получить идентификаторы каждого пользователя. Этот идентификатор используется для создания URL-адреса, который будет отображать небольшую квадратную версию изображения профиля пользователя. Используя метод display.loadRemoteImage, мы можем вызвать URL-адрес, и он будет обрабатывать загрузку данных изображения и его локальное сохранение перед отображением на экране.
Первый параметр, который мы передаем:
|
1
|
«http://graph.facebook.com/».. data[i].id ..»/picture»
|
это созданный URL, который включает в себя уникальный идентификатор пользователя Facebook (data [i] .id).
|
1
2
3
4
|
«GET»,
showImage,
«friend»..i..».png»,
system.TemporaryDirectory,
|
Следующие 4 параметра:
— тип запроса «GET» в данном случае
— наш метод обратного вызова showImage, который будет запущен при загрузке изображения.
— уникальное имя для файла изображения, которое мы загружаем
— временное файловое пространство для хранения загруженных изображений, доступ к которым осуществляется с помощью метода «system.TeoraryDirectory»
Наконец, последние 2 параметра, которые мы передаем, — это координаты X и Y, в которых мы хотим отобразить изображение:
|
1
2
|
math.random(0,display.contentWidth),
math.random(0,display.contentHeight)
|
Поскольку мы создаем коллаж, мы можем размещать изображения случайным образом по всему экрану. Вызов «math.random» принимает начальное значение и конечное значение и возвращает случайное число между 2. В этом случае нам нужны случайные числа, которые находятся где-нибудь между 0 и шириной / высотой экрана. Больше или меньше, и изображение не будет видно.
И там у нас это есть! Проверьте результат ниже:
Лица были размыты, чтобы защитить невинных. 🙂
В заключение отметим, что API-интерфейс Facebook для Corona не будет работать должным образом в Corona Simulator. Самый простой способ протестировать приложение, которое мы создали в этом руководстве, — запустить его в реальном симуляторе iOS, который поставляется с Xcode.