Product
Créer une application web de zéro en moins de cinq minutes avec Meteor et Mailgun
Cet article a été écrit par Vianney Lecroart, l’un des premiers ambassadeurs de Meteor et capitaine du groupe Meteor à Paris, en France. Vianney a écrit son premier programme à l’âge de six ans. Après huit ans passés dans une start-up de jeux en ligne massivement multijoueurs, il a décidé de rejoindre l’autre côté de la Force en devenant entrepreneur à temps plein. Sa start-up ? Si vous aimez Asana ou Trello, vous aimerez son projet. Suivez-le sur @acemtp pour rester à l’écoute !
Il y a quelques semaines, Meteor a annoncé son intégration avec Mailgun, ce qui permet à n’importe quelle application Meteor d’envoyer des emails sans effort. Aujourd’hui, je vais vous présenter un exemple qui montre la rapidité avec laquelle vous pouvez créer et exécuter une application de démonstration.
Pour celles et ceux qui ont manqué le dernier article, Meteor est une plateforme open source permettant de créer des applications web de qualité supérieure en un temps record, que vous ayez un niveau d’expertise en développement ou que vous fassiez vos premiers pas. Meteor inclut également une intégration avec Mailgun pour envoyer des emails sans aucune configuration lorsque vous déployez votre application sur la plateforme Meteor. Cette combinaison rend la création d’applications web avec des fonctionnalités d’email extrêmement rapide et simple.
À vos marques, prêts, codez
Pour cet exemple, je vais utiliser un cas d’usage assez courant pour une page web d’inscription : votre utilisateur doit avoir la possibilité de s’inscrire pour obtenir des informations supplémentaires sur un produit et recevoir un email de confirmation. Voyons à quelle vitesse vous pouvez la mettre en ligne avec Meteor et Mailgun.
Les exigences de base sont que la personne inscrite doit pouvoir remplir un formulaire avec son adresse email, et cliquer sur un bouton pour recevoir un email de confirmation. Pour rendre cela intéressant, ajoutons que la page web doit être en ligne sur Internet, et non sur votre ordinateur local, et que vous ne pouvez utiliser qu’un ordinateur sur lequel rien n’est installé à l’exception de l’installation par défaut de Mac (ou Linux).
Le chronomètre est lancé. C’est parti avec Meteor !
Installer Meteor (1 minute avec une connexion lente)
Puisque nous n’avons rien sur l’ordinateur, nous devons installer Meteor :
$ curl https://install.meteor.com | sh
Créer le projet (2 secondes)
Créez maintenant le projet Meteor et commencez à y travailler :
$ meteor create meteoremailrn$ cd meteoremail
Puisque nous devons pouvoir envoyer des emails, nous devons également installer le package intelligent pour l’email :
$ meteor add email
Ce package est automatiquement configuré pour envoyer des emails (jusqu’à 300 par jour) via Mailgun sans aucun codage. Vous n’avez même pas besoin de fournir d’identifiants. Si vous devez envoyer plus de 300 emails par jour, consultez l’étape facultative ci-dessous.
Remplir meteoremail.html (1 minute si vous tapez lentement)
Par défaut, Meteor crée le fichier HTML pour nous avec un modèle de base qui affiche un bouton et un texte. Nous remplaçons donc d’abord ce texte par défaut par celui-ci :
<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
Le corps ne contient que l’appel pour insérer le modèle nommé email. Et le modèle est simplement une zone de texte de saisie avec un libellé et un bouton de validation. La raison pour laquelle nous créons un modèle au lieu de placer directement dans le corps est que la capture d’événements s’effectue sur les modèles.
Remplir le fichier meteoremail.js (2 minutes)
Le fichier meteoremail.js contient tout le code client et serveur. C’est la partie la plus complexe de ce tutoriel ! J’ai ajouté des commentaires dans le code afin que vous puissiez voir exactement ce qu’il fait.
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
C’est tout pour le code.
Essayer le projet localement (10 secondes)
Pour tester localement, il suffit de taper :
$ meteor
Ouvrez votre navigateur à l’adresse http://localhost:3000. Vous devriez voir le bouton. Cliquez maintenant dessus pour afficher l’email dans le terminal de sortie du serveur.
Mettre le projet sur Internet (8 secondes)
Avec la plupart des applications web, d’autres obstacles surgissent généralement à ce stade : trouver un serveur, regrouper le projet, le télécharger sur le serveur, installer et configurer apache/rails/php ou autre, installer et configurer un daemon SMTP, etc.
Mais pas d’inquiétude, vous utilisez Meteor !
Tapez :
$ meteor deploy meteoremail
Ensuite, ouvrez un navigateur à l’adresse http://meteoremail.meteor.com… Il est vivant, il est vivant… il est VIVANT !
Cliquez sur le bouton, l’email est envoyé et une confirmation s’affiche pour l’utilisateur !
Comment est-ce possible ? Parce que Meteor s’occupe de tout. Lorsque vous utilisez meteor deploy, Meteor crée le sous-domaine meteoremail.meteor.com, configure le serveur, regroupe et télécharge le projet, puis le met en ligne.
Lorsque nous avons ajouté le package email de Meteor, le partenariat de Meteor avec Mailgun a permis de créer et de lier automatiquement un compte Mailgun. Sans rien configurer, vous pouvez envoyer jusqu’à 300 emails par jour… GRATUITEMENT !
Conclusion ?
En moins de 5 minutes (l’étape la plus longue était due à vous et vos doigts lents !), nous avons pu créer ET déployer un simple formulaire d’inscription ! Comment ? En choisissant judicieusement le meilleur framework, et bien sûr grâce à Meteor et Mailgun
Étape facultative supplémentaire
Supposons maintenant que l’intérêt pour votre produit décolle vraiment et que 300 emails par jour ne suffisent plus. Vous aimeriez également avoir un meilleur accès au suivi des statistiques d’emails et pouvoir gérer et analyser les emails entrants. Vous pouvez facilement créer un compte Mailgun et le lier à votre application Meteor.
Après avoir créé votre compte sur Mailgun, récupérez votre mot de passe dans l’interface d’administration, sous l’onglet Domaine. Ensuite, ajoutez le code suivant à la partie serveur de votre projet Meteor (n’oubliez pas de modifier YOURDOMAIN et YOURPASSWORD) :
Meteor.startup(function () {rn process.env.MAIL_URL = 'smtp://postmaster%40YOURDOMAIN.mailgun.org:YOURPASSWORD@smtp.mailgun.org:587';rn});rn
Vous avez terminé ! Déployez-le simplement à nouveau et il utilisera désormais votre compte Mailgun pour envoyer autant d’emails que nécessaire.
Vous pouvez accéder à un tutoriel plus détaillé sur mon blog.
Donnez-nous votre avis dans les commentaires ci-dessous ou rejoignez la discussion sur HackerNews!
