7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Mobile Development

Erstellen einer Dating-Anwendung mit Sinch: Sinch integrieren

This post is part of a series called Creating a Dating Application with Sinch.
Creating a Dating Application with Sinch: RESTful API
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

German (Deutsch) translation by Valentina (you can also view the original English article)

Dating-Anwendungen sind in letzter Zeit zu einem der beliebtesten Genres im App Store geworden. Aufgrund ihrer Natur kann die Entwicklung einer voll funktionsfähigen Dating-Anwendung jedoch eine Herausforderung sein. Im zweiten Teil dieser Serie werden wir uns ansehen, wie wir die Sinch-Plattform in einer iOS-Anwendung nutzen können, um Sprachanrufe und Nachrichten zu implementieren. Dies sind zwei Eckpfeiler für Dating-Anwendungen, die mit Sinch überraschend einfach zu implementieren sind.

1. Übersicht

Bevor wir mit dem Codieren beginnen, überprüfen wir die Anwendung, die wir erstellen. Unsere Dating-Anwendung enthält einige Kernfunktionen, auf die wir uns in diesem Tutorial konzentrieren werden. Für Konten können sich Benutzer über Facebook anmelden. Nach der Anmeldung können sie andere Benutzer der App in der Nähe sehen.

Die Benutzer werden auf dem Server gespeichert, mit dem wir über die im ersten Teil dieses Tutorials erstellte restful API kommunizieren. Sobald wir die Benutzerinformationen von Facebook erhalten haben, wird ein neuer Benutzer auf dem Server veröffentlicht und eine Sitzung erstellt. Danach wird eine Liste der registrierten Benutzer abgerufen, aus denen Sie auswählen können.

Wenn der Benutzer jemanden findet, mit dem er sprechen möchte, kann er ihm entweder eine Nachricht senden oder einen Sprachanruf einleiten. Hier kommt Sinch ins Spiel. Wir werden ihr SDK verwenden, um die ganze harte Arbeit der Bearbeitung von Sprachanrufen und Nachrichten zu erledigen.

Jetzt, da wir wissen, was wir entwickeln, ist es Zeit, loszulegen.

2. Starterprojekt

Laden Sie zunächst das Starterprojekt von GitHub herunter. Die Anwendung richtet sich an das iPhone und enthält die Benutzeroberfläche, die Facebook-Authentifizierung und die Kommunikation mit der bereits vorhandenen RESTful-API. Dadurch können wir uns auf die Integration mit Sinch konzentrieren.

Bevor wir fortfahren, möchte ich jedoch die grundlegende Architektur der App und die Kommunikation mit dem Server erläutern. Der Code, der mit der restlichen API kommuniziert, befindet sich in der UsersAPIClient-Klasse. Es verwendet die beliebte AFNetworking-Bibliothek, um die Netzwerklogik zu vereinfachen. Wenn Sie AFNetworking bereits verwendet haben, wird Ihnen dies sehr vertraut vorkommen. Wenn nicht, ist unser Tutorial über AFNetworking ein ausgezeichneter Ausgangspunkt.

In der Header-Datei finden Sie einige Methoden zur Kommunikation mit verschiedenen Endpunkten der RESTful-API, z. B. das Erstellen eines Benutzers, das Starten einer Sitzung, das Löschen eines Benutzers und vieles mehr.

Wenn eine Antwort vom Server zurückkommt, wird der JSON analysiert und zum Initialisieren eines Modells verwendet.

Apropos Modelle, es gibt ein Modell, das im Projekt verwendet wird: User. Es enthält grundlegende Informationen über einen Benutzer, wie Name, Standort, ID usw. Die Benutzer-ID ist besonders wichtig, da wir sie benötigen, um eindeutig zu identifizieren, mit wem wir bei der Integration in Sinch kommunizieren.

Nehmen Sie sich einen Moment Zeit, um das Projekt zu durchsuchen und seine Struktur besser zu verstehen. Genau wie bei Bibliotheken von Drittanbietern ist es äußerst hilfreich, Dokumentation und Quellcode zu durchsuchen, bevor Sie sie tatsächlich verwenden.

