5.8 Twitter

Mit iOS 5 hat Apple über das Twitter-Framework die native Unterstützung von Twitter eingeführt. Es wird Ihnen eventuell schon in den Einstellungen von iOS 5 aufgefallen sein: Twitter ist ebenso integraler Bestandteil von iOS wie die iCloud.

Die iOS-API bietet zwei Möglichkeiten der Kommunikation mit Twitter. Die erste ist das direkte Senden von Tweets aus einer App an ein Twitter-Konto. Dabei können Sie Text, Bilder und URLs versenden. Zum Benutzer hin öffnen Sie dafür mit dem TWTweetComposeViewController ein Formular, in das der Benutzer Text einfügen kann. Sie können dem Formular einen Text vorgeben, ein Bild anhängen und eine URL übergeben.

Die zweite Art der Kommunikation ist die Klasse TWRequest. Diese Klasse erlaubt den direkten Zugriff auf die Twitter-API. Unter Verwendung dieser Klasse können Sie sich einen eigenen Twitter-Client programmieren, Tweets und Profile abrufen und auch sonst alle Funktionen abbilden, die Twitter anbietet.

In unserem Fototagebuch bietet sich die erste Variante an: die Verwendung des TWTweetComposeViewController. Diesen werden wir so in die App integrieren, dass der Benutzer jeden Eintrag auf Knopfdruck samt Bild bei Twitter veröffentlichen kann.

5.8.1 Der Twitter-Account

Damit Sie das Twitter-Framework erfolgreich in einer App nutzen können, muss ein Twitter-Account in den iOS-Systemeinstellungen vorhanden sein. Falls das noch nicht passiert ist, öffnen Sie auf Ihrem iDevice die Einstellungen und tragen dort unter Twitter die Zugangsdaten für Ihren Twitter-Account ein (siehe Abbildung 5.35). Falls Sie noch keinen Twitter-Account besitzen, legen Sie sich auf http://www.twitter.com einen solchen an.

Abbildung 5.35 Twitter-Einstellungen im iOS

Über den TWTweetComposeViewController können Sie jedem Tweet automatisch Ihren aktuellen Standort übergeben. Damit diese Funktion innerhalb des Fototagebuchs verfügbar ist, aktivieren Sie in den Twitter-Einstellungen von iOS die betreffende Option (siehe Abbildung 5.36).

Abbildung 5.36 Zugriff auf Standortdaten

Damit ist Ihr iDevice für den Versand von Twitter-Nachrichten über das Twitter-Framework bereit.

5.8.2 Hinzufügen des Twitter-Frameworks

Öffnen Sie nun das Fototagebuch-Projekt, und fügen Sie als Erstes das Twitter-Framework dem Projekt hinzu. Dieser Schritt ist notwendig, damit der Compiler (bzw. der Linker) die entsprechenden Bibliotheken in die App einbauen kann. Die Einstellung dafür finden Sie in Xcode, wenn Sie im Project navigator das Projekt auswählen, in der Spalte rechts neben dem Project navigator das Target PhotoDiary wählen und im Hauptfenster im Tab Summary nach unten scrollen, bis der Abschnitt Linked Frameworks and Libaries erscheint. Dort öffnen Sie mit dem Plus-Button den Dialog zum Hinzufügen weiterer Bibliotheken (siehe Abbildung 5.37).

Abbildung 5.37 Hinzufügen einer Bibliothek

In diesem Dialog können Sie durch Texteingabe die Ansicht filtern. Suchen Sie nach dem Twitter-Framework, und binden es mit dem Add-Button ein (siehe Abbildung 5.38).

Abbildung 5.38 Einbinden des Twitter-Frameworks

5.8.3 Integration in das Fototagebuch

