Share
Ce que vous allez créerCe tutoriel fait partie de la Construire votre démarrage avec la série PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d’une startup du concept à la réalité en utilisant mes Planificateur de réunion application comme exemple de la vie réelle. À 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.
Pour la version alpha de Meeting Planner, j'ai fourni aux personnes la possibilité de modifier leur fuseau horaire dans les paramètres utilisateur. Cependant, pour quiconque en dehors de l'ouest des États-Unis, ils se sont peut-être demandé pourquoi leurs rendez-vous au calendrier étaient au mauvais moment. Il faut savoir chercher la page des paramètres.
En approchant de la version bêta, j'ai réalisé que je devais résoudre ce problème le plus rapidement possible. J'ai donc commencé à réfléchir à la meilleure façon de résoudre ce problème..
Dans l'épisode d'aujourd'hui, je vais vous expliquer mon approche de la détection automatique de fuseaux horaires et la façon dont je l'ai intégrée à l'expérience utilisateur..
Si vous ne l'avez pas encore fait, essayez dès à présent Meeting Planner en planifiant votre première réunion. Si vous vous trouvez en dehors de la zone d’heure du Pacifique, des messages vous invitant à mettre à jour votre fuseau horaire sont décrits ci-dessous. S'il vous plaît poster vos commentaires sur l'expérience dans les commentaires ci-dessous.
Je participe aux commentaires, mais vous pouvez également me joindre à @reifman sur Twitter. Je suis toujours ouvert aux nouvelles idées de fonctionnalités et suggestions de sujets pour les prochains 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 mes séries parallèles Programming With Yii2. Plus je construis Meeting Planner, plus je suis impressionné par Yii2 et son équipe de bénévoles.
La page des paramètres actuels permet aux utilisateurs de choisir un fuseau horaire. J'ai reconstitué une capture d'écran montrant une partie des fuseaux horaires sélectionnés qui apparaissent lorsque vous cliquez sur la liste déroulante. il y a beaucoup:
Cela semblait bien fonctionner, mais les utilisateurs ne le cherchaient pas nécessairement. En fait, ils n'auraient aucun moyen de savoir s'ils se trouvaient dans le même fuseau horaire que notre serveur..
En premier lieu, j’ai examiné certains des sélecteurs de carte de fuseau horaire pour voir s’ils détiendraient une réponse facile. Il y en avait deux que j'ai trouvées avec essentiellement le même nom: Timezone Picker:
et quicksketch / timezonepicker: un sélecteur de fuseau horaire basé sur jQuery et ImageMap. Bien que j'apprécie les sélecteurs graphiques, ils ne fonctionnent pas bien pour les téléphones mobiles et ne fournissent pas de détection..
J'ai trouvé une extension Yii2 appelée détecteur de fuseau horaire, mais on ne savait pas comment déterminer le fuseau horaire et quelle en était la fiabilité..
Finalement, je suis allé avec une solution JavaScript basique appelée jsTimezoneDetect; vous pouvez voir la page de démonstration ci-dessous:
Il repose sur le paramètre de fuseau horaire de votre plate-forme ou de votre appareil plutôt que sur des adresses IP de géolocalisation qui peuvent être induites en erreur par les réseaux d'entreprise, les fournisseurs de services Internet et les réseaux privés virtuels. C'était rapide et promu sa précision.
Mon objectif était de détecter le fuseau horaire de l'utilisateur et de lui permettre de mettre à jour ses paramètres rapidement et sans distraction. Le premier endroit qui m'inquiétait lorsqu'un utilisateur définissait son fuseau horaire était lorsqu'il ajoutait une heure de réunion à une nouvelle réunion..
Par exemple, quand ils cliquent sur le bouton plus l'icône à côté de Quand pour les heures de réunion:
Par exemple, si je vis à Toronto, au Canada, dans le fuseau horaire de l’Est et que je visite Meeting Planner, son paramètre par défaut est PST, trois heures derrière moi. Donc, mon heure de rendez-vous au-dessus de 19h30 ne serait pas correcte.
Maintenant si jsTimezoneDetect détermine que vous vous trouvez dans un fuseau horaire différent (p. ex. Toronto) de votre paramètre utilisateur actuel (p. ex. Los Angeles), il vous demandera si vous souhaitez le modifier:
Dans la capture d'écran ci-dessus, j'ai utilisé le MacOS Préférences de date et heure (en haut à droite) pour modifier mon fuseau horaire par rapport au paramètre actuel de Planificateur de réunions et me permettre de tester sa modification.
Une fois le fuseau horaire mis à jour, le choix de l'heure antérieure s'affichera en heure de la côte est:
Mais la prochaine fois que vous ajouterez une heure de réunion, ce sera dans votre fuseau horaire correct..
Je ne voulais pas que les utilisateurs soient obligés de passer à la page des paramètres pour effectuer le changement, et perdre leur place lors de la planification d'une réunion. Ainsi, alors que cela prenait du temps supplémentaire, j’ai écrit un peu d’Ajax qui a mis à jour le fuseau horaire pour eux depuis cette page afin qu’ils puissent continuer avec la planification..
Vous pouvez voir ci-dessous qu’une fois que vous avez cliqué sur le nouveau fuseau horaire, son état vous avertit qu’il a été mis à jour et vous pouvez continuer à ajouter une heure de réunion sans perdre votre place:
Pour construire cela, j'ai commencé à travailler sur le frontend / views / meeting-time / _form.php ci-dessus. Tout d'abord, j'ai ajouté JavaScript pour détecter le fuseau horaire et gérer les alertes:
registerJsFile (MiscHelpers :: buildUrl (). '/ js / jstz.min.js', ['depend' => [\ yii \ web \ JqueryAsset :: className ()]); $ this-> registerJsFile (MiscHelpers :: buildUrl (). '/ js / meeting_time.js', ['depend' => [\ yii \ web \ JqueryAsset :: className ()]]); ?>
J'ai également créé des variables de formulaire masquées pour prendre en charge le script:
\ common \ components \ MiscHelpers :: getUrlPrefix (), 'id' => 'préfixe_url']); ?> 'tz_dynamic']); ?> 'tz_current']); ?>
le préfixe_url aide à gérer l'adressage JavaScript entre les environnements de développement et de production. le tz_current est chargé depuis MeetingTimeController.php. Il s'agit du paramètre de fuseau horaire actuel de l'utilisateur dans le planificateur de réunions. le tz_dynamicsera rempli par notre script de détection.
J'ai également créé deux zones d'alerte en haut du formulaire qui seront masquées par défaut à l'aide des définitions CSS de leurs identifiants:
?')?>
le tz_alert apparaît si le fuseau horaire détecté diffère de votre réglage actuel. le tz_success apparaît si vous modifiez le fuseau horaire.
Notez également la balise span vide:
… Changez votre fuseau horaire ?')?>
Le script y placera un lien AJAX pour tz_detect, que vous verrez dans notre script.
Voici un extrait de frontend / web / js / meeting_time.js:
Accentsconagua
$ (document) .ready (function () // détecte le fuseau horaire de l'utilisateur var tz = jstz.determine (); // détermine le fuseau horaire du client du navigateur var timezone = tz.name (); // par exemple, «Asie / Kolhata '$ (' # tz_dynamic '). Val (fuseau horaire); // compare au réglage actuel si (fuseau horaire! = $ (' # Tz_current '). Val ()) // définit l'alerte de texte $ (' # tz_new '). html (' '+ timezone +' '); $ (' # # tz_alert '). show ();); function setTimezone (timezone) $ .ajax (url: $ ('# url_prefix'). val () + '/ user-setting / timezone', données: 'timezone': timezone, succès: fonction (données) $ ('# tz_alert'). hide (); $ ('# tz_success'). show (); return true;); dans le $ (document) .ready () fonction ci-dessus, il appelle jsTimezoneDetect () et vérifie si le fuseau horaire actuel de l'utilisateur est différent. Si tel est le cas, il remplace la balise span vide par un lien JavaScript vers setTimezone () et montre la boîte d'alerte.
le setTimezone function effectue un appel AJAX au fichier UserSettingController.php:
public function actionTimezone ($ timezone) // définit le fuseau horaire de l'utilisateur actuellement connecté plutôt que le retour Yii :: $ app-> response-> format = \ yii \ web \ Response :: FORMAT_JSON; $ user_id = Yii :: $ app-> user-> getId (); UserSetting :: setUserTimezone ($ user_id, $ timezone); retourne vrai;
Il met à jour de manière transparente le paramètre de fuseau horaire sans nécessiter une visite à la page des paramètres.
Ensuite, le JavaScript ferme l'alerte et affiche la boîte de dialogue Réussite..
JavaScript et AJAX prennent toujours plus de temps pour écrire que PHP, mais l'UX fonctionne vraiment bien avec cette fonctionnalité.
j'ai trouvé jsTimezoneDetect être rapide et parfaitement précis dans tous mes tests.
J'ai décidé d'appliquer cette détection conviviale à la page Paramètres afin qu'un utilisateur n'ait pas nécessairement besoin de cliquer sur la liste déroulante et de faire défiler des dizaines et des dizaines de fuseaux horaires..
S'ils cliquent sur le lien de fuseau horaire détecté, le enregistré avec succès alerte apparaît et le réglage est fait pour eux dans le Fuseau horaire local menu déroulant. Il n'y a pas besoin de soumettre le formulaire.
Pour implémenter cela, j'ai créé un fichier JavaScript presque identique pour frontend / web / js / user_setting.js:
$ (document) .ready (function () // détecte le fuseau horaire de l'utilisateur var tz = jstz.determine (); // détermine le fuseau horaire du client du navigateur var timezone = tz.name (); // par exemple, «Asie / Kolhata '$ (' # tz_dynamic '). Val (fuseau horaire); // compare au paramètre actuel si (fuseau horaire! = $ (' # Tz_combo '). Val ()) // définit l'alerte de texte $ (' # tz_new '). html (' '+ timezone +' '); $ (' # # tz_alert '). show ();); function setTimezone (timezone) $ .ajax (url: $ ('# url_prefix'). val () + '/ user-setting / timezone', données: 'timezone': timezone, succès: fonction (données) $ ('# tz_alert'). hide (); $ ('# tz_success'). show (); $ ('# tz_combo'). val (fuseau horaire); return true;); Une fois terminé, il met à jour le menu déroulant #tz_combo valeur pour l'utilisateur avec le nouveau fuseau horaire.
Tout cela fonctionne bien pour les nouveaux utilisateurs qui planifient leur première réunion. Mais qu'en est-il des destinataires de demandes de réunion? Les personnes qui se réunissent en personne se trouvent généralement dans le même fuseau horaire, mais des réunions virtuelles telles que des téléconférences peuvent nécessiter des fuseaux horaires différents..
Si vous lisez l'épisode Exporter des fichiers iCal dans des calendriers, vous vous souviendrez que nous avons inclus un paramètre de fuseau horaire dans notre export de fichier ics:
BEGIN VERSION: 2.0 CALSCALE: MÉTHODE GREGORIEN: PUBLISH BEGIN: VEVENT UID: [email protected] DTSTART: 20160506T013000Z DTEND: 20160506T023000Z DTSTAMP: 20160506T013000Z ORGANIZER; http: // localhost: 8888 / mp / index.php / meeting / command? id = 45 & cmd = 10 & actor_id = 1 & k = ESxJU_2ZRhZIgzHFyJAIiC39RhZuLiM_ & obj_id = 0 ATTENDEE; PARTSTAT = NEEDS; ACHETER; = 0: mailto: [email protected] ATTENDEE; PARTSTAT = NEEDS-ACTION; RSVP = TRUE; CN = admin; X-NUM-GUESTS = 0: mailto: [email protected] CRÉÉE: DESCRIPTION: C'était amusant de courir vous - prenons cette bière! Site Web: http://www.patxispizza.com/ Dernière modification: 20160506T013000Z EMPLACEMENT: Pizza Ballard de Patxi 5323 Ballard Avenue NO Seattle WA 98107 SOMMAIRE: Meetup pour une conversation retardée et longue conversation SEQUENCE: 0 TRANSP: OPAQUE FIN: VEVENT FIN: VCALENDEND
Cela garantit que le destinataire verra le même fuseau horaire que l'organisateur lorsqu'il importera le fichier .ics dans son calendrier..
Toutes nos heures de réunion sont stockées dans la base de données sous forme d'horodatages Unix génériques dans le fuseau horaire GMT et notre affichage est ajusté en fonction du fuseau horaire local de chaque utilisateur..
Cependant, je devrai encore ajouter la détection JavaScript aux pages de planification de la réunion et de confirmation pour les destinataires afin de m'assurer qu'ils sont invités à configurer leur fuseau horaire pour afficher les heures de réunion correctes..
Actuellement, je suis sur un sprint de code vers la version bêta de Meeting Planner. Je travaille sur de nombreuses fonctionnalités liées aux demandes de modification ou aux modifications de réunions après confirmation. Cela nécessite beaucoup de réflexion conceptuelle sur la manière de faciliter la planification pour les personnes. J'écrirai plus à ce sujet bientôt.
Comme toujours, restez à l’écoute pour ce tutoriel et d’autres didacticiels à venir dans la série Construire son démarrage avec PHP. Avez-vous déjà programmé une réunion via Meeting Planner? Non? Qu'est-ce que tu attends? Fais le maintenant! Et comme toujours, laissez-moi savoir ce que vous pensez ci-dessous ou dans les commentaires. Je vous en suis reconnaissant. Vous pouvez également me contacter @reifman. Je suis toujours ouvert aux nouvelles idées de fonctionnalités et suggestions de sujets pour les prochains tutoriels.
Je prévois également d'écrire un tutoriel sur le financement participatif, alors merci de suivre notre page WeFunder Meeting Planner.
