Бонжурики!

В этом посте я хочу поделиться опытом организации проекта в условиях 11 класса. Я думаю, этот пост может быть полезен для школьников. Если Вам больше 18 лет — скорее всего, пост большой смысловой нагрузки нести не будет.

Немного о memed

Вот уже 2 месяца, как ведется разработка социальной сети memed. Буду краток, чтобы опять не накинули тег "Я пиарюсь". Социальная сеть, где все, что только можно, крутится на мемах. Ими можно комментировать, их можно сохранять в коллекции… Идея понятна.

Начало

Идея написать похожий проект у меня крутилась почти весь 10 класс, но я не доводил до конца. Все упиралось в то, что проект разрастался, и один я пилить и дизайн, и код, и все что только вздумается не мог. Ну просто надоедало, кончалась мотивация и я забрасывал. Но довольно сильно поднаторев в веб разработке за первую половину 2017 года, я понял, что время пришло. Время доводить до конца.

И я начал писать. 8 августа я создал проект. Надо сказать, что летом у меня был забавный режим — я ложился спать утром, ~6-10 утра, а вставал часов в 5. Никому не нравилось, но ночью мне было комфортно работать.

Стеком стал Django на сервере, для обмена данных я решил использовать JSON API спецификацию, а для фронтенда я решил использовать VueJS. Я на тот момент был знаком с ним поверхностно, но это только подстегивало интерес. Спустя неделю я понял, что влюбился в Vue.

База данных — PostgreSQL. Сервер с сайтом деплоится на Heroku. Вполне хватает — когда не пользуешься, он спит, когда ты спишь — он тоже спит, когда работаешь — он тоже работает. Но главное — бесплатный))

К 12 августа я набросал каркас сайта — базовый функционал, аля авторизация, постинг, рейтинг. Кстати авторизацию я стал использовать через VK Open API. Я очень не люблю хранить пароли и вам не советую.

Так вот, я запилил крутую библиотеку размером в 350 строчек, которая позволяла бы мне удобно экпозить нужные поля, настраивать доступы и все такое.

class MessageSerializer(Serializer):
    model = Message
    name = Message.type()

    def item_attributes(self, item):
        requester = resolve_user(self.request)
        if requester is None or item.dialog.participants.filter(id=requester.id).first() is None:
            raise PermissionDenied
        default_attributes = self.resolve_keys(item, ['text'])
        default_attributes["timestamp"] = item.timestamp.timestamp()
        return default_attributes

    @staticmethod
    def relationships_provider():
        return {
            'dialog': lambda item: item.dialog,
            'author': lambda item: item.author,
            'post_attachments': lambda item: item.post_attachments.all(),
        }

class MessageRoute(ModelRoute):
    model = Message
    name = Message.type()

    items_per_page = 50
    serializer_class = MessageSerializer

    def custom_endpoints(self):
        return [
            Endpoint("^$", "GET", lambda request: HttpResponseForbidden())
        ]

Вот пример ее использования. Мы реализуем 2 класса — Serializer и ModelRoute.
В первом мы описываем, какие поля и когда мы можем всовывать в ответ, а во втором — добавляем свои endpoint'ы. Жизнь становится легкой, а радость заполняет сознание разработчика.

Когда-нибудь я кину ее в опенсурс, но пока мне лениво. В любом случае, когда закину, то обновлю пост. Я не скрываю ее, ни в коем случае, но как-то лень))

Привлечение друзей

Поскольку я еще учусь в школе и довольно дружелюбен, то у меня много хороших друзей и товарищей, которые могут откликнуться на мои запросы.

В общем, написав в беседу класса, прекрасная Арина впряглась в проект и за интерес начала обсуждать со мной дизайн, делать макеты в фотошопе. Это было очень круто, в какой-то момент я даже не успевал за ее правками.

Вообще процесс дизайна проходил так: Арина делает макеты, кидает мне, я говорю, что в них плохо и почему(например, в мобильной версии что-то не поместится), или что цвета слишком яркие, или что-то еще, и запиливаю конечную версию на сайт.

Тут я понял, что могу использовать силу друзей для того, чтобы набрать аудиторию альфа тестеров.

Я запостил у себя на странице небольшую запись с ссылкой на сайт и группу, попинал друзей в лс, чтобы зарепостили и вуаля — у меня есть ~40 ребятишек, которые периодически заходят на сайт, а потом долбят меня в лс, что где-то косяк. С их помощью было обезврежено более 210 багов.

Активная разработка

Дальше в период с середины августа до конца сентября велась активная разработка. Количество строчек кода фронтенда возросло до 16 тысяч, а бекенда до 5.

Тут важно сказать про папу. Он был крайне недоволен, что я прихожу со школы часов в 5 и до часов 12 занимаюсь проектом, говорил только о нем. Тогда мы с ним серьезно поговорили, и я сказал, что мне нужно первые 2 месяца — сентябрь и октябрь, после чего я перестану тратить на проект так много времени и начну готовиться. Немного покряхтев, он согласился. <3

Не знаю, что можно еще написать про активную разработку; наверное, я допускаю ошибку, что практически забиваю на школу в этот период времени. Стоило больше уделять внимания математике.

Как, например, сделала Арина — и у нас стало значительно меньше времени, чтобы обсуждать дизайн, но это не так страшно: я уже поймал волну и мог делать новые компоненты в стилистике старых.

Зато появился Илья, который сделал нам лого. Прости, Илья, что так долго запарывал тебя с ним!

Рефакторинг

Практически весь октябрь я занимаюсь рефакторингом кода. С 16к строк фронтенда снизил до 13, бекенд практически не уменьшился — рукописная библиотека работала на славу.

Из некоторых примеров рефакторинга:

1) Оказывается, что делать блоки — компоненты Vue удобнее, чем делать блоки — html + общие css свойства. То есть вместо

<div class="block-container" >
...content...
</div>

Получается

<BlockContainer>
....content....
</BlockContainer>

Это удобнее по нескольким причинам, например, лучше смотрится в Vue dev tools дереве компонентов. Еще — править конкретный блок, где находится html, scss, js удобнее, чем искать нужный _block-container.scss и там что-то править. Когда все находится на одном экране, контекст не теряется, а вместе с ним и время.

2) Vuex. Я долго не хотел его добавлять, потому что очень не хотелось переделывать с локальных states на глобальные, но попробовав, сразу понял, что это круто. Кеширование — сила. Например, мне не нужно запрашивать с сервера /user/me каждый раз, когда нужно проверить, имею я права на изменения сообщества, своего профиля или чего либо. Или мне не нужно обновлять каждый раз мои "сообщества", если я уже из загрузил. В общем, Vuex — класс.

Конец разработки

Я планирую закончить активную разработку и рефакторинг к 20 октября. Последние 10 дней будут посвящены рекламе и работе с метриками.

Заключение

Я не знаю, зачем я написал этот пост. Возможно, мне просто не с кем обсудить проект и рассказать все с самого начала. Тем не менее, вот списком мои советы тем, кто делает проекты будучи школьником:

1. Разумно распределяйте свое время. Не стоит уходить в крайности и прогуливать школу, чтобы больше времени тратить на проект. У Вас сейчас много времени, особенно если Вы еще не в 11 классе.
2. Используйте человеческие ресурсы, которые находятся рядом с Вами. Не стоит рассчитывать, что человек, которого Вы просите помочь, согласится и будет тратить столько же времени, сколько и Вы. Постарайтесь обговорить сразу, сколько времени вы готовы тратить на проект, чтобы потом не было сюрпризов. При общении с друзьями — сотрудниками старайтесь откидывать шутки, trashtalk и не отвлекаться. Если вы хотели в это время заниматься проектом, им и занимайтесь.
3. Ставьте реальные сроки. Изначально я думал, что к 1 сентября будет готов почти весь проект, но как оказалось, с 1 сентября я добавил 30% функционала. Когда срок обозначен, не стоит начинать заниматься 1234132432 часов в день. Если Вы регулярно уделяете проекту несколько часов, это уже продуктивнее.
4. Спите нормально. У меня есть небольшой сдвиг — если между тем, как я закончил работать и сном проходит меньше часа, то я не могу уснуть ни в какую. В голове куча мыслей, идей, возможных реализаций. Приходится считать овечек (не шучу), пока не успокоюсь. А еще — не стоит брать телефон в руки, когда ложишься спать. Гарантированные потерянные часы сна))

Чао!