Comment j'ai écrit mon Postcrossing

Lorsque vous allez au Postcrossing , vous réalisez combien de personnes peuvent devenir folles pour une idée simple. C'est la simplicité captivante de l'idée qui est devenue le principal facteur pour lequel j'ai repris la mise en œuvre d'un croisement spécifique avec mes dames et des objets d'échange de préférence et de fonctionnalités supplémentaires.

Idée

C'était en janvier 2017. Une fois, dans une conversation avec moi, une personne a mentionné qu'elle aimerait réaliser l'idée d'échanger des babioles (les soi-disant «bracelets d'amitié») selon le principe du Postcrossing: l'utilisateur visite le site, appuie sur le bouton et reçoit l'adresse à laquelle il doit envoyer la babiole , après quoi il commence lui-même à recevoir des babioles d'autres utilisateurs en réponse (et ainsi de suite dans un cercle). Il est souhaitable que l'échange soit possible entre différents pays.

Ensuite, j'avais déjà environ 5 ans d'expérience dans le développement d'applications Web en Java et un peu en PHP. Quand ils ont décrit les fonctionnalités nécessaires pour que le crossover souhaité fonctionne, j'ai pensé à utiliser mes anciens travaux en PHP et à faire un projet en environ deux semaines, ou le maximum en un mois. Mais, comme cela arrive souvent, mes estimations étaient trop optimistes. Déjà lors de la relecture du code source de mon moteur de template en PHP, j'avais peur de ce que j'écrivais , je me suis rendu compte que ces vieux métiers universitaires nécessitent l'envoi immédiat d'au moins une bonne optimisation.

Plus je me suis plongé dans mes anciennes sources PHP, plus je me suis rendu compte qu'avec mon niveau de connaissance de ce langage et de l'état des sources, même ce petit projet me ferait mal. Par conséquent, j'ai quand même décidé d'utiliser le Spring Framework, qui est devenu pour moi une mousse chaude et douce au fil des années de travail avec le Web Java. Je ne voulais pas faire cela au départ à cause de l'échelle apparemment petite du plan. Bien sûr, j'avais tort, donc la décision d'utiliser le langage Java familier a transformé une douleur potentielle en un plaisir ultérieur.

La conception

Comme l'idée n'était pas la mienne, au cours du processus de conception, j'ai souvent beaucoup secoué l'auteur de l'idée pour m'assurer que ma vision du projet correspond à l'idée de l'auteur. Au cours de longues discussions, j'ai été inspiré par le projet et j'ai déjà commencé à introduire divers petits pains pratiques et utiles pour les utilisateurs et les administrateurs. Le design a fait l'objet d'une attention particulière: nous avons discuté de chaque détail de la fonctionnalité, dessiné les dispositions de presque toutes les pages, conservé la documentation décrivant la logique de l'application et la fonctionnalité utilisateur.

Les mises en page et la documentation évoluent constamment, regorgent de détails et de nouvelles fonctionnalités. Par la suite, les dispositions sont devenues l'une de ces choses qui ont montré à quel point j'avais tort d'évaluer la complexité du projet.


Exemple d'évolution de la mise en page de l'éditeur de leçon

Bien sûr, je suis moi-même responsable de la complication ultérieure de la fonctionnalité, augmentant ainsi le temps de développement. Cependant, je ne voulais pas qu'un autre govnosite apparaisse sur Internet , dont il existe des milliers de sites de mauvaise qualité; Je voulais rendre le site agréable pour les utilisateurs tant en termes de facilité d'utilisation que visuellement. De plus, le perfectionnisme en moi ne me permettait tout simplement pas d'utiliser la méthode «herak-herak - et en production». Par conséquent, nous avons même élaboré des mises en page avec minutie (et vous verrez que c'était loin d'être la limite de la confusion lors de l'élaboration des détails).


Présentation de la page des paramètres du profil utilisateur

Ayant atteint la fonctionnalité optionnelle, que je prévoyais ensuite d'utiliser seule, j'ai commencé à dessiner à la main des maquettes sur une tablette graphique.


La disposition de la page "Utilisateurs" dans le panneau d'administration

Au cours du processus de conception, nous avons essayé de réfléchir au système afin qu'après le lancement, notre implication supplémentaire dans la vie du site soit minime; nous ne voulions vraiment pas modérer le contenu publié sur le site par les utilisateurs, et encore plus embaucher des modérateurs. Nous voulions que la communauté décide quelle leçon publier, quelle babiole à garder hors du public, quel utilisateur interdire pour un profil ou des commentaires obscènes. Bien sûr, il n'a pas été possible de se débarrasser complètement de cela, mais à la fin, nous avons au moins réussi à nous décharger de la routine potentielle.

À la fin de la phase de conception, j'ai réalisé que nous écrivions du travail depuis au moins six mois. De plus, en plus de la possibilité même d'échanger des boules, nous avons décidé d'ajouter la possibilité d'écrire des articles sur le tissage des boules (et plus tard sur les travaux d'aiguille en général) et de vérifier ces articles par la communauté elle-même (plus tard, cette fonctionnalité s'est avérée encore plus difficile et longue à mettre en œuvre que le système d'échange) . Mais en général, j'ai aimé comment cela fonctionnait "sur papier" et j'ai regardé les maquettes, alors j'ai commencé la mise en œuvre et j'ai décidé de la terminer.

Ainsi, selon notre idée, l'application devrait avoir les fonctionnalités de base suivantes :

- inscription sur le site et configuration du compte;
- Organisation de l'échange de boules avec des gens du monde entier;
- rédaction de cours, vérification et approbation de leur communauté de site;
- pages avec une leçon spécifique et une babiole;
- des pages avec une liste de leçons et de babioles;
- Commenter les leçons et les babioles;
- système de notification des événements;
- système de plaintes, interdictions et quotas;
- discuter entre utilisateurs;
- statistiques du site;
- administrateur.

En outre, le site devrait initialement être destiné à un public international : l'échange peut être effectué partout dans le monde, les leçons peuvent être écrites dans n'importe quelle langue et le site peut être localisé dans n'importe quelle langue (bien sûr, s'il y a des traducteurs qui veulent le faire; plus tard, je a même écrit une petite application avec laquelle vous pouvez facilement traduire le site dans une langue de support).

Il a été décidé de créer un site Internet avec des investissements financiers minimes : pas d'achats ou d'abonnements à des services tiers, pas d'investissement dans la publicité, l'embauche de traducteurs et le paiement d'un certificat SSL. Tout ce que nous nous sommes permis de dépenser était un nom de domaine et un VDS . Et un peu de fil de soie, mais plus sur cela plus tard.

Anticipant le plaisir futur de développer le projet, je suis passé directement à la phase de mise en œuvre. Et j'ai décidé de travailler à plein temps (oui, cela arrive aussi avec des projets non commerciaux).

Implémentation

Dans mon équipe de deux personnes, j'étais le seul programmeur, donc la majeure partie du récit de l'implémentation sera en mon nom.

La première chose que j'ai faite a été de dessiner un modèle de base de données. Après les premières itérations, j'ai eu environ 30 tables. Dans la version finale, il y en avait déjà 43. En tant qu'ORM, j'ai choisi Hibernate, car j'ai eu une petite mais assez agréable expérience de travail avec. J'ai choisi MySQL comme base.


Modèle de base de données, vue de loin

Au tout début, j'ai pensé à la façon dont je remplirais la base de données avec des données brutes. Et ces données étaient nombreuses: langues, pays, contenu statique, catégories de leçons et bien plus encore. Je ne voulais pas stocker, et plus encore, prendre en charge les données au format SQL, j'ai donc décidé d'écrire mon système pour importer et exporter des données au format CSV. Et à l'avenir, je ne l'ai pas regretté, car ces systèmes ont accéléré le processus de développement à plusieurs reprises et ont facilité le travail avec les données de production. J'ai appelé le système Inida (de «Initial Data», bien que ce nom ne soit plus très approprié).


L'une des fonctionnalités du site est l'affichage de la ville de l'utilisateur sur la carte dans le profil. Comme je voulais que notre site soit aussi autosuffisant que possible en termes de dépendance vis-à-vis des services externes, je me suis plutôt embrouillé pour cette petite fonctionnalité, passant beaucoup de temps à rechercher des solutions et à développer des applications supplémentaires.


La tâche suivante, inventée par moi-même, était la préparation des icônes de drapeau. Les problèmes concernaient les drapeaux pour les pays ainsi que pour les langues. Même après avoir téléchargé une grande archive librement distribuée de bonnes icônes dans des résolutions pour tous les goûts. J'ai dû parcourir Wikipédia et prendre Photoshop.


L'une des parties de la fonctionnalité du site, qui assure sa régulation par la communauté elle-même, est devenue un système de plaintes et d'interdictions. Les utilisateurs peuvent se plaindre des informations de profil (nom, avatar, informations utilisateur), des commentaires, des conseils, une adresse postale et des images téléchargées. Lors de la collecte d'un nombre suffisant de réclamations, la fonctionnalité correspondante est bloquée pour l'utilisateur sollicité. Le premier verrou est retiré après une semaine et la durée de chaque verrou suivant est doublée. Certains verrous (par exemple, le nom d'utilisateur) sont perpétuels; c'est l'un de ces cas où l'attention des administrateurs est toujours nécessaire.

Même pendant le processus de conception, j'ai réalisé que des bots pouvaient être installés sur le site. Bien sûr, un tel scénario est peu probable étant donné la faible popularité du site et de son public cible, mais le désir de tout faire «de bonne foi» a prévalu. Pour éviter le spam potentiel, j'ai introduit un système de quotas pour les actions des utilisateurs, d'une manière ou d'une autre liée à la génération de contenu sur le site: commenter, rédiger des messages de chat, rédiger des leçons, demander des adresses, enregistrer des comptes (à la fois à partir d'une adresse IP et d'un total par jour ) et quelques autres.

Une tâche intéressante a été la mise en œuvre de l'une des fonctionnalités d'administration, à savoir la recherche d'adresses similaires. J'ai repéré l'approche dans l'un des articles sur Habré (malheureusement, je n'ai pas pu trouver cet article, je vais donc décrire brièvement l'essence de l'approche ci-dessous). Honnêtement, je ne suis pas très satisfait du résultat de la mise en œuvre de ces fonctionnalités en raison du nombre relativement élevé de faux positifs.


Alors que je travaillais dur sur le côté serveur de l'application, mon co-auteur ne s'est pas assis les bras croisés, mais a travaillé sur le balisage du site à l'aide de la bibliothèque Bootstrap, car il voulait vraiment que le site soit pratique à utiliser également sur les appareils mobiles.
Les mises en page que nous avons préparées ici sont très utiles.

La conception

Je n'aime pas quand le balisage flotte, le site semble mauvais et les scripts ne fonctionnent correctement que lorsque les actions attendues de l'utilisateur sont effectuées. Même pendant le développement. Par conséquent, j'ai toujours essayé de maintenir l'exactitude de l'apparence du site, de sorte que j'étais heureux de travailler avec lui, de voir de nouvelles fonctionnalités dans ce design, de créer de nouvelles pages pour celui-ci. Je me suis permis de passer du temps à lécher des bagatelles, même en sachant qu’elles ne passeraient toujours pas à la version finale. Tout simplement parce que le site attendait une refonte totale.


Voici à quoi ressemblait le site avant le début de la refonte

En réfléchissant à l'apparence de la version finale du site, j'ai pris en compte les facteurs suivants et mes propres souhaits:

1. la conception doit correspondre au thème du site (babioles, travaux d'aiguille);
2. la conception doit créer une atmosphère de tube chaude;
3. La conception doit rendre le site compréhensible et facile à utiliser.

Je n'ai même pas pensé au choix de l'approche de la conception du site, car c'était sans ambiguïté pour moi: le skeuomorphisme. Les éléments ci-dessus m'ont convaincu encore plus de l'exactitude de mon choix. J'ai parfaitement compris à quel point cette approche était laborieuse, mais j'étais prête à y consacrer du temps, car je voulais un résultat agréable pour les yeux. De plus, des années d'expérience dans Photoshop ont rendu ce processus plus facile et moins stressant.


Je ne voulais vraiment pas que le projet que nous développions ressemble à la grande majorité des sites modernes et provoque du dégoût à la fois lors du premier appel et lors de son utilisation. Au lieu de blocs abstraits plats et sans limites, j'ai utilisé l'image d'un véritable bureau d'une personne engagée dans la couture. Pour que la conception du site ressemble à un morceau du monde réel, j'ai passé beaucoup de temps à chercher des images appropriées.

De plus, beaucoup de photos ont été photographiées ou scannées par nos soins, puis traitées dans Photoshop.


Kumihimo et perles

Voici quelques exemples d'objets du monde réel qui ont été utilisés dans la conception:

• un ruban cadeau qui traînait autour de moi faisait office de broyeur;
• le menu est une feuille arrachée à mon cahier (qui était à l'origine dans la boîte);
• l'en-tête devant le contenu de la page est un élément de la couverture pour lire des livres électroniques;
• une fenêtre pop-up et un patch dans le pied de page - un élément d'un sac à dos en jean;
• bouton contextuel - bouton avec short;
• logo sur la page principale - dessin à main levée;
• toutes les boules et de nombreuses perles visibles devant le pied de page et sur la page de droite provenaient également du monde réel (certaines boules ont été tissées pendant le développement du projet).

Page d'accueil


Pied de page


L'une des tâches les plus chronophages consistait à préparer des images à utiliser avec l'attribut CSS border-image. Toute la difficulté résidait dans le fait que certaines parties de l'image devaient être homogènes lorsqu'elles étaient répétées. C'est comme dessiner des textures répétitives (sans couture), juste plus difficile. La plupart du temps était consacré à l'image utilisée dans la conception des fenêtres contextuelles (et au patch dans le pied de page), car la taille des éléments sur lesquels cette image était «étirée» pouvait changer librement à la fois verticalement et horizontalement.

Probablement, avec le design, nous nous sommes plus confondus qu'avec autre chose. De plus, ils sont devenus tellement confus que de nombreux éléments environnementaux (par exemple, des perles et des perles) et certaines icônes ont été modélisés et rendus dans Blender (quelque chose a même été texturé dans Substance Painter). Oui, par souci d'icônes d'environ 32x32 pixels, nous sommes tellement confus.


Rendu des résultats


, . , . JIRA , , . , . , . , , .


267 -

Une fois le travail sur le nouveau design (skeuomorphique) terminé, et nous avons terminé son intégration dans la mise en page sur Bootstrap préparée par mon co-auteur, j'ai commencé à intégrer le nouveau design. Je pensais que ce serait la chose la plus désagréable que je fasse dans le cadre de ce projet. En fait, ce n'était qu'un travail de développement de routine, et l'enfer lui-même m'attendait toujours.

Déploiement

, , — , — , , . , , - . — , .

«fenker» («»), . , , -. : Fenkexchange, Friendship Pigeon, Flossy Hearts, Silky Hearts,…. , . ( ) (: -). - — FriendBird.

VDS, Debian Linux VirtualBox, . Linux ( ) , , « », Windows ( - 2D 3D ); - Apache Linux . , Linux - , , . , .


- Linux , VDS, - , . , , . , , - . - , . , , .

25 2018 , , . , -. .

- , , , . — . ; , . , , .

Et les utilisateurs n'ont pas écrit de leçons. Par conséquent, afin de les exciter, le co-auteur a été le premier à publier la leçon, après quoi d'autres utilisateurs ont commencé à publier le leur. Surtout à cet égard, les gars d'Ukraine se sont démarqués, qui ont volontiers écrit des cours et les ont traduits en ukrainien, pour lesquels un merci spécial à eux.

Le premier mois du site ressemblait à ceci:

• 131 utilisateurs enregistrés;
• 14 babioles reçues;
• 15 leçons écrites (y compris la traduction des leçons dans d'autres langues).

Bien sûr, pendant la production, il y avait des problèmes que j'ai essayé de résoudre rapidement, en mettant constamment à jour le site. Mais au fil du temps, l'application est devenue stable, après quoi j'ai commencé à ne traiter que la sauvegarde des données. Au total, lors de l'exploitation du site (du 25/01/2018 au 03/07/2018 et incluant la phase de test), 29 mises à jour ont été effectuées. Il y a eu quelques mises à jour critiques lorsque j'ai corrigé des bugs la nuit et appliqué la mise à jour le matin.

Tous les utilisateurs n'ont pas aimé tout d'un coup, mais quelque chose manquait complètement. Déjà pendant la production, une page a été ajoutée avec une liste d'utilisateurs, une page avec un formulaire de rétroaction et la possibilité d'échanger des babioles uniquement dans leur propre pays. Après que le site a été rendu public, le co-auteur du projet s'est engagé dans sa promotion sur les réseaux sociaux et dans la collecte de commentaires et de suggestions. Nous avons essayé d'écouter la communauté rassemblée sur le site, grâce à laquelle certaines erreurs ont été corrigées et des modifications ont été apportées aux fonctionnalités du site. Merci beaucoup pour ça.

, . , , ( , , ). , , , . , , , (, , , ). , - .

5 1.5 , :

2018.07.05

, , ; , , . , , , .




, , , , . , - ( ); ( ) ( , VDS ). , , , .

(, CDN ), , . , , . , - , , ; .