Praxishandbuch Facebook-Programmierung E-Book

Stephan Alber

• Herausgeber: O'Reilly
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2015

Seitenzahl: 346

Beschreibung

"Praxishandbuch Facebook-Programmierung" zeigt, dass man keine außergewöhnlichen Hürden nehmen muss, um Teil der technischen Facebook-Welt zu werden. Die Anforderungen an Facebook-Anwendungsprogrammierer unterscheiden sich nicht sonderlich von den gängigen, modernen Web-Techniken. Im Buch wird der Einsatz der JavaScript- und PHP-Entwicklungswerkzeuge von Facebook anhand praktischer Beispiele erklärt. Die Autoren starten sofort mit einer ersten Facebook-Anwendung, um die Einrichtung eines Entwickler-Account und einer ersten Anwendungsinstanz zu zeigen. Ans Eingemachte geht es, wenn der Aufbau der Facebook-API erklärt wird, welche Endpunkte es dabei gibt und wie sie mit den Facebook SDKs angesprochen werden können. Da die Graph-API der Grundbaustein für jegliche Facebook-Plattform-Funktionalität ist, wird dem Thema ein ganzes Kapitel gewidmet. Twitter Bootstrap, Parse und JavaScript-Templates mittels Handlebars schließen den Grundlagenteil ab. Über die praktische Erstellung von Anwendungen stellen die Autoren die ganze Bandbreite der Facebook-Plattform vor. Die Anwendungsbeispiele behandeln Themen wie Location-Services, der Umgang mit Bildern und die Implementierung von Wettbewerben. Dabei werden auch erweiterte Features wie die Darstellung von Open-Graph-Stories im Newsfeed behandelt. Im Anschluss bringen die Autoren dem Leser Facebook-Plattform-Features näher, die sich speziell zum Einsatz in Spielen eignen. Da sich ein Spiel nicht von alleine verbreitet, erfährt der Leser auch, wie man Highscores und Achievements veröffentlicht. Mit der Einführung der Graph API 2.0 verstärkt Facebook seine Ambitionen zum Schutz der Privatsphäre seiner Nutzer. Als Teil dieser Initiative ist für Funktionen, die auf besonders persönliche Nutzerdaten zugreifen, ein Freigabeprozess geschaltet. Der Leser erfährt, wie dieser Prozess gemeistert werden kann. Das Buch schließt mit dem Thema Facebook-App Analytics ab.

Leseprobe

Praxishandbuch Facebook-Programmierung

StephanAlber

KlausBreyer

KorneliusNägele

Kapitel 1. Einführung

Die Quartalszahlen von Facebook beweisen es jedes Mal aufs Neue: Immer mehr Menschen nutzen Facebook. Wäre Facebook ein Land, wäre es das drittgrößte Land der Welt.

Aber nicht nur das: Immer mehr Menschen nutzen Facebook ausschließlich mobil. Ob als native App oder im mobilen Web, Facebook hat seine Stellung als digitaler Begleiter unseres Alltags gefestigt. Und allen Unkenrufen zum Trotz, Facebook wäre jedoch nur ein etwas längerer Hype, bevor das nächste Social-Network von sich reden macht, wenn Mark Zuckerberg nicht allen Unkenrufen zum Trotz massiv in Facebook investiert und mit seiner Initiative »internet.org« sogar komplett unerschlossenen Zielgruppen in Entwicklungsländern Zugang zum Internet zu verschafft.

Aber es ist nicht nur Facebook selbst. Das soziale Netzwerk hat über die Jahre hinweg ein eigenes Ökosystem geschaffen. Auf der einen Seite gibt es die Marketing-Partner, die mit ihren mächtigen Services im Bereich des Programmatic Buyings Werbemittel verkaufen, praktische Community-Management-Tools anbieten oder aus Communitys mit Millionen Fans Insights generieren.

