Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Створення дизайну та написання коду для інтегрованого з платформою Facebook додатка

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Вітаю вас у третій частині серії «Створення дизайну та написання коду для інтегрованого з платформою Facebook додатка». На цій стадії я припускаю, що ви створили HTML-код та CSS-код для вашого додатка. Якщо ні, то зверніться до першої частини цієї серії. У цій частині ми вдосконалимо наше застосування:


Ознайомтеся з попередніми посібниками:


Стислий огляд

У цій частині ми:

  • додамо пару крутих ефектів за допомогою бібліотеки jQuery;
  • налаштуємо наш додаток у конфігураційній панелі нового додатка для Facebook, а також налаштуємо SDK (* Software Development (Developer's) Kit – набір засобів для розроблення) Facebook для PHP (* потужна бібліотека, що дозволяє вам отримувати інформацію про користувачів, публікувати інформацію в їх профілях, додавати можливість реєстрації та входу на сайт за допомогою Facebook);
  • передамо наші дані з Feedburner (* веб-сервіс для керування веб-каналом доставки контенту (термін описує доставку контенту того самого виду, наприклад новин або матеріалів аудіоблогів, відеоблогів та текстових блогів. Доступ до цього контенту забезпечується за допомогою таких програм, як агрегатори (aggregator) та веб-браузери (Web browser))) за допомогою API YQL (* Yahoo Query Language – мова запитів Yahoo; SQL-подібна мова, за допомогою якої ви можете запитувати, фільтрувати та об'єднувати дані з веб-сервісів; також це веб-інтерфейс для виконання запитів за допомогою цієї мови) Yahoo;
  • отримаємо дані з соціального графа Facebook за допомогою API Facebook Graph (* головний спосіб для додатків отримання та додавання даних до соціального графа (спосіб представлення інформації на Facebook));

Так що залишайтеся зі мною, приготуйте собі чашку чаю, і вдалого вам програмування!


Шаг 1: jQuery

Перед тим як взятися за перетворення нашої HTML-версії в PHP-версію, нам потрібно зробити пару наших HTML-об'єктів працездатними. Ми можемо це виконати доволі легко за допомогою бібліотеки jQuery. Якщо ви ще не почали її використовувати, то зараз якраз той самий момент для цього. Вона є відмінним уведенням до JavaScript і безумовно доволі проста для використання. Ви і справді можете створити деякі чудові ефекти лише за допомогою декількох рядків коду. У нашому додатку для ведення блога ми будемо використовувати jQuery для двох речей. По-перше, для реалізації миттєвого пошукового фільтра (* при його використанні результати пошуку відображаються без перезавантаження сторінки в спливаючому списку; реалізується за допомогою AJAX-запитів), і по-друге, для вкладок, щоб покращити досвід взаємодії користувача з додатком при переході зі сторінки на сторінку.

Якщо пам'ятаєте з попереднього посібника, ми підключили JavaScript-файл у заголовку HTML-документа. Настав час його створити. Так що перейдіть до свого улюбленого редактора коду та створіть файл під назвою 'myjava.js'. Ми починаємо з додання методу jQuery ready, зареєстрованого для об'єкта document. За допомогою нього jQuery повідомляється, що весь розташований у ньому код потрібно завантажити одразу після того, як DOM готова до здійснення над нею маніпуляцій.

Вкладки

Facebook app tabs

Коли DOM готова, ми ховаємо всі вкладки. Далі ми робимо так, щоб кожна сторінка поступово проявлялась при виборі відповідної вкладки або тоді, коли вкладка стає 'активною' (* коли їй додається клас 'active'). Також ми видаляємо клас active в інших вкладок та ховаємо контент всіх інших сторінок.

Пошуковий фільтр

Наступний елемент, для якого ми будемо використовувати jQuery, – наш пошуковий фільтр. Він дозволить нашим користувачам фільтрувати результати виконаного ними пошуку в режимі реального часу (* термін відноситься до системи, в якій дані, що надходять, оброблюються протягом мілісекунд, так що результат їх обробки доступний практично миттєво для процесу, що їх породив) по ходу того як вони набирають текст. Це здійснюється завдяки отриманню поточного значення поля форми та відбору всього, що співпадає з ним в контенті наших елементів div 'постів'. Потім за допомогою фільтра буде показано елементи div 'постів', що містять це значення, та приховано ті, що його не містять.


Крок 2: PHP

Тепер настав час зробити цей статичний файл динамічним та реалізувати можливість отримання даних з Facebook та Feedburner. Тепер, напевно, відповідний час для того, щоб перейменувати ваш файл з index.html на index.php та завантажити SDK для PHP. Ви можете завантажити останню версію SDK Facebook для PHP на:

SDK Facebook для PHP


Крок 3: Налаштування додатка на Facebook

Setting up application in Facebook

Тепер нам потрібно налаштувати «полотно» (* від англ. canvas – полотно; сторінка на Facebook (Facebook.com), де розташовується додаток (при цьому додаток вбудовується в iFrame)) для нашого додатка для Facebook. Як вже було згадано, сторінку для налаштування додатка для Facebook нещодавно було оновлено; так що важливо, щоб ви скористалися сторінкою для нового варіанту налаштування. Для початку вивантажте index.php на ваш власний акаунт для веб-хостингу. Я вивантажив мій у підпапку на зразок www.yourdomain.com/tut. Після цього ви можете налаштувати ваш додаток, відвідавши https://developers.facebook.com/apps.

Тепер натисніть кнопку 'Сreate new app' у верхньому правому куті. Уведіть ім'я вашого додатка, і потім вас буде перенаправлено на сторінку для налаштування додатка. Facebook дозволяє вам створювати різні варіанти додатків: від десктопних до мобільних. У нашому випадку нам потрібно вибрати варіант 'App on Facebook'. Є п'ять важливих полів, які вам потрібно заповнити, щоб ваш додаток працював. Їх виділено кольором на зображенні вище. Одразу після цього перейдіть за адресою apps.facebook.com, за якої йде те, що ви ввели в полі 'Аpp Namespace'. У моєму випадку це 'webdesigntuts', так що в якості домену мого додатка виступає http://apps.facebook.com/webdesigntuts/.

Коли ви перейдете за вашою URL-адресою, то повинні будете побачити результат виконання вашого файлу index.php у межах полотна на Facebook.


Крок 4:Налаштування та конфігурація SDK Facebook для PHP

Після додання нашого додатка на Facebook настав час отримати дані із соціального графа за допомогою API Facebook Graph та реалізувати для користувачів можливість входу в додаток та виходу з нього.

У папці для нашого додатка додайте нову папку та назвіть її 'fb'. Відкрийте папку SDK, завантаженого вами з GitHub. У ній ви повинні будете знайти декілька прикладів коду: початкові тексти (* src) та деякі тести. Виділіть контент папки src та перетягніть його до вашої папки fb. Це той код, що потрібен нам для підключення до Facebook. У нашому файлі index.php додайте наведений нижче код, починаючи з додання SDK Facebook із нашої папки 'fb', та додайте унікальний ID вашого додатка та секретний ключ. У коді нижче ви можете побачити, як це повинно бути налаштовано. По суті ми підключаємося до Facebook та отримуємо ID користувача, що використовую наш додаток. Якщо ідентифікація пройшла вдало, то ми потім створюємо змінну (* $logoutUrl) для зберігання значення URL-адреси для виходу з додатка, якщо ж ні, то ми створюємо змінну (* $loginUrl) для зберігання значення URL-адреси для входу в застосування.


Крок 5: Реалізація можливості входу в застосування та виходу з нього

Між частинами інструкції if...else нам потрібно закрити та відкрити теги PHP, щоб ми могли додати наш створений раніше HTML-код у PHP-документ. Тепер, якщо ви вивантажите вашу сторінку туди, де розміщуєте ваш додаток, та оновите полотно для додатка на Facebook, то повинні будете побачити додаток. Якщо ви вже ввійшли на Facebook, то ви його побачите; інакше, ви побачите URL-адресу для входу в застосування, як показано на зображенні нижче:

Design and Code an Integrated Facebook App

Ми налаштували наш додаток на Facebook та реалізували для наших користувачів можливість входу в додаток та виходу з нього. Все, що нам залишилося, – замінити наші фіктивні дані (* на зразок кількості лайків / коментарів) на реальні робочі (* на відміну від тестових) дані.


Крок 6: Отримання даних з YQL за допомогою JSON

Опануйте YQL краще.

Перша частина даних, які ми отримаємо в нашому додатку, – пости блога. Ми отримуємо її з нашого RSS-каналу Feedburner (* RSS – Really Simple Syndication (дійсно проста синдикація), технологія [формат, механізм] RSS; метод розповсюдження інформації по Інтернету за передплатою) за допомогою YQL. Якщо ви не користувалися раніше YQL, то вам безумовно варто спробувати цю технологію. Її дуже легко використовувати, і вона надзвичайно гнучка. Якщо ви з нею не знайомі, то можете дізнатися докладніше про неї тут і тут.

Тут ми по суті відправляємо запит до YQL, використовуючи синтаксис, подібний до того, що міг би використовуватися в MySQL. Потім ми декодуємо дані (* перетворюємо в об'єкт PHP), повернені у форматі JSON, та зберігаємо їх у змінній, щоб ми могли отримати конкретні частини array в об'єктах постів нашого блога.

Нам потрібно виконати три запити до YQL. Їх перелічено нижче:

  • webdesigntuts-summary feed – у відповіді на цей запит міститься більша частина даних, потрібних для постів нашого блога. У ньому містяться заголовок, URL-адреса, дані автора, дата публікації та стислий переказ поста;
  • webdesigntutsplus feed – з відповіді на цей запит нам потрібна тільки інформація про кількість коментарів. Нам потрібно відправити цей запит, оскільки ці дані не містяться у відповіді на запит webdesigntuts-summary feed;
  • webdesigntuts-summary feed (знову) – цього разу замість отримання всіх даних ми отримуємо тільки категорії, які використовуються в боковій панелі;

Код для виконання цих запитів повинен бути доданий перед закриваючим тегом PHP, за яким йде HTML-код. Ви можете ознайомитися з тим, як реалізувати вищеописане, в коді нижче:


Крок 7: Отримання кількості лайків зі сторінки на Facebook

Зараз ми відправимо запит до API Facebook Graph. Це здійснюється подібно до того, як ми виконали запити до YQL, проте є невеликі відмінності. Це дуже легко виконати, і код для реалізації цього без сумніву повинен знаходитися у папці для ваших фрагментів, оскільки я впевнений, що він вам стане у пригоді. Ми задаємо в якості значення змінної для зберігання кількості лайків = '0', виконуємо запит та потім говоримо, що якщо в поверненому масиві містяться лайки, то ми задаємо в якості значення $likes повернену кількість лайків.


Крок 8: Відображення динамічних даних

Design and Code an Integrated Facebook App

Тепер, коли всі наші дані зберігаються в змінних PHP, нам потрібно отримати та відобразити їх на нашій сторінці. У випадку з постом нашого блога ми виконуємо це завдяки створенню простого циклу foreach та використанню $yqlfeed в якості значення. Потім ми можемо за допомогою інструкції echo вивести окремі значення нашого array, використовуючи ім'я частини, яку хочемо вивести. Консоль YQL повинна допомогти вам знайти ці розділи при використанні режиму перегляду, при якому дані представлено у вигляді дерева.

Зверніть увагу, що в блоці коду вище ми вивели кількість коментарів, що зберігаються в $yqlfeed2. У розділі з коментарями є дві частини: URL-адреса коментаря та кількість коментарів. URL-адреса коментаря – перша part[0] (* частина), а кількість коментарів – друга part[1]. Нам потрібна тільки кількість коментарів. Також ми автоматично збільшуємо номер елемента на одиницю завдяки тому, що задаємо '$i = 0' та потім використовуємо 'item[$i++]'. Завдяки цьому номер елемента буде збільшуватися кожного разу після того, як елемент було перебрано в циклі, і буде повертатися кількість коментарів для кожного окремого поста.

Ще вам слід звернути увагу на те, що ми скористалися вбудованою функцією PHP, subtr - substr($item->pubDate,0,-9). Ми це зробили через деякі символи, що дивно виглядають, у кінці наших дати та часу. Завдяки цьому просто видаляються останні дев'ять символів (-9) і наші дата та час відображаються належним чином.


Крок 9: Відображення імені користувача, зображення та кількості лайків

Design and Code an Integrated Facebook App

Вивести кількість лайків просто; ми створили раніше змінну '$likes', так що нам просто потрібно вивести її значення. Facebook PHP SDK також створює автоматично деякі змінні для нас; знов-таки, у нас тут простий випадок виводу даних. Нам потрібно тут тільки замінити наші фіктивні дані на динамічні дані.


Крок 10: Відображення категорій

У коді вище ми просто перебираємо елементи відповіді на запит YQL, що міститься в '$yqlfeed3'. Також ми використовуємо іншу вбудовану функцію PHP, str_replace. Ми її використовуємо, щоб замінити всі пробіли в наших категоріях на символ '+'. Це робиться для того, щоб посилання залишалися робочими при спробі переадресації користувача до розділу з категоріями на Webdesigntuts+.


Крок 11: Останні поради та трюки для додатків для Facebook

Автоматична зміна розміру простору полотна для додатків Facebook.

Перший трюк, який я хотів би вам показати, допомагає нам подолати наслідки бага в iframe полотна Facebook. У налаштуваннях вашого додатка для Facebook ви можете задати їх таким чином, що iframe автоматично буде підганяти свій розмір під розмір вашого контенту; проте при цьому також з'являється відразлива лінійка прокручування рядом з вашим додатком зліва від бокової панелі Facebook. Це виглядає так собі, і ми можемо вирішити цю проблему завдяки простому фрагменту коду JavaScript, який може бути додано одразу після відкриваючого тегу body. За допомогою цього коду розмір нашого полотна буде підігнано під розмір контенту та бокова панель буде розташовуватися з краю справа сторінки Facebook, а не додатка.

Спливаюче вікно для входу в додаток для Facebook

Facebook app login popup

Наступний трюк призначений для того моменту, коли при первинному відвідуванні вашого додатка користувачеві буде запропоновано увійти в додаток (* пройти аутентифікацію та авторизацію). Замість того щоб просто відображати посилання, у нас може бути спливаюче вікно для входу в додаток. Розумієте, про що я. Впевнений, ви бачили їх безліч разів. Це можна виконати завдяки додаванню іншого фрагменту коду JavaScript після закриваючого оператора else PHP.


Завершення

Що ж, на цьому все, хлопці і дівчата! На цьому завершується наша серія «Створення дизайну та написання коду для інтегрованого з платформою Facebook додатка». Сподіваюсь, що вам сподобалося створювати обговорюваний тут додаток настільки ж, як і мені писати про це.

У вересні цього року (* 2011 року на момент написання оригіналу посібника) на щорічній конференції F8 (* призначена для розробників та підприємців, що просовують свої сервіси та продукти на Facebook) компанія Facebook оголосила, що кількість користувачів веб-сайту перевалила за 800 мільйонів у рік. Відмінно, Facebook! Як ви розумієте, це відмінна платформа, щоб розкрутити вас, ваш бренд або ваш продукт. Як ще нею скористатися, як не для створення вашого власного додатка, що викликає характерне для Facebook враження та має подібний зовнішній вигляд. Компанія Facebook також оголосила у той самий день про новий тип профілів користувачів під назвою Timeline (* часова шкала; графічне представлення проміжку часу та хронологічного зв'язку подій; профіль представлено у вигляді віртуального альбому для фотографій, відео...). З виходом Timeline для додатків з'являється зовсім новий додатковий спосіб інтеграції у профілі користувачів / Timeline.

«Фільми, на які ви посилаєтесь. Пісні, які вам дуже до вподоби. Ваші улюблені захоплення. Тепер є новий клас додатків для соціальних мереж, що надають вам можливість виразити себе через все, чим ви займаєтеся.»

Design and Code an Integrated Facebook App

Зараз чудовий час для нас, розробників застосувань! Якщо ви ще не підключилися, то чого ж ви чекаєте? Не просто витайте в хмарах, а піднімайте свій зад та беріться за створення вашого наступного додатка. Я буду сподіватися побачити, що у вас виходить, як ви застосовуєте отримані знання та створюєте на їх основі щось своє. Не соромтеся залишати посилання на ваші додатки та творіння нижче в розділі для коментарів.

До скорої зустрічі, вдалого вам створення дизайнів та програмування!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.