Construire votre entreprise Délivrer l'invitation à la réunion

Ce que vous allez créer

introduction

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.

Qu'est-ce que cette couverture d'épisode?

Dans ce didacticiel, nous aborderons l’envoi par courrier électronique de l’invitation au participant, l’implémentation de l’aspect de base de son contenu et l’examen de la construction de liens pour les destinataires afin qu’ils puissent répondre..

Tout le code de Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez mes séries parallèles Programming With Yii2 at Envato Tuts+.

Juste un rappel, je participe aux commentaires ci-dessous. Je suis particulièrement intéressé si vous avez des approches différentes, des idées supplémentaires ou si vous souhaitez suggérer des sujets pour de futurs tutoriels. Vous pouvez également me joindre sur Twitter @reifman.

Conditions requises pour délivrer des invitations

C’est excitant d’atteindre ce stade des premières invitations, mais cela demande toujours beaucoup de travail. Dans le dernier épisode, j'ai mis à jour les vues de la réunion afin qu'elles puissent soutenir l'organisateur ou les participants.. 

La plupart des travaux de cet épisode se concentreront sur la création d’e-mails HTML dans Yii et leur diffusion par programme. Cependant, alors que je commençais à écrire le code pour cela, je me suis heurté à toutes les complexités que le système doit bientôt supporter. Par exemple, tous les liens des invitations nécessaires pour authentifier de manière sécurisée les participants tout en considérant qu'ils ne se sont jamais inscrits pour Meeting Planner. Une partie de ce que je vais économiser pour le prochain épisode.

Pour l’essentiel, nous devons indiquer à l’application qui visualise la page de la réunion, puis personnaliser l’apparence et les commandes disponibles. Yii facilite la tâche, mais il y a beaucoup de détails impliqués.

Mise en garde concernant l'expérience utilisateur

Permettez-moi de dire d'emblée, il y a beaucoup de retouches et de polissages d'expérience utilisateur qui devront être effectués de manière itérative au fil du temps afin de créer le produit minimum viable (MVP). La plupart de ce que je suis en train de construire consiste en fonctionnalités de base pour obtenir l'alpha en cours d'utilisation réelle. Je sais que cela semble difficile à certains endroits et ne semblera pas toujours aussi intuitif que vous le souhaitez. Il existe également des inefficacités de codage qui devront être optimisées à l'avenir.

N'hésitez pas à poster vos pensées et commentaires ci-dessous, et je les prendrai en compte pour les travaux en cours.. 

Voici quelques-uns des défis posés par le travail de cet épisode:

  • La conception de base et le contenu de l'email d'invitation
  • Comment les invitations seront-elles livrées? par exemple. quelle plate-forme ou fournisseur de messagerie?
  • Quelles commandes liées seront proposées dans l'e-mail? Et l’organisateur pourrait-il limiter certains des pouvoirs conférés aux participants??
  • Réponse fonctionnelle aux commandes liées dans l'e-mail d'invitation
  • Gestion des visites des utilisateurs invités qui ne se sont pas encore inscrits, par exemple ce qu'ils peuvent accéder et ne peuvent pas?
  • Gestion de l'expérience utilisateur pour la collecte de noms conviviaux des participants
  • Consignation des réponses à l'invitation à la réunion, puis mise en place de la capacité de surveillance et de notification pour informer l'organisateur
  • Planification de l'infrastructure pour les courriels à venir indiquant les mises à jour à mesure que les configurations de réunion changent et que le temps approche (et passe), par ex. modifier les notifications, les rappels de réunion, accepter les réponses en tant que nouvelles notes, etc..

Au moment d’écrire le code de cet épisode, j’ai construit une infrastructure pour certains des éléments ci-dessus et en ai laissé quelques-uns à discuter dans les prochains épisodes. Pour commencer, penchons-nous sur le motif de l'invitation.

Le design et le contenu de l'invitation

Au départ, je devais demander ce qui devrait être inclus dans le courrier électronique. Évidemment, il y aurait les champs standard:

  • À
  • De
  • Sujet (vous êtes invité à une réunion!)
  • Corps du message
  • Bas de page