Auf der anderen Seite, mehr dem Konsumenten zugewandt, gibt es aber auch mächtige Social Games, die ohne Facebook und die Freundesliste gar nicht ihre Verbreitung in dieser Form erfahren hätten. Die mobile Gaming-Industrie macht eine Menge Geld durch Facebook – und steckt auch eine Menge wieder hinein, in Form von Werbeanzeigen. Und natürlich steht es auch jedem selbst offen, Teil dieses Kosmos zu werden.

Facebook ist sich bewusst, wie wichtig ein solches Ökosystem ist. Deshalb pflegen und nähren sie es so gut wie eben möglich. Als Teil dieser Initiative wurde die Entwicklerkonferenz F8 zu einer jährlichen Konferenz ausgebaut. Und jedes Jahr werden damit unsere Stable-Implementierungen aufs Neue herausgefordert, um mit immer neuen Features und »Breaking Changes« des sozialen Netzwerks Schritt zu halten.

Abbildung 1.1 Mark Zuckerberg bei der Facebook-Konferenz F8 im April 2014 (Foto: Facebook.com)

Klar, schön ist anders. Aber die Zeit, in der eine Software einmal implementiert wird und anschließend über Jahre ohne grundlegende Änderungen eingesetzt werden kann, neigt sich dem Ende zu. Facebook versucht, mit hohem Innovationstempo die Mitbewerber auf Abstand zu halten und gleichzeitig über Zukäufe die wichtigsten Trends in sich aufzunehmen. Gleichermaßen sind aber auch die Firmen und Apps im Ökosystem immer wieder aufs Neue herausgefordert, sich weiterzuentwickeln und anzupassen.

Dieses Buch zeigt, dass man keine besonderen Hürden nehmen muss, um Teil dieses Ökosystems zu werden. Eigentlich unterscheiden sich die Anforderungen nicht großartig von den gängigen Web-Techniken. Wir nutzen hier die am weitesten verbreiteten Web-Skriptsprachen JavaScript und PHP.

Ausblick

Wir springen direkt ins kalte Wasser. Denn los geht es in Kapitel 2 mit deiner ersten Facebook-Anwendung. Wir begleiten dich, wenn du deinen Entwickler-Account erstellst, deine erste Anwendungsinstanz einrichtest, erklären dir, welche unterschiedlichen Typen von Facebook-Anwendungen es gibt, und schaffen es sogar, dass am Ende ein »Hallo Welt« erscheint!

Ans Eingemachte geht es erst im darauffolgenden Kapitel 3. Hier lernst du erst einmal, wie die API von Facebook grundsätzlich aufgebaut ist, welche Endpunkte es gibt und mit welchen SDKs du sie ansprechen kannst.

Spezialisieren werden wir uns in diesem Buch auf die Graph-API in Kapitel 4, denn die Graph-API bildet den größten Teil der Funktionalität ab, die man für »Social Apps« benötigt. Ein Teil davon sind auch die »Like«-Buttons, mit denen Facebook das gesamte Internet überzogen hat.

Als letzte theoretische Station vor dem praktischen Teil befassen wir uns in Kapitel 5 mit allgemeinen Entwicklungstools, die uns bei der Anwendungsentwicklung behilflich sein werden. Dazu gehören JavaScript-Templates mittels Handlebars, das CSS-Framework Twitter Bootstrap und auch Parse, ein Dienst zur Datenspeicherung, der von Facebook im Jahr 2013 akquiriert wurde.

Fast genauso bekannt und beliebt wie die »Like«-Buttons ist der »Login with Facebook«. In Kapitel 6 lernst du die Grundlagen dieser Autorisierung mit Facebook und worauf es dabei ankommt. Auch wenn es erstaunlich einfach ist, einen solchen Login zu implementieren, liegt der Teufel später im Detail, wenn du mehr als nur eine ID und den Namen eines Nutzers wissen möchtest.