3. Erstellen und ausführen

Wenn Sie das Demo-Projekt erstellen und ausführen, sollten Sie aufgefordert werden, sich über Facebook anzumelden.

Log In with FacebookLog In with FacebookLog In with Facebook

Überprüfen Sie, ob Sie sich bei Facebook anmelden können. Nach dem Anmelden führt die Demo-Anwendung drei Dinge aus:

  • Es wird ein Benutzerdatensatz im Backend erstellt, wenn einer nicht vorhanden ist.
  • Es startet eine Benutzersitzung und erstellt ein Zugriffstoken für die Sitzung.
  • Es ruft eine Liste der Benutzer im System ab.

Wenn Sie später einige Testkonten erstellt haben, können Sie Benutzer in einem bestimmten Bereich finden. Standardmäßig wird jeder Benutzer im System zurückgegeben, da es unwahrscheinlich ist, dass sich während des Tests andere Benutzer in der Nähe befinden.

4. Erstellen Sie ein Sinch-Konto

Um das Sinch SDK verwenden zu können, müssen Sie zunächst ein Entwicklerkonto erstellen. Gehen Sie zur Sinch-Website und klicken Sie oben rechts auf Kostenlos loslegen, um sich anzumelden.

Sign Up for a Free Sinch AccountSign Up for a Free Sinch AccountSign Up for a Free Sinch Account

Geben Sie Ihre E-Mail-Adresse und Ihr Passwort ein und akzeptieren Sie die Allgemeinen Geschäftsbedingungen. Sinch startet automatisch einen Setup-Vorgang, nachdem Sie sich angemeldet haben. Zu diesem Zeitpunkt müssen Sie lediglich Ihre App benennen und eine kurze Beschreibung hinzufügen. Sie können den Rest der Startanleitung vorerst überspringen.

Besuchen Sie als Nächstes das Dashboard, um den API-Schlüssel und das Geheimnis Ihrer Anwendung abzurufen. Sie sollten Dashboard oben auf der Sinch-Website sehen, nachdem Sie sich mit Ihrem neuen Konto angemeldet haben. Wählen Sie links Anwendungen aus, wählen Sie die von Ihnen erstellte Anwendung aus und klicken Sie rechts auf das Schlüsselsymbol, um den Schlüssel und das Geheimnis anzuzeigen. Sie sollten diese Werte verfolgen, um den Sinch-Client später zu initialisieren.

Finding Your Apps Key and SecretFinding Your Apps Key and SecretFinding Your Apps Key and Secret

5. Fügen Sie das Sinch SDK hinzu

Es gibt zwei Möglichkeiten, das Sinch SDK zu Ihrem Projekt hinzuzufügen. Der mit Abstand einfachste Weg führt über CocoaPods. Fügen Sie Ihrem Podfile die folgende Zeile hinzu:

Führen Sie als Nächstes den folgenden Befehl aus, um das Sinch SDK in Ihren Arbeitsbereich zu integrieren:

In diesem Tutorial werde ich Ihnen jedoch zeigen, wie Sie das SDK hinzufügen, wenn Sie keine CocoaPods verwenden. Laden Sie zunächst das Sinch SDK für iOS herunter. Besuchen Sie den Download-Bereich der Sinch-Website und laden Sie das SDK für iOS herunter. Das Sinch SDK hängt von drei Frameworks ab, daher müssen wir unser Projekt zuerst mit diesen verknüpfen. Wählen Sie im Projektnavigator SinchTutorial und dann das SinceTutorial-Ziel.

Select the SinchTutorial TargetSelect the SinchTutorial TargetSelect the SinchTutorial Target

Wählen Sie Phasen erstellen > Binär mit Bibliotheken verknüpfen und klicken Sie unten auf das Pluszeichen.

Add LibrariesAdd LibrariesAdd Libraries