Le contenu du corps devra inclure:

  • Les détails de la réunion
  • Places proposées
  • Dates et heures proposées

Et, en fonction des paramètres de l'organisateur, quels liens de commande doivent être présentés? Voici quelques questions qui ont été soulevées. Devrions-nous permettre aux destinataires de:

  • Acceptez toutes les options, c’est-à-dire que tous les lieux, dates et heures sont acceptables
  • Acceptez tous les lieux ou toutes les dates et heures séparément
  • Accepter des lieux spécifiques et des dates et heures spécifiques individuellement
  • Voir les cartes des lieux potentiels et finalement des sites Web et des liens Yelp
  • Envoyez une note à l'organisateur pour la vue de la réunion
  • Proposer un nouvel endroit ou une date et une heure
  • Choisissez un lieu ou une date et une heure
  • Finaliser la réunion

Enfin, le pied de page devra prendre en charge:

  • Avis Alpha avec demande de feedback
  • Option pour bloquer l'expéditeur
  • Option de désinscription aux futures invitations de Meeting Planner
  • Les détails de l'entreprise et les informations de contact

Je sais qu'il peut être difficile de visualiser tout cela. Ce n'était pas un épisode facile à construire. Voici un exemple de l'invitation que j'ai finalement créée:

Pour l'instant, j'ai utilisé les commandes acceptable et rejeter indiquer au participant qu'il indique simplement si un lieu, une date et une heure lui conviennent ou non. Cependant, par souci de simplicité, j’ai proposé accepter tous les lieux et les momentsaccepter tous les lieux et accepter tous les temps pour gérer cela en étapes plus rapides.

Tout cela est vaguement basé sur le formulaire d’invitation à la réunion du dernier épisode. Ci-dessous, vous pouvez voir la partie de l'invitation qui offre la configuration des lieux et des heures:

Notez que le courrier électronique fournit certaines des fonctionnalités avancées intégrées au dernier épisode afin de permettre aux organisateurs d’offrir de meilleurs niveaux de contrôle aux participants, tels que la suggestion de nouveaux lieux et horaires, le choix du lieu et de l’heure définitifs, etc..

Très vite, j'ai rapidement compris qu'il serait nécessaire d'investir davantage dans la conception du courrier électronique et de proposer des configurations plus simples de l'invitation. Encore une fois, je vais devoir sauvegarder ceci pour les prochains épisodes. 

À titre d'exemple, l'un de mes premiers amis testeurs d'alpha a suggéré qu'ils souhaitaient pouvoir indiquer que certains lieux ne fonctionnaient qu'à certaines dates et à certaines heures, et inversement. En fin de compte, je devrais peut-être unifier les lieux, les dates et les heures en un seul modèle de choix.

Pour l'instant, passons en revue comment j'ai livré l'invitation ci-dessus telle qu'elle est.

Délivrer l'invitation

Que se passe-t-il lorsque l'organisateur clique Envoyer? Au départ, je m'attendais à devoir écrire directement dans l'API Mailgun, que j'ai déjà expliquée dans les didacticiels Envato Tuts + précédents. Cependant, la prise en charge de la messagerie par Yii2 est assez riche et j'ai été en mesure de tirer parti de la prise en charge de sa vue native pour les présentations de messagerie (HTML et texte) et de les livrer simplement à l'aide de l'authentification de mon compte Mailgun SMTP. Cela prend même en charge l’attachement de fichiers d’événements futurs (.ics) pour importer des réunions dans des calendriers..

Remarque: Je suis un grand fan de Mailgun, mais j'ai aussi réalisé du développement pour eux en tant que consultant et écrit pour leur blog et Envato Tuts.+.

Avant de continuer, je vous encourage à jeter un rapide coup d'œil à la documentation Mailing de Yii2. Il offre un excellent aperçu. 

Tout d'abord, j'ai ajouté des paramètres de configuration SwiftMailer plus détaillés à /common/config/main-local.php:

 ['db' => ['class' => 'yii \ db \ Connection', 'dsn' => 'mysql: host = localhost; nombase = mp', 'nomutilisateur' => 'xxxxxxxxxxxxx, mot de passe' > 'xxxxxxxxxxxx', 'charset' => 'utf8',], 'mailer' => ['class' => 'yii \ swiftmailer \ Mailer', 'viewPath' => '@ common / mail', // comment le tableau suivant pour envoyer du courrier en utilisant 'transport' => [ 'class' fonction mail de php => 'Swift_SmtpTransport', 'hôte' => 'smtp.mailgun.org', 'username' => '[email protected]' , 'password' => 'axxxxxxxxxxxxxxxxxxxxxxxxx2', 'port' => '587', 'cryptage' => 'tls',], // envoie tous les mails dans 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,],],]; 

Cela a permis au composant SwiftMailer de Yii de transmettre mes courriers électroniques via le service SMTP de base de Mailgun.. 

Vous devrez obtenir vos paramètres SMTP Mailgun à partir de son panneau de configuration pour votre domaine:

Bien sûr, vous devez également vous assurer que SwiftMailer fait partie de la configuration de votre fichier composer.json avant de lancer l'exécution. mise à jour du compositeur:

"minimum-stabilité": "stable", "require": "php": "> = 5.4.0", "yiisoft / yii2": "> = 2.0.7", "yiisoft / yii2-bootstrap": " * "," yiisoft / yii2-swiftmailer ":" * ",

Ensuite, j'ai créé la configuration du fichier d'affichage que SwiftMailer pouvait utiliser. Premièrement, il doit exister une mise en page principale pour HTML et le texte. Ensuite, il doit également y avoir des fichiers de contenu individuels:

Tout cela n’est pas entièrement documenté pour Yii, aussi espérons-nous que cet exemple vous guidera. Notez que les fichiers de vue finalize-html et -text ont été ajoutés ultérieurement pour un futur épisode..

Généralement, le fichier layouts / html.php est assez simple:

 beginPage ()?>      tête ()?>   beginBody ()?>  
Cordialement, nom?> équipe
endBody ()?> endPage ()?>

Cependant, j'ai beaucoup ajouté pour commencer à travailler avec le style et la mise en forme des courriels HTML proposés à la communauté open source par Mailchimp.

SwiftMailer de Yii convertira généralement automatiquement votre vue HTML en vues compatibles avec le texte. Très probablement, je souhaiterais une vue texte plus courte et plus simple pour les invitations, mais pour l'instant, je vais retarder l'examen des résultats de mon code par courrier électronique..

Dans le modèle Meeting.php, j'ai écrit une fonction d'envoi qui regroupe toutes les données nécessaires à la création de la vue d'invitation présentée ci-dessus. Pour le moment, je laisse de côté les éléments liés au prochain épisode pour la création de liens de commande. Fondamentalement, j'utilise Yii :: $ app-> mailer compose () et envoyer():

fonction publique send ($ user_id) … foreach ($ this-> participants sous forme de $ p) … // envoie le message $ message = Yii :: $ app-> mailer-> compose (['html' => 'invitation -html ',' text '=>' invitation-text '], [' meeting_id '=> $ this-> id,' noPlaces '=> $ noPlaces,' participant_id '=> 0,' owner '=> $ this -> propriétaire-> nom d'utilisateur, 'id_utilisateur' => $ p-> id_participant, 'clé_auth' => $ clé_auth, 'intro' => $ ceci-> message, 'liens' => $ liens, 'en-tête' => $ header, 'places' => $ places, 'times' => $ times, 'notes' => $ notes, 'meetingSettings' => $ this-> meetingSettings,]); // à faire - ajouter le nom complet $ message-> setFrom (array ('[email protected] '=> $ this-> propriétaire-> email)); $ message-> setTo ($ p-> participant-> email) -> setSubject (Yii :: t ('frontend', 'Demande de réunion:'). $ this-> sujet) -> send (); … 

Ces fonctions créent un message à l'aide de notre présentation et de notre affichage HTML, puis transmettent les messages résultants avec des données personnalisées au service SMTP de Mailgun. Nous sommes en mesure d'utiliser l'implémentation de Yii de son modèle MVC pour l'envoi de courrier électronique.

Problèmes avec le compositeur

Comme j'ai utilisé Composer avec Yii, j'ai souvent rencontré beaucoup de problèmes difficiles à résoudre. Le plus souvent, il est lié au plug-in “yiisoft / yii2-composer” nécessite une erreur composer-plugin-api 1.0.0, mais cette fois-ci, j'ai rencontré un problème de mise à jour de Mailgun. Les versions récentes de l'API Mailgun requièrent des mises à jour récentes pour faire grincer des dents. Un précédent plug-in Yii utilisé dans MeetingPlanner nécessitait une version fixe et périmée de Guzzle. J'ai donc dû configurer le compositeur pour utiliser un alias. 

Pour l’essentiel, j’ai demandé au compositeur de synchroniser la dernière version de Guzzle, mais d’indiquer à l’application qu’elle utilisait une version antérieure. Dans composer.json, un alias ressemble à ceci:

"yiisoft / yii2-authclient": "~ 2.0.0", "mailgun / mailgun-php": "~ 2.0", "guzzlehttp / guzzle": "6.2.0 comme 4.2.3", "php-http / guzzle6 -adapter ":" 1.0.0 ",

Je lui demande d'installer "guzzlehttp / guzzle": "6.2.0 en tant que 4.2.3" et cela fait que tout fonctionne bien, du moins dans ce cas. Parfois, les développeurs de plugins ont besoin de versions spécifiques de bibliothèques pour fonctionner correctement. Composer est surtout utile, mais parfois c'est amusant.

Mise à jour de la création de réunion 

Après avoir expérimenté des invitations, j'ai décidé de personnaliser la vue de création de réunion afin de prendre en charge plus clairement un domaine. Cela permet aux utilisateurs d'écrire une ligne d'objet comme s'ils envoyaient un courrier électronique pour inviter quelqu'un à une réunion sans planificateur de réunions. L'UX pour cela devra être itéré et simplifié avec le temps.

Cela fournit la ligne d'objet idéale dans l'e-mail pour l'invitation à la réunion. Bien sûr, pour fournir cela, je devais étendre le modèle de réunion.

J'ai créé une nouvelle migration appelée extend_meeting_table_add_subjectqui a ajouté le sujet:

db-> nomDuPort === 'mysql') $ tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE = InnoDB';  $ this-> addColumn ('% meeting', 'subject', 'string NOT NULL');  public function down () $ this-> dropColumn ('% meeting', 'sujet');  

Et je devais ajouter un support pour le nouveau champ au fichier _form.php de la réunion et au modèle.

field ($ model, 'meeting_type') -> dropDownList ($ model-> getMeetingTypeOptions (), ['prompt' => Yii :: t ('frontend', 'Quel type de réunion est-ce?')]) -) label (Yii :: t ('frontend', 'Type de réunion'))?> champ ($ model, 'subject') -> textInput (['maxlength' => 255]) -> label (Yii :: t ('frontend', 'Subject'))?> field ($ model, 'message') -> textarea (['rows' => 6]) -> label (Yii :: t ('frontend', 'Message')) -> hint (Yii :: t (' frontend ',' Optionnel '))?>
isNewRecord? Yii :: t ('frontend', 'Create'): Yii :: t ('frontend', 'Update'), ['class' => $ model-> isNewRecord? 'btn btn-success': 'btn btn-primary'])?>

Voici un extrait de ce qui a été ajouté au modèle Meeting.php:

règles de fonction publique () return [['' owner_id ',' subject '],' required '], [[' owner_id ',' type_reunion ',' status ',' created_at ',' updated_at '],' entier ' ], [['' message ',' sujet '],' chaîne ']];  / ** * @inheritdoc * / fonction publique attributLabels () return ['id' => Yii :: t ('frontend', 'ID'), 'owner_id' => Yii :: t ('frontend', 'Propriétaire'), 'meeting_type' => Yii :: t ('frontend', 'Type de réunion'), 'subject' => Yii :: t ('frontend', 'Subject'), 'message' => Yii :: t ('frontend', 'Message'), 'status' => Yii :: t ('frontend', 'Status'), 'created_at' => Yii :: t ('frontend', 'Créé à '),' updated_at '=> Yii :: t (' frontend ',' Updated At '),]; 

Une page de carte mise à jour pour les lieux

Au départ, mes liens de carte d'invitation sont allés directement à Google Maps, mais j'ai compris qu'il serait préférable de les lier à une vue de carte intégrée dans Meeting Planner, qui faisait partie de l'invitation à la réunion. Dans mon cas, j'ai créé une vue de la carte avec un bouton Retour à la réunion:

Pour cela, j'ai créé une nouvelle vue construite sur /views/place/view.php. Voici /views/meeting/viewplace.php:

title = $ model-> getMeetingHeader (); $ this-> params ['breadcrumbs'] [] = ['label' => Yii :: t ('frontend', 'Meetings'), 'url' => ['index']]; $ this-> params ['breadcrumbs'] [] = $ this-> title; $ this-> params ['breadcrumbs'] [] = $ place-> name; ?> 

titre)?>

$ model-> id], ['class' => 'btn btn-primary'])?>

$ place, 'attributs' => ['nom', ['label' => 'site web', 'valeur' ​​=> Html :: a ($ place-> site web, $ place-> site web), 'format' = > 'raw'], // 'place_type', 'full_address',],])?>
$ gps-> lat, 'lng' => $ gps-> lng]); $ map = new Map (['center' => $ coord, 'zoom' => 14, 'width' => 300, 'height' => 300,]); $ marker = new Marker (['position' => $ coord, 'title' => $ place-> nom,]); // Ajouter un marqueur à la carte $ map-> addOverlay ($ marker); echo $ map-> display (); else echo 'Aucune coordonnée de localisation pour cet endroit n'a été trouvée.'; ?>

Et après?

Comme vous pouvez le constater, la première invitation par courrier électronique a soulevé toutes sortes de problèmes et a nécessité de nombreuses mises à jour, de taille petite à moyenne. Mais, avec la base de base pour eux complète, nous pouvons contempler la complexité de ce qui a été créé. En d'autres termes, ce qu'il faut faire ensuite:

  • Liens de commande authentifiés. Lorsqu'un participant clique sur un lien de commande dans l'e-mail, comment allons-nous l'authentifier, surtout s'il ne s'est jamais enregistré avec notre application?
  • Finalisation de la réunion en fonction des réponses. Lorsque les participants font leurs choix et que l'organisateur est prêt à finaliser la réunion, quels sont les changements et les mises à jour nécessaires?
  • Suivi du processus de modification de l'invitation par les participants. Comment surveillerons-nous les modifications apportées aux détails de la réunion et choisirons-nous le moment d'informer les organisateurs et les participants??
  • Aviser l'organisateur et le participant des modifications. Que devrions-nous leur dire, et quelles options devraient être offertes lorsque nous les informons?
  • Construction de fichiers de calendrier (.ics) pour l'importation dans Google Calendar, Outlook et Apple Calendar avec les détails de l'invitation. Une fois la réunion finalisée, nous pouvons envoyer un fichier .ics téléchargeable..
  • Construire une vue d'une réunion entièrement finalisée. À quoi doivent ressembler les détails de la réunion lorsqu'il n'est plus nécessaire d'offrir des commandes pour choisir les lieux et les heures? Mais aussi, quelles commandes sont nécessaires pour la reprogrammation, le décalage, l'annulation, le changement de lieu ou la date et l'heure, etc..?

Le prochain épisode explorera certaines de ces questions, en se concentrant sur les liens de l'invitation auxquels les destinataires voudront répondre bien qu'ils ne se soient initialement jamais inscrits avec Meeting Planner. D'autres questions devront attendre un peu plus longtemps.

Je commence également à expérimenter 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 peux écrire plus à ce sujet dans le cadre de cette série.

Surveillez les prochains didacticiels dans la section Création de votre démarrage avec PHP: j'espère que vous conviendrez que cela devient passionnant!

N'hésitez pas à ajouter vos questions et commentaires ci-dessous; Je participe généralement aux discussions. Vous pouvez également me joindre sur Twitter @reifman.

Liens connexes

  • Programmation avec Yii2: Mise en route
  • Documentation Mailing Yii2
  • Composant Yii2 SwiftMailer
  • Le Yii Developer Exchange