Проект 2: Паблисити

Цели

• Запуск JavaScript-кода на стороне сервера.
• Получение навыка создания веб-пользовательского интерфейса.
• Умение использовать Socket.IO для установки соединения между клиентом и сервером.

Получение Помощи

Если вам понадобится помощь в работе над проектом, можете спокойно воспользоваться следующими ресурсами (их все ещё не так много ;D):

• Группа в телеграмме, ссылку можно получить у TF.

Описание

В этом проекте вы будете работать над онлайн-сервисом по отправке сообщений, который, естественно, будет строиться на фреймворке Flask. Что-то схожее с Slack. Пользователи смогут авторизоваться на вашем сайте с помощью своего отображаемого имени (display name / ваше имя, которое отображается другим пользователям чата), создавать каналы (т.е. чаты) для связи с остальными пользователями, а также будут иметь возможность видеть и присоединяться к существующим каналам. После выбора канала, пользователи смогут в реальном времени получать и отправлять между собой сообщения. Наконец, вы должны добавить немного своего креатива в ваше чат-приложение!

С чего начать

GitHub Classroom (Виртуальный класс от Гитхаба)

Мы вновь воспользуемся сервисом GitHub Classroom для раздачи и проверки проектов. Чтобы начать работу с Проектом 2, проделайте следующее:

1. Нажав сюда вы перейдете к странице GitHub Classroom, где вы сможете начать выполнение задания.
2. Нажмите на зеленую кнопку “Accept this assignment” (Принять задание). Таким образом вы создадите Github'овский репозиторий для вашего проекта. Имейте ввиду, что git'овский репозиторий - это всего лишь место, где будет храниться ваш код и благодаря которому вы сможете отслеживать вносимые вами изменения, которые, несомненно, со временем будут иметь место быть.
3. Нажмите на следующую за данным текстом ссылку “Your assignment has been created here” (Ваше задание было создано и находится здесь), которая перенаправит вас на страницу GitHub'овского репозитория, где и будет храниться ваш проект. GitHub'у понадобится всего лишь несколько секунд для того, чтобы закончить создание вашего репозитория.
4. В правом верхнем углу страницы репозитория нажмите на кнопку "Fork" (Ответвление/Развилка/Вилка), а затем (если вас попросят) кликните на ваш никнейм. Так вы создадите ответвление (Fork) вашего проектного репозитория, т.е. версию репозитория, которая будет принадлежать именно вашему GitHub аккаунту.
5. Теперь вы должны видеть новый заголовок GitHub репозитория, а именно username/project2-username, где username (никнейм) является вашим GitHub'овским никнеймом. Это будет репозиторий, куда вы будете отправлять (push) весь ваш код, в процессе разработки проекта. Работая над проектом, не пытайтесь публиковать (push) вашу работу напрямую в репозитории makeweb50/project2-username: всегда публикуйте (push) свой код в вашем репозитории username/project2-username.

Python и Flask

Как и в работе с Проектом 1, позаботьтесь о том, чтобы на вашем компьютере был установлен Python версии 3.7 или выше. Вам также нужно будет установить pip. Если вы скачали Python с официального веб-сайта, тогда вполне вероятно, что у вас на компьютере уже имеется pip (вы можете это проверить, запустив команду pip в терминальном окне). В противном случае, обязательно проведите установку данного пакета, до того как перейти к следующему шагу!

Для запуска данного Flask-приложения:

1. Скачайте (клонируйте/clone) ваш репозиторий username/project2-username с GitHub (примечание: это НЕ ваш makeweb50/project2-username репозиторий).
2. Находясь в окне терминала, перейдите в директорию project2.
3. Запустите команду pip3 install -r requirements.txt в вашем терминальном окне, дабы убедиться, что все необходимые Python'овские пакеты (например Flask и Flask-SocketIO) были успешно установлены.
4. Создайте переменную среды FLASK_APP, указав в качестве значения application.py. На Mac'е или на Linux'е данная команда выглядит следующим образом export FLASK_APP=application.py. На Windows'е команда выглядит немного иначе: set FLASK_APP=application.py.
5. Запустите команду flask run, дабы запустить ваше Flask-приложение.
6. Если вы перейдете по ссылке (URL), предоставленной flask'ом, то увидите текст "Project 2: TODO"!