Fügen Sie der Liste der zu verknüpfenden Frameworks die folgenden Frameworks hinzu:

  • Sicherheit
  • AudioToolbox
  • AVFoundation

Wir müssen auch drei Linker-Flags hinzufügen. Suchen Sie in den Build-Einstellungen des Ziels nach anderen Linker-Flags.

Add Other Linker FlagsAdd Other Linker FlagsAdd Other Linker Flags

Fügen Sie unter Debug die folgenden Linker-Flags hinzu:

Ziehen Sie abschließend das zuvor heruntergeladene Sinch-Framework in den Ordner Frameworks im Projektnavigator. Erstellen Sie Ihr Projekt, um sicherzustellen, dass keine Fehler vorliegen. Sie können jetzt das Sinch SDK verwenden.

6. Einrichten des Sinch-Clients

Der Sinch-Client ist die treibende Kraft für die Kommunikation mit der Sinch-Plattform. Bevor wir die Messaging- oder Anruffunktionen verwenden können, müssen wir eine Instanz des Sinch-Clients initialisieren. Dazu benötigen wir den Schlüssel und das Geheimnis, die wir zuvor nach dem Erstellen unseres Sinch-Kontos abgerufen haben.

Öffnen Sie AppDelegate.h und importieren Sie das Sinch-Framework wie unten gezeigt.

Als Nächstes müssen wir eine Eigenschaft für den Sinch-Client und einen Methodenprototyp für die Initialisierung erstellen. Fügen Sie den folgenden Codeausschnitt unter der window-Eigenschaft hinzu.

Wir werden diesen Verweis auf den Sinch-Client verwenden, um Anrufe und Nachrichten einfach in Gang zu bringen. Das SINClientDelegate-Protokoll informiert uns darüber, ob die Verbindung zum Sinch-Backend erfolgreich war.

Passen Sie die AppDelegate-Klasse wie unten gezeigt an das SINClientDelegate-Protokoll an.

Wechseln Sie zur Implementierungsdatei der AppDelegate-Klasse und implementieren Sie die Methode sinchClientWithUserId: wie unten gezeigt.

Wir werden diese Methode später verwenden, um mit dem Sinch-Backend zu kommunizieren, nachdem sich der Benutzer angemeldet hat. Denken Sie daran, den Anwendungsschlüssel und das Geheimnis einzugeben. Andernfalls können Sie keine Verbindung zum Sinch-Backend herstellen.

Nach der Initialisierung des Clients teilen wir Sinch mit, dass wir die Messaging- und Anruffunktionen verwenden werden. Anschließend starten wir den Client und stellen eine Verbindung zu den Sinch-Diensten her, um eingehende Anrufe entgegenzunehmen.

Implementieren Sie als Nächstes die folgenden Delegatmethoden des SINClientDelegate-Protokolls in der AppDelegate-Klasse:

Diese Delegate-Methoden protokollieren Fehler in der Xcode-Konsole, falls sie auftreten, und informieren uns auch, wenn wir erfolgreich eine Verbindung mit Sinch hergestellt haben.

7. Initialisieren des Sinch-Clients

Öffnen Sie FindUsersViewController.m und scrollen Sie zur Methode beginUserSession. Wenn bei dieser Methode eine Sitzung ohne Fehler gestartet wurde, wird der Abschlussblock ausgeführt. Dies ist ein guter Zeitpunkt, um den Sinch-Client zu initialisieren. Ersetzen Sie den //TODO-Kommentar durch den folgenden Codeblock:

Dies ruft die Methode zum Starten des Sinch-Clients auf und ermöglicht es uns, seine Funktionen zu verwenden. Erstellen Sie die App und führen Sie sie aus. Nachdem Sie eine Liste der Benutzer abgerufen haben, bestätigen Sie, dass die Verbindung zum Sinch-Backend erfolgreich war, indem Sie die Protokolle in der Xcode-Konsole überprüfen.

8. Implementieren des Messagings