Richtig knietief in Code begeben wir uns in Kapitel 7 mit den Anwendungsbeispielen: Du lernst in diesem Kapitel, eine der beliebesten Marketing-Anwendungen der letzten Jahre zu implementieren, nämlich ein Foto-Voting. Als besonderes Schmankerl werden die Votings sogar per Open-Graph-Actions im Newsfeed der teilnehmenden Freunde dargestellt. Aber wir werden uns auch sehr viel mit dem Lesen von Daten aus dem sozialen Graphen beschäftigen – eine wichtige Lektion, um auch etwas über die Nutzer deiner Anwendung zu lernen. Als Krönung wirst du schließlich lernen, wie du über die Graph-API auch als Facebook-Fanpage agieren kann. Du wirst programmatisch Beiträge auf einer solchen Fanpage hinterlassen.

Die eingangs schon erwähnten Spiele werden in Kapitel 8 behandelt. Doch da sich ein Spiel nicht von alleine verbreitet, wirst du lernen, wie man Highscores und Achievements veröffentlicht. Und um den Spielern direkt ein Tool zum Einladen von Freunden in die Hand zu geben, werden wir die Implementierung eines solchen Tools vorstellen.

Da die von Facebook gebotenen Features ziemlich mächtig sind, ist vor Funktionen, die einen Entwickler besonders viele Nutzerdaten auslesen lassen oder die besonders reichweitenstark sind, ein Freigabeprozess geschaltet. Mit einigen unserer Tipps wirst du in Kapitel 9 erfahren, wie dieser Prozess gemeistert werden kann.

Hast du eine erfolgreiche Anwendung bereits programmiert (oder läuft sie bereits), wird dich sicherlich auch interessieren, wie die Performance der Anwendung ist. Zu diesem Zweck werden im 10. und damit letzten Kapitel die Facebook-App Analytics behandelt. Ein schöner Abschluss, wie wir finden, den schließlich muss man seinen Erfolg ja auch irgendwie messen!

Checkliste – Was wird benötigt?

Wir wissen, du bist schon voller Motivation und möchtest am liebsten sofort anfangen! Damit du aber mittendrin nicht so oft rausgerissen wirst, kannst du schon einmal überprüfen, ob du alle folgenden Dinge schon bereit hast. Denn darauf wirst du im Verlauf des Buches angewiesen sein.

E-Mail-Adresse und Mobilfunknummer (oder Kreditkarte)

Das Einfache zum Start: Um eine Facebook Anwendung zu entwickeln, wird ein persönlicher Facebook-Account benötigt. Er erfordert eine E-Mail-Adresse. Des Weiteren wird für die Verifizierung deines Facebook-Entwickler-Accounts entweder eine Mobilfunknummer oder eine Kreditkarte verausgesetzt.

Mac oder Windows-Rechner (mit Google Chrome)

Eine Empfehlung vorweg: Unix-basierte Systeme regieren das Netz und die Entwicklergemeinde. Da Mac OS X auf Unix basiert und ein weit verbreitetes System ist, sollte ein Mac eure erste Wahl sein. Solltet ihr einen Windows-Rechner besitzen, könnt ihr dieses Buch selbstverständlich dennoch zu 100% verwenden. Als Browser empfehlen wir Google Chrome, da er ausgereifte Entwicklerwerkzeuge (inklusive Emulation von Mobile- und Tablet-Geräten) bereits vorinstalliert hat.

Der Besitz von mobilen Geräten wie iPhone oder Android Phones oder Tablets ist von Vorteil, aber kein Muss. Die Verwendung eines Emulators, wie ihn beispielsweise Chrome anbietet, ist ausreichend für den Beginn.

Webserver mit SSL