Требования

Хорошо, теперь пришло время перейти к непосредственному созданию вашего веб-приложения! Вот требования:

• Отображаемое Имя (Display Name): Когда пользователь впервые посетит ваше веб-приложение, ему предложат ввести отображаемое имя, которое далее будет указываться в каждом отправляемом пользователем сообщении. Отображаемое имя не должно пропадать, даже если пользователь закроет страницу, а потом повторно зайдет на нее.
• Создание Каналов: Любой пользователь должен иметь возможность создавать новый канал, главное, чтобы его название не конфликтовало (совпадало) с существующим каналом.
• Список Каналов: Пользователи должны иметь возможность видеть список всех существующих каналов, а также способность выбирать канал. Реализацию того, как отображать такого рода список, мы оставляем за вами.
• Просмотр Сообщений: Как только канал будет выбран, пользователь должен увидеть сообщения, ранее оставленные на данном канале (максимум 100 сообщений). Ваше приложение должно хранить, на серверной стороне, только по 100 последних сообщений на каждый канал.
• Отправка Сообщений: Находясь на определенном канале, пользователи должны иметь возможность отправлять сообщения другим участникам канала. Отображаемое имя пользователя и время создания сообщения должны отображаться с каждым отправленным сообщением. Затем это сообщение должно отобразиться у всех других участников канала. Отправка и получение сообщений НЕ должны в себя включать перезагрузку страницы.
• Запоминание Канала: Если пользователь находится на странице канала, затем закрывает окно браузера и потом снова открывает ваше веб-приложение, то ваше приложение должно помнить на каком канале данный пользователь ранее был и вернуть его на этот канал.
• На Ваше Усмотрение: Добавьте хотя бы одну дополнительную "фичу" (feature) в ваше чат-приложение (на свое усмотрение)! Не бойтесь проявить креативность, но если вам нужны идеи, то вы можете добавить: возможность удаления собственных сообщений, возможность отправки файлов (присоединение файлов к сообщениям) или возможность отправки приватных сообщений между двумя пользователями (ЛС/DM).
• В файл README.md добавьте короткое описание проекта, что содержится в каждом файле, и (по желанию) какую-либо другую дополнительную информацию, о которой стоит знать нашим сотрудникам. И наконец, добавьте описание к написанной вами "фиче" и что именно вы предпочли добавить к вашему проекту.
• Если вы добавили какие-либо еще дополнительные Python'овские пакеты, без которых ваше приложение не может быть запущено, обязательно добавьте их названия в файл requirements.txt!

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

Подсказки

• Здесь вам не нужно будет задействовать базу данных. Но это не значит, что вы не должны хранить какую-либо информацию в самом Flask-приложении, к примеру, использование одной и более глобальных переменных определенных в application.py.
• В деле хранения данных на клиентской стороне, вам поможет local storage.

Как отправить

Шаг 1 из 2

1. Перейдите на страницу GitHub'а, где находится ваш репозиторий username/project2-username (примечание: не перепутайте с репозиторием makeweb50/project2-username).
2. На правой стороне экрана кликните по кнопке "Pull request" ("Принятие изменений").
3. Обязательно удостоверьтесь, что “base fork” (основной fork) - это makeweb50/project2-username и “head fork” (головной fork) - это username/project2-username.
4. Кликните по “Create pull request”.
5. На следующей странице вам опять придется нажать на кнопку “Create pull request”.

Шаг 2 из 2

Заполните данную форму!

Поздравляем! Вы завершили Проект 2.