Сможете назвать одну вещь, которая объединяет 53% людей на земле? Правильный ответ: мы все сидим социальных сетях. Да-да, число пользователей Facebook, Instagram, Twitter и прочих приложений превышает 4,2 миллиарда человек. На рынке большая конкуренция, но, в тоже время, всегда есть место для новых проектов.
Время чтения: 6 минут
Если вы когда-нибудь задумывались о том, как создать социальную сеть , сколько времени занимает разработка и на что обращать внимание, эта статья для вас.
В Purrweb мы создали честный и подробный гид по разработке приложений для социальных сетей. Рассказываем об основных функциях для того, как создать социальную сеть , сколько это стоит и еще детали, которые не расскажут другие. Поехали!
Как работают социальные сети?
Википедия говорит, https://ru.wikipedia.org/wiki/%D0%A1%D0%BE%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D1%81%D0%B5%D1%82%D1%8C
Шлите на *** таких SMM-специалистов #маркетинг #бизнес #соцсети
что социальная сеть — это « онлайн-платформа , которая используется для общения , знакомств, создания социальных отношений между людьми, которые имеют схожие интересы или офлайн -связи, а также для развлечения (музыка, фильмы) и работы ».
Как создать свою социальную сеть: цены и сроки
Социальные сети в наше время являются довольно популярными среди населения разных стран. Развитие технологий привело к возможности делиться информацией с большой или маленькой группой людей посредством ведения блогов, сообществ, личных страниц, каналов и др. Многомиллионная аудитория популярных социальных сетей является перспективой для монетизации. Так, основатели соцсетей вроде Facebook и Instagram теперь являются одними из самых богатых людей планеты. В сегодняшней статье мы расскажем, что необходимо для создания соцсети, какие функции у нее могут быть, а также о том, сколько может стоить разработка и как монетизировать готовое приложение или сайт.
Что нужно для создания социальной сети
- Команда разработки. Без наличия специалистов, способных создать продукт, реализовать его не получится. Обычно в команду разработки входят следующие специалисты:
- проектный менеджер, задача которого — контролировать сроки и качество выполнения работы, а также общение с клиентом;
- разработчики, которые осуществляют непосредственное написание кода и отвечают за реализацию функционала;
- дизайнеры, которые создают макеты дизайна будущей соцсети и продумывают наиболее удобный интерфейс;
- тестировщики, которые тестируют готовую программу на наличие багов, а также предотвращают возможные ошибки до их появления.
- Техническое задание. Для того чтобы реализовать именно тот функционал и дизайн, который необходим заказчику, необходимо грамотно разработать техническое задание. В нем указываются основные требования к проекту. Важно, чтобы эти требования были выражены в конкретных пожеланиях и показателях, без размытых и субъективных формулировок.
- Время и деньги. Разработка социальной сети, как правило, длительный процесс, занимающий не один месяц. Стоимость разработки, скорее, индивидуальна, но и она является немаленькой ввиду специфики проекта и длительности времени, затрачиваемого на реализацию. Подробнее об этом поговорим в разделе ниже.
Основные функции социальной сети
К функциям социальной сети можно отнести следующие возможности:
Как правильно вести свою социальную страницу?!
- Авторизация. Для того, чтобы пользователи могли иметь постоянную возможность доступа к своим аккаунтам, необходимо разработать возможность входа в систему. Авторизацию можно сделать с помощью дополнительных средств защиты, поскольку взлом аккаунтов социальных сетей — нередкое явление. Например, можно разработать механизм защиты с помощью одноразового кода, который будет приходить на электронную почту или номер телефона.
- Создание личного блога или сообщества. В зависимости от типа социальной сети возможно создание как личного аккаунта, так и отдельной группы или сообщества с возможностью постинга. Формат размещаемого контента также может быть различным. Например, социальная сеть TikTok предлагает возможность размещения только коротких видео. А в соцсети наподобие ВК можно запостить аудиосообщения, текст, разместить музыкальный трек, картинки и др.
- Личные сообщения. Дополнительная функция, которая позволяет владельцу блога или сообщества поддерживать связь с аудиторией. Наличие такого функционала — скорее преимущество, поскольку для того, чтобы поддерживать связь, нет необходимости переходить в другое приложение. А это увеличивает нахождение и привязку пользователей к этой социальной сети. В качестве примера можно привести функцию Direct соцсети Instagram*.
- Оценочный функционал. Социальная сеть, прежде всего, подразумевает в себе публикацию контента для определенной аудитории людей. Поэтому можно добавить средства выражения своего мнения или оценки. Это могут быть реакции, лайки, комментарии и т.д. В качестве примера можно привести социальную сеть Facebook*, где пользователь может оставить реакции в виде эмодзи.
Сколько стоит создать социальную сеть
Цена социальной сети индивидуальна. Как правило, стоимость начинается от 1 млн рублей. Ценообразование зависит от:
- Функционала сервиса. Чем объемнее функционал потребуется реализовать, тем выше будет стоимость разработки. Как правило, программисты работают по фиксированной почасовой ставке, умноженной на количество часов, затраченных на работу. Соответственно, чем больше объем работы, тем выше будет ее стоимость.
- Опыта разработчика. Чем более долгий опыт разработки у программиста, тем более высокая у него почасовая ставка. Это объясняется тем, что у разработчика может быть шире стек технологий, да и ошибок в работе он может допустить меньше вследствие опыта. Таким образом, стоимость разработки у опытного специалиста будет дороже. Однако это возможность снизить риск получения некачественного продукта.
- Стека технологий. Определенный желаемый функционал социальной сети может предполагать использования конкретного языка программирования или фреймворка. В зависимости от этого цены работы специалистов могут отличаться. Чем более сложные технологии используются, тем выше будет стоимость социальной сети.
Как создать соцсеть: этапы
Среди этапов создания социальной сети можно выделить следующие шаги:
- Сбор информации. На этом этапе изучаются данные по проекту, предоставленные заказчиком. Команда разработки собирает информацию, какой результат желает получить заказчик, и актуализирует ее в соответствии с ситуацией на рынке. Возможно проведение дополнительных исследований командой разработки.
- Составление ТЗ. Техническое задание — необходимый документ, который помогает избежать недопониманий в процессе разработки. В нем прописываются основные требования к продукту. В зависимости от проекта тестовое задание может быть как обширным, так и кратким, с перечислением лишь основных тезисов.
- Дизайн. В соответствии с требованиями заказчика дизайнеры реализуют макеты экранов уже готового продукта приложения или создания сайта соцсети. Обычно разрабатывается несколько вариантов, которые представляются дизайнером клиенту.
- Программирование. Здесь происходит непосредственное создание функционала приложения разработчиками с помощью выбранного языка программирования и фреймворков. Как правило, этот этап является самым объемным по времени.
- Тестирование. Такие специалисты, как тестировщики, тщательно исследуют созданный сервис на наличие возможных ошибок. Это осуществляется с помощью автоматизированных программ и вручную.
- Публикация. После завершения всех этапов продукт может быть выпущен на рынок. Если это сайт, то он запускается для индексации поисковыми системами. Если это приложение, то оно проходит модерацию в магазине приложений и становится доступным пользователям для скачивания.
Как монетизировать социальную сеть
Монетизация социальных сетей возможна следующими способами:
- Продажа возможности таргетированной рекламы. При наличии в социальных сетях большого количества аудитории монетизация возможна в качестве продажи настроек таргетированной рекламы. Для этого в функционал необходимо добавить рекламный кабинет. При этом получение дохода, как правило, идет от комиссии рекламного бюджета или же в формате фиксированной цены за возможность настройки объявлений.
- Размещение рекламы от внешних рекламодателей. Это отличается от таргетированной рекламы тем, что объявления встроены в само приложение, в отличие от настроенных рекламных публикаций. Внешняя реклама может быть в виде всплывающих окон или же баннеров, размещенных в разных частях экрана.
- Подписка на дополнительный функционал. Дополнительный функционал социальной сети — возможность монетизации. В таком случае оплата ежемесячной подписки дает доступ пользователям к расширенным возможностям сервиса. Такой функционал, например, планирует ввести Twitter, где premium-пользователи получат свободу от рекламы, а также доступ к дополнительным иконкам и темам.
Особенности разработки социальной сети
Разработка социальной сети имеет некоторые особенности, о которых расскажем ниже.
Приватность и безопасность
Для того чтобы аккаунты пользователей были надежно защищены, необходимо разработать меры защиты, которые помогут снизить риск взлома. Особенно это важно, если на платформе будут находиться лидеры мнений с большим количеством аудитории, взлом чьих аккаунтов может привести к транслированию опасной информации. В качестве защиты можно использовать различные методы. Например, Instagram* применяет двухфакторную аутентификацию с помощью кода, присылаемого в SMS-сообщении.
Удобный интерфейс
Важно, чтобы размещение контента для пользователей было быстрым и удобным. Это может положительно повлиять на отношение к социальной сети и на пользовательский трафик. Также важен дизайн — не стоит делать его перегруженным различными деталями. В приоритете здесь удобство пользователей, которые являются целевой аудиторией проекта. Но при этом дизайн должен вызывать положительный эстетический отклик.
Возможность масштабирования
Рост пользовательского трафика и популярности социальной сети, скорее всего, потребуют в будущем масштабирования функционала сервиса и добавления дополнительных опций. Поэтому при разработке стоит закладывать возможность масштабирования приложения. Также важна и гибкость кода. Она заключается в том, что при изменении одной из частей кода остальные способны работать, и продукт не выходит из строя.
Способность выдерживать нагрузку
Большое количество пользователей, которые ежедневно пользуются соцсетью, создают определенную нагрузку на серверную ее часть. Для того чтобы своя социальная сеть смогла стабильно функционировать и выдерживать пользовательский трафик, необходимо заложить высокую производительность. Это поможет как избежать проблем с работой сети, так и миновать негативной реакции пользователей, связанной с нестабильной работой сервиса.
Заключение
- Создание социальной сети — долгий процесс, который займет не один месяц, а стоимость разработки составит более 1 млн рублей.
- При разработке соцсети следует уделить достаточное внимание вопросам приватности и безопасности, созданию удобного интерфейса, заложить возможности масштабирования и высокой производительности.
- К основным функциям социальной сети можно отнести авторизацию, публикацию контента, личные сообщения и возможность оценки контента.
*соцсети Meta запрещены в РФ
Источник: sibdev.pro
Как я делал социальную сеть в 2019
В этой статье я расскажу, как делал свой проект социальной сети для сферы искусства havidea.ru от идеи до релиза. Расскажу о технической части, о мотивации и самоорганизации, какими инструментами пользуюсь в процессе разработки, о проблемах в работе со сферой искусства, с которыми я столкнулся почти сразу после запуска. Проект пережил реинкарнацию, т.е. был первый вариант, который я забросил и финальный, второй, который ушел в релиз.
В сфере веб-разработки я работаю немногим более трех лет. Проект поднимался в одиночку в свободное от основной работы время и главной целью было — выпустить продукт в установленные сроки (6 мес.).
Вдохновение, идея, исследование
Будучи подростком, я начал увлекаться музыкой, живописью. Чуть позже загорелся 3D графикой и даже успел заработать на 3D моделях первые копейки. Еще пару лет спустя всерьез занялся фото- и видеосъемкой и в этот же период на уроках вокала (и такое было в моей жизни, да) познакомился с будущей женой — актрисой.
Все это подтолкнуло сделать какой-нибудь проект для поддержки “веселых” судеб творческих людей. Иии? Социальная сеть? Почему бы и нет? Но это же хейтят, мол, соц. сети умирают. У кого-то умирают, а у меня получится, верно?
И вообще, если есть обоснованная идея и концепция, почему бы не воплотить это в веб-страницу? Загуглив список социалочек, наткнулся на интересный вариант — stage32. На мой взгляд, это единственная серьезная зарубежная площадка, собиравшая сообщество причастных к кинопроизводству. В России аналогов на то время (начало 2017 г.) я не нашел (плохо искал?). Решено.
Сделаю свой сервис, опираясь на лучшие образы, практики и UX уже существующих соц. сетей, но с уклоном к сфере театра, кино и искусства в целом.
Идеология проекта
Некоммерческий, без рекламы, максимально полезный для самих участников. Свободный, без слежки, без метрик. Защита пользовательских данных.
Первый вариант (2017 г.)
Любой проект должен начинаться с постановки и ответа на вопросы: для кого? Для чего? Какую проблему это решает (цель)? Какие есть альтернативы? Какие преимущества можно предложить? После четких и лаконичных ответов, я составляю список функциональности будущего проекта.
Далее определяюсь с костяком: убираю все хотелки и фантазии из общего списка функционала и оставляю только самое необходимое — то, без чего приложение не будет функционировать. От минимального функционала подбираю стек. Ищу примеры реализации. На этом этапе уже есть общая картина: что делать, для чего и как. Весь процесс, комментарии и мысли записываю в блокнот, чтобы повторно не решать то, от чего ранее отказался.
Проектировать UI начинаю с листка бумаги и карандаша. Любой листок, который есть под рукой, идет в дело, пока мысль не убежала. Определяюсь со страницами и провожу вторую грубую итерацию уже в электронном виде (проще что-то изменить):
Изображение наброска страниц
Далее прорабатываю эскизы детально. Вот, например, самый первый вариант страницы профиля:
Изображение страницы профиля
Посты, комменты, лайки, альбом с фотографиями — все по классике. Из нового:
расширенный профиль для актеров, поиск по профессиям и навыкам.
Для разметки макета использовал modulargrid.org:
Изображение страницы профиля с модульной подложкой
Я экспериментировал с 12, 15 колоночными сетками, но остановился на 12. Хочу отметить, что верстка по модульной сетке штука неоднозначная. Вам не всегда удастся вписать информацию в блоки, потому что интерфейсы — это графическое отображение данных.
Я исхожу из принципов Data-Driven design, т.е. основное назначение интерфейсов — представлять данные и удобные варианты взаимодействия с ними. Именно поэтому дизайнер != веб-дизайнер. Вернувшись к проблеме модульной сетки скажу, что она лишь помогает в первоначальном расположении блоков, а финальный вариант должен утвердиться с помощью тренированного глаза. К тому же, в любой сущности должна быть изюминка или отхождение от правил, чтобы добавить живости.
Пара набросков главной страницы:
Набросок главной страницы 1
Набросок главной страницы 2
Некоторые решения выглядят не совсем удачными и убираются/правятся при верстке. На этапе проектирования надо давать себе свободу и не выводить все до идеала.
Изображение страницы входа
После набросков десктопной версии, уделяю внимание мобильной. Графическая часть готова? Нормас. Пора кодить.
Frontend первого варианта.
В качестве бэкграунда для главной страницы я использовал библиотеку Three.js для работы с WebGL. Треугольники свободно плавают и “следят” за мышкой. Забегая вперед скажу, что в реинкарнации я отказался от Three.js и сделал на css + png, потому как библиотека весит ~570кб и использовать ее для одного несложного эффекта показалось расточительством.
В разработке я придерживаюсь установок: минимализм, производительность, легкость поддержки. Так как социальными сетями примерно на 3/4 пользуются с мобильных, то был отдан приоритет легковесности и скорости. Как библиотеку UI компонентов взял Bootstrap 4. Без jquery, только css. Я пробовал обертку bootstrap-vue, но как-то не зашло.
Бросались в глаза невалидные html теги и хотелось свободы кастомизации. Как вы могли догадаться, фреймворк Vue. Хотелось изначально заложить хорошую индексацию поисковиками, поэтому докрутил Nuxt.
Backend первого варианта.
Laravel. Для one-man проектов vue + laravel = must have. Скорость разработки, большое сообщество, куча готовых пакетов. Архитектура API-first (бэкенд изначально разрабатывается как API).
Какое API без документации? ApiDoc отличная штука, которая умеет генерировать документацию из PHPDoc. Роутинг кастомизировал и вынес файлы роутов из единого api.php, т.е. один файл, один роут. Для удобства и для генерации документации. Вдохновение черпал из Apiato.
Неплохой starter kit для API, напичканный разными паттернами проектирования и оригинальным архитектурным Porto, призванным разбить приложение на модули, но по сути ведущий к монолиту. Судя по репозиторию, проект заброшен более года назад. Скорее всего, по причине активного распространения микросервисной архитектуры.
Отдых, прокачка скиллов
Шел 2018 год. В первой версии я успел реализовать регистрацию, аутентификацию, страницу профиля с редактированием, страницу настроек. Времени по вечерам было немного. Тогда я только начинал путь vue, да и ssr на nuxt капризничал. В итоге, через 4-5 месяцев сдулся.
Это был амбициозный проект и не хватило скилла его поднять, не упав самому. За 2018 год я сильно подтянулся как full stack разработчик, освоил docker и в начале 2019 начал все с нуля. Ну, почти с нуля.
Второй вариант (2019 г.), релиз
Frontend второго варианта.
От nuxt ssr я отказался — прослойка из node.js требует дополнительного внимания, да и не видел в нем нужды конкретно на этом проекте. Bootstrap заменил на Quasar — полноценный vue UI (и не только) framework (почему взял его расскажу ниже). Интерфейсы полностью переделал, ушел от вк-стайл концепции. Теперь insta-стайл. Добавил возможность создания трех типов публикаций: фото, видео и текст.
В макете использовал 24 колоночную сетку. Сейчас сервис выглядит так:
Финальный вариант первого экрана
Да, можно сделать верхнее меню прозрачным. Но нужно уметь хотелкам сказать “нет”. Главную страницу я в итоге нарисовал заново. Поэтому, не стоит вдаваться в детали раньше, чем будет полная картина. Рано или поздно вы захотите все изменить и не важно, насколько прекрасным было решение. Конечно же, сайт полностью адаптирован:
Страница профиля на мобильном
Когда фронт был готов на 90%, я задонатил Browserstack и протестировал приложение на Safari. Не жалею потраченных денег, потому как удалось пофиксить парочку простых, но критичных багов. Минутка бомболейло. Safari, когда вы уже начнете думать о пользователях и разработчиках? Годами не исправляете баги.
Особенно залипающий скролл в модалке. Я не нашел 100% работающего способа, как заставить Safari корректно скроллить контент в модальном окне. Буду рад, если кто сталкивался и подскажет решение.
Помимо основного приложения, сделал еще и простенькую админку со своим апи:
Screenshot админки
В админке ничего примечательного. Просто UI покрытие для некоторых фич, из-за которых лень лезть в базу и править данные руками.
Backend второго варианта.
Laravel. Обязательная валидация всех входящих данных, cors заголовки, дополнительные заголовки безопасности secure-headers, следование RESTful спецификации (как-нибудь попробую JSON-RPC), Fractal для трансформации отдаваемых данных на фронт. Try-catch всего, чтобы пользователь не давил мышку, а получил внятную причину ошибки. Автоматические дампы обеих баз данных с помощью db-dumper.
Какого-либо автоматизированного тестирования не писал, ибо ограничен по времени. Надо подкачаться и попробовать TDD, может получится не сильно увеличивать сроки разработки или даже сократить.
Отдельно хочется сказать, что я избегаю использования абстракций на начальных этапах проектирования, если без них сейчас можно обойтись. Их преждевременное использование ведет к усложнению модуля приложения, который может быть никогда не использован. Решайте проблемы по мере поступления.
Да, соблюдать баланс между архитектурой и сроками не просто и это приходит только с опытом, но лучше потратить время на продумывание базы данных, а переписать код приложения можно в любое время. Самый важный ресурс, который у нас есть — это время. Лучше выпустить не идеальный продукт и быть первым, чем потом догонять конкурентов. А они будут.
Проблема, стагнация
Запуск состоялся в конце мая. Я начал заниматься рекламой и почти сразу наткнулся на похожий сервис. Да, они по сути реализовали такую же идею. Года на 2 раньше. Надо было лучше исследовать рынок и мониторить его постоянно на предмет новых сервисов. Но проблема даже не в этом.
В процессе дискуссий, размышлений и просто жизненного опыта я пришел к выводу, что проблема трудоустроенности людей искусства намного глубже и, возможно, специализированной социальной сетью не помочь. Это рыночная проблема нехватки рабочих мест. В каком направлении развивать продукт я точно не знаю. Сейчас проект переживает стагнацию.
Под капотом
Технологии, вошедшие в релиз
- Vue
- Quasar (UI библиотека vue компонентов). Это офигенный, легкий, красивый и минималистичный фреймворк и самое главное — mobile и desktop pixel perfect. Да, я пробовал vuetify 2 beta. Но как по мне, vuetify для мобилок не подходит и в целом его API и документация более запутанные, чем у Quasar. Также, у Quasar есть ряд плагинов и импортируемых функций. Например, работа с датами, touch событиями, определение платформы по user-agent, программные dialogs (модалки), работа с DOM и скроллингом: все это сужает круг зависимостей в package.json.
- Laravel
- Docker / docker-compose. Описывать docker-compose.yml не буду, но приведу несколько моментов: разделение контейнеров по network’ам. У меня их две: web и app; самостоятельные инструменты (Portainer, Traefik) в отдельных docker-compose, чтобы не падало основное приложение при перезапуске.
- Redis. Объектное хранилище с функционалом очередей. Если для очередей нужно что-то помощнее, попробуйте RabbitMQ.
- MySQL
- Mongodb. В монге храню публикации, комменты, медиа-файлы, уведомления — все самые объемные данные. Монга проще масштабируется, чем мускул.
- Nginx
- Traefik. Очень дружелюбный и простой в настройке reverse-proxy для docker окружения (и не только). Плюс сам получает ssl сертификаты let’s encrypt. Раньше использовал Certbot, а теперь вообще не парюсь с дополнительными зависимостями.
- Portainer. Контейнеры поднимаю руками через docker-compose, но иметь наглядный интерфейс по их состоянию очень полезно. Туда же падают логи из stdout / stderr. Если бюджет позволяет, то для логов можно поставить какой-нибудь ELK.
- ElasticSearch. Спасибо Laravel сообществу, что есть Scout драйвер для ES (Scout сам обновляет данные в индексах-базах эластика). Кстати, не забывайте закрывать сервис с внешки. Один из вариантов это сделать — в докер-контейнере прописать ports: «127.0.0.1:9200:9200» (заметка: для безопасности лучше не использовать стандартный 9200 порт). В эластике два индекса: по профилям и по публикациям. Настроен hunspell для русской морфологии.
Примечательные сервисы
- AWS Saas. Хотел поставить Minio S3, но в бюджет совсем не вписывается.
- Mailgun. У Laravel из коробки есть интеграция с этим сервисом. Очень удобный, со своим интерфейсом и (!) очередями.
- Sentry.io Saas. Можно поставить как self-hosted. Супер удобный и полезный инструмент отладки. Подключил и фронт и бэк к нему. Настроил релизы. Все runtime ошибки отслеживаются и вовремя обнаруживаются посредством, например, уведомлений на почту. Красота.
Полезные инструменты
- Trello — удобные канбан доски. У меня такой набор: сделать, готово, тестирование, обсуждение, отмена.
- Browserstack — тестирование на iOS, “любимом” Safari.
- Gitlab — репозитории и ci/cd. CD как таковой не настраивал — свой gitlab runner не поднимал, а давать коннектиться по ssh гитлабовским раннерам как-то стремно. Devops не моя сильная сторона, к тому же. По части CI — сборка фронта, пуш в репозиторий gitlab. Переменные храню здесь же в разделе ci/cd -> variables, которые пробрасываются на этапе сборки.
Итог
Несмотря на сложившуюся ситуацию с моими представлениями на особенности рынка сферы искусства, я нисколько не жалею несколько сотен затраченных часов. Процесс завораживал, давал кучу опыта и не только программерского. Я сделал сервис таким, каким задумывал и горжусь финальной реализацией. Мною двигала вера в то, что я смогу помочь творческим людям. Это было главной мотивацией.
Может, изначальный некоммерческий подход поставил проект в сложное положение? Есть (спорное) мнение, что надо начинать либо бизнес, либо ничего. Как это ни печально, но иногда лучше вовремя остановиться, чем делать то, во что не веришь. Если придет новое понимание в какую сторону двигаться, то продолжу развивать. Буду польщен вашими мнениями.
- управление проектами
- веб-дизайн
- веб-разработка
- социальные сети
- Веб-дизайн
- Разработка веб-сайтов
- Управление разработкой
- Социальные сети и сообщества
Источник: habr.com