Como hice una red social en 2019

En este artículo te contaré cómo hice mi proyecto de una red social para la esfera del arte havidea.ru desde la idea hasta el lanzamiento. Te contaré sobre la parte técnica, sobre la motivación y la autoorganización, qué herramientas utilizo en el proceso de desarrollo, sobre los problemas en el trabajo con el campo del arte que encontré casi inmediatamente después del lanzamiento. El proyecto sobrevivió a la reencarnación, es decir. fue la primera opción que abandoné y la final, la segunda , que salió al mercado.

He trabajado en el campo del desarrollo web durante poco más de tres años. El proyecto se planteó solo en su tiempo libre del trabajo principal y el objetivo principal era lanzar el producto a tiempo (6 meses).

Inspiración, idea, investigación.

Cuando era adolescente, comencé a involucrarme en la música, la pintura. Un poco más tarde se incendió con gráficos en 3D e incluso logró ganar el primer centavo en modelos 3D. Un par de años después, tomé en serio la fotografía y la filmación de videos y durante el mismo período conocí a mi futura esposa, una actriz, en clases de canto (y fue en mi vida, sí). Todo esto llevó a hacer algún tipo de proyecto para apoyar los destinos "divertidos" de las personas creativas. III? Red social? Por que no Pero esto es heytat, dicen, social. Las redes están muriendo. Alguien muere, pero puedo hacerlo, ¿verdad? Y en general, si hay una idea y un concepto sólidos, ¿por qué no traducirlo a una página web? Buscando en Google la lista de cuentas sociales, me encontré con una opción interesante: stage32. En mi opinión, esta es la única plataforma extranjera seria que reunió a la comunidad involucrada en la producción cinematográfica. En Rusia, en ese momento (principios de 2017), no encontré ningún análogo (¿me veía mal?). Está resuelto. Haré mi servicio, basado en las mejores imágenes, prácticas y experiencia de usuario de las redes sociales existentes. redes, pero con un sesgo hacia la esfera del teatro, el cine y el arte en general.

Ideología del proyecto

Sin fines de lucro, sin publicidad, lo más útil para los propios participantes. Gratis, sin seguimiento, sin métricas. Protección de datos del usuario.

Primera opción (2017)

Cualquier proyecto debe comenzar planteando y respondiendo preguntas: ¿para quién? Para que? ¿Qué problema resuelve esto (objetivo)? Cuales son las alternativas? ¿Qué beneficios se pueden ofrecer? Después de respuestas claras y concisas, hago una lista de la funcionalidad del proyecto futuro. A continuación, decido con el esqueleto: elimino toda la lista de deseos y fantasías de la lista general de funcionalidades y dejo solo lo más necesario, algo sin lo cual la aplicación no funcionará. De la funcionalidad mínima selecciono una pila. Estoy buscando ejemplos de implementación. En esta etapa, ya hay un panorama general: qué hacer, por qué y cómo. Escribo todo el proceso, comentarios y pensamientos en un cuaderno para no decidir repetidamente lo que había rechazado anteriormente.

Comienzo a diseñar una interfaz de usuario con un trozo de papel y un lápiz. Cualquier hoja que esté a la mano entra en acción hasta que el pensamiento se escape. Me decido por las páginas y realizo la segunda iteración aproximada ya en forma electrónica (es más fácil cambiar algo):


A continuación, estudio los bocetos en detalle. Aquí, por ejemplo, está la primera versión de la página de perfil:


Publicaciones, comentarios, me gusta, un álbum con fotos, todo en un clásico. De lo nuevo:
Perfil avanzado para actores, búsqueda por profesión y habilidad.

Para el diseño del diseño utilicé modulargrid.org :


Experimenté con 12, 15 cuadrículas de columnas, pero me detuve en 12. Quiero señalar que el diseño en una cuadrícula modular es algo ambiguo. No siempre podrá ingresar información en bloques, porque las interfaces son una representación gráfica de los datos. Procedo de los principios del diseño basado en datos, es decir El objetivo principal de las interfaces es presentar datos y opciones convenientes para interactuar con ellos. Es por eso que el diseñador! = Diseñador web. Volviendo al problema de una cuadrícula modular, diré que solo ayuda en la disposición inicial de los bloques, y la versión final debe confirmarse con la ayuda de un ojo entrenado. Además, en cualquier entidad debe haber un giro o desviación de las reglas para agregar vivacidad.