Der Server bzw. das »Backend«-Teil einer Facebook-Anwendung ist allgemein »plattformunabhängig«. Die Facebook-API arbeitet auf Basis des HTTP-Protokolls. Facebook bietet daher SDKs für eine Vielzahl an Skriptsprachen an (beispilesweise PHP, Java, Node.js, Ruby usw.). Ebenso ist die Wahl des Webservers frei, auf Grund der weiten Verbreitung sowie der niedrigen Einstiegshürden werden wir uns in diesem Buch schlicht auf klassische Apache-Bundles (XAMP/MAMP) beziehen. Wichtig ist lediglich, dass der Server mit SSL gesicherte Seiten (HTTPS) ausliefern kann.

PHP 5.4, PHP Standards Recommendation & Composer

Mit der Einführung der Graph-API v2.0 und dem damit verbundenen Update des PHP-SDKs auf v4.0 wird auch eine neuere PHP-Version vorausgesetzt: Mindestens PHP Version 5.4. sollte auf dem Rechner installiert sein.

Des Weiteren folgt der SDK der sogenannten PHP Standards Recommendation (kurz: PSR). PSR-Standards werden von der Framework Interoperability Group (http://www.php-fig.org/) erstellt. Ziel ist es, einheitliche Ansätze zur Lösung allgemeiner Probleme der PHP-Community zu lösen. Hierzu gehört beispielsweise das automatische Laden von Klassendateien, der dazugehörige Standard zum Improved Autoloading nennt sich PSR-4. Ein weit verbreitetes Tool dieses Dependency Management ist die Open-Source-Software Composer (https://getcomposer.org/).

Es ist weiterhin möglich, Klassendateien über require oder include manuell zu laden, wobei es sich allerdings empfiehlt, die neuen Standards zu verwenden.

PHP-Frameworks

Eine weitere Sache, die du unbedingt benötigst (falls du sie nicht ohnehin schon hast), ist dein favorisiertes PHP-Framework. In Zeiten von Mobile- und User-Interface fokussierten Anwendungen verlieren aufwendige Backend-Services zwar immer mehr an Bedeutung, dennoch sind sie letztendlich unverzichtbar.

Für Backend-Scripts und Datenbankoperationen werden wir in diesem Buch PHP und MySQL verwenden. Alle Code-Beispiele werden wir Framework-unabhängig mit reinem PHP/MySQL bereitstellen. Auf die Verwendung eines PHP-Frameworks solltest du allgemein jedoch nicht verzichten. Falls du noch kein Framework verwendest:

CodeIgniter

Das von EllisLab entwickelte Framework ist besonders für Einsteiger geeignet und verfügt über eine große Entwicklergemeinde (http://ellislab.com/codeigniter).

Laravel

Laravel gilt als der neue »Star« in der PHP-Gemeinde. Obwohl oder weil das auf Symfony basierende Framework relativ jung ist, besitzt es bereits nach 2 Jahren mehr »Stars« und »Forks« auf Github als Symfony (erstes Release: 2005) oder CodeIgniter (erstes Release: 2006). Selbstverständlich bringt das Framework eine höhere Komplexität mit sich (http://laravel.com/).

Symfony2

Symfony2 ist nur für fortgeschrittene Entwickler geeignet. Wer sich als Anfänger sieht, sollte besser die Finger davon lassen. Mit entsprechendem Wissen ist Symfony2 für komplexe Großprojekte passend (http://symfony.com/).

Zend

Zend Technologies ist die treibende Kraft der Open-Source-Software PHP. Daher kann man das Zend Framework mehr oder weniger als das »offizielle« PHP-Framework betrachten. Auf Grund der weiten Verbreitung und des Supports ist Zend eine adäquate Wahl für Großunternehmen (http://framework.zend.com/).

Phalcon

Phalcon verspricht die höchste Performance unter den populären PHP-Frameworks. Ein kleiner bis großer Haken: Für die Installation der Framework-Extension wird ein Root-Zugriff auf den Server benötigt (http://phalconphp.com/)

Vielmehr als nur eine Datenbank: Facebooks Parse

Als Alternative zum klassischen PHP/MySQL-Ansatz werden wir parallel auf den Facebook-Service „Parse“ eingehen (http://www.parse.com). Parse hat es sich zum Ziel gesetzt, das Entwickeln von nativen mobilen Anwendungen zu vereinfachen. Hierfür bietet der Cloud-Service objektorientierte Datenbankoperationen und weitere Tools wie Bildbearbeitung auf Basis von (u.a.) JavaScript an. Die Gründe für die Nutzung des Services werden schnell offensichtlich:

100% JavaScript

Anstelle von drei unterschiedlichen Sprachen (JavaScript, PHP, MySQL) benötigen wir lediglich eine Sprache. Dies erleichtert die Programmierung und eliminiert Kommunikationsprobleme zwischen unterschiedlichen Systemen.

Zukunftssicher

Facebook hat Parse für ca. 85 Millionen Dollar aufgekauft. Spätestens seit der F8 2014 gehört Parse zum Facebook-Entwickler-ABC. Eine Investition in (Wissen über) Parse ist eine Investition in Facebook.

Mobile First

Der »Mobile«-Markt ist ein Wachtumsmarkt. Parse bietet eine Handvoll Tools für die native Mobile-Anwendungsentwicklung (iOS/Android/Windows/Unity) an. Wer sich in der Zukunft mit diesem Thema beschäftigen möchte, schlägt zwei Fliegen mit einer Klappe.

Multi-Platform

Über das PHP-SDK sowie die REST-API kann Parse mit Backend-Skriptsprachen angesprochen werden. Hierdurch ist eine Integration in bestehende oder verknüpfte Systeme problemlos möglich.

Los geht’s!

Nachdem wir dich darauf vorbereitet haben, was dich in diesem Buch erwartet, kommen wir im folgenden Kapitel zur Einrichtung deiner ersten Facebook-Anwendung. Wir wissen, dass du es kaum erwarten kannst und wünschen dir viel Spaß dabei! Los geht’s!

Kapitel 2. Hallo Welt, hallo Facebook

Minimalismus ist der Weg zum Erfolg. Das wusste nicht nur Steve Jobs, selbst der Anhalter aus der 1998er Komödie »Verrückt nach Mary« (engl. »There’s Something About Mary«, u.a. mit Ben Stiller und Cameron Diaz) stützte hierauf sein Geschäftsmodell. Wer sich nun nicht den ganzen Film (nochmal) ansehen möchte, für den kommt hier eine kleine Erinnerungsstütze:

Hitchhiker: You heard of this thing, the 8-Minute Abs?

Ted (Ben Stiller): Yeah, sure, 8-Minute Abs. Yeah, the exercise video.

Hitchhiker: Yeah, this is going to blow that right out of the water. Listen to this: 7... Minute... Abs.

Daher: Wir werden nun versuchen, innerhalb von 7 Minuten unsere erste Facebook-Anwendung zu erstellen! Kein langes »Wieso, Weshalb, Warum«, verteilt auf 100 Seiten, sondern rein ins kalte Wasser, und später kümmern wir uns um die Details.

Wenn du einen Facebook-Account besitzt sowie einen Webserver mit SSL-Zertifikat zur Verfügung hast, garantieren wir einen Erfolg innerhalb von 7 Minuten! Wenn du mehr als 7 Minuten brauchen solltest: Jede extra Minute gibt es kostenlos – frei Haus.

Kleiner Wermutstropfen: Solltest du diese Bedingungen nicht erfüllen, plane bitte 1–3 Stunden für die Einrichtung ein.

Im Anschluss an die Erstellung deiner ersten sogenannten Canvas-Anwendung werden wir auf alle weiteren Facebook-Anwendungstypen eingehen.

Die erste Facebook-Anwendung

Das Erstellen einer Facebook-Anwendung mag zu Beginn komplex erscheinen. Für deine erste App musst du jedoch lediglich die 5 folgenden Schritte meistern:

Arbeitsumgebung einrichten

Eine »Hallo Welt«-HTML-Seite erstellen

Facebook-Developer-Account erstellen

Facebook-Anwendungs-Konfiguration erstellen

Anwendung testen & erweitern

Noch etwas extra Motivation: Übung macht den Meister. Bei der zweiten Anwendung werden es weniger Schritte sein und du wirst die verbleibenden Schritte schneller durchführen.

Arbeitsumgebung einrichten

Bevor wir zum ersten Mal in die Facebook-Welt vorstoßen, sollte sichergestellt werden, dass wir lokal eine einfache HTML-Website ans Laufen bringen können. Solltest du mit diesem Thema bereits vertraut sein, kannst du einfach zu Punkt 2 »Hallo Welt- HTML-Seite erstellen« springen.

Arbeitsbereich organisieren

Falls nicht: Es empfiehlt sich, zunächst einen gut organisierten Arbeitsbereich einzurichten. Später aufzuräumen ist immer aufwendiger, als von Beginn an Ordnung zu halten. Erstelle daher ein einfach zu erreichendes Arbeitsverzeichnis für die Facebook-Test-Projekte. Für Mac-Nutzer empfiehlt es sich, ein Verzeichnis im User-Verzeichnis zu erstellen (Bsp.: /Users/dein_name/facebook), Windows-Nutzer sollten eher ein neues Verzeichnis auf oberster Ebene erstellen (Bsp.: C:\www\facebook), um jegliche Verwirrung zu vermeiden. Konstrukte mit langen Pfadnamen und Leerzeichen wie beispielsweise C:\Users\{username}\AppData\Roaming, C:\Users\{username}\AppData\Local oder \Documents and Settings\{username} führen letzendlich nur zu Problemen.

Für jedes Projekt solltest du ein eigenes Verzeichnis erstellen. Innerhalb jedes Projektes bietet sich folgende Struktur an:

Assets – für Photoshop-Layouts & Co.

Backups – für Datenbank-Exporte und Ähnliches

Docs – für Dokumentationen, Notizen oder Tabellen

www – für deinen Programmcode

Da unser erstes Projekt eine »Hallo Welt«-Anwendung ist, nennst du dein Projektverzeichnis hello_world. Der vollständige Projektpfad sollte demnach /Users/dein_name/facebook/hello_world für Mac-Nutzer und C:\facebook\hello_word für Windows sein, der Pfad zum Programmcode /Users/dein_name/facebook/hello_world/www bzw. C:\facebook\hello_word\www.

Webserver einrichten

Für den Betrieb einer Facebook-Anwendung wird ein Webserver benötigt. Er kümmert sich um die Auslieferung von Bildern, Stylesheets, JavaScript-Dateien und HTML-Templates sowie ihre Generierung.

Auch wenn Facebook-Anwendungenen »in« Facebook ablaufen, ist es für den größten Teil nicht notwendig, in der Entwicklungsphase einen öffentlichen Webserver zu verwenden. Einer lokalen Entwicklungsumgebung steht also nichts im Wege, auf Sonderfälle werden wir später zurückkommen.

Ein lokaler Webserver ist in weniger als 30 Minuten eingerichtet. Die einfachste Methode hierfür ist die Verwendung von Paketen wie XAMPP (https://www.apachefriends.org/) oder MAMP (). Beide Software-Bundles stehen kostenlos zum Download zur Verfügung und bieten einen Apache-Webserver, MySQL-Datenbankserver und PHP sowie weitere Scriptsprachen »out of the box« an. MAMP ist das populärste Mac-Paket, XAMPP hingegen ist auf Windows-Systemen weit verbreitet, da MAMP bisher lediglich für Mac-Systeme verfügbar war. Inzwischen ist allerdings auch eine MAMP für Windows erschienen.