E-Mails problemlos über Ihre mobile App mit Appery.io und Mailgun versenden

Dieser Beitrag stammt von Max Katz, Head of Developer Relations bei Appery.io.

Viele Entwicklungsteams, die die cloudbasierte Plattform für mobile Apps, Appery.io, nutzen, versenden aus ihren Apps E-Mails für Registrierungen, Bestätigungen und alles Weitere. Um die Nutzung der Mailgun-API in Appery.io zu vereinfachen, haben wir ein Mailgun-Plug-in in Appery.io eingeführt.

Das Plug-in enthält eine Beispiel-App mit einer Seite, die zeigt, wie Sie mithilfe der API eine E-Mail versenden. Nutzen Sie die Beispiel-App als Ausgangspunkt oder fügen Sie das Plug-in zu einer beliebigen bestehenden App hinzu.

Bevor ich Ihnen zeige, wie Sie das Plug-in verwenden, möchte ich Ihnen ein wenig mehr über die Entwicklungsplattform Appery.io erzählen.

Appery.io ist eine Cloud-Entwicklungs- und Laufzeitplattform, mit der Sie plattformübergreifende mobile Unternehmens-Apps in kürzester Zeit erstellen und mit APIs verbinden. Die Plattform bietet folgende Vorteile und Funktionen:

• Erstellen Sie mit dem visuellen Drag-and-Drop-App Builder von Appery.io im Handumdrehen plattformübergreifende mobile Apps. Die Apps werden mit Open-Source-Technologien wie jQuery Mobile, Ionic, Bootstrap und Apache Cordova erstellt
• Verbinden Sie sich mit Appery.io API Express problemlos mit externen SQL-Datenbanken und anderen Unternehmensdatenquellen
• Versenden Sie mit Appery.io Push im Handumdrehen gezielte Push-Benachrichtigungen
• Fügen Sie Ihrer App mit Appery.io Database schnell eine Datenbank hinzu
• Schreiben Sie mit Appery.io Server Code im Handumdrehen serverseitige Logik und erstellen Sie benutzerdefinierte APIs
• Testen oder teilen Sie Ihre Apps mit der Appery.io Tester-App sofort mit beliebigen Personen auf jedem Gerät
• Verpacken Sie Ihre App mit Appery.io Cloud Build schnell für iOS, Android und Windows Phone, um sie in einem App Store einzureichen

Nachdem wir die Plattform vorgestellt haben, erstellen wir als Nächstes eine mobile App, die die Mailgun-API nutzt, um E-Mail-Nachrichten aus der App heraus zu versenden.

Im ersten Schritt fügen Sie einer neuen oder bestehenden App ein Plug-in hinzu. Das Plug-in ist für Ionic- und jQuery-Mobile-Apps verfügbar. Wenn Sie mit AngularJS vertraut sind, nutzen Sie die Ionic-Version. Wenn Sie noch nicht mit AngularJS vertraut sind, probieren Sie am besten die jQuery-Mobile-Version aus (überspringen Sie einfach einen Abschnitt).

1. Wählen Sie im App Builder (Sie können eine bestehende App verwenden oder eine neue erstellen) die Option Create new > From Plugin aus
2. Suchen Sie unter der Kategorie Communication nach Mailgun Mail API. Aktivieren Sie das Kontrollkästchen für das Plug-in und klicken Sie auf die Schaltfläche Import selected plugins .

1. Wählen Sie im App Builder (Sie können eine bestehende App verwenden oder eine neue erstellen) die Option Create new > From Plugin. aus
2. Suchen Sie unter der Kategorie Communication nach Mailgun Mail API . Aktivieren Sie das Kontrollkästchen für das Plug-in und klicken Sie auf die Schaltfläche Import selected plugins .
3. Aktivieren Sie auf der nächsten Seite das Kontrollkästchen, um die Einstellungsdatei zu öffnen. Legen Sie außerdem die Startseite auf Mailgun. fest Klicken Sie anschließend auf die Schaltfläche Apply settings . Das Plug-in wird zu Ihrer App hinzugefügt. Sie sind fertig. Das Plug-in wurde zu Ihrer App hinzugefügt.

Nachdem das Plug-in nun in der App verfügbar ist, müssen Sie noch eine kleine Konfiguration vornehmen. Dieser Abschnitt besteht aus drei Teilen:

1. Einrichten der Mailgun-Domain
2. Sichern der Mailgun-API-Zugangsdaten
3. Einrichten eines sicheren Proxys

Die Mailgun-Domain identifiziert Ihr Konto.

1. Wenn Sie noch kein Mailgun-Konto haben, Registrieren!
2. Öffnen Sie Ihre Domain-Einstellungen und kopieren Sie den Domain-Wert – also alles vor .mailgun.org
3. Fügen Sie den Wert für die Eigenschaft domain in der Datei Services/Mailgun_settings ein.