Un par de borradores de la página principal:



Algunas soluciones no parecen tener mucho éxito y se eliminan / corrigen durante el diseño. En la etapa de diseño, debes darte libertad y no llevar todo al ideal.

Página de inicio de sesión:


Después de los bocetos de la versión de escritorio, presto atención a los dispositivos móviles. ¿Está lista la parte gráfica? Normas Es hora de codificar.

Primera opción de frontend.

Como fondo para la página principal, utilicé la biblioteca Three.js para trabajar con WebGL. Los triángulos flotan libremente y "siguen" al ratón. Mirando hacia el futuro, diré que en la reencarnación rechacé Three.js y lo hice en css + png, porque la biblioteca pesa ~ 570kb y parecía un desperdicio usarlo para un efecto simple. En desarrollo, me adhiero a la configuración: minimalismo, rendimiento, facilidad de soporte. Dado que las redes sociales usan aproximadamente 3/4 de los dispositivos móviles, se dio prioridad a la ligereza y la velocidad. Cómo la biblioteca de componentes de la interfaz de usuario tomó Bootstrap 4 . Sin jquery, solo css. Traté de bootstrap-vue wrapper pero de alguna manera no funcionó. Las etiquetas html no válidas eran sorprendentes y querían libertad de personalización. Como habrás adivinado, el marco Vue . Inicialmente quería establecer una buena indexación por parte de los motores de búsqueda, así que arruiné Nuxt .

Backend de la primera opción.

Laravel Para proyectos individuales, vue + laravel = debe tener. Velocidad de desarrollo, una gran comunidad, un montón de paquetes listos para usar. Arquitectura API-first (backend desarrollado originalmente como API).
¿Qué API sin documentación? ApiDoc es una gran cosa que puede generar documentación desde PHPDoc. Enrutamiento de archivos de enrutamiento personalizados y renderizados desde un solo api.php, es decir Un archivo, una ruta. Por conveniencia y para generar documentación. Me inspiré en Apiato . Un buen kit de inicio para la API, relleno con diferentes patrones de diseño y el Porto arquitectónico original, diseñado para dividir la aplicación en módulos, pero que esencialmente conduce a un monolito. A juzgar por el repositorio, el proyecto fue abandonado hace más de un año. Lo más probable, debido a la difusión activa de la arquitectura de microservicios.

Descanso, habilidades de nivelación

Era 2018 En la primera versión, logré implementar el registro, la autenticación, la página de perfil con la edición, la página de configuración. No había mucho tiempo por las tardes. Luego comencé el camino vue, y ssr en nuxt fue travieso. Como resultado, después de 4-5 meses, quedó impresionado. Era un proyecto ambicioso y no había suficiente habilidad para levantarlo, sin caerse. Para 2018, me incorporé como desarrollador de stack completo, docker masterizado y, a principios de 2019, comencé desde cero. Bueno, casi desde cero.

Segunda opción (2019), lanzamiento

Frontend de la segunda opción.

Rechacé nuxt ssr: la capa de node.js requiere atención adicional, y no vi la necesidad específicamente en este proyecto. Bootstrap reemplazó a Quasar , un marco completo de interfaz de usuario vue (y no solo) (por qué lo tomé, lo diré a continuación). Interfaces completamente renovadas, dejó el concepto de estilo vk. Ahora estilo insta. Se agregó la capacidad de crear tres tipos de publicaciones: foto, video y texto. En el diseño, utilicé una cuadrícula de 24 columnas. Ahora el servicio se ve así:


Sí, puedes hacer que el menú superior sea transparente. Pero necesitas saber cómo decir "no". Finalmente dibujé la página principal nuevamente. Por lo tanto, no debe entrar en detalles antes de la imagen completa. Tarde o temprano querrás cambiar todo y no importa cuán maravillosa fue la decisión. Por supuesto, el sitio está totalmente adaptado:


Sobre TypeScript. Traté de implementarlo, pero luego lo corté, porque la escritura estricta requiere más tiempo para organizar los tipos y las interfaces. Llegué a la conclusión de que TS sin modo estricto no tiene sentido. Es cierto: por qué escribir sin especificar tipos. En modo estricto, debe describir absolutamente todo y esto es al menos + 30% del período de desarrollo. Y si no ha aprobado el esquema para intercambiar datos con el backend, tendrá que distraerse constantemente con ediciones menores. En algunos lugares, deberá ignorar los errores del compilador agregando el comentario @ ts-ignore al código solo porque no es responsable del código de terceros que no sea totalmente compatible con TS. Además, todos los beneficios de TS se revelan en cálculos lógicos complejos, es decir. escribir archivos .vue es algo redundante. Estaría encantado de escuchar comentarios sobre este tema.

Cuando el frente estaba listo al 90%, envolví Browserstack y probé la aplicación en Safari. No me arrepiento del dinero gastado, porque logré arreglar un par de errores simples pero críticos. Minuto bomboleilo. Safari, ¿cuándo comenzarás a pensar en usuarios y desarrolladores? No arregles los errores por años. Desplazamiento especialmente adhesivo en modal. No encontré una manera 100% funcional de cómo hacer que Safari desplace el contenido correctamente en una ventana modal. Me alegraría si alguien se cruzara y me diera una solución.

Además de la aplicación principal, también hice un panel de administración simple con mi API:


No hay nada notable en el panel de administración. Solo una cobertura de interfaz de usuario para algunas funciones, por lo que es demasiado vago entrar en la base de datos y editar datos a mano.

Backend de la segunda opción.

Laravel Validación obligatoria de todos los datos entrantes, encabezados de cors, encabezados de seguridad de encabezados seguros adicionales, siguiendo las especificaciones RESTful (intentaré JSON-RPC de alguna manera), Fractal para transformar los datos devueltos al frente. Intente atrapar todo para que el usuario no presione el mouse, pero obtenga una razón clara del error. Volcados automáticos de ambas bases de datos utilizando db-dumper . No escribí ninguna prueba automatizada, porque es limitada en el tiempo. Necesita bombear y probar TDD , puede que no aumente significativamente el tiempo de desarrollo o incluso lo reduzca.

Por separado, quiero decir que evito el uso de abstracciones en las etapas iniciales de diseño, si ahora puede prescindir de ellas. Su uso prematuro complica el módulo de aplicación, que nunca se puede usar. Resuelva problemas a medida que estén disponibles. Sí, lograr un equilibrio entre la arquitectura y el tiempo no es fácil y solo viene con experiencia, pero es mejor pasar tiempo pensando en la base de datos, y puede reescribir el código de la aplicación en cualquier momento. El recurso más importante que tenemos es el tiempo. Es mejor lanzar un producto no ideal y ser el primero que ponerse al día con los competidores. Y lo serán.

Problema, estancamiento

El lanzamiento tuvo lugar a finales de mayo. Comencé a anunciar y casi de inmediato me encontré con un servicio similar. Sí, esencialmente implementaron la misma idea. 2 años antes Era mejor investigar el mercado y monitorearlo constantemente en busca de nuevos servicios. Pero el problema ni siquiera es eso. En el proceso de discusión, reflexión y simplemente experiencia de vida, llegué a la conclusión de que el problema del empleo de personas de arte es mucho más profundo y, tal vez, una red social especializada no puede ayudar. Este es un problema de mercado de escasez de trabajo. En qué dirección desarrollar el producto no estoy seguro. Ahora el proyecto está experimentando un estancamiento.

Debajo del capó

Resumen

A pesar de la situación actual con mis ideas sobre las peculiaridades del mercado del arte, no me arrepiento de unos cientos de horas dedicadas. El proceso fue fascinante, dio mucha experiencia y no solo programador. Hice el servicio como lo pretendía y orgulloso de la implementación final. Me impulsó la creencia de que podía ayudar a las personas creativas. Esta fue la principal motivación. ¿Quizás el enfoque inicial sin fines de lucro puso al proyecto en una posición difícil? Existe una opinión (controvertida) de que uno necesita comenzar un negocio o nada. Es triste, pero a veces es mejor detenerse a tiempo que hacer lo que no crees. Si llega un nuevo entendimiento en qué dirección moverse, continuaré desarrollándome. Seré halagado por tus opiniones.