Der nächste Schritt ist die Entscheidung, an welcher Stelle der App eine Twitter-Integration sinnvoll wäre. Da der gemeine Benutzer Twitter wohl dafür benutzen wird, seine Follower darüber zu informieren, wo er sich gerade aufhält, ist ein guter Platz für die Twitter-Integration der View, in dem man einen neuen Tagebucheintrag anlegt. Gemäß dem MVC-Muster ist der View selbst kein geeigneter Ort für den Code, daher wählen Sie den ItemViewController, um die App mit Twitter anzureichern. Der ItemViewController ist von der Plattform unabhängig (iPhone oder iPad), sodass wir den Twitter-Code nur an einer Stelle einbauen und pflegen müssen.

Öffnen Sie also die Datei ItemViewController.h, und binden Sie zunächst die Header-Datei des Twitter-Frameworks ein:

#import <UIKit/UIKit.h>
#import "DiaryEntry.h"
#import "AudioRecorderController.h"
#import <Twitter/Twitter.h>
[...]

Durch den Import der Header-Datei kennt der Compiler nun die Eigenschaften des im vorangegangenen Schritt eingebundenen Twitter-Frameworks.

Jetzt kommt die eigentliche Arbeit. Wir werden einen neuen Button zur GUI hinzufügen, über den der Benutzer den TWTweetComposeViewController aufrufen kann. Beim Aufruf des TWTweetComposeViewController werden wir den Text des aktuellen Fototagebuch-Eintrags übernehmen sowie das betreffende Foto.

Öffnen Sie also nun den Itemviewcontroller. Je nach Versionsstand des Projektes finden Sie diesen in der Datei ItemViewController.xib oder im Storyboard (MainStoryboard.storyboard bzw. MainStoryboard-iPad.storyboard). Wenn Sie das Projekt mit dem Git-Hash e6190f8 ausgecheckt haben, ist das Projekt noch nicht auf Storyboards umgestellt. In diesem Fall verwenden Sie bitte die Datei ItemViewController.xib. Beim Projektstand mit Storyboards müssen Sie zwei Views bearbeiten: einmal den View für das iPhone im MainStoryboard und einmal den View für das iPad im MainStoryboard-iPad. Der betreffende View liegt dort im Viewcontroller "Eintrag". Die nachfolgend beschriebenen Schritte für den View der iPhone-Version müssen Sie analog für das iPad wiederholen.

Fügen Sie der Toolbar am unteren Ende des Views ein weiteres Bar Button Item hinzu (siehe Abbildung 5.39).

Abbildung 5.39 Ein weiteres Bar Button Item

Platzieren Sie das Bar Button Item ganz unten links auf dem View: dort, wo noch ein Platz frei ist (siehe Abbildung 5.40).

Abbildung 5.40 Der designierte Twitter-Button

Im Projektverzeichnis des Fototagebuches finden Sie zwei Grafiken für den Button: twitter.png und twitter@2x.png. Wenn Sie beide Grafiken in Ihr Projektverzeichnis ziehen, können Sie dem Button anschließend die Grafik zuweisen. Wählen Sie dazu zunächst den Button aus, und weisen Sie ihm anschließend im Attributes inspector die Grafik twitter.png zu (siehe Abbildung 5.41).

Abbildung 5.41 Zuweisen der Grafik an den Twitter-Button

Im selben Einstellungsbereich des Attributes inspector entfernen Sie dann noch den Haken an der Checkbox Enabled.

Erzeugen Sie anschließend in der Header-Datei des Itemviewcontrollers ein Outlet sowie eine Action für den Button. Dem Outlet geben Sie den Bezeichner tweetButton und der Action den Namen composeTweet:

[...]
@property (nonatomic, weak) IBOutlet 
UIBarButtonItem *tweetButton;
[...]
- (IBAction)composeTweet:(id)sender;
[...]

In der Implementierungsdatei muss dann die entsprechende synthesize-Anweisung für die Property stehen:

@synthesize tweetButton;

Die Möglichkeit, einen Tweet zu verfassen, soll dann gegeben sein, wenn ein Text für einen Fototagebuch-Eintrag vorhanden ist – kein Text, kein Tweet. Daher haben wir den Twitter-Button auf der GUI der App standardmäßig deaktiviert. Um den Button zu aktivieren, sobald Text vorhanden ist, erweitern wir die Methode saveText: in der Datei ItemViewController.m um die fett gedruckte Zeile:

- (IBAction)saveText:(id)inSender {
self.tweetButton.enabled = YES;
[self.view endEditing:YES];
self.item.text = self.textView.text;
[self saveItem];
}

Listing 5.69 Twitter-Button aktivieren

Diese Methode wird aufgerufen, sobald der Benutzer die Texteingabe mit dem Save-Button beendet (siehe Abbildung 5.42). Damit ist davon auszugehen, dass Text vorhanden ist, den zu twittern sich lohnen könnte.

Abbildung 5.42 Der »Save«-Button aktiviert den Twitter-Button.

Ist der Twitter-Button aktiviert, ruft das Betätigen desselben die Methode composeTweet: auf – die entsprechende Verknüpfung haben Sie ja bereits erstellt. Daher ist es jetzt an der Zeit, die Methode zu implementieren. Fügen Sie in die Implementierungsdatei des Itemviewcontrollers die folgende Methode ein:

- (IBAction)composeTweet:(id)sender {
    if([TWTweetComposeViewController canSendTweet]){
        Medium *theMedium = [self.item 
          mediumForType:kMediumTypeImage];
        TWTweetComposeViewController *tweet = 
            [[TWTweetComposeViewController alloc] init];
        [tweet setInitialText:[textView text]];
        [tweet addImage:[UIImage 
            imageWithData:theMedium.data]];
        [self presentViewController:tweet 
            animated:YES completion:NULL];
    } else {
        UIAlertView *alert = [[UIAlertView 
            alloc] initWithTitle:@"Obacht!"
            message:@"Bitte Twitter-Account 
                in den Systemeinstellungen einrichten."
            delegate:self
        cancelButtonTitle:@"Ok"
        otherButtonTitles:nil];
        [alert show];
    }
}

Listing 5.70 Twittercontroller anzeigen

Die Methode prüft in der zweiten Zeile zunächst, ob in den Systemeinstellungen von iOS ein Twitter-Account eingerichtet ist (Methode canSendTweet). Ist dies der Fall, erzeugt die Methode in der dritten Zeile ein Objekt vom Typ Medium, mit Namen theMedium, um das Bild des aktuellen Eintrags aufzunehmen. Schließlich erzeugt die Methode ein neues Objekt vom Typ TWTweetComposeViewController.

Die Methode übergibt diesem Objekt den Text des aktuellen Fototagebuch-Eintrags über die Methode setInitialText: und fügt auch noch noch das gespeicherte Bild über addImage:, in dem es einem neuen Objekt vom Typ UIImage die Daten des Objekts theMedium übergibt. Damit sind die erforderlichen Parameter für den TWTweetComposeViewController gesetzt. Die Methode zeigt den Viewcontroller dann über die Methode presentViewController:animated:completion: an.

Der Else-Block zeigt eine Warnung über einen Alertviews, wenn kein Twitter-Account in den Systemeinstellungen eingerichtet ist.

Damit ist die Twitter-Integration fertig! Starten Sie die App auf einem iDevice, fügen Sie einen neuen Eintrag zum Fototagebuch hinzu (oder öffnen Sie einen bestehenden Eintrag), und drücken Sie den neuen Twitter-Button (siehe Abbildung 5.43).

Abbildung 5.43 Nach der Text-Eingabe ist der Twitter-Button aktiviert.

Es erscheint der TWTweetComposeViewController mit dem Text des Eintrags und dem Foto (sofern vorhanden). Den Text können Sie im TWTweetComposeViewController vor dem Absenden noch beliebig editieren (siehe Abbildung 5.44).

Abbildung 5.44 Der TWTweetComposeViewController

Durch Betätigen des Send-Buttons schicken Sie den Tweet ab. Das Ergebnis erscheint unmittelbar auf Ihrer Twitter-Seite (siehe Abbildung 5.45).

Abbildung 5.45 Der neue Tweet auf »www.twitter.com« in der Übersicht

In der Detailansicht ist auch das Foto zu sehen (siehe Abbildung 5.46).

Abbildung 5.46 Tweet mit Foto. Heureka!

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.