Comment j'ai fait un réseau social en 2019

Dans cet article je vais vous raconter comment j'ai fait mon projet de réseau social pour la sphère artistique havidea.ru de l'idée à la sortie. Je vais vous parler de la partie technique, de la motivation et de l'auto-organisation, des outils que j'utilise dans le processus de développement, des problèmes de travail avec le domaine de l'art que j'ai rencontrés presque immédiatement après le lancement. Le projet a survécu à la réincarnation, c'est-à-dire a été la première option que j'ai abandonnée et la finale, la seconde , qui est entrée en jeu.

Je travaille dans le domaine du développement web depuis un peu plus de trois ans. Le projet a été soulevé seul dans son temps libre par rapport au travail principal et l'objectif principal était de libérer le produit à temps (6 mois).

Inspiration, idée, recherche

Adolescent, j'ai commencé à m'impliquer dans la musique, la peinture. Un peu plus tard, il a pris feu avec les graphismes 3D et a même réussi à gagner le premier sou sur les modèles 3D. Quelques années plus tard, j'ai pris sérieusement la photographie et le tournage vidéo et au cours de la même période, j'ai rencontré ma future épouse, une actrice, lors de cours de chant (et c'était dans ma vie, oui). Tout cela a incité à faire une sorte de projet pour soutenir les destinées «drôles» des créatifs. III? Réseau social? Pourquoi pas? Mais c'est un heytat, disent-ils, social. les réseaux se meurent. Quelqu'un meurt, mais je peux le faire, non? Et en général, s'il existe une idée et un concept solides, pourquoi ne pas les traduire en page Web? En parcourant la liste des comptes sociaux, je suis tombé sur une option intéressante - stage32. À mon avis, c'est la seule plateforme étrangère sérieuse qui a réuni la communauté impliquée dans la production cinématographique. En Russie, à cette époque (début 2017), je n'ai trouvé aucun analogue (est-ce que je cherchais mal?). C'est résolu. Je ferai mon service, basé sur les meilleures images, pratiques et UX des réseaux sociaux existants. réseaux, mais avec un parti pris pour la sphère du théâtre, du cinéma et de l'art en général.

Idéologie du projet

Sans but lucratif, sans publicité, le plus utile pour les participants eux-mêmes. Gratuit, pas de suivi, pas de métriques. Protection des données utilisateur.

Première option (2017)

Tout projet doit commencer par poser et répondre à des questions: pour qui? Pour quoi? Quel problème cela résout-il (objectif)? Quelles sont les alternatives? Quels avantages peuvent être offerts? Après des réponses claires et concises, je fais une liste des fonctionnalités du futur projet. Ensuite, je décide avec le squelette: je supprime toutes les listes de souhaits et fantasmes de la liste générale des fonctionnalités et ne laisse que les plus nécessaires - quelque chose sans lequel l'application ne fonctionnera pas. De la fonctionnalité minimale, je sélectionne une pile. Je recherche des exemples de mise en œuvre. À ce stade, il existe déjà une vue d'ensemble: que faire, pourquoi et comment. J'écris tout le processus, les commentaires et les pensées dans un cahier afin de ne pas décider à plusieurs reprises de ce que j'avais refusé auparavant.

Je commence à concevoir une interface utilisateur avec un morceau de papier et un crayon. Toute feuille à portée de main entre en action jusqu'à ce que la pensée s'enfuit. Je décide des pages et effectue la deuxième itération approximative déjà sous forme électronique (il est plus facile de changer quelque chose):


Ensuite, j'étudie les croquis en détail. Voici, par exemple, la toute première version de la page de profil:


Messages, commentaires, likes, un album avec photos - le tout dans un classique. Du nouveau:
profil avancé pour les acteurs, recherche par profession et compétence.

Pour la mise en page, j'ai utilisé modulargrid.org :


J'ai expérimenté avec 12, 15 grilles de colonne, mais je me suis arrêté à 12. Je veux noter que la disposition sur une grille modulaire est une chose ambiguë. Vous ne pourrez pas toujours saisir des informations dans des blocs, car les interfaces sont une représentation graphique des données. Je procède des principes de la conception pilotée par les données, c'est-à-dire Le but principal des interfaces est de présenter des données et des options pratiques pour interagir avec elles. C'est pourquoi le designer! = Web designer. Revenant au problème d'une grille modulaire, je dirai qu'elle n'aide que dans la disposition initiale des blocs, et la version finale doit être confirmée à l'aide d'un œil exercé. De plus, dans toute entité, il devrait y avoir une torsion ou une dérogation aux règles pour ajouter de la vivacité.

Quelques brouillons de la page principale:



Certaines solutions ne semblent pas très efficaces et sont supprimées / corrigées lors de la mise en page. Au stade de la conception, vous devez vous donner de la liberté et ne pas tout mettre à l'idéal.

Page de connexion:


Après des croquis de la version desktop, je fais attention au mobile. La partie graphique est-elle prête? Normas. Il est temps de coder.

Frontend première option.

En arrière-plan de la page principale, j'ai utilisé la bibliothèque Three.js pour travailler avec WebGL. Les triangles flottent librement et «suivent» la souris. Pour l'avenir, je dirai qu'en réincarnation, j'ai refusé Three.js et l'ai fait sur css + png, car la bibliothèque pèse ~ 570 Ko et il semblait inutile de l'utiliser pour un simple effet. En développement, j'adhère aux réglages: minimalisme, performances, facilité de support. Comme les réseaux sociaux utilisent environ 3/4 du mobile, la priorité a été donnée à la légèreté et à la vitesse. Comment la bibliothèque de composants d'interface utilisateur a pris Bootstrap 4 . Sans jquery, seulement css. J'ai essayé le wrapper bootstrap-vue, mais cela n'a pas fonctionné. Les balises html invalides étaient frappantes et voulaient une liberté de personnalisation. Comme vous l'avez peut-être deviné, le framework Vue . Je voulais initialement établir une bonne indexation par les moteurs de recherche, alors j'ai foiré Nuxt .

Backend de la première option.

Laravel Pour les projets individuels, vue + laravel = must have. Vitesse de développement, une grande communauté, un tas de packages prêts à l'emploi. Architecture API-first (backend développé à l'origine comme une API).
Quelle API sans documentation? ApiDoc est une excellente chose qui peut générer de la documentation à partir de PHPDoc. Routage de fichiers de routage personnalisés et rendus à partir d'un seul api.php, c'est-à-dire un fichier, une route. Pour plus de commodité et pour générer de la documentation. Je me suis inspiré d' Apiato . Un bon kit de démarrage pour l'API, bourré de différents modèles de conception et du Porto architectural d'origine, conçu pour diviser l'application en modules, mais conduisant essentiellement à un monolithe. A en juger par le référentiel, le projet a été abandonné il y a plus d'un an. Très probablement, en raison de la propagation active de l'architecture de microservices.