Die Mailgun-API verwendet Basic Authentication zur Authentifizierung. Da die Authentifizierungsinformationen nicht auf dem Client offengelegt werden dürfen, bewahren Sie diese sicher auf dem Server auf.

1. Klicken Sie im App Builder auf Database (Symbolleiste, oben rechts).
2. Klicken Sie auf Create new database. Nennen Sie die Datenbank mailgunDB.
3. Klicken Sie auf Create new collection. Nennen Sie die Collection secret.
4. Erstellen Sie innerhalb der Secret-Collection zwei Spalten, indem Sie auf den Link +Col klicken. Beide Spalten werden Zeichenfolgen enthalten.
   1. keyName (Zeichenfolge)
   2. keyValue (Zeichenfolge)
5. Klicken Sie auf +Row , um der Collection Daten hinzuzufügen.
6. Geben Sie in der Spalte keyName mailgunAuthProxy. ein
7. Da Mailgun Basic Authentication verwendet, müssen Sie den Benutzernamen und das Passwort kodieren. Der einfachste Weg ist, den Tab Chrome Dev. Tools Console zu öffnen, Folgendes einzugeben und die Eingabetaste zu drücken (Sie finden den API-Schlüssel im Domain-Dashboard: >window.btoa(“api:key-0ce1xxxxxx”);
8. Der kodierte Wert wird in der nächsten Zeile angezeigt:
 >”YXBpOmtleS0wYxxxx“
9. Kopieren Sie den gesamten Wert (einschließlich des Zeichens am Ende). Gehen Sie zurück zur Datenbank-Collection, geben Sie als Wert für mailgunAuthProxy „Basic “ (mit Leerzeichen) ein und fügen Sie dann den gesamten Wert ein.


Nun sind die Mailgun-API-Zugangsdaten sicher auf dem Server hinterlegt. Als Nächstes richten Sie den Proxy so ein, dass er diesen Wert verwendet.

Das Einrichten des Proxys geht sehr schnell:

1. Öffnen Sie die Proxy-Seite.
2. Klicken Sie auf Create new proxy. Nennen Sie den Proxy MailgunProxy.
3. Wählen Sie die Option Use proxy + store sensitive data option aus.
   1. Wählen Sie für Database die Option mailgunDB aus
   2. Wählen Sie für Collection die Option secret aus
   3. Wählen Sie für Key column die Option keyName aus
   4. Wählen Sie für Value column die Option keyValue aus
4. Klicken Sie auf Save.
5. Kehren Sie im App Builder zur App zurück. Öffnen Sie den Dienst Mailgun sending. Aktualisieren Sie im Tab Settings die Proxy-Liste und wählen Sie dann Mailgun_Proxy. aus.

Wenn Sie eine Ionic-App erstellen, müssen Sie noch einen weiteren Schritt ausführen:

• Öffnen Sie Pages/mailgun und wechseln Sie zum Tab Scope.
• Ändern Sie den Typ für die E-Mail-Scope-Variable auf Email (dies ist ein Fehler und wird in Kürze behoben).

Optional öffnen Sie Pages/index und setzen den Header-Text auf Mailgun API sowie die Color auf positive.

Jetzt ist Ihre App startklar.

Es gibt zwei Möglichkeiten, Ihre App auszuführen und zu testen. Führen Sie die App im Browser oder direkt auf dem Gerät aus. Außerdem zeige ich Ihnen, wie Sie die App mit anderen Personen teilen.

Testen Sie die App schnell im Browser, indem Sie auf die Schaltfläche Test im App Builder klicken. So sieht die App aus, wenn sie im Browser ausgeführt wird:

Die App lässt sich auch ganz einfach auf einem physischen Gerät testen. Sie müssen die App dafür nicht einmal installieren. Installieren Sie einfach die Appery.io Tester -App auf Ihrem iOS oder Android -Gerät und starten Sie die App im Handumdrehen. Wenn Sie sich in der Tester-App anmelden, sehen Sie alle von Ihnen erstellten Apps und starten diese im Handumdrehen. Wenn Sie die App über die Tester-App ausführen, lassen sich auch alle nativen APIs schnell testen.

Die gleiche App lässt sich zudem problemlos mit Ihrer Kundschaft, Klientel, Ihren Teammitgliedern und im Freundeskreis teilen. Dazu muss lediglich die Appery.io Tester-App installiert werden. Geben Sie diesen Personen einen speziellen Freigabecode, und sie können Ihre App ausführen.

Möchten Sie Apps schnell erstellen? Beginnen Sie noch heute mit dem Starten Sie die Entwicklung mit dem kostenlosen Testabo von Appery.io.

Autor: The Sinch Mailgun team The Sinch Mailgun team shares news, best practices, and strategies to take your products and apps to the next level using email. Subscribe to our newsletter to get all the articles in your inbox!