Como eu fiz uma rede social em 2019

Neste artigo, mostrarei como fiz o meu projeto de uma rede social para a esfera de arte havidea.ru, da ideia ao lançamento. Vou falar sobre a parte técnica, sobre motivação e auto-organização, quais ferramentas eu uso no processo de desenvolvimento, sobre os problemas ao trabalhar com o campo da arte que encontrei quase imediatamente após o lançamento. O projeto sobreviveu à reencarnação, ou seja, foi a primeira opção que abandonei e a final, a segunda , que foi lançada.

Trabalho na área de desenvolvimento web há pouco mais de três anos. O projeto foi criado sozinho em seu tempo livre a partir do trabalho principal e o objetivo principal era liberar o produto no prazo (6 meses).

Inspiração, idéia, pesquisa

Quando adolescente, comecei a me envolver com música, pintura. Um pouco mais tarde, ele pegou fogo com gráficos 3D e até conseguiu ganhar o primeiro centavo em modelos 3D. Alguns anos depois, levei a sério a fotografia e a filmagem e, durante o mesmo período, conheci minha futura esposa, atriz, em aulas de canto (e foi na minha vida, sim). Tudo isso levou a fazer algum tipo de projeto para apoiar os destinos "engraçados" das pessoas criativas. III? Rede social? Porque não Mas isso é heytat, eles dizem, social. redes estão morrendo. Alguém morre, mas eu consigo, certo? E, em geral, se houver uma boa idéia e conceito, por que não traduzi-lo em uma página da web? Pesquisando na lista de contas sociais, deparei-me com uma opção interessante - stage32. Na minha opinião, esta é a única plataforma estrangeira séria que reuniu a comunidade envolvida na produção de filmes. Na Rússia, naquela época (início de 2017), não encontrei análogos (estava parecendo mal?). Está resolvido. Farei o meu serviço, com base nas melhores imagens, práticas e UX das redes sociais existentes. redes, mas com um viés para a esfera do teatro, cinema e arte em geral.

Ideologia do projeto

Sem fins lucrativos, sem publicidade, o mais útil para os próprios participantes. Gratuito, sem rastreamento, sem métricas. Protegendo os dados do usuário.

Primeira opção (2017)

Qualquer projeto deve começar com perguntas e respostas: para quem? Para que? Que problema isso resolve (objetivo)? Quais são as alternativas? Quais benefícios podem ser oferecidos? Após respostas claras e concisas, faço uma lista das funcionalidades do projeto futuro. Em seguida, decido com o esqueleto: removo toda a lista de desejos e fantasias da lista geral de funcionalidades e deixo apenas as mais necessárias - algo sem o qual o aplicativo não funcionará. Na funcionalidade mínima, seleciono uma pilha. Estou procurando exemplos de implementação. Nesta fase, já existe uma grande figura: o que fazer, por que e como. Eu escrevo todo o processo, comentários e pensamentos em um caderno para não decidir repetidamente o que eu havia recusado anteriormente.

Começo a desenhar uma interface do usuário com um pedaço de papel e um lápis. Qualquer folha que está à mão entra em ação até que o pensamento se esvai. Decido as páginas e conduzo a segunda iteração grosseira já em formato eletrônico (é mais fácil alterar alguma coisa):


Em seguida, estudo os esboços em detalhes. Aqui, por exemplo, está a primeira versão da página de perfil:


Publicações, comentários, curtidas, um álbum com fotos - tudo em um clássico. Do novo:
perfil avançado para atores, busca por profissão e habilidade.

Para o layout do layout, usei o modulargrid.org :


Eu experimentei 12, 15 grades de colunas, mas parei aos 12. Quero observar que o layout em uma grade modular é uma coisa ambígua. Você nem sempre poderá inserir informações em blocos, porque as interfaces são uma representação gráfica dos dados. Eu procedo dos princípios do design orientado a dados, ou seja, O principal objetivo das interfaces é apresentar dados e opções convenientes para interagir com elas. É por isso que o designer! = Web designer. Voltando ao problema de uma grade modular, direi que ela apenas ajuda no arranjo inicial dos blocos, e a versão final deve ser confirmada com a ajuda de um olho treinado. Além disso, em qualquer entidade, deve haver uma mudança ou desvio das regras para adicionar vivacidade.

Alguns rascunhos da página principal:



Algumas soluções não parecem muito bem-sucedidas e são removidas / corrigidas durante o layout. Na fase de design, você precisa se dar liberdade e não levar tudo ao ideal.

Página de login:


Após esboços da versão para desktop, presto atenção ao celular. A parte gráfica está pronta? Normas. É hora de codificar.

Primeira opção de front-end.

Como pano de fundo para a página principal, usei a biblioteca Three.js para trabalhar com o WebGL. Triângulos flutuam livremente e "seguem" o mouse. Olhando para o futuro, direi que, na reencarnação, recusei o Three.js e o fiz em css + png, porque a biblioteca pesa ~ 570kb e parecia um desperdício usá-la para um efeito simples. No desenvolvimento, aderir às configurações: minimalismo, desempenho, facilidade de suporte. Como as redes sociais usam cerca de 3/4 do celular, foi dada prioridade à leveza e velocidade. Como a biblioteca de componentes da interface do usuário tomou o Bootstrap 4 . Sem jquery, apenas css. Tentei o wrapper bootstrap-vue, mas de alguma forma não funcionou. Tags html inválidas eram impressionantes e queriam liberdade de personalização. Como você deve ter adivinhado, a estrutura do Vue . Eu queria inicialmente colocar uma boa indexação pelos mecanismos de pesquisa, então estraguei o Nuxt .

Back-end da primeira opção.

Laravel Para projetos individuais, vue + laravel = must have. Velocidade de desenvolvimento, uma grande comunidade, um monte de pacotes prontos. Arquitetura primeiro da API (back-end originalmente desenvolvido como uma API).
Qual API sem documentação? O ApiDoc é uma grande coisa que pode gerar documentação a partir do PHPDoc. Roteamento de arquivos de roteamento personalizados e renderizados a partir de um único api.php, ou seja, um arquivo, uma rota. Por conveniência e para gerar documentação. Eu me inspirei em Apiato . Um bom kit inicial para a API, repleto de diferentes padrões de design e do Porto arquitetônico original, projetado para dividir o aplicativo em módulos, mas essencialmente levando a um monólito. A julgar pelo repositório, o projeto foi abandonado há mais de um ano. Provavelmente, devido à propagação ativa da arquitetura de microsserviço.

Descanso, habilidades de nivelamento

Era 2018. Na primeira versão, consegui implementar registro, autenticação, página de perfil com edição, página de configurações. Não havia muito tempo à noite. Então eu apenas comecei o caminho do vue, e o ssr no nuxt foi travesso. Como resultado, após 4-5 meses, ele foi deslumbrado. Era um projeto ambicioso e não havia habilidade suficiente para levantá-lo, sem cair. Para 2018, eu me desenvolvi como desenvolvedor de pilha cheia, dominei o docker e, no início de 2019, comecei do zero. Bem, quase do zero.

Segunda opção (2019), lançamento

Front-end da segunda opção.

Recusei o nuxt ssr - a camada do node.js requer atenção adicional e não vi a necessidade dele especificamente neste projeto. O Bootstrap substituiu o Quasar - uma estrutura de interface do usuário do vue de pleno direito (e não apenas) (por que eu o peguei, vou dizer abaixo). Interfaces completamente refeitas, deixaram o conceito no estilo vk. Agora no estilo insta. Adicionada a capacidade de criar três tipos de publicações: foto, vídeo e texto. No layout, usei grade de 24 colunas. Agora o serviço fica assim:


Sim, você pode tornar o menu superior transparente. Mas você precisa saber como dizer "não". Acabei desenhando a página principal novamente. Portanto, você não deve entrar em detalhes antes da imagem completa. Mais cedo ou mais tarde, você vai querer mudar tudo e não importa o quão maravilhosa foi a decisão. Obviamente, o site está totalmente adaptado:


Sobre o TypeScript. Tentei implementá-lo, mas depois o cortei, porque a digitação estrita requer mais tempo para organizar tipos e interfaces. Cheguei à conclusão de que o TS sem modo estrito não faz sentido. É verdade - por que digitar sem especificar tipos. No modo estrito, você deve descrever absolutamente tudo e isso é pelo menos + 30% do período de desenvolvimento. E se você não aprovou o esquema de troca de dados com o back-end, será necessário distrair-se constantemente por pequenas edições. Em alguns lugares, você precisará ignorar os erros do compilador adicionando o comentário @ ts-ignore ao código, apenas porque você não é responsável pelo código de terceiros que não oferece suporte completo ao TS. Além disso, todos os benefícios do TS são revelados em cálculos lógicos complexos, ou seja, digitar arquivos .vue é um pouco redundante. Eu ficaria feliz em ouvir comentários sobre este tópico.

Quando a frente estava 90% pronta, envolvi o Browserstack e testei o aplicativo no Safari. Não me arrependo do dinheiro gasto, porque consegui corrigir alguns bugs simples, mas críticos. Minuto bomboleilo. Safari, quando você começará a pensar em usuários e desenvolvedores? Não corrija bugs por anos. Rolagem especialmente pegajosa no modal. Não encontrei uma maneira 100% funcional de como fazer o Safari rolar corretamente o conteúdo em uma janela modal. Eu ficaria feliz se alguém se deparasse e me dissesse uma solução.

Além do aplicativo principal, também fiz um painel de administração simples com minha API:


Não há nada notável no painel de administração. Apenas uma cobertura de interface do usuário para alguns recursos, por causa dos quais é muito preguiçoso entrar no banco de dados e editar os dados manualmente.

Back-end da segunda opção.

Laravel Validação obrigatória de todos os dados recebidos, cabeçalhos cors, cabeçalhos adicionais de segurança de cabeçalhos seguros , seguindo as especificações RESTful (tentarei o JSON-RPC de alguma forma), o Fractal para transformar os dados retornados para a frente. Tente pegar tudo para que o usuário não pressione o mouse, mas obtenha uma razão clara para o erro. Despejos automáticos de ambos os bancos de dados usando db-dumper . Não escrevi nenhum teste automatizado, porque é limitado no tempo. Você precisa acelerar e experimentar o TDD , pois pode resultar em não aumentar significativamente o tempo de desenvolvimento ou até reduzi-lo.

Separadamente, quero dizer que evito o uso de abstrações nos estágios iniciais do design, se agora você pode ficar sem elas. Seu uso prematuro complica o módulo de aplicação, que nunca pode ser usado. Resolva os problemas assim que estiverem disponíveis. Sim, encontrar um equilíbrio entre arquitetura e tempo não é fácil e vem apenas com a experiência, mas é melhor gastar tempo pensando no banco de dados e você pode reescrever o código do aplicativo a qualquer momento. O recurso mais importante que temos é o tempo. É melhor lançar um produto não ideal e ser o primeiro a alcançar os concorrentes. E eles serão.

Problema, estagnação

O lançamento ocorreu no final de maio. Comecei a anunciar e quase imediatamente deparei com um serviço semelhante. Sim, eles implementaram essencialmente a mesma ideia. 2 anos antes. Era melhor pesquisar o mercado e monitorá-lo constantemente para novos serviços. Mas o problema nem é isso. No processo de discussão, reflexão e justa experiência de vida, cheguei à conclusão de que o problema do emprego de pessoas da arte é muito mais profundo e, talvez, uma rede social especializada não possa ajudar. Este é um problema de mercado de escassez de empregos. Em que direção desenvolver o produto eu não sei exatamente. Agora o projeto está passando por estagnação.

Sob o capô

Sumário

Apesar da situação atual com minhas idéias sobre as peculiaridades do mercado de arte, não me arrependo de algumas centenas de horas passadas. O processo foi fascinante, deu muita experiência e não apenas programador. Fiz o serviço como pretendia e estou orgulhoso da implementação final. Fui motivado pela crença de que poderia ajudar pessoas criativas. Essa foi a principal motivação. Talvez a abordagem inicial sem fins lucrativos coloque o projeto em uma posição difícil? Há uma opinião (controversa) de que é preciso iniciar um negócio ou nada. É triste, mas às vezes é melhor parar a tempo do que fazer o que você não acredita. Se surgir um novo entendimento em que direção seguir, continuarei a me desenvolver. Ficarei lisonjeado com suas opiniões.