Vereinfachte In-App-E-Mail mit Appery.io und dem neuen SendGrid-Mail-API-Plugin

Veröffentlicht: 2015-06-09

Das Folgende ist ein Gastbeitrag von Max Katz bei Appery.io. Erfahre mehr über Max am Ende dieses Beitrags.

SendGrid ist einer dieser Dienste, die das Hinzufügen von In-App-E-Mail-Funktionen viel zu einfach machen. SendGrid ist ein Anbieter einer Cloud-basierten E-Mail-Lösung und bietet eine elegante und benutzerfreundliche REST-API zum Senden von E-Mails aus einer mobilen App. Es ist sehr wahrscheinlich, dass Ihre App E-Mails senden muss, z. B. Registrierungsbestätigungen, E-Mails zum Zurücksetzen des Passworts, E-Mails zur Bestätigung in zwei Schritten, allgemeine Benachrichtigungs-E-Mails oder jede andere Art von E-Mail-Kommunikation. SendGrid ist die perfekte Lösung.

Appery.io, die umfassendste Mobil- und Webplattform, die als Service angeboten wird, ermöglicht es Unternehmen, sehr schnell responsive und mobile Apps zu erstellen. Appery.io kombiniert eine Cloud-basierte schnelle Entwicklungsumgebung mit integrierten Back-End-Services und einem Katalog von API-Plugins, die die Integration mit Cloud-Services und Unternehmenssystemen erheblich vereinfachen.

Die sofort einsatzbereite Integration von Appery.io mit jeder API von Drittanbietern ist die perfekte Ergänzung für die schnelle Erstellung messagingfähiger mobiler Apps mit der SendGrid-API. Um das Hinzufügen von E-Mail-Funktionen zu einer App noch schneller zu machen, hat Appery.io ein SendGrid Mail API-Plug-in eingeführt. Das Plugin kann schnell zu einer neuen oder bestehenden App hinzugefügt werden und stellt eine Beispiel-App bereit, die eine E-Mail-Nachricht mit einem Anhang sendet. Der Entwickler kann das Plugin nach Bedarf anpassen oder ändern.

In diesem Beitrag zeige ich Ihnen, wie Sie das SendGrid Mail API-Plugin hinzufügen und verwenden.

Was du brauchen wirst:

Bevor Sie beginnen, benötigen Sie SendGrid- und Appery.io-Konten. Verwenden Sie die nachstehenden Links, um sich für kostenlose Konten zu registrieren.

  • SendGrid
  • Appery.io

Was wirst du bauen?

Sie werden eine neue mobile App erstellen und die SendGrid Mail-API hinzufügen, um E-Mails zu senden. Die Beispiel-App des Plugins ermöglicht Ihnen Folgendes:

  • Senden Sie eine E-Mail mit Anhang.
  • Machen Sie ein Foto und fügen Sie das Foto als Anhang hinzu.

So sieht die App auf einem Android-Gerät aus:

Sie können sich auch das Video zur Verwendung des SendGrid-Plugins ansehen:

Erstellen einer neuen mobilen App:

Der erste Schritt besteht darin, eine neue App in Appery.io zu erstellen:

  1. Sobald Sie sich auf der Plattform befinden, klicken Sie auf die Schaltfläche Neue App erstellen . Geben Sie als App-Name Folgendes ein: SendGridApp (Standardoption PhoneApp ausgewählt) und klicken Sie auf die Schaltfläche Erstellen .
  2. Klicken Sie in der Projektansicht auf Seiten > Startbildschirm . Der Gerätebildschirm wird geöffnet. Die Seite sollte so aussehen:

Sie haben gerade eine brandneue mobile App erstellt. Das war einfach, oder?

Hinzufügen des SendGrid-Plugins:

Da Sie nun eine neue App haben, werden Sie das SendGrid-Plugin hinzufügen.

1. Um das Plug-in zu importieren, klicken Sie auf Neu erstellen > Aus Plug-in :

2. In der Kategorie Kommunikation sehen Sie die SendGrid Mail API :

