Как написать простую Социальную сеть
В моей социальной сети реализованы следующие возможности:
var addProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/addprofile»;
— добавление профиля в базу данных;
var loginProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/profilelogin»;
— авторизация пользователя;
var getFotosUrl = svlaboratoryBaseUrl + «/admin/chatbot/getfotos»;
— получение всех файлов анкеты пользователя (фото, видео, музыки);
var delFotoUrl = svlaboratoryBaseUrl + «/admin/chatbot/deletefoto»;
— удаление фото из анкеты;
var selectFotoUrl = svlaboratoryBaseUrl + «/admin/chatbot/selectfoto»;
— выбор фото для главного фото;
var searchProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/searchprofiles»;
— поиск анкет по параметрам;
var instaProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/instaprofiles»;
— поиск анкет по параметрам из списка всех новых фото пользователей;
var getAnketaUrl = svlaboratoryBaseUrl + «/admin/chatbot/getanketa»;
— получение данных о профиле пользователя;
var sendProfileMsgUrl = svlaboratoryBaseUrl + «/admin/chatbot/sendmsg»;
— отправка сообщения другому пользователю;
var getAllProfileMsgsUrl = svlaboratoryBaseUrl + «/admin/chatbot/getallmsgs»;
— получение списка сообщений;
var getProfilesMsgsUrl = svlaboratoryBaseUrl + «/admin/chatbot/getprofilesmsgs»;
— получение списка пользователей отправивших сообщения;
var updateProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/updateprofile»;
— обновление позиции пользователя в списке пользователей;
var visitProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getvisithistory»;
— получение списка пользователей, просматривавших анкету;
var getSmallavatarUrl = svlaboratoryBaseUrl + «:8080/file/chatbotmin/»;
— получение маленькой копии изображения;
var getImgUrl = svlaboratoryBaseUrl + «:8080/file/chatbotnorm/»;
— получение обычной копии изображения;
var getSmallavatarUrl2 = svlaboratoryBaseUrl + «/application/smallavatar?url=»;
— получение маленькой копии аватара;
var getLikeProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getlikeprofiles»;
— получение списка всех пользователей для игры в симпатии;
var likeProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/likeprofile»;
— осуществить плюс анкеты;
var getLikesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getlikes»;
— получить список всех плюсов;
var getModerProfilesUrl = svlaboratoryBaseUrl + «/admin/chatbot/getmoderprofiles»;
— получение списка пользователей подлежащих проверки модератором;
var moderProfileUrl = svlaboratoryBaseUrl + «/admin/chatbot/moderprofile»;
— осуществление проверки модератором пользователя;
var getModerUrl = svlaboratoryBaseUrl + «/admin/chatbot/getmoder»;
— получение списка пользователей прошедших проверку модератором;
И список действий связанных с пользователями:
API был реализован как действия каркаса серверных приложений Zend Framework.
Результат запроса к API были JSON строки данных:
Клиент приложения был создан как единое приложение на Bootstrap и JQuery.
Все действия API вызывались с помощью процедуры AJAX.
Приведу немного образцов кода для осуществления CRUD на примере отправки сообщений:
Например, отправка сообщений реализована как функция sendProfileMsg на стороне клиента на языке JS:
И обработка запроса к серверу на языке PHP с использованием каркаса Zend Framework
Для сохранения данных в базу данных тут использовался класс Model
Другие методы типа delete или fetchRow, find, fetchAll
реализуются аналогично внедряя параметры в запросы MySQL.
Класс модели с реализацией основных действий с таблицами MySQL наследуется для каждой таблицы MySQL:
Для ввода параметров и создания форм использовался CSS каркаса Bootstrap.
Для динамического отображения приложения использовался JavaScript и JQuery.
В базе данных MySQL были созданы сущности:
user
— таблица пользователей и их параметров;
К примеру таблица user:
profile
— таблица анкет и их параметров;
chat
— таблица сообщений;
file
— таблица файлов;
foto
— таблица фото;
like
— таблица плюсов;
token
— таблица ключей авторизации;
moder
— таблица проверки анкет модератором;
userorder
— таблица действий пользователя;
Такие таблицы базы данных, действия серверного приложения и приложение клиента браузера легко написать более менее опытному программисту освоившему книги по
CSS, HTML, JS, PHP, SQL.
Личный плеер аудио загрузок и чаты были реализованы как отдельные приложения отображаемые во frame теге кода HTML приложения клиента браузера.
Также социальная сеть имеет доступ к отдельным приложениям и играм моего авторства во вкладке игры. Приложение социальной сети позволяет легко добавить свои игры заполнив форму описания игры. Основным полем этой формы является URL WEB адрес публикуемого приложения или игры. В результате приложение или игра будут показаны во frame теге HTML страницы приложения социальной сети.
Посмотреть готовое приложение социальной сети можно по ссылке:
Как я делал социальную сеть в 2019
В этой статье я расскажу, как делал свой проект социальной сети для сферы искусства havidea.ru от идеи до релиза. Расскажу о технической части, о мотивации и самоорганизации, какими инструментами пользуюсь в процессе разработки, о проблемах в работе со сферой искусства, с которыми я столкнулся почти сразу после запуска. Проект пережил реинкарнацию, т.е. был первый вариант, который я забросил и финальный, второй, который ушел в релиз.
В сфере веб-разработки я работаю немногим более трех лет. Проект поднимался в одиночку в свободное от основной работы время и главной целью было — выпустить продукт в установленные сроки (6 мес.).
Вдохновение, идея, исследование
Будучи подростком, я начал увлекаться музыкой, живописью. Чуть позже загорелся 3D графикой и даже успел заработать на 3D моделях первые копейки. Еще пару лет спустя всерьез занялся фото- и видеосъемкой и в этот же период на уроках вокала (и такое было в моей жизни, да) познакомился с будущей женой — актрисой. Все это подтолкнуло сделать какой-нибудь проект для поддержки “веселых” судеб творческих людей. Иии? Социальная сеть? Почему бы и нет? Но это же хейтят, мол, соц. сети умирают. У кого-то умирают, а у меня получится, верно? И вообще, если есть обоснованная идея и концепция, почему бы не воплотить это в веб-страницу? Загуглив список социалочек, наткнулся на интересный вариант — stage32. На мой взгляд, это единственная серьезная зарубежная площадка, собиравшая сообщество причастных к кинопроизводству. В России аналогов на то время (начало 2017 г.) я не нашел (плохо искал?). Решено. Сделаю свой сервис, опираясь на лучшие образы, практики и UX уже существующих соц. сетей, но с уклоном к сфере театра, кино и искусства в целом.
Идеология проекта
Некоммерческий, без рекламы, максимально полезный для самих участников. Свободный, без слежки, без метрик. Защита пользовательских данных.
Первый вариант (2017 г.)
Любой проект должен начинаться с постановки и ответа на вопросы: для кого? Для чего? Какую проблему это решает (цель)? Какие есть альтернативы? Какие преимущества можно предложить? После четких и лаконичных ответов, я составляю список функциональности будущего проекта. Далее определяюсь с костяком: убираю все хотелки и фантазии из общего списка функционала и оставляю только самое необходимое — то, без чего приложение не будет функционировать. От минимального функционала подбираю стек. Ищу примеры реализации. На этом этапе уже есть общая картина: что делать, для чего и как. Весь процесс, комментарии и мысли записываю в блокнот, чтобы повторно не решать то, от чего ранее отказался.
Проектировать UI начинаю с листка бумаги и карандаша. Любой листок, который есть под рукой, идет в дело, пока мысль не убежала. Определяюсь со страницами и провожу вторую грубую итерацию уже в электронном виде (проще что-то изменить):
Далее прорабатываю эскизы детально. Вот, например, самый первый вариант страницы профиля:
Посты, комменты, лайки, альбом с фотографиями — все по классике. Из нового:
расширенный профиль для актеров, поиск по профессиям и навыкам.
Для разметки макета использовал modulargrid.org:
Пара набросков главной страницы:
Некоторые решения выглядят не совсем удачными и убираются/правятся при верстке. На этапе проектирования надо давать себе свободу и не выводить все до идеала.
После набросков десктопной версии, уделяю внимание мобильной. Графическая часть готова? Нормас. Пора кодить.
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 корректно скроллить контент в модальном окне. Буду рад, если кто сталкивался и подскажет решение.
Помимо основного приложения, сделал еще и простенькую админку со своим апи:
В админке ничего примечательного. Просто UI покрытие для некоторых фич, из-за которых лень лезть в базу и править данные руками.
Backend второго варианта.
Laravel. Обязательная валидация всех входящих данных, cors заголовки, дополнительные заголовки безопасности secure-headers, следование RESTful спецификации (как-нибудь попробую JSON-RPC), Fractal для трансформации отдаваемых данных на фронт. Try-catch всего, чтобы пользователь не давил мышку, а получил внятную причину ошибки. Автоматические дампы обеих баз данных с помощью db-dumper. Какого-либо автоматизированного тестирования не писал, ибо ограничен по времени. Надо подкачаться и попробовать TDD, может получится не сильно увеличивать сроки разработки или даже сократить.
Отдельно хочется сказать, что я избегаю использования абстракций на начальных этапах проектирования, если без них сейчас можно обойтись. Их преждевременное использование ведет к усложнению модуля приложения, который может быть никогда не использован. Решайте проблемы по мере поступления. Да, соблюдать баланс между архитектурой и сроками не просто и это приходит только с опытом, но лучше потратить время на продумывание базы данных, а переписать код приложения можно в любое время. Самый важный ресурс, который у нас есть — это время. Лучше выпустить не идеальный продукт и быть первым, чем потом догонять конкурентов. А они будут.
Проблема, стагнация
Запуск состоялся в конце мая. Я начал заниматься рекламой и почти сразу наткнулся на похожий сервис. Да, они по сути реализовали такую же идею. Года на 2 раньше. Надо было лучше исследовать рынок и мониторить его постоянно на предмет новых сервисов. Но проблема даже не в этом. В процессе дискуссий, размышлений и просто жизненного опыта я пришел к выводу, что проблема трудоустроенности людей искусства намного глубже и, возможно, специализированной социальной сетью не помочь. Это рыночная проблема нехватки рабочих мест. В каком направлении развивать продукт я точно не знаю. Сейчас проект переживает стагнацию.
Как создать социальную сеть с нуля: цены и сроки
Сможете назвать одну вещь, которая объединяет 53% людей на земле? Правильный ответ: мы все сидим социальных сетях. Да-да, число пользователей Facebook, Instagram, Twitter и прочих приложений превышает 4,2 миллиарда человек. На рынке большая конкуренция, но, в тоже время, всегда есть место для новых проектов.
Время чтения: 6 минут
Как работают социальные сети?
Википедия говорит, 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
Соцсеть — это площадка, на которой люди из разных точек мира могут общаться, создавать фото и видео, обмениваться этим контентом и оставлять комментарии друг другу.
Во всем мире около 4,2 миллиарда https://datareportal.com/social-media-users
пользуются социальными сетями, и этот трафик распределяется между сотнями приложений и сайтов. Согласно статистике, в среднем каждый человек использует 8 различных соцсетей.
Как социальные сети зарабатывают деньги?
Если кратко, то существует две популярные стратегии заработка: реклама и премиальные подписки. Давайте разберем два примера!
94,69 миллиардов долларов.
Типы социальных сетей
Прежде чем создавать приложение для социальных сетей, нужно знать, какие типы платформ существуют.
Мы выбрали четыре самых популярных категории, в которые попадают социальные сети
Ключевые функции для социальных сетей
Форма регистрации — это первая страница, которую видят пользователи в приложении. Вот несколько советов от нас, как сделать это взаимодействие наиболее эффективным: убедитесь, что регистрационная форма короткая и простая, все элементы расположены в центре страницы и для пользователь есть четкие инструкции о том, куда нажимать дальше.
Плюс, мы рекомендуем добавить несколько опций для входа в систему. Например, пользователи могут создать аккаунт с помощью номера телефона, электронной почты и пароля или с использованием профиля на Facebook и в Google.
У Twitter простая и минималистичная форма входа (слева) — пользователям нужен адрес электронной почты или номер телефона. Reddit (справа) выбрали совершенно иной подход со входом через другие соцсети.
После того, как пользователь зарегистрируется, он, скорее всего, пойдет настраивать свой профиль. Ему понадобится возможность изменить имя пользователя, фото, выбрать язык, предпочтения по контенту и частоту push-уведомлений.
Как создать социальную сеть без мессенджера? Наш ответ: это невозможно! Задача социальной сети — соединять людей, поэтому чаты жизненно необходимы в приложении. Добавьте возможность обмениваться текстовыми сообщениями, фотографиями, видео и голосовыми.
Сейчас в каждой социальной сети есть мессенджер. В случае с Facebook это целое отдельное приложение.
Если фокус вашего приложения — создание и распространение контента, то этот функционал особенно важен. Пользователи должны иметь возможность создавать тексты, фото или видео, добавлять фильтры, стикеры и накладывать музыку как в TikTok, чтобы разнообразить контент.
В Instagram можно редактировать фото, например, менять контрастность или добавлять тени. В В общем, даже фотошоп не нужен!
С помощью уведомлений можно увеличивать уровень вовлеченности и возвращать пользователей обратно в приложение. Например, расскажите им о новых сообщениях, комментариях или порекомендуйте друзей.
Но с уведомлениями важно найти баланс. Чтобы не надоедать пользователям, позвольте им самостоятельно выбрать частоту этих уведомлений.
Сколько социальных сетей установлено у вас на телефоне? Все вокруг используют сразу несколько таких приложений, поэтому конкурентов бояться не стоит.
Чтобы сделать процесс входа более плавным и увеличить оборот контента в интернете, мы советуем вам подключить свое приложение к другим соцсетям. Синхронизируйте свое решение с самым популярным гигантами: Facebook, Instagram, Twitter и TikTok.
TikTok сделали яркие заметные кнопки, чтобы подталкивать пользователей делиться контентом в других приложениях.
А моей будущей социальной сети нужен MVP?
Если коротко, то да! MVP ( minimum viable product) — это минимально жизнеспособный продукт, который является первой версией вашего решения. MVP используют для того, чтобы получить обратную связь от реальных пользователей и проверить, соответствует ли идея потребностям рынка.
Почему этап MVP особенно важен для стартапов? Представьте, что вам в голову пришла крутая идея, вы вложили состояние в разработку социальной сети и она провалилась. Например, оказалось, что это решение не нужно пользователям или они не понимают как им пользоваться. Чтобы заранее предотвратить этот сценарий, мы рекомендуем сначала заказать MVP — проверить свою идею с минимальными затратами и сроками.
Как найти надежного разработчика для MVP?
После того, как вы решили зайти на рынок соцсетей, нужно найти того, кто поможет сделать приложение. От выбора разработчика зависит успех всей идеи. Вот 3 совета, как правильно выбрать, у кого заказать MVP :
И еще, когда вы хорошо знаете суть своего проекта, то вам проще передать эти знания разработчикам. Вместо того, чтобы писать многостраничные технические задания, вам нужно будет потратить всего пару часов на созвоны.
Стоимость и сроки разработки социальной сети
Давайте перейдем от слов к делу. Мы посчитали, сколько может стоить разработка социальной сети в Purrweb и сколько займет каждый этап:
Подведем итоги
В социальных сетях сидит половина жителей планеты. Масштаб впечатляет, правда? Если вы решили зайти на этот рынок, для вашего стартапа обязательно найдется своя ниша.
В 2021 году все социальные сети воюют за внимание пользователей. Как выиграть эту битву? Сначала нужно определить тип вашей социальной сети и выбрать команду полного цикла для разработки MVP. После этого можно расслабиться — мы возьмем решение в свои руки: разработаем удобный и вовлекающий дизайн, продумаем user flow и заранее проверим все на наличие ошибок.
В Purrweb мы занимаемся над разработкой MVP для приложений. Мы создаем надежные приложения с фокусом на удобный и минималистичный UI/UX дизайн, чтобы улучшить опыт взаимодействия с вашим приложением. С нами разработка социальной сети займет около X месяцев и будет стоить около X долларов. Надеемся, что ответили на все ваши вопросы о том, как создать социальную сеть и какой функционал потребуется.
Хотите получить индивидуальную оценку стоимости своей социальной сети? Заполните форму, и мы вернемся к вам с подробной информацией!
Стоит ли сейчас писать свою социальную сеть?
Недавно задавал вопрос на Тостере «Что делать разработчику, если всё уже придумано». Среди ответов нашёл не мало тех, кто сказал, что множество велосипедов на самом деле по своему уникальны, они реализованы с точки зрения разработчика, с его личными улучшениями того, на что он опирался во время создания своего проекта.
Как вы на это смотрите, стоит ли браться за разработку? С другой стороны, можно взяться за разработку для себя, зато будет опыт, даже если сеть и не обретёт успех. Как думаете?
Да, пока всё на словах, «взял бы, да сделал», но всё равно, важно мнение других людей,
как они посмотрят на это со своей точки зрения.
Оценить 4 комментария
где будут услышаны различные требования пользователей
«Уже давно приходила в голову мысль о создании своей социальной сети, в которой не будет той ущербной политики, что во Вконтакте, где будут услышаны различные требования пользователей, которые уже давно не слушают разработчики ВК. «
Как только количество пользователей дорастет до критического, а это возможно даже меньше тысячи, разработчики уже перестанут слушать различные требования пользователей, и будут ориентироваться на большинство.
А если большинство будут составлять школьники, ушербная политика возродится снова.
«Как говорится, когда дети вырастают и начинают жить самостоятельно, они внезапно понимают, что они не такие уж и умные, а родители не такие уж и глупые.»
В общем смотря какие цели перед собой ставите.
Разумеется, это не означает, что нынешних игроков нельзя подвинуть. Теоретически возможно всё. Но для этого вам понадобятся:
а) колоссальный бюджет;
б) некая фишка, которая привлечет пользователей.
Вот расскажу на счет сдвига аудитории: еще в марте этого года мы занялись написанием сервера для многоизвестной игры ClashRoyale, с нуля. Несмотря на то, что уже давно существует множество серверов, наша группа за очень короткий срок стала набирать активность. Люди сами стали вносить пожертвования для поддержания оборудования, некоторые стали рассказывать друзьям, на нас даже глянули другие информационные группы по этой игре и некоторые ютуберы, которые тоже рассказали о нас самовольно. Завлекли игроков мы тем, что у нас всё абсолютно бесплатно, чего любят игроки. В каждом типе аудитории есть главная фишка, за которой и гонится эта аудитория, которая ищет те места, где будет то, что они больше всего хотят.
Так что мне кажется, нет ничего невозможного. Если и есть одна, другая, еще одна, да и вообще полно популярных социальных сетей, ничего не мешает создать свою и встать рядом с теми проектами, ведь они тоже начинали с чего-то и стали популярны.
> Так что мне кажется, нет ничего невозможного.
Невозможного действительно нет, я так и написал. Но просто в разных областях пороги входа разной высоты. В соцсетях он (сейчас) очень высокий.
> ведь они тоже начинали с чего-то и стали популярны.
Есть ещё такая вещь, как исторический момент. Когда ВК и ОК стартовали, время было другое, в рунете был почти что green field.
Но если вам нравится сам процесс, то делайте на здоровье, для практики хорошая задача.
