Product
Eine Web-App von Grund auf in unter fünf Minuten mit Meteor und Mailgun erstellen
Dieser Beitrag wurde von Vianney Lecroart verfasst, einem Meteor-Earlyvangelist und Captain der Meteor Group in Paris, Frankreich. Vianney schrieb sein erstes Programm im Alter von sechs Jahren. Nach acht Jahren in einem Startup für Massively Multiplayer Online Games entschied er sich, auf die andere Seite der Macht zu wechseln und Vollzeit-Unternehmer zu werden. Sein Startup? Wenn Sie Asana oder Trello mögen, wird Ihnen sein Projekt gefallen. Folgen Sie ihm unter @acemtp um auf dem Laufenden zu bleiben.
Vor ein paar Wochen kündigte Meteor die Integration mit Mailgun an, wodurch jede Meteor-App mühelos E-Mails versenden kann. Heute zeige ich Ihnen an einem Beispiel, wie schnell Sie eine Beispiel-App zum Laufen bringen.
Für alle, die den letzten Beitrag verpasst haben: Meteor ist eine Open-Source-Plattform für die Entwicklung erstklassiger Web-Apps in einem Bruchteil der Zeit, unabhängig davon, ob Sie Entwicklungsprofi sind oder gerade erst anfangen. Meteor beinhaltet zudem eine native Integration mit Mailgun für den E-Mail-Versand, der keinerlei Konfiguration erfordert, wenn Sie Ihre App auf der Meteor-Plattform bereitstellen. Diese Kombination macht die Erstellung E-Mail-fähiger Web-Apps extrem schnell und einfach.
Auf die Plätze, fertig, programmieren
Für dieses Beispiel verwende ich einen recht häufigen Anwendungsfall für eine Registrierungsseite: Ihr Nutzer muss sich registrieren können, um weitere Informationen zu einem Produkt zu erhalten, und bekommt daraufhin eine Bestätigungs-E-Mail. Schauen wir uns an, wie schnell Sie dies mit Meteor und Mailgun live schalten können.
Die grundlegenden Anforderungen sind, dass eine sich registrierende Person ein Formular mit ihrer E-Mail-Adresse ausfüllen und auf einen Button klicken kann, um eine Bestätigungs-E-Mail zu erhalten. Um es interessanter zu machen, fügen wir hinzu, dass die Webseite im Internet live sein muss, nicht nur auf Ihrem lokalen Computer, und Sie nur einen Computer verwenden dürfen, auf dem außer der Standardinstallation von Mac (oder Linux) nichts installiert ist.
Die Zeit läuft. Los geht’s mit Meteor.
Meteor installieren (eine Minute bei langsamer Internetverbindung)
Da sich auf dem Computer nichts befindet, müssen wir Meteor installieren:
$ curl https://install.meteor.com | sh
Projekt erstellen (zwei Sekunden)
Erstellen Sie nun das Meteor-Projekt und beginnen Sie mit der Arbeit:
$ meteor create meteoremailrn$ cd meteoremail
Da wir E-Mails versenden müssen, ist auch die Installation des E-Mail-Smart-Packages erforderlich:
$ meteor add email
Dieses Paket ist automatisch so konfiguriert, dass es E-Mails (bis zu 300 pro Tag) über Mailgun versendet, ohne jegliches Coding. Sie brauchen nicht einmal Zugangsdaten anzugeben. Wenn Sie mehr als 300 E-Mails pro Tag versenden möchten, lesen Sie den optionalen Schritt weiter unten.
meteoremail.html ausfüllen (eine Minute, falls Sie langsam tippen)
Standardmäßig erstellt Meteor die HTML-Datei für uns mit einer einfachen Vorlage, die einen Button und einen Text anzeigt. Daher ersetzen wir diesen Standardtext zunächst durch folgenden:
<body>rn {{> email}}rn</body>rnrn<template name="email">rn {{#if done}}rn <p>Email sent! Thank you for your interest in us.</p>rn {{else}}rn <label for="email">rn Enter your email address to receive news about usrn </label><br/>rn <input type="text" id="email" size="45" />rn <input type="button" id="btn" value="Submit" />rn {{/if}}rn</template>rn
Der Body enthält nur den Aufruf zum Einfügen der Vorlage namens email. Und die Vorlage ist lediglich ein Eingabetextfeld mit einem Label und einem Input-Button. Der Grund, warum wir eine Vorlage erstellen, anstatt das -Feld direkt in den Body zu setzen, ist, dass das Event Catching bei Vorlagen erfolgt.
meteoremail.js ausfüllen (zwei Minuten)
Die Datei meteoremail.js enthält den gesamten Client- und Server-Code. Dies ist der komplexeste Teil dieses Tutorials. Ich habe Kommentare im Code hinzugefügt, damit Sie genau sehen, was der Code macht.
if (Meteor.isClient) {rn // On the client, track the DOM click event on the input.rn Template.email.events({rn 'click #btn': function () {rn // When someone clicks the button, call the server method `sendEmail`rn Meteor.call('sendEmail', $('#email').val());rn Session.set('done', true);rn }rn });rnrn Template.email.done = function () {rn return Session.equals('done', true);rn };rn}rnrnif (Meteor.isServer) {rn // On the server, define the sendEmail RPC functionrn Meteor.methods({rn sendEmail: function (email) {rn // Send the emailrn Email.send({rn to: email,rn from: 'acemtp@gmail.com',rn subject: 'Thank you for signing up for our project',rn text: 'We will share with you some news about us in a near future. See you soon!'rn });rn }rn });rn}rn
Das ist alles zum Code.
Projekt lokal testen (zehn Sekunden)
Zum lokalen Testen geben Sie einfach Folgendes ein:
$ meteor
Öffnen Sie Ihren Browser unter http://localhost:3000. Sie sollten den Button sehen. Klicken Sie nun darauf, um die E-Mail im Ausgabe-Terminal des Servers anzuzeigen.
Projekt im Internet veröffentlichen (acht Sekunden)
Bei den meisten Webanwendungen beginnen jetzt normalerweise die zusätzlichen Hürden: einen Server beschaffen, das Projekt verpacken, es auf den Server hochladen, Apache/Rails/PHP oder was auch immer Sie verwenden installieren und konfigurieren, einen SMTP-Daemon installieren und konfigurieren und so weiter …
Aber keine Sorge, Sie verwenden ja Meteor.
Eingabe:
$ meteor deploy meteoremail
Öffnen Sie anschließend einen Browser unter http://meteoremail.meteor.com … Es lebt, es lebt … es LEBT.
Nach einem Klick auf den Button wird die E-Mail versendet und dem Nutzer eine Bestätigung angezeigt.
Wie ist das möglich? Weil Meteor sich um alles kümmert. Wenn Sie meteor deploy verwenden, erstellt Meteor die Subdomain meteoremail.meteor.com, konfiguriert den Server, bündelt das Projekt, lädt es hoch und schaltet es live.
Als wir das E-Mail-Paket von Meteor hinzugefügt haben, ermöglichte es die Partnerschaft von Meteor mit Mailgun, automatisch ein Mailgun-Konto zu erstellen und zu verknüpfen. Ohne etwas einzurichten, versenden Sie bis zu 300 E-Mails pro Tag … KOSTENLOS.
Fazit?
In weniger als fünf Minuten (die meiste Zeit ging für langsames Tippen drauf) konnten wir ein einfaches Registrierungsformular erstellen UND bereitstellen. Wie? Durch die clevere Wahl des besten Frameworks und natürlich dank Meteor und Mailgun
Zusätzlicher optionaler Schritt
Nehmen wir nun an, das Interesse an Ihrem Produkt steigt rasant und 300 E-Mails pro Tag reichen nicht aus. Außerdem wünschen Sie sich mehr Zugriff auf das Tracking von E-Mail-Statistiken sowie die Möglichkeit, eingehende E-Mails zu verwalten und zu analysieren. Erstellen Sie ganz einfach ein Mailgun-Konto und verknüpfen Sie es mit Ihrer Meteor-Anwendung.
Nachdem Sie Ihr Konto bei Mailgun erstellt haben, rufen Sie Ihr Passwort in der Admin-Oberfläche unter dem Reiter „Domain“ ab. Fügen Sie dann den folgenden Code in den Serverteil Ihres Meteor-Projekts ein (vergessen Sie nicht, YOURDOMAIN und YOURPASSWORD zu ändern):
Meteor.startup(function () {rn process.env.MAIL_URL = 'smtp://postmaster%40YOURDOMAIN.mailgun.org:YOURPASSWORD@smtp.mailgun.org:587';rn});rn
Das war’s. Stellen Sie es einfach erneut bereit, und es wird ab sofort Ihr Mailgun-Konto nutzen, um beliebig viele E-Mails zu versenden.
Ein ausführlicheres Tutorial finden Sie auf meinem Blog.
Teilen Sie uns Ihre Meinung in den Kommentaren unten mit oder beteiligen Sie sich an der Diskussion auf HackerNews!