3. Klicken Sie auf Ausgewählte Plugins importieren .

4. Sie werden gefragt, ob Sie die Startseite festlegen möchten. Fahren Sie fort und wählen Sie die Mail- Seite aus. Sie wechseln die Startseite immer über Projekt > App-Einstellungen > Allgemein .

5. Dieser Schritt ist optional, aber Sie können auch das in dieser App verwendete Design ändern.

A. Gehen Sie zu Projekt > App-Einstellungen > Allgemein

B. Wählen Sie für Thema Materialdesign aus

6. Öffnen Sie Seiten > Mailseite . Die Seite sieht folgendermaßen aus (unter Verwendung des Themas Materialdesign):

Das Plugin enthält eine Beispiel-App. Um die App zu testen, müssen Sie das SendGrid-API-Plugin konfigurieren. Sie werden dies als Nächstes tun, aber zuerst müssen Sie sicherstellen, dass Ihre SendGrid-Kontoinformationen geschützt sind.

Einrichten eines sicheren Proxys:

Wenn Sie sich für ein SendGrid-Konto anmelden, erhalten Sie einen Benutzernamen und einen API-Schlüssel (Ihr Passwort), die Sie beim Aufrufen der API verwenden können. Sie möchten diese vertraulichen Informationen auf dem Server behalten, denn wenn jemand Zugriff auf diese Informationen erhält, kann er E-Mails über Ihr Konto senden. Der sichere Proxy schützt diese Informationen, sodass sie im Client niemals sichtbar sind.

Der erste Schritt zum Erstellen eines sicheren Proxys besteht darin, eine Datenbank zu erstellen, in der der Benutzername und das Kennwort gespeichert werden.

1. Klicken Sie im App Builder auf Datenbank (in der Symbolleiste) oder gehen Sie zu http://appery.io/database.

2. Klicken Sie auf Neue Datenbank erstellen . Geben Sie als Datenbanknamen Folgendes ein: SendGridDB . Klicken Sie auf Erstellen .

3. Jetzt müssen Sie eine neue Sammlung erstellen. Klicken Sie auf Neue Sammlung erstellen . Benennen Sie die Sammlung Credentials .

4. Klicken Sie auf + Spalte, um eine neue Spalte zu erstellen. Benennen Sie die Spalte: Schlüssel.

5. Erstellen Sie eine weitere Spalte und nennen Sie sie: keyValue .

6. Jetzt tragen Sie die SendGrid-Schlüssel in die Datenbank ein.

A. Klicken Sie auf +Zeile und geben Sie api_user_proxy und seinen Wert ein (das ist Ihr Benutzername).

B. Wiederholen Sie dasselbe für den api_key. Klicken Sie auf +Row und geben Sie api_key_proxy und seinen Wert ein (das ist Ihr Passwort). So sollte Ihre Sammlung aussehen:

Da die Daten in der Datenbank gespeichert sind, sind sie jetzt sicher und privat. Als Nächstes erstellen Sie den sicheren Proxy, der die Daten verwendet, die Sie gerade in der Datenbank gespeichert haben:

1. Klicken Sie auf die Registerkarte Secure Proxy oder gehen Sie zu http://appery.io/proxy.

2. Klicken Sie auf Neuen Proxy erstellen und nennen Sie den Proxy SendGridProxy . Klicken Sie auf Erstellen .

3. Aktivieren Sie auf der Seite mit den Proxy-Einstellungen die Option Proxy verwenden + vertrauliche (private) Daten in der Datenbank speichern .

4. Wählen Sie für Datenbank SendGridDB aus .

5. Wählen Sie für Sammlung Anmeldeinformationen aus.

6. Wählen Sie für Schlüsselspalte key und für Wertspalte keyValue aus .

7. Klicken Sie auf Speichern .

Der letzte Schritt besteht darin, den Dienst für die Verwendung dieses Proxys zu konfigurieren. Das Plugin hat einen Dienst, SendGrid_Mail, um E-Mails zu senden, also müssen Sie nur ein paar Dinge konfigurieren:

  1. Öffnen Sie im App Builder Dienste > SendGrid_Mail -Dienst.
  2. Klicken Sie für Appery.io-Proxy verwenden auf die Schaltfläche „Aktualisieren“, um den neuen Proxy zu laden, den Sie gerade erstellt haben, und wählen Sie ihn aus (SendGridProxy).
  3. Wechseln Sie auf die Registerkarte Anfrage . Diese Registerkarte enthält alle Serviceanforderungsparameter. Sie werden auch feststellen, dass der Dienst api_user und api_key vom Proxy erhält. Der einzige Anforderungsparameter, den Sie festlegen müssen, ist from . Dies ist Ihre "Von"-E-Mail.

Die Registerkarte Anfrage sieht wie folgt aus:

  • api_key – SendGrid-API-Schlüssel (Ihr Passwort). Aus Sicherheitsgründen in der Appery.io-Datenbank gespeichert
  • api_user – SendGrid-Benutzername. Aus Sicherheitsgründen in der Appery.io-Datenbank gespeichert
  • an – an eine E-Mail
  • toname (optional) – zu benennen
  • von – von E-Mail
  • Absendername (optional) – Absendername
  • Betreff – E-Mail-Betreff
  • Text – E-Mail-Text

Sie können den Dienst ändern und weitere Anforderungsparameter hinzufügen, die von der SendGrid-Mail-API unterstützt werden.

Abgesehen von from (und optional toname und fromname) müssen Sie die Werte nicht im Dienst festlegen, da sie von der Seite zugeordnet werden. So sieht das Mapping auf der Seite aus ( Pages > mail > Data > sendgrid_email service > Before send mapping ):

Wenn Sie mehr über das Plugin erfahren, die Beispiel-App ändern oder eine E-Mail ohne Anhang senden möchten, lesen Sie bitte die Plugin-Dokumentation.

Testen der App:

Sie sind bereit, die App zu testen.

1. Klicken Sie auf die Schaltfläche „Test“, um die App im Browser zu starten.

A. Wenn Sie die App im Browser testen, können Sie die Kamera nicht aufrufen. Sie können immer noch eine Nachricht senden; Stattdessen wird ein Beispielbild gesendet, das in Project > JavaScript > SampleImageScript erstellt wurde.

2. Um die Kamera zu verwenden, verwenden Sie am schnellsten die Appery.io Tester-App oder installieren Sie die App auf einem Gerät.

Dies testet die App auf einem Android-Gerät:

Testen der App im Browser (Sie können den QR-Code scannen, um die App auf Ihrem Gerät im Browser zu starten):

Was kommt als nächstes?

Um mehr über das Plugin zu erfahren, besuchen Sie bitte die Plugin-Dokumentationsseite. Sie können Ihrer App auch beliebige andere SendGrid-APIs hinzufügen.

Zusätzlich zum Appery.io App Builder erhalten Sie auch integrierte Backend-Dienste wie eine Cloud-Datenbank, Push-Benachrichtigungen und Serverskripte, um benutzerdefinierte Geschäftslogik für die App zu schreiben.

Zusammenfassung

Das Erstellen von Apps mit In-App-E-Mail-Funktion mit SendGrid und Appery.io ist schnell und einfach. Das SendGrid-API-Plug-in kann beim Erstellen einer mobilen App in Appery.io schnell integriert, getestet und gesichert werden.

Über den Autor : Max Katz leitet die Entwicklerbeziehungen für Appery.io, eine Cloud-basierte mobile App-Plattform. Er liebt es, neue und coole REST-APIs in mobilen Apps auszuprobieren. Max ist Autor von zwei Büchern „Practical RichFaces“ (Apress 2008, 2011), DZone MVB (Most Valuable Blogger) und ist ein häufiger Redner auf Entwicklerkonferenzen. Was Max so treibt, erfahrt ihr auf seinem Blog: http://maxkatz.org und Twitter: @maxkatz.