Wir kommen jetzt zum lustigen Teil und fügen mithilfe des Sinch SDK eine Messaging-Komponente mit sehr wenig Code hinzu. Öffnen Sie zunächst MessagingViewController.m und importieren Sie das Sinch-Framework.

Ähnlich wie das SINClientDelegate-Protokoll hilfreiche Methoden bietet, mit denen wir den Status des Clients verfolgen können, informiert uns das SINMessageClientDelegate-Protokoll über eingehende und ausgehende Nachrichten, deren Status und vieles mehr.

Passen Sie zunächst die MessagingViewController-Klasse an dieses Protokoll an, indem Sie die Schnittstelle der Klasse aktualisieren.

Um Messaging zu implementieren, benötigen wir außerdem eine SINMessageClient-Instanz, um die Verantwortlichkeiten für Messaging zu übernehmen. Fügen Sie eine Eigenschaft für die SINMessageClient-Instanz hinzu.

Wir können eine Instanz eines Messaging-Clients aus dem Sinch-Client erstellen, den wir bereits im App-Delegaten haben. Wenn der View Controller geladen wird, müssen wir einen initialisieren und den View Controller als seinen Delegaten festlegen. Fügen Sie der viewDidLoad-Methode des View Controllers den folgenden Codeblock hinzu:

Nachdem wir nun ein Objekt zum Senden und Empfangen von Nachrichten und einen Delegaten zum Behandeln dieser Nachrichten haben, fügen wir Code zum Erstellen einer Nachricht hinzu. Suchen Sie die Methode sendMessage: am unteren Rand des Ansichtscontrollers und fügen Sie die folgende Implementierung hinzu:

Eine SINOutgoingMessage-Instanz kontaktiert Sinch und verschiebt die Nachricht an den Empfänger. Wir bestimmen den Empfänger, indem wir seine Benutzer-ID aus dem Benutzermodell angeben. Sinch weiß, wohin die Nachricht gehen soll, indem es sie mithilfe einer Kombination aus Anwendungsschlüssel, Geheimnis und der ihm übergebenen eindeutigen Benutzer-ID über die API weiterleitet.

Da eine Nachricht entweder eingehend oder ausgehend sein kann, fügen Sie oben im Ansichtscontroller eine Aufzählung hinzu, um beide Szenarien zu berücksichtigen. Fügen Sie es unter den Importanweisungen hinzu.

Schließlich benötigen wir den Messaging-Client, um die Nachricht tatsächlich zu verarbeiten und zu senden. In diesem Ansichts-Controller müssen wir sowohl das Senden als auch das Empfangen von Nachrichten behandeln. Fügen Sie das folgende Codefragment hinzu, um eine Nachricht zu erhalten:

Immer wenn wir eine Nachricht erhalten, fügen wir sie dem messages-Array hinzu und laden die Tabellenansicht neu, um sie anzuzeigen. Es ist wichtig zu beachten, dass das SINMessage-Objekt aus zwei Elementen besteht, dem Nachrichtenobjekt selbst und seiner Richtung (eingehend oder ausgehend).

Nachdem wir Nachrichten senden und empfangen können, müssen wir wissen, wann eine Nachricht vollständig gesendet wurde, wenn wir der Autor sind, damit wir die Datenquelle aktualisieren und die Tabellenansicht neu laden können. Um dies zu erreichen, implementieren wir die messageSent:receptId: wie unten gezeigt.

Wir können auch einige der verbleibenden Delegate-Methoden implementieren, um den Messaging-Prozess zu beheben, falls etwas schief gehen sollte. Fügen Sie die folgenden Delegatmethoden unterhalb der messageSent :recipientId:-Methode hinzu.

Zu diesem Zeitpunkt ist das Messaging mit Sinch einsatzbereit. Als letztes müssen wir die tableView: cellForRowAtIndexPath:-Methode bearbeiten, um die Nachrichten anzuzeigen. So sollte die Implementierung aussehen:

9. Testen Sie Messaging

Erstellen Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass keine Fehler vorliegen. Sie können die Messaging-Funktion testen. Zum Ausprobieren benötigen Sie Zugriff auf ein anderes Facebook-Konto.

Erstellen und führen Sie auf Ihrem iOS-Gerät die Anwendung aus und melden Sie sich mit dem ersten Konto an. Führen Sie im iOS-Simulator eine andere Instanz der Anwendung aus und melden Sie sich mit dem zweiten Konto an. Navigieren Sie auf jedem Gerät zum Profil des jeweils anderen und tippen Sie auf Nachricht.

Trying Out Messaging Using SinchTrying Out Messaging Using SinchTrying Out Messaging Using Sinch

An dieser Stelle können Sie eine Nachricht eingeben und auf Senden klicken. Es kommt fast sofort auf dem Gerät des Empfängers an. Sie haben die Implementierung eines funktionierenden Messaging-Clients für Ihre Dating-Anwendung mithilfe der Sinch-Plattform abgeschlossen.

Sending and Receiving Messages Using SinchSending and Receiving Messages Using SinchSending and Receiving Messages Using Sinch

Wenn der Benutzer nicht online ist, versucht der Client, die Nachricht zu senden, erreicht sie jedoch nicht beim anderen Benutzer. In diesem Fall möchten Sie möglicherweise Push-Benachrichtigungen implementieren, um den Empfänger darüber zu informieren, dass er eine Nachricht erhalten hat.

10. VoIP-Anrufe

Die letzte Funktion, für die wir Sinch verwenden, ist VoIP (Voice over IP). Öffnen Sie CallingViewController.m und importieren Sie das Sinch-Framework ein letztes Mal.

Wie zuvor werden wir einige Protokolle verwenden, um Anrufe zu verarbeiten. Die Protokolle SINCallClientDelegate und SINCallDelegate bieten Methoden zum Initiieren und Empfangen eines Anrufs sowie zum Aktualisieren des Status eines Anrufs. Aktualisieren Sie die Schnittstelle der CallingViewController-Klasse, um sie an beide Protokolle anzupassen.

Um VoIP-Anrufe zu implementieren, benötigen wir Zugriff auf den Sinch-Client sowie ein SINCall-Objekt. Fügen Sie eine Eigenschaft für die SINCall-Instanz hinzu, wie unten gezeigt.

Legen Sie in viewDidLoad den Ansichtscontroller als Delegaten des Sinch-Aufrufclients fest.

Um den nächsten Abschnitt besser zu verstehen, ist es hilfreich, die Szenarien durchzugehen, mit denen Benutzer bei Verwendung der Anruffunktion konfrontiert sind. Ein Benutzer könnte sein:

  • einen Anruf erhalten
  • einen Anruf tätigen
  • einen bestehenden Anruf auflegen
  • einen eingehenden Anruf ablehnen

Lassen Sie uns zuerst das Tätigen und Empfangen eines Anrufs ansprechen. Fügen Sie die makeOrAcceptCallFromSelectedUser-Methode den folgenden Code hinzu: :

Wir überprüfen, ob wir einen Anruf tätigen oder einen eingehen. Wenn wir den Anruf initiieren, startet callUserWithId: den aufrufenden Prozess und initialisiert die sinchCall-Eigenschaft.

Wenn wir einen Anruf entgegennehmen, wird die sinchCall-Eigenschaft bereits initialisiert und wir beginnen den Anruf einfach, indem wir answer darauf aufrufen.

Als Nächstes implementieren wir das Ablehnen und Auflegen eines Anrufs. Fügen Sie den folgenden Code die RejectOrHangUpCallFromSelectedUser:-Methode hinzu: 

Dieser Code ist leichter zu verdauen, da er unabhängig von der Situation durch Aufrufen von hangup für die Eigenschaft sinchCall behandelt wird.

Wir müssen nur noch die erforderlichen Delegierungsmethoden implementieren. Dies wird ziemlich viel Code sein, aber es ist einfach zu verstehen und die Methodennamen sind sehr beschreibend.

