Envoyez facilement des emails depuis votre application mobile grâce à Appery.io et Mailgun

Cet article a été rédigé par Max Katz, responsable des relations avec les développeurs chez Appery.io.

De nombreux professionnels du développement utilisant la plateforme d’applications mobiles cloud, Appery.io, envoient des emails depuis leurs applications pour les inscriptions, les confirmations et bien d’autres choses. Pour simplifier l’utilisation de l’API de Mailgun dans Appery.io, nous avons ajouté un plug-in Mailgun à Appery.io.

Le plug-in contient un exemple d’application avec une page qui montre comment envoyer un email en utilisant l’API. Vous pouvez utiliser l’exemple d’application comme point de départ ou ajouter le plug-in à n’importe quelle application existante.

Avant de vous montrer comment utiliser le plug-in, j’aimerais vous en dire un peu plus sur la plateforme de développement Appery.io.

Appery.io est une plateforme de développement et d’exécution dans le cloud qui permet de créer très rapidement des applications mobiles d’entreprise multiplateformes connectées à des API. Voici les avantages et les fonctionnalités de la plateforme :

• Créez rapidement des applications mobiles multiplateformes grâce à l’interface visuelle « drag-and-drop » d’Appery.io App Builder. Les applications sont créées avec des technologies open source telles que jQuery Mobile, Ionic, Bootstrap et Apache Cordova
• Connectez-vous facilement à une base de données SQL externe et à d’autres sources de données d’entreprise grâce à Appery.io API Express
• Envoyez rapidement des notifications push ciblées avec Appery.io Push
• Ajoutez rapidement une base de données à votre application avec Appery.io Database
• Écrivez rapidement toute logique côté serveur et créez des API personnalisées avec Appery.io Server Code
• Testez ou partagez instantanément vos applications avec n’importe qui et sur n’importe quel appareil grâce à l’application Appery.io Tester
• Compilez rapidement votre application pour iOS, Android et Windows Phone afin de la soumettre à un magasin d’applications avec Appery.io Cloud Build

Maintenant que nous avons présenté la plateforme, nous allons créer une application mobile qui utilise l’API de Mailgun pour envoyer des messages électroniques depuis l’application.

La première étape consiste à ajouter un plug-in à une application nouvelle ou existante. Le plug-in est disponible pour les applications Ionic et jQuery Mobile. Si vous connaissez AngularJS, vous pouvez utiliser la version Ionic. Si vous ne connaissez pas encore AngularJS, il est préférable d’essayer la version jQuery Mobile (passez simplement à la section suivante).

1. Dans l’App Builder (vous pouvez utiliser une application existante ou en créer une nouvelle), sélectionnez Create new > From Plugin
2. Trouvez Mailgun Mail API dans la catégorie Communication . Cochez la case du plug-in et cliquez sur le bouton Import selected plugins .

1. Dans l’App Builder (vous pouvez utiliser une application existante ou en créer une nouvelle), sélectionnez Create new > From Plugin.
2. Trouvez Mailgun Mail API dans la catégorie Communication . Cochez la case du plug-in et cliquez sur le bouton Import selected plugins .
3. Sur la page suivante, cochez la case pour ouvrir le fichier de paramètres. Définissez également la page de démarrage sur Mailgun. Cliquez ensuite sur le bouton Apply settings . Le plug-in sera ajouté à votre application. C’est terminé. Le plug-in a bien été ajouté à votre application.

Maintenant que le plug-in est disponible dans l’application, vous devez effectuer une configuration minimale. Cette section comprend trois parties :

1. Configuration du domaine Mailgun
2. Sécurisation des identifiants API de Mailgun
3. Configuration d’un proxy sécurisé

Le domaine Mailgun permet d’identifier votre compte.

1. Si vous n’avez pas de compte Mailgun, inscrivez-vous!
2. Ouvrez les paramètres de votre domaine et copiez la valeur du domaine, c’est-à-dire tout ce qui précède .mailgun.org
3. Collez la valeur de la propriété domain dans le fichier Services/Mailgun_settings .

