Share
Ce tutoriel fait partie de la série Construire votre démarrage avec PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d'une startup du concept à la réalité, en utilisant mon application Meeting Planner comme exemple concret. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. Je traiterai également les problèmes liés au démarrage au fur et à mesure qu'ils surviennent.
Dans notre précédent épisode, Delivering Invitations, j'avais présenté des modèles de courrier électronique HTML réactifs, basés sur des modèles MailChimp à code source ouvert. Ensuite, dans notre précédent épisode, Raffinage des modèles de courrier électronique, nous avons migré vers les modèles Sendwithus Oxygen. Les nouveaux modèles avaient fière allure:
Mais il y avait de gros problèmes avec les modèles dans Gmail. Voici le modèle de référence Oxygen dans Gmail:
Dans ce didacticiel, je vais raconter comment j'ai nettoyé l'apparence des nouveaux modèles HTML dans Gmail. Il s'agit d'inclure le CSS car les génies de Google ne prennent pas en charge les définitions de style comme tout le monde..
Étant donné que la moitié des utilisateurs de Meeting Planner utiliseront probablement un e-mail de demande de réunion et que 10 à 25% d'entre eux le seront probablement avec Gmail, il était important de résoudre ce problème..
Si vous n'avez pas encore essayé Meeting Planner, planifiez votre première réunion. Je participe aux commentaires ci-dessous, alors dites-moi ce que vous en pensez! Vous pouvez également me joindre sur Twitter @reifman. Je suis particulièrement intéressé si vous souhaitez suggérer de nouvelles fonctionnalités ou de nouveaux sujets pour de futurs tutoriels..
Pour rappel, tout le code pour Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmer avec Yii2.
Pour les modèles de courrier électronique, j'ai décidé d'utiliser les modèles de courrier électronique Oxygen de Sendwithus. Oxygen proposait une famille complète de modèles pour des scénarios utiles. Cela semblait simple, organisé et facilement extensible:
Chacun des modèles individuels de Sendwithus peut être prévisualisé et testé sur son compte Litmus.
Voici notre adresse e-mail de réinitialisation de votre mot de passe maintenant sur un iPhone, beaucoup plus esthétique qu'auparavant:
J'étais un peu confus lorsque les premières tentatives Gmail que j'ai reçues m'ont semblé mal formées:
Mais l'examen de leurs aperçus Litmus (qu'ils ont mis à jour et réparés depuis) m'a montré que c'est exactement ce à quoi ils ressemblent dans Gmail:
J'ai appris par la suite que Gmail nécessite davantage de CSS en ligne que d'autres services. Ma tâche était de résoudre ce problème pour les utilisateurs de Meeting Planner.
Au départ, je pensais que nous devions gérer nous-mêmes le CSS en ligne pour Gmail. Il y avait deux chemins à prendre, pas faciles.
Soit a) j'aurais pu traiter chaque message sortant via un prémaileur Python auto-hébergé après sa construction complète, ou b) je pouvais appliquer la mise en ligne aux modèles de l'arborescence source..
Pour des raisons de simplicité, j'ai choisi d'appliquer l'inline aux modèles manuellement, en pensant que je pourrais opter pour l'inline live à l'avenir. Je ne suis pas aussi familier avec l'exécution de tâches Python à partir de PHP et la surveillance de leurs performances pour une fonctionnalité essentielle telle que les invitations à des réunions par courrier électronique. J'ai donc décidé de ne pas suivre cette voie au départ. De même, si je dois envoyer un courrier électronique aux 10 000 utilisateurs, cela représente 10 000 événements en ligne, ce qui peut ralentir le serveur..
Malgré tout, l’approche que j’ai choisie n’était pas facile et s’est transformée en cauchemar procédural. Il n’était pas facile de générer par programmation du code HTML pouvant être facilement traité, puis renvoyé à PHP pour la génération d’e-mails dynamiques..
Le logiciel Premailer de Peter Bengtsson intègre des CSS pour vous via Python. Il m'a aussi gentiment pointé vers Premailer.io, ce qui a facilité les choses.
Fondamentalement, vous copiez et collez votre modèle de courrier électronique dans le Textarea onglet et cliquez sur le Convertir bouton (non montré):
Ensuite, vous pouvez copier et coller le modèle de courrier électronique obtenu avec CSS intégré:
Voici une meilleure vue de HTML avec les styles incorporés avec avis CSS en ligne avec chaque balise HTML, à la manière des ingénieurs de Gmail:
Changements à votre réunion salut , des modifications ont été apportées à votre réunion.
Cliquez sur le bouton ci-dessous pour afficher la page de la réunion..
Vous pouvez même voir le résultat dans le Aperçu tab-je venais de traiter l'en-tête de la mise en page dans ces captures d'écran:
En outre, tout devait être fait ensemble. J'aurais pu créer une mise en page ancienne et nouvelle et modifier le code du modèle un par un, mais cela aurait créé davantage de zones de modifications. En fin de compte, j'avais environ sept modèles complets et leurs composants communs à traiter.
Traitement des modèles
Comme Meeting Planner est construit dans l'architecture MVC de Yii2, les e-mails ont un modèle de présentation externe et un modèle interne avec beaucoup de PHP entremêlé pour la génération de données. J'avais également des sous-modèles pour des éléments communs et réutilisables tels que les notes de réunion et les pieds de page..
Vous ne pouvez pas simplement traiter du code d'affichage chargé de PHP. Vous devez supprimer des éléments PHP, exécuter le modèle via Premailer, puis réintégrer le code PHP. Je suis chanceux que la plupart de mon code PHP n'utilise pas beaucoup les styles et était assez simple à couper puis à réintégrer.
Pris ensemble, cela a rendu le processus de génération de modèles en ligne assez difficile et fastidieux. Cela a également rendu difficile l’idée de maintenir et de construire de nouveaux modèles..
Fondamentalement, je devais créer des fichiers temporaires avec le bloc de style entier ci-dessus et le code HTML que je voulais insérer en-dessous, supprimer PHP, traiter le modèle, puis réintégrer le code PHP..
J'ai d'abord traité la mise en page HTML Mail. Ensuite, j'ai traité chaque sous-modèle et modèle.
Mais cela a fonctionné. voici une capture d'écran de la Réinitialisez votre mot de passe modèle dans Gmail Web:
Une autre solution plus prometteuse
Vers la fin de tout ce travail difficile et la prise de conscience croissante de la difficulté de maintenir mes modèles dans un avenir proche, je me suis demandé si Mailgun fournissait des CSS en ligne et commençait à effectuer des recherches en ligne..
Mailgun ne l’a pas fait, mais SwiftMailer, que Yii utilise pour la distribution du courrier SMTP, le fait. Il a fallu encore une demi-heure pour nettoyer mon travail précédent (a.k.a. mess) et tout régler, en installant le plugin CSS Inlining pour SwiftMailer..
J'ai utilisé le plugin Open Buildings CSS Inliner basé sur PHP que j'ai ajouté à composer.json:
"minimum-stabilité": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "> = 2.0.7", "yiisoft / yii2-bootstrap": " * "," yiisoft / yii2-swiftmailer ":" * "," openbuildings / swiftmailer-css-inliner ":" * "," 2 amigos/yii2-google-maps-library ":" * ",Voici les résultats de la mise à jour du compositeur:
$ composer update Chargement des référentiels composer avec les informations de paquet Mise à jour des dépendances (y compris require-dev) - Installation de openbuildings / swiftmailer-css-inliner (0.3.0) Téléchargement: 100% - Installation de symfony / css-selector (v3.1.0) Téléchargement: 100 % - Installation de tijsverkoyen / css-to-inline-styles (1.5.5) Téléchargement: 100% Écriture d'un fichier verrou Génération de fichiers à chargement automatiqueJ'avais également besoin de personnaliser la configuration du logiciel de messagerie pour utiliser le plugin dans /common/config/main-local.php (en local et en production):
], 'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ common / mail', // commentez le tableau suivant pour envoyer un mail en utilisant la fonction mail de php 'transport' = > ['class' => 'Swift_SmtpTransport', 'hôte' => 'smtp.mailgun.org', 'username' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx , 'encryption' => 'tls', 'plugins' => [['' class '=>' Openbuildings \ Swiftmailer \ CssInlinerPlugin ',],],], //, envoie tous les mails à un fichier par défaut. Vous devez définir // 'useFileTransport' sur false et configurer un transport // pour que l'expéditeur envoie de vrais courriels. 'useFileTransport' => false,],],Les choses ont commencé à fonctionner assez rapidement, même si Gmail présentait toujours un défaut visuel majeur:
L'inliner CSS de l'Open Building écrit en PHP n'a pas fonctionné aussi bien que le Premailer basé sur Python, du moins avec les paramètres par défaut..
Plutôt que de passer du temps à déboguer l'inliner basé sur PHP et les modèles pour le moment, j'ai décidé de revenir aux modèles traités par Premailer. Ça marche bien pour l'instant.
À un moment donné, je devrai vérifier s'il existe des moyens simples de résoudre ce problème ou de configurer le plug-in inline basé sur PHP. Alternativement, je pourrais avoir besoin de passer à l'inlinateur Python.
Lorsque vous construisez une startup, vous devez choisir vos batailles et tout prioriser. Pour le moment, cette priorité est moins importante et il est assez facile de contourner le problème..
Dans l'arborescence du code, vous trouverez / common / mail / inlining avec une arborescence de divers dossiers et un fichier mail-readme.txt pour expliquer ce qu'il y a là. Il existe essentiellement des copies des modèles Oxygen, des versions de travail de PHP, du code pré-traité édité et du code traité final..
Et après?
Je prépare actuellement Meeting Planner pour la version alpha. Je me concentre principalement sur les améliorations et les fonctionnalités permettant de rendre la version alpha plus fluide. Je surveille tout dans Asana maintenant, ce que je vais écrire dans un prochain tutoriel. Il y a aussi quelques nouvelles fonctionnalités intéressantes toujours sur leur chemin.
Enfin, je commence à expérimenter avec WeFunder à partir de la mise en œuvre des nouvelles règles de la SEC en matière de financement participatif. S'il vous plaît envisager de suivre notre profil. Je vais aussi écrire plus à ce sujet dans un prochain tutoriel.
En attendant d'autres épisodes, planifiez votre première réunion et testez les modèles avec vos amis avec des boîtes aux lettres Gmail. Aussi, je vous serais reconnaissant de partager votre expérience ci-dessous dans les commentaires, et vos suggestions m'intéresseront toujours. Vous pouvez également me joindre directement sur Twitter @reifman.
Surveillez les prochains tutoriels de la série Construire votre démarrage avec PHP.
Liens connexes
- Planificateur de réunion
- La page We Funder du planificateur de réunion
- Programmation avec Yii2: Mise en route
- L'échange de développeurs Yii2
- Premailer.io: Premailer de Peter Bengtsson (basé sur Python)
- Plugin Open Buildings CSS Inliner (basé sur PHP)
Accentsconagua