Die erste Methode, didReceiveIncomingCall:, behandelt das Empfangen eines Aufrufs und das Einrichten der sinchCall-Eigenschaft. Wir werden auch wissen, wann der Anruf von callDidEstablish: und callDidEnd: beginnt und endet.

Die letzte Methode, callDidProgress:, ist momentan leer, aber sie wäre nützlich, um die Benutzeroberfläche mit hilfreichen Informationen wie der Dauer des Aufrufs zu aktualisieren. Sie können SINCallDetail und seine EstablishedTime-Eigenschaft verwenden, um diese Berechnung einfach durchzuführen.

11. Testanruf

Führen Sie zwei Instanzen der Anwendung mit zwei Facebook-Konten aus, wie Sie es zuvor getan haben. Navigieren Sie zum Profil des anderen und tippen Sie auf Anrufen.

Klicken Sie auf Ihrem Gerät oder im iOS-Simulator auf die grüne Anruftaste. Sobald der Anruf an Sinch gesendet wurde, wird die Benutzeroberfläche aktualisiert, um den Benutzer über den laufenden Anruf zu informieren.

Setting Up a Call with SinchSetting Up a Call with SinchSetting Up a Call with Sinch

Wenn einer der Benutzer einen Anruf erhält, sieht die Benutzeroberfläche folgendermaßen aus:

Incoming CallIncoming CallIncoming Call

Wenn der Anruf ausgeführt wird, zeigt die Benutzeroberfläche den Status des Anrufs an. Eine Schaltfläche mit der Bezeichnung Auflegen wird angezeigt, um den Anruf zu beenden.

A Call in ProgressA Call in ProgressA Call in Progress

Ähnlich wie beim Messaging wird der Versuch, einen Benutzer anzurufen, der nicht online ist, von der Anwendung nicht unterstützt. Wie beim Messaging können Sie dieses Problem lösen, indem Sie den Benutzer mithilfe von Push-Benachrichtigungen darüber informieren, dass jemand versucht hat, Sie anzurufen.

12. Wohin geht man als nächstes? 

Es gibt mehrere Teile der Anwendung, die verbessert werden können. Am bemerkenswertesten ist die Integration von Push-Benachrichtigungen. Sinch hat kürzlich native Unterstützung für Push-Benachrichtigungen zu seinem iOS SDK hinzugefügt, was die Entwickler entlastet. Mit Push-Benachrichtigungen können Sie Benutzer, die die Anwendung derzeit nicht verwenden, darüber informieren, dass sie einen Anruf oder eine Nachricht erhalten haben.

Eine weitere nützliche Ergänzung wäre das Speichern von Nachrichten und Konversationen in einem Remote-Backend. Auf diese Weise können Benutzer in die Vergangenheit reisen und frühere Gespräche anzeigen, die sie geführt haben. Dies macht das Messaging-Erlebnis auch flüssiger, da sie ein Gespräch dort aufnehmen können, wo sie aufgehört haben.

Dies sind nur einige Ideen. Ich bin sicher, Sie können sich ein paar mehr vorstellen, die die Anwendung vollständiger und ansprechender machen würden.

Schlussfolgerung

Das leistungsstarke SDK von Sinch macht zwei einschüchternde Aufgaben zugänglich, einfach und erschwinglich. Wie Sie in diesem Tutorial gesehen haben, können Entwickler mit Sinch Messaging und Anrufe in wenigen Minuten in ihre Anwendungen integrieren. Das Sinch SDK ist nicht auf iOS beschränkt. Wenn Ihre Dating-Anwendung beispielsweise über eine Website-Komponente verfügt, können Sie die JavaScript-API verwenden, um dieselben Funktionen zu implementieren.

Wenn Sie unterwegs stecken geblieben sind, machen Sie sich keine Sorgen, Sie können das fertige Projekt auf GitHub finden. Sie können jetzt das, was Sie in diesem Tutorial gelernt haben, nehmen und den nächsten Zunder erstellen.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.