diff --git a/figures/email-src-hbs.tex b/figures/email-src-hbs.tex new file mode 100644 index 0000000..c5ab855 --- /dev/null +++ b/figures/email-src-hbs.tex @@ -0,0 +1,42 @@ +\begin{figure} + \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small] +{{#>mint.main}} + {{#>mint.title}} + Bienvenue [[surname]] [[name]] + {{/mint.title}} + + {{#>mint.text.normal}} + {{#println both="true"}} + Nous sommes heureux de vous accompagner lors de votre séjour en vous proposant du divertissement. + {{/println}} + {{/mint.text.normal}} + + {{#>mint.text.normal}} + {{>mint.credentials.intro colors=colors}} + {{/mint.text.normal}} + + {{println}} + + {{#>mint.text.important}} + {{>mint.credentials.button username="[[username]]" password="[[password]]"}} + {{/mint.text.important}} + + {{println}} + + {{>mint.button href=login_url text="Je me connecte"}} + + {{println}} + + {{#>mint.text.secondary}} +

+ {{#print both="true"}}Si vous avez besoin d'aide pour vous connecter, {{/print}}
+ {{#println both="true"}}vous pouvez vous rapprocher de l'Admission.{{/println}} +

+ {{/mint.text.secondary}} + + {{>mint.signature.noreply}} +{{/mint.main}} + \end{lstlisting} + \caption{Email sous format Handlebars} + \label{emailsrchbs} +\end{figure} diff --git a/figures/email-src-mjml.tex b/figures/email-src-mjml.tex new file mode 100644 index 0000000..7eb2f2f --- /dev/null +++ b/figures/email-src-mjml.tex @@ -0,0 +1,30 @@ +\begin{figure} + \begin{lstlisting}[language=xml, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small, showstringspaces=false] + + + + + + + + + + + + + + Bienvenue [[surname]] [[name]] + + + + + + + \end{lstlisting} + \caption{Email sous format MJML, compilé à partir de l'email sous format Handlebars} +\end{figure} diff --git a/figures/email.tex b/figures/email.tex new file mode 100644 index 0000000..c144610 --- /dev/null +++ b/figures/email.tex @@ -0,0 +1,40 @@ +\begin{figure}[H] + \begin{subfigure}[t]{0.45\textwidth} + \includegraphics[width=\textwidth]{email-1.png} + \caption{Email sous format HTML} + \end{subfigure} + \hfill + \begin{subfigure}[t]{0.45\textwidth} + \includegraphics[width=\textwidth]{email-2.png} + \caption{Email sous format HTML, avec les différents composants surlignés} + \end{subfigure} + + \begin{subfigure}[t]{\textwidth} + \begin{lstlisting}[language=hbs, numbers=none, backgroundcolor=\color{bgColor}, breaklines=true, basicstyle=\small] +Bienvenue Paul Durant + +Nous sommes heureux de vous accompagner lors de votre séjour en vous proposant du divertissement. + +Veuillez trouver ci-dessous vos accès personnels pour vous connecter à votre espace de divertissement. +Vous pouvez commencer à en profiter: dès le 06/11/2022 à 15h05. +Identifiant: dpaul +Mot de passe: d0615p$ + +[ Je me connecte ]( https://ginger.moment.tech/ ) + +Si vous avez besoin d'aide pour vous connecter, vous pouvez vous rapprocher de l'Admission. + +— La Clinique + +Veuillez ne pas répondre à cet e-mail. Si vous avez besoin d'aide, vous pouvez vous rapprocher de l'Admission. + +----- + +La Clinique +3 bvd Richard-Lenoir, 75011 Paris +Tél: +33 1 00 00 00 00 + \end{lstlisting} + \caption{Email sous format texte} + \end{subfigure} + \caption{Email d'identifiants, rendu avec l'application de preview d'emails\label{email}} +\end{figure} diff --git a/images/email-1.png b/images/email-1.png new file mode 100644 index 0000000..50f17c0 Binary files /dev/null and b/images/email-1.png differ diff --git a/images/email-2.png b/images/email-2.png new file mode 100644 index 0000000..8c0b6fb Binary files /dev/null and b/images/email-2.png differ diff --git a/references.bib b/references.bib index a28eb0a..41b245a 100644 --- a/references.bib +++ b/references.bib @@ -167,3 +167,19 @@ howpublished="\url{https://nextjs.org/}", note="[En ligne; accédé le 05 Février 2023]" } + +@article{oberloemailclients, + title={Most Used Email Clients Worldwide}, + author={Oberlo}, + year={2023}, + month={01}, + howpublished="\url{https://www.oberlo.com/statistics/most-used-email-clients}", + note="[En ligne; accédé le 06 Février 2023]" +} + +@misc{mjml, + title={MJML - The Responsive Email Framework}, + author={Mailjet}, + howpublished="\url{https://mjml.io/}", + note="[En ligne; accédé le 06 Février 2023]" +} diff --git a/report.tex b/report.tex index db726fa..6ee66c4 100644 --- a/report.tex +++ b/report.tex @@ -90,8 +90,8 @@ \newfontfamily{\SourceSans}{Source Sans Pro} % Looks like the font from google fonts has a different case, % so I'm stuck with scanning for existing fonts -\IfFontExistsTF{Source Sans Pro Semibold}{ - \newfontfamily{\SourceSansSB}[UprightFont={* Semibold}]{Source Sans Pro} +\IfFontExistsTF{Source Sans Pro SemiBold}{ + \newfontfamily{\SourceSansSB}[UprightFont={* SemiBold}]{Source Sans Pro} }{ \newfontfamily{\SourceSansSB}[UprightFont={* Semi-Bold}]{Source Sans Pro} } @@ -569,7 +569,7 @@ Puis, j'ai créé et implémenté une librairie Nest.JS nommée \texttt{mailing- \item Charger les composants et les emails depuis un dossier donné \item Transformer ceux-cis avec \texttt{handlebars-generator} en HTML et en texte \item Mettre en ligne des \term{templates} pour utiliser le service d'envoi d'emails personalisés d'\entity{Amazon} - \item Envoyer les \term{templates} avec les informations de l'utilisateur dedans + \item Envoyer les \term{templates} avec les informations de l'utilisateur dedans avec \entity{Amazon SES} \end{itemize} Afin de pouvoir tester le fonctionnement de la librairie \texttt{mailing-nest}, @@ -589,7 +589,15 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema \caption{Organisation initiale du système d'envoi de mail dans Mint-Service} \end{figure} -% mjml +Avec le système de mail en place, j'ai pu implémenter la première template d'email, qui était celle pour l'envoi d'identifiants au patients. +Très rapidement, j'ai pu voir sur \url{caniemail.com} que la quasi-totalités des fonctionnalités HTML5 modernes n'étaient pas supportés par \entity{Microsoft Outlook}, +ce qui nous forcerait à utiliser des \texttt{} dans l'entièreté des emails pour pouvoir supporter \entity{Microsoft Outlook}, +qui est à ce jour le 3ème client email le plus utilisé du monde \cite{oberloemailclients}. + +Une solution à ce problème est d'utiliser une librairie assurant la compatibilité avec \entity{Outlook}. +J'ai choisi la librairie \entity{MJML} \cite{mjml}, qui utilise un langage ressemblant au html, qui est ensuite compilé en HTML compatible avec \entity{Outlook}: + +\inputfig{email} \subsection{Refactor du système de mails} @@ -631,6 +639,8 @@ de convertir les entités de \entity{Mint Service} au format attendu par les ema \inputfig{nestjs1} \inputfig{nestjs2} +\inputfig{email-src-hbs} +\inputfig{email-src-mjml} \bibliographystyle{plain} \bibliography{references}{}