L’API de Mailgun utilise l’authentification de base. Afin de vous assurer que les informations d’authentification ne sont pas exposées sur le client, vous allez les conserver en toute sécurité sur le serveur.

1. Dans l’App Builder, cliquez sur Database (dans la barre d’outils, en haut à droite).
2. Cliquez sur Create new database. Nommez la base de données mailgunDB.
3. Cliquez sur Create new collection. Nommez la collection secret.
4. Dans la collection secrète, créez deux colonnes en cliquant sur le lien +Col . Les deux colonnes contiendront des chaînes de caractères.
   1. keyName (type de chaîne)
   2. keyValue (type de chaîne)
5. Cliquez sur +Row pour ajouter des données à la collection.
6. Dans la colonne keyName, saisissez mailgunAuthProxy.
7. Mailgun utilisant l’authentification de base, vous devez encoder le nom d’utilisateur et le mot de passe. La méthode la plus simple consiste à ouvrir les outils de développement Chrome. Dans l’onglet Console, saisissez ce qui suit et appuyez sur Entrée (vous trouverez la clé API dans le tableau de bord du domaine) : >window.btoa(\"api:key-0ce1xxxxxx\") ;
8. La valeur encodée s’affichera sur la ligne suivante :\u2028 >\"YXBpOmtleS0wYxxxx\"
9. Copiez la valeur dans son intégralité (y compris ce qui se trouve à la fin). Retournez dans la collection de la base de données. Pour la valeur de mailgunAuthProxy, saisissez « Basic  » (avec un espace) puis collez l’intégralité de la valeur.


Les identifiants API de Mailgun sont désormais sécurisés sur le serveur. Ensuite, vous allez configurer le proxy pour utiliser cette valeur.

La configuration du proxy est très rapide :

1. Ouvrez la page Proxy.
2. Cliquez sur Create new proxy. Nommez le proxy MailgunProxy.
3. Sélectionnez Use proxy + store sensitive data option.
   1. Pour Database, sélectionnez mailgunDB
   2. Pour Collection, sélectionnez secret
   3. Pour Key column, sélectionnez keyName
   4. Pour Value column, sélectionnez keyValue
4. Cliquez sur Enregistrer.
5. Retournez à l’application dans l’App Builder. Ouvrez le service Mailgun sending. Dans l’onglet Settings, actualisez la liste des proxys, puis sélectionnez Mailgun_Proxy.

Si vous créez une application Ionic, il y a une étape supplémentaire à réaliser :

• Ouvrez Pages/mailgun et passez à l’onglet Scope.
• Pour la variable de portée d’email, remplacez son type par Email (il s’agit d’un bug qui sera bientôt corrigé).

Vous pouvez également ouvrir Pages/index et définir le texte de l’ en-tête sur Mailgun API ainsi que sa Color sur positive.

L’application est maintenant prête à être exécutée.

Il existe deux façons d’exécuter et de tester votre application. Vous pouvez exécuter l’application dans le navigateur ou directement sur l’appareil. Je vais également vous montrer comment partager l’application avec n’importe qui.

Testez rapidement l’application dans le navigateur en cliquant sur le bouton Test dans l’App Builder. Voici à quoi ressemble l’application lorsqu’elle est exécutée dans le navigateur :

Il est également très facile de tester l’application sur un appareil réel. Vous n’avez même pas besoin d’installer l’application. Installez simplement l’application Appery.io Tester  sur votre appareil iOS ou Android  et lancez rapidement l’application. Lorsque vous vous connectez à l’application Tester, vous verrez toutes les applications que vous avez créées et vous pourrez les lancer rapidement. Lorsque vous exécutez l’application via l’application Tester, vous pouvez également tester rapidement n’importe quelle API native.

Il est également facile de partager la même application avec votre clientèle, vos collègues et vos proches. Il leur suffit d’installer l’application Appery.io Tester. Fournissez-leur un code de partage spécial qui leur permettra d’exécuter votre application.

Vous souhaitez créer des applications rapidement ? Commencez développer  avec l’abonnement d’essai gratuit d’Appery.io.

Auteur·trice: 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!