Обзор

В этом блоге я собираюсь воссоздать Slack, используя Firebase, HTML, CSS и Javascript. Это поможет с основами, чтобы вы могли создать свое собственное приложение для чата с функциями, которые важны и уникальны для вас!

Я считаю, что лучше всего учиться, просматривая короткие видеоролики, в которых я могу останавливаться и пересматривать части, которые показались мне сложными, и пропускать части, которые я уже понял. Поскольку это мое предпочтение, я решил попробовать использовать эту форму для обучения HTML, CSS и Javascript.

Структура этого поста

Под каждым видео, если были сайты, которыми я пользовался, буду прикреплять ссылку. Или, если я создал какой-либо код, который не был подробно объяснен, я вставлю его ниже.

1) Настройка Firebase

2) Освоение HTML/CSS

а) Знакомство с Bootstrap

б) Настройка вашего CSS

3) Создание аутентификации, часть первая: внешний интерфейс

а) Знакомство с Javascript

б) Создание модального окна

в) Изменение модального

4) Создание аутентификации, часть вторая: серверная часть

а) Создание аутентификации с помощью социальных сетей

б) Создание постоянных пользователей (onAuth)

в) Выход из системы

5) Приведение в порядок и следующие шаги

ПРИМЕЧАНИЕ. Обратите внимание, что я все еще учусь и иногда делаю глупости. Особенно, если что-то работает, это становится привычкой и, по мнению некоторых, граничит с суеверием. В этих видеороликах я советую вам перезапускать сервер снова и снова и снова каждый раз, когда вы вносите изменения. В этом нет необходимости. Только когда вы меняете что-то в своем бэкэнде, вам нужно перезапустить сервер. Пожалуйста, игнорируйте это в этом уроке, и я обновлю содержание в будущем.

Настройка Firebase

Ссылки:

Firebase — сервис, работающий с серверной базой данных приложений в режиме реального времени.

Обучение чату — стартовый код нашего приложения (будем улучшать!)

localhost:8000 — вы будете использовать сервер Python для быстрого запуска вашего кода. Он отправит ваш код на localhost:8000.

Примечание: если вы закроете окно терминала, вам придется вернуться в каталог, в котором находится ваш проект чата. (например, cd Documents/dev/UITChat, а затем запустите команду python).

Код для запуска вашего сервера в терминале:

python -m SimpleHTTPServer

Чтобы остановить сервер, вы можете нажать cmd+c в терминале.

Знакомство с HTML/CSS/Bootstrap

Код для включения Bootstrap находится под этим видео. Вы можете скопировать и вставить его в тег заголовка вашего HTML.

Ссылки:

Bootstrap — интерфейсный фреймворк, который поможет вам легко и красиво создать полностью адаптивный проект.

Codecademy — курс для знакомства с Bootstrap.

Чтобы обрезать ваш код (чтобы сделать его комментарием вместо команды) command+/

Например, в HTML:

<! — FIREBASE (this is commented out) →
<script src=’https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
Code to include Bootstrap (goes into the head tag of the index.html)
<! — links to include BOOTSTRAP to your project →
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css” />
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css” />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-modal.min.js”></script>

Примечание. Прямо сейчас, если вы уменьшите свою веб-страницу, она будет реагировать примерно до 700 пикселей в длину, а затем будет складываться, а не сжиматься вместе. Это потому, что я использовал col-md-10. md означает средний, поэтому он работает на устройствах среднего размера, но если он становится меньше среднего размера (например, размер экрана планшета или телефона, он будет складываться).

Чтобы исправить это, чтобы это не складывалось, мы должны использовать col-xs-10 и col-xs-2. Таким образом, его можно уменьшить до мельчайших размеров.

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

Настройка вашего CSS

Создание аутентификации, часть первая: внешний интерфейс

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

Создание модального окна

CSS для модального окна (в /css/style.css):

.modal {
position: relative !important;
margin-left: 30% !important;
right-padding: 100px;
margin-top: -400px !important;
background-color: transparent;
width: 50% !important;
}

Изменение HTML модального окна

Font-Awesome Icons — набор иконок, который мне очень нравится

Код для включения Font Awesome:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Создание аутентификации, часть вторая: серверная часть

Создание постоянных пользователей (onAuth)

Выход

Уборка и следующие шаги

Наконец, как заметил мне мой друг, если веб-страница становится слишком маленькой, чат будет накапливаться, а не пропорционально уменьшаться. Чтобы исправить это, мы должны изменить все col-md (носители) на col-xs. Вы можете дважды проверить свои изменения с моими ниже:

Это должно сделать это для основ приложения чата! Далее мы более подробно рассмотрим, как информация сохраняется и извлекается в Firebase, а также некоторые другие типы функций, которые мы можем реализовать! Идеи для интересных вещей, которые мы можем сделать, включают (но не ограничиваются) добавление каналов, добавление звуков оповещений, создание личных сообщений, добавление смайликов и «реакций», разрешение загрузки файлов и обмена ими.