Tutorial: Facebook Plugin für PhoneGap (iOS)

Tutorial: Facebook Plugin für PhoneGap (iOS)


Facebook erobert die mobilen Plattformen nicht nur mit eigenen Anwendungen, sondern findet auch in immer mehr Drittanbieter Anwendungen einen Platz. Mit Facebooks mobiler Strategie, sollen besonders auch die App-Entwickler von den Möglichkeiten des neuen OpenGraph profitieren.

Eine der Lösungen für die App-Erstellung ist PhoneGap (Apache Cordova). Auch hieraus ist eine Facebook Verbindung möglich.

Bereits seit ein paar Monaten ist das Facebook Plugin für PhoneGap verfügbar, nachdem das Projekt auch auf den FB Mobile Hacks vorgestellt wurde, haben wir uns der Sache einmal angekommen. Im folgenden Tutorial erklären wir euch wie ihr (fast) ohne iOS/Xcode Erfahrung zur ersten Mini-Facebook App auf dem iPhone/iPad kommt. Folgendes wird benötigt:

Was ist PhoneGap?

Zunächst eine kurze Einführung: PhoneGap ist eine Anwendungsplattform mit der ihr „native“ Apps für 7 verschiedene mobile Betriebsysteme (iOS, Android, Symbian, WebOS, Bada, Black Berry OS und Windows Mobile 7) entwickeln könnt, am wichtigsten sind hierbei natürlich iOS und Android. Zur Enticklung werden die Web-Technologien HTML, CSS und JavaScript verwendet. Dies vereinfacht den Einstieg in die mobile Anwendungsentwicklung erheblich. Doch der Begriff „nativ“ ist hierdurch nur teilweise zutreffend: ein Großteil der Programmabläufe laufen lediglich in einem WebView ab, d.h. die App ist eine Art Container für einen Mini-Browser, es ist jedoch auch möglich über die PhoneGap JavaScript API nativen Code anzusprechen. Im Core stellt PhoneGap eine Reihe von plattformübergreifende Funktionen an, beispielsweise um die Verbindungsart des Nutzers (Wifi, 3G, …) zu erhalten. Des weiteren kann man über Plugins systembezogene Funktionen ansprechen (iOS Beispiel: NativeControls um die iOS-typischen Buttons im Footer zu erhalten. Tutorial: PhoneGap Tutorial Series – #5 Third-Party Plugins (NativeControls)).

Ein Highlight des PhoneGap Projekts ist der „Build“ Service. Dieser produziert aus einer ZIP File eures HTML/JS Codes 7 verkaufsfertige Pakete. Leider ist das PhoneGap Facebook Plugin nicht mit dem Build Service kompatibel. Daher ist es momentan noch zwingend notwendig iOS / Android PhoneGap Apps mit den jeweiligen SDKs/Tools zu erstellen. Nach Aussagen der Entwickler wird zur Zeit an einer Integration in den Build Service gearbeitet, Release Date unbekannt.

Los’s gehts!

Auf dem System sollte eine funktionierende iOS Entwicklungsumgebung (Xcode) installiert sein, des weiteren benötigt ihr einen Git Client. Wie ihr Zertifikate erstellt und einen Entwickler-Account anlegt, werden wir hier nicht behandeln. Bitte hierfür die Apple Docs lesen oder „googlen“.

Git zu „Path“ hinzufügen

Es erspart einiges an Zeit Git zur Systemvariable „path“ hinzuzufügen. Dazu einfach den Terminal öffnen und in den Ordner „~/“ wechseln (das Sonderzeichen ~ erhält man btw. mit ALT+N [+Leerzeichen]). Im Anschluss „open -e .bash_profile“ zum Öffnen der Datei eingeben. Falls die Datei noch nicht vorhanden ist, mit „touch .bash_profile“ eine neue Datei erstellen. Im Editor „/usr/local/git/bin“ zu PATH hinzufügen, die entsprechende Zeile in Euerer Datei sollte ca. wie folgt aussehen:

export PATH=/opt/local/bin:/opt/local/sbin:/usr/local/git/bin:$PATH

PhoneGap zu Xcode hinzufügen 

Erstellt einen neuen Arbeitsordner (Bspweise „/Users/{USERNAME}/Projekte/phonegap_facebook/“). Phonegap können wir direkt von Github herunterladen:

git clone git://github.com/phonegap/phonegap.git

Da das Facebook Plugin nur mit den PhoneGap Versionen 1.0 – 1.4.1 kompatibel ist, darf nicht die neuste Version (aktuell 1.5.) verwendet werden. Eine Auflistung der verfügbaren Tags erhalten wir per „git tag -l“ (nicht vergessen nach dem Clone in den „phonegap“ Ordner zu wechseln!). Um die Version zu wechseln folgenden Befehl ausführen:

git checkout 1.4.1

Im Anschluss das Paket phonegap/lib/ios/PhoneGap-1.4.1.dmg installieren. Beim Erstellen eines neuen Projekts in Xcode steht euch nun der Typ „PhoneGap-based Application“ zur Verfügung.

Nach dem Erstellen zum Testen der Installation „Run“ klicken, die Dummy Anwendung sollte starten und anzeigen, dass die Datei „index.html“ nicht gefunden wurde. Um dies zu beheben muss der www Ordner, der vom PhoneGap Plugin bereits angelegt wurde, zum Projekt hinzugefügt werden. Dazu das Projekt im Finder öffnen und den www Ordner ins Xcode Projekt ziehen. Nach dem „Loslassen „des Ordners erscheint ein Dialog, hier die Option „Create folder references for any added folders“ wählen.

Nach erneutem Starten der Anwendung erscheint eine Mini „Hallo Welt“ Seite: Teil 1 geschafft!

PhoneGap Facebook Plugin installieren

Erstellt im Facebook Developer Bereich eine neue Anwendung, tragt Eure iOS Bundle-ID in die Anwendungseinstellungen ein und notiert euch die Facebook App ID.

Nun wieder im Terminal in das zuvor erstellte Projektverzeichnis („/Users/{USERNAME}/Projekte/phonegap_facebook/“) wechseln und das PhoneGap Facebook Plugin laden:

git clone git://github.com/davejohnson/phonegap-plugin-facebook-connect.git

Im PhoneGap Facebook Plugin sind Referenzen auf die iOS und Android SDKs enthalten. Um diese Verknüpfungen aufs lokale Dateisystem zu laden, in den phonegap-plugin-facebook-connect Ordner wechseln und folgenden Befehl ausführen:

cd phonegap-plugin-facebook-connect
git submodule update --init

Nach offizielle Doku soll nun per Patch die Datei facebook_js_sdk.js erstellt werden. Leider funktioniert dies aktuell eher weniger. Da der entsprechende Ordner nicht vorhanden ist … (update hierzu folgt).

cd lib/facebook-js-sdk && php all.js.php >> ../facebook_js_sdk.js && cd .. && patch < facebook-js-patch

Als Zwischenlösung haben wir folgenden Befehl (im Ordner phonegap-plugin-facebook-connect//lib) ausgeführt:

patch < facebook-js-patch

Dies führt zu Fehlermeldungen, scheint unterm Strich aber zu funktionieren.

Nun noch ein paar Kleinigkeiten:

  1. Wechselt in den Finder und zieht die Dateien FacebookConnectPlugin.h und FacebookConnectPlugin.m aus dem Ordner phonegap-plugin-facebook-connect/native/ios in den Xcode Ordner Plugins.
  2. Kopiert die Dateien phonegap-plugin-facebook-connect/example/Simple/www/index.html, phonegap-plugin-facebook-connect/www/pg-plugin-fb-connect.js sowie die per Patch erstellte facebook_js_sdk.js in den www Ordner des Projekts. Eure Facebook JavaScript Dateien müssen natürlich nicht zwingend im Root liegen. Für die Verwendung der Beispiel index.html ist dies jedoch notwendig.
  3. Kopiert Eure Facebook App ID in den init-Befehl der index.html. Dabei sollte die ID als String (d.h. mit Anführungszeichen) und nicht als Zahlenwert eingetragen werden.
    FB.init({ appId: "[APP_ID]", nativeInterface: PG.FB, useCachedDialogs: false });
  4. Im Xcode Ordner Supporting Files die Datei PhoneGap.plist öffnen und einen neuen Eintrag zum Punkt „Plugins“ hinzufügen:  Als Schlüssel (links) „com.phonegap.facebook.Connect“ und als Wert (rechts) „FacebookConnectPlugin„.
  5. In der selben Datei unter „ExternalHosts“ entweder per „*“ Wildcard alle Domains erlauben oder folgende Facebook Domains hinzufügen:
    • m.facebook.com
    • graph.facebook.com
    • api.facebook.com
    • *.fbcdn.net
    • *.akamaihd.net
  6. Findet in Supporting Files die Datei [PROJECTNAME]-Info.plist und wählt per Rechtsklick auf die Datei „Open As -> Source Code“ und fügt am Ende der Datei vor „</dict>“ folgenden XML Code ein:
    <key>CFBundleURLTypes</key>
    <array>
    <dict>
    <key>CFBundleURLName</key>
    <string>[SCHEME_ID]</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>fb[APP_ID]</string>
    </array>
    </dict>
    </array>
    [APP_ID] durch Eure Facebook App ID und [SCHEME_ID] durch eure  iOS Bundle-ID (Bspweise com.firmenname.appname) ersetzen. Speichern nicht vergessen.

    Entfernt im Ordner phonegap-plugin-facebook-connect/lib/facebook-ios-sdk/src die Dateien facebook-ios-sdk.xcodeproj und facebook_ios_sdk_Prefix.pch und legt den Ordner anschließend in den Xcode Plugins Ordner ab. Diesmal die Option „Create groups for any added folders“ wählen.

Geschafft?!
Wenn ihr alle Anweisungen richtig befolgt habt, solltet ihr nun Eure erste Mini-Facebook Anwendung auf dem iPhone am Laufen haben. Zum Starten auf in Xcode „Run“ klicken.

Wenn es beim ersten Mal nicht funktionieren sollte, nicht verzweifeln! Es ist noch kein Meister vom Himmel gefallen, des weiteren hat das Projekt noch ein paar Kinderkrankheiten (siehe Punkt „Patch“).

Feedback wie Korrekturen und Verbesserungen nehmen wir gerne entgegen. Happy Testing!

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedInBuffer this pageEmail this to someone
Veröffentlichung 20. März 2012

+ Es gibt keine Kommentare

Deinen hinzufügen