Repos, mise à niveau des compétences

C'était en 2018. Dans la première version, j'ai réussi à implémenter l'enregistrement, l'authentification, la page de profil avec l'édition, la page des paramètres. Il n'y avait pas beaucoup de temps le soir. Ensuite, je viens de commencer le chemin de la vue, et ssr sur nuxt était méchant. En conséquence, après 4-5 mois, il a été emporté. C'était un projet ambitieux et il n'y avait pas assez de compétence pour le soulever, sans tomber soi-même. Pour 2018, je me suis hissé en tant que développeur full stack, mastered docker et début 2019 je suis reparti de zéro. Enfin, presque à partir de zéro.

Deuxième option (2019), sortie

Frontend de la deuxième option.

J'ai refusé nuxt ssr - la couche de node.js nécessite une attention supplémentaire, et je n'ai pas vu la nécessité de cela spécifiquement sur ce projet. Bootstrap a remplacé Quasar - un cadre d'interface utilisateur à part entière (et pas seulement) (pourquoi je l'ai pris, je le dirai ci-dessous). Les interfaces entièrement refaites, ont laissé le concept de style vk. Maintenant au style insta. Ajout de la possibilité de créer trois types de publications: photo, vidéo et texte. Dans la mise en page, j'ai utilisé une grille de 24 colonnes. Maintenant, le service ressemble à ceci:


Oui, vous pouvez rendre le menu supérieur transparent. Mais vous devez savoir dire "non". J'ai finalement dessiné à nouveau la page principale. Par conséquent, vous ne devez pas entrer dans les détails avant l'image complète. Tôt ou tard, vous voudrez tout changer et peu importe à quel point la décision a été merveilleuse. Bien sûr, le site est entièrement adapté:


À propos de TypeScript. J'ai essayé de l'implémenter, mais plus tard, car le typage strict nécessite plus de temps pour organiser les types et les interfaces. Je suis arrivé à la conclusion que TS sans mode strict n'a pas de sens. C'est vrai - pourquoi taper sans spécifier de types. En mode strict, vous devez absolument décrire tout et cela représente au moins + 30% de la période de développement. Et si vous n'avez pas approuvé le système d'échange de données avec le backend, vous devrez constamment être distrait par des modifications mineures. Dans certains endroits, vous devrez ignorer les erreurs du compilateur en ajoutant le commentaire @ ts-ignore au code simplement parce que vous n'êtes pas responsable du code tiers qui ne prend pas totalement en charge TS. De plus, tous les avantages de TS sont révélés dans des calculs logiques complexes, c'est-à-dire taper des fichiers .vue est quelque peu redondant. Je serais heureux d'entendre des commentaires sur ce sujet.

Lorsque le front était prêt à 90%, j'ai enveloppé Browserstack et testé l'application sur Safari. Je ne regrette pas l'argent dépensé, car j'ai réussi à corriger quelques bugs simples mais critiques. Minute bomboleilo. Safari, quand allez-vous commencer à penser aux utilisateurs et aux développeurs? Ne corrigez pas les bugs pendant des années. Défilement particulièrement collant en modal. Je n'ai pas trouvé un moyen de travailler à 100% sur la façon de faire défiler correctement le contenu dans une fenêtre modale par Safari. Je serais ravi que quelqu'un me rencontre et me dise une solution.

En plus de l'application principale, j'ai également réalisé un simple panneau d'administration avec mon api:


Il n'y a rien de remarquable dans le panneau d'administration. Juste une couverture d'interface utilisateur pour certaines fonctionnalités, à cause de laquelle il est trop paresseux pour aller dans la base de données et modifier les données à la main.

Backend de la deuxième option.

Laravel Validation obligatoire de toutes les données entrantes, en-têtes cors, en -têtes de sécurité supplémentaires pour les en-têtes sécurisés, conformément aux spécifications RESTful (j'essaierai JSON-RPC d'une manière ou d'une autre), Fractal pour transformer les données renvoyées à l'avant. Essayez de tout attraper afin que l'utilisateur n'appuie pas sur la souris, mais qu'il obtienne une raison claire de l'erreur. Vidages automatiques des deux bases de données à l'aide de db-dumper . Je n'ai écrit aucun test automatisé, car il est limité dans le temps. Vous devez pomper et essayer TDD , il peut s'avérer ne pas augmenter considérablement le temps de développement ni même le réduire.

Séparément, je tiens à dire que j'évite l'utilisation d'abstractions dans les premières étapes de la conception, si maintenant vous pouvez vous en passer. Leur utilisation prématurée complique le module d'application, qui ne peut jamais être utilisé. Résolvez les problèmes dès qu'ils deviennent disponibles. Oui, il n'est pas facile de trouver un équilibre entre l'architecture et le timing et cela ne vient qu'avec l'expérience, mais il vaut mieux passer du temps à réfléchir à la base de données, et vous pouvez réécrire le code de l'application à tout moment. La ressource la plus importante dont nous disposons est le temps. Il vaut mieux sortir un produit non idéal et être le premier qu'à rattraper ses concurrents. Et ils le seront.

Problème, stagnation

Le lancement a eu lieu fin mai. J'ai commencé à faire de la publicité et j'ai trouvé presque immédiatement un service similaire. Oui, ils ont essentiellement mis en œuvre la même idée. 2 ans plus tôt. Il était préférable de rechercher le marché et de le surveiller constamment pour de nouveaux services. Mais le problème n'est même pas cela. Dans le processus de discussion, de réflexion et d'expérience de vie juste, je suis arrivé à la conclusion que le problème de l'emploi des gens d'art est beaucoup plus profond et, peut-être, un réseau social spécialisé ne peut pas aider. Il s'agit d'un problème de marché de pénurie d'emplois. Dans quelle direction développer le produit, je ne sais pas avec certitude. Maintenant, le projet connaît une stagnation.

Sous le capot

Résumé

Malgré la situation actuelle avec mes idées sur les particularités du marché de l'art, je ne regrette pas quelques centaines d'heures passées. Le processus était fascinant, a donné beaucoup d'expérience et pas seulement de programmeur. J'ai rendu le service comme je le souhaitais et je suis fier de la mise en œuvre finale. J'étais motivé par la conviction que je pouvais aider les gens créatifs. C'était la principale motivation. Peut-être que l'approche à but non lucratif initiale a mis le projet dans une position difficile? Il existe une opinion (controversée) selon laquelle il faut démarrer une entreprise ou rien. C'est triste, mais parfois il vaut mieux s'arrêter à temps que de faire ce en quoi on ne croit pas. Si une nouvelle compréhension vient dans quelle direction aller, alors je continuerai à évoluer. Je serai flatté de vos